Creation

A common approach to use a widget on a page involves a markup and invoking a jquery plugin on that markup.

            <select id="basic" name="basic">
                <option value="0">Select One</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        

            $('#basic').puidropdown();
        

On the contrary, elements are created using their tags without need of an initialization script.

            <p-dropdown>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </p-dropdown>
        

Option 1 Option 2 Option 3
That is it! As PrimeElements are also regular dom elements, they can be initialized with document.createElement() where you can later attach it to another element.

            var dropdown = document.createElement('p-dropdown');
        

Extending Elements

Some of the PrimeElements extend standard elements instead of providing their own tags, p-button is one of them so same UI can be defined using "is" attribute. Notice that there is no need for a script anymore as approach is declarative.

            <button type="button" id="btn">Save</button>
        

            $('#btn').puibutton();
        

Extend a Button

            <button is="p-button" type="button" id="btn">Save</button>
        

Accessing APIs

Elements can be interacted using their public apis. Example below demonstrates how to show a dialog at a button click.

            <button type="button" is="p-button" icon="fa-external-link" onclick="document.getElementById('dlgelement').show()" >Show</button>

            <p-dialog id="dlgelement" title="Dialog Header" modal showeffect="fade" hideeffect="fade" draggable resizable>
                <p>Dialog content here.</p>
            </p-dialog>
        

Show

Dialog content here.

Data Components

A complex example is datatable where there are many options for customization. Regular way is to write the markup and the script.

            <div id="tbl"></div>
        

            $('#tbl').puidatatable({
                caption: 'List of Cars',
                paginator: {
                    rows: 10
                },
                columns: [
                    {field: 'vin', headerText: 'Vin', sortable: true, filter: true},
                    {field: 'brand', headerText: 'Brand', sortable: true, filter: true},
                    {field: 'year', headerText: 'Year', sortable: true, filter: true},
                    {field: 'color', headerText: 'Color', sortable: true, filter: true, content: function(car){return $(<span style="color:{{color}}">{{color}}</span>);}}
                ],
                datasource: function(callback) {
                    $.ajax({
                        type: "GET",
                        url: 'showcase/resources/data/cars-large.json',
                        dataType: "json",
                        context: this,
                        success: function(response) {
                            callback.call(this, response);
                        }
                    });
                },
                selectionMode: 'single'
            });
        

PrimeElement shortens the code required using p-datatable and p-column elements.

            <p-datatable datasource="Showcase.demo.loadAllCars" paginator rows="10" selectionmode="single">
                <p-column field="vin" headertext="Vin" sortable filter></p-column>
                <p-column field="year" headertext="Year" sortable filter></p-column>
                <p-column field="brand" headertext="Brand" sortable filter></p-column>
                <p-column field="color" headertext="Color" sortable filter> 
                    <template>
                        <span style="color:{{color}}">{{color}}</span>
                    </template>
                </p-column>
            </p-datatable>
        

Containers

PrimeElements can have any content as children just like a standard div element. Here is an example of tabview.

            <div id="tabview">
                <ul>
                    <li><a href="#tab1">Tab 1</a></li>
                    <li><a href="#tab2">Tab 2</a></li>
                    <li><a href="#tab3">Tab 3</a></li>
                </ul>
                <div>
                    <div id="tab1">
                        Tab 1 Content
                    </div>
                    <div id="tab2">
                        Tab 2 Content
                    </div>
                    <div id="tab3">
                        Tab 3 Content
                    </div>
                </div>
            </div>
        

            $('#tabview').puitabview();
        

And the PrimeElement version.

            <p-tabview>
                <p-tab title="Tab 1">
                    Tab 1 Content
                </p-tab>
                <p-tab title="Tab 2">
                    Tab 2 Content
                </p-tab>
            </p-tabview>
        

Tab 1 Content Tab 2 Content

Events

PrimeElements provide event callbacks prefixed with "on" keyword. An example with rating is below;

            <p-rating stars="10" onrate="MyApp.handleRate"></p-rating>
        

            var MyApp = {
                handleRate: function(event, value) {
                    //value = new rating value
                }
            };
        

Premium Layouts and Themes

In addition to the free themeroller based themes, PrimeElements support premium layouts and themes as well to give the elements a great look and a responsive template to work within.

Conclusion

PrimeElements drastically reduce the amount of work required to create nice looking and functional UIs by providing a rapid application development kit based on standard Web Components technologies. Maintenance effort also benefits from this as there is less amount of script involved.