Getting Started With PrimeUI – HTML5 With Style

I’m looking for a new UI framework, both for my private website and for my business. At company we moved from CDI to Spring, and that makes JSF more or less useless. My private website runs on PHP, so I can’t use any of the frameworks or languages I love. There’s no JVM to build on. But of course there’s the lingua franca of the internet: HTML, Javascript and CSS.

So I was glad to learn that my favorite JSF framework – Primefaces – has a pure HTML5 offspring. I’m reluctant to recommend Primefaces since they’ve left the open source community, at least partially. But I can’t help it, I still like their products. Luckily today’s topic – PrimeUI – hasn’t been commercialized yet.

Update 15.03.2014: AngularPrime and AngularPrime/Dart

This article is becoming popular recently. So you may also be interested in the younger siblings of PrimeUI. Rudy de Busscher’s AngularPrime makes using PrimeUI a lot simple. As you can see in the showcase, it favors a declarative style of programming, and it adds the power of AngularJS. You may also want to look at project of my own: AngularPrime/Dart is a Dart port of AngularPrime that’s going to simplify things even further.

Introducing PrimeUI

Anyone who’s ever looked at the HTML code generated by Primefaces knows this framework relies heavily on Javascript. Apart from generating the HTML and Javascript code, the server side component doesn’t do that much. So it’s a logical step to provide client side components doing the same as the original Primefaces components. That’s exactly what PrimeUI does. It’s a collection of HTML5 components needing no server side code.

At the time of writing, PrimeUI offers only a small subset of Primefaces’ component suite. I’ve counted 29 components, as opposed to more than a hundred JSF components1. However, it’s a good start. The most important components are already there.

In general, using PrimeUI seems to be pretty straight-forward, except for getting started. The documentation is kind of meager, and it neglects the dependency management. PrimeUI uses a couple of CSS files and Javascript libraries, but it doesn’t mention which ones and where to get them. May the little demo I cobbled together help you with the first few steps!

Source code of the demo on GitHub

To give you a head start I’ve uploaded a running version of the code on my PrimeUI-Headstart repository on GitHub.

Dependency management: The Javascript libraries

That one’s not too difficult. PrimeUI uses jQuery and jQuery-UI. You can either have a custom version of jQuery-UI built at jqueryui.com/download/, or you can simply use my code snippet:

    <script type="text/javascript" 
            src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" 
            src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" 
            src="development/prime-ui-0.9.5.js"></script>

The PrimeUI code itself is contained in the zip files at http://www.primefaces.org/downloads.html#primeui. To be precisely, the zip file contains four copies: the minified production code, and the developer code, and each component is provided either as a single Javascript file or as part of the PrimeUI omnibus. For the sake of convenience, I prefer the omnibus even if it’s a little larger (but then, it’s only one file, which might be more important than file size when it comes to performance).

More dependencies: CSS files

It’s not too big a surprise you have to include cascading style sheets both for PrimeUI and jQuery:

    <link href="development/prime-ui-0.9.5.css" rel="stylesheet">
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" 
          rel="stylesheet">
    <link href="http://www.primefaces.org/prime-ui/demo/css/aristo/theme.css" 
          rel="stylesheet">
    <link href="http://www.primefaces.org/prime-ui/demo/css/sh.css" 
          rel="stylesheet">
    <link href="http://www.primefaces.org/css/all.css" rel="stylesheet">

The third CSS file – theme.css – is the aristo theme already know from Primefaces’ JSF library. I didn’t find out the role of the last two CSS files yet. Obviously they are important, since my little example looked ugly until I included them.

My website’s new contact form

Once I’d managed to sail past Scylla (aka CSS) and Javascript-Charybis, writing a simple comments form for my web site proved to be pretty simply. To make things a little more interesting, I put my form into a modal dialog to be able to test at least four components (buttons, inputText, Textarea and modal dialogs). Datatables work as well, but I removed them from the example because my form doesn’t need a table.

I take it I’ve given you enough clues to enable you an easy start with PrimeUI. Just for the sake of completeness, I’ll add my example’s code.

comments.html:

<html ng-app>
  <head>
    <link href="development/prime-ui-0.9.5.css" rel="stylesheet">
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="http://www.primefaces.org/prime-ui/demo/css/aristo/theme.css" rel="stylesheet">
    <link href="http://www.primefaces.org/prime-ui/demo/css/sh.css" rel="stylesheet">
    <link href="http://www.primefaces.org/css/all.css" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="development/prime-ui-0.9.5.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="angularComments.js"></script>
  </head>
<body>
  <button id="btn-show" type="button">leave a comment</button>
  <div id="dlg" title="Comment" ng-controller="commentControl">
    <p>
      Your name (appears above the comment):<br> 
      <input id="commentatorsNameID" type="text" ng-model="yourName" placeholder="Anonymous" />
    </p>
    <p>
      Your website: <br>
      <input id="commentatorsWebSiteID" type="text" ng-model="website" placeholder="advertise your website here"/>
    </p>
    <p>
      Your comment:<br>
      <textarea id="commentID" type="text" ng-model="comment" placeholder="feel free to leave your comment here"></textarea>
      <br> <span id="restZeichenID">dd</span>
    </p>
    <div style="display:{{previewVisible()}}">
    <p>Preview:</p>
    {{commentator()}} said:<br>
    {{commentPreview()}}
    </div>
  </div>
</body>
</html>

angularComments.js:

// AngularJS specific code
function commentControl($scope)
{
    $scope.commentator = function()
    {
        var result = $scope.yourName;
        if (!$scope.yourName)
        {
            result = "Anonymous";
        }
        if ($scope.website)
        {
            result += " (" + $scope.website + ")";
        }
        return result;
    };
    $scope.commentPreview = function()
    {
        var result = $scope.comment;
        if (!$scope.comment)
        {
            result = "Nothing yet.";
        }
        return result;
    };
    $scope.previewVisible = function()
    {
        if (!$scope.yourName)
            if (!$scope.website)
                if (!$scope.comment)
                    return "none";
        return "block";
    }
}

// Primefaces specific code
// decorate the comment form's input fields
$(function()
{
    $('#in').puiinputtext();
    $('#commentatorsNameID').puiinputtext();
    $('#commentatorsWebSiteID').puiinputtext();
    $('#commentID').puiinputtextarea({
        counter : $('#restZeichenID'),
        counterTemplate : '{0} characters remaining.',
        maxlength : 1000
    });
});

// define the comment dialog
$(function()
{
    $('#dlg').puidialog({
        showEffect : 'fade',
        hideEffect : 'fade',
        minimizable : true,
        maximizable : true,
        width       : 600,
        modal : true,
        location : 'top',
        buttons : [ {
            text : 'Submit',
            icon : 'ui-icon-check',
            click : function()
            {
                $('#dlg').puidialog('hide');
            }
        }, {
            text : 'Forget about my comment',
            icon : 'ui-icon-close',
            click : function()
            {
                $('#dlg').puidialog('hide');
            }
        } ]
    });
});
// decorate the button opening the comments dialog
$(function()
{
    $('#btn-show').puibutton({
        icon : 'ui-icon-arrow-4-diag',
        click : function()
        {
            $('#dlg').puidialog('show');
        }
    });
});

A short glimpse on AngularJS

You may already have noticed my demo code goes a little beyond PrimeUI: it also covers AngularJS. I use Angular to decide whether a preview of the comment is shown or not. Angular and integrating Angular and PrimeUI will be a future’s article’s topic. Stay tuned!


Further reading

PrimeUI-Headstart – the source code of this article on GitHub
PrimeUI
Stateless Prime – a project dedicated to integrate PrimeUI and AngularJS
Stateless Prime’s code on GitHub
AngularPrime/Dart on GitHub


  1. I guess that’s the reason why PrimeUI still is available for free – including the bug fixes.

5 thoughts on “Getting Started With PrimeUI – HTML5 With Style

  1. William

    (Englisch translation) I tried your code but it wouldn’t work. I, too, want to use Prime UI with PHP. I don’t know why it doesn’t work.

    (original castellano) Probe tu codigo pero no me funciono yo tambien deseo utilizar prime UI con php no se porque no funciona

    Reply
    1. Stephan Rauh Post author

      ¿Has propado con HTML puro antes de probarlo con PHP? Es una tarea mas sencilla. En general, si functiona con HTML, funciona con PHP tambien, pero es possible que tienes una bibliotheca incompatble en tu pagina PHP.

      Ademas, tienes alguna salida de consola or alguna mensaje de error? Es dicifil ayudarte de manera “ciega”.

      Reply
  2. Sanjay

    Hi,

    I am using Prime UI for HTML prototypes. I have using Tree table component. but in this i want to expand the row in one column and show the tab component will be in that.

    But i failed to reproduced that.

    please help me or guide me for the same.

    Thanks
    Sanjay

    Reply
    1. Stephan Rauh Post author

      First of all, I absolutely love answering your questions. But in this case it’s difficult. I’m awfully sorry, but I don’t really get your intention. There are a couple of words missing in your sentence. I can just guess you want to create a table with expandable rows, and you want to put a tabview component into that expandable row.

      I don’t think puitreetable supports that. The table demos in the PrimeUI showcase only displays text. I can’t reckon how to put other content into the table. So maybe the answer is: it’s not possible.

      To get help, here’s what to do: please upload your source code (or a relevant portion of it, so we can reproduce the problem) to GitHub or Plunker (http://plnkr.co/). Make sure you refer to this source code in your question. Ask it again :). In the case of PrimeUI maybe you shouldn’t ask your question here, but on the PrimeUI forum (http://forum.primefaces.org/viewforum.php). The PrimeFaces community is very active, so chances are you get help pretty quickly.

      Reply

Leave a Reply

Your email address will not be published.

CAPTCHA Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>