How to use PrimeUI

PrimeUI is a JavaScript library that spins off from PrimeFaces.

PrimeUI is based on jQuery UI and has many widgets. And it can be used by JSP and other languages(PHP and so on).

PrimeUI site is here.
http://www.primefaces.org/primeui/

I created a sample code.

Download

PrimeUI
Currently lastest version is 2.1.
https://github.com/primefaces/primeui/releases

jQuery
I used version 1 series. Currently lastest version is 1.11.3.
http://jquery.com/download/

jQuery UI
Currently lastest version is 1.11.4. Click [Custom Download] and select No Theme for Theme.
http://jqueryui.com/

Font Awesome
Currently lastest version is 4.4.0.
http://fortawesome.github.io/Font-Awesome/

Directory

Directories are below.
prime-ui1

PrimeUI
PrimeUI contains development directory and production directoty. I used primeui-2.1-min.css and primeui-2.1-min.js in production directory.

Themes exist in themes directory. When you clicked Themes icon at upper right of PrimeUI site, you can see themes.

I selected bootstrap.

jQuery
You should put jquery-1.11.3.min.js into any directory.

jQuery UI
You should put jquery-ui.min.css and jquery-ui.min.js into any directory.

Font Awesome
You should put all files of font-awesome-4.4.0 into any directory.

Sample code

I created a sample code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PrimeUI example</title>
        <link rel="stylesheet" href="themes/bootstrap/theme.css">
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/primeui-2.1-min.css">
        <style type="text/css">
            body,
            .ui-widget {
                font-family: Arial;
                font-size: 13px;
            }    
        </style>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/primeui-2.1-min.js"></script>
        <script type="text/javascript">
            $(function() {
                var cities = new Array(
                    {label:'Sapporo', value:1},
                    {label:'Tokyo', value:2},
                    {label:'Ankara', value:3},
                    {label:'London', value:4},
                    {label:'New York City', value:5}
                );
                
                $('#cities').puipicklist({
                    sourceData: cities
                });
            });
        </script>
    </head>
    <body>
        <span>PrimeUI Picklist</span>
        <p/>
        <form>
            <div id="cities">
                <select name="source">
                </select>
                <select name="target">
                </select>
            </div>
        </form>
    </body>
</html>

prime-ui2

link tag and script tag order must be same this code. Otherwise the code may not work correctly.

And currently big font-size causes button design to break up.

Subsequently, I explain this code.

At line 40, inside of div tag exists two select tags. These select tags name are source and target.

At JavaScript side(line 22), a list for Picklist is defined. Each object in this list has label and value.

At line 30, $(‘#cities’).puipicklist() initializes div tag that id is cities as Picklist. sourceData is a left side list of Picklist.

Edit

2015-09-23 Updated about theme.