Top

Introducing PrimeElements with PrimeUI 3.0

Introducing PrimeElements with PrimeUI 3.0

Future is here!

primeui.png

PrimeUI 3.0 is now available featuring PrimeElements, the WebComponents library to create user interfaces declaratively with custom html elements. In addition to PrimeElements, template support and defect fixes, there are 4 new components as well.


Web Components is a collection of four specifications to create reusable user interface components. These different technologies are Custom Elements, Shadow DOM, Html Imports and Templates. Modern browsers provide native implementations and javascript libraries called pollyfills are available to use them on older browsers. There are some libraries to create web components easily such as Google Polymer or Mozilla X-Tag while providing additional features.

PrimeElements is an add-on library for PrimeUI that only uses the Custom Elements technology based on X-Tag APIs, a simple and lightweight library to create cross browser custom elements. PrimeElements is a library not a framework, features such as data binding, validation, routing are out of scope since they can be provided by your framework of choice. As they are regular html elements, there are various use cases including integration with a simple REST backend, a javascript mvc framework or implementation in a server side rendering web framework such as PHP, JSP, RoR, Django, ASP.NET MVC, Spring MVC, JavaEE MVC and many more. Advanced cases such as hybrid mobile apps and offline support is also possible since there is no dependency to a server side api.

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. For example Modena for PrimeUI demo provides regular jQuery implementation and PrimeElements implementation of a complex sample page where PrimeElements page is 200 lines less and 5kb smaller in size.

Creation

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

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

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.

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.

Extend a Button

Accessing APIs

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

Data Components

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

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

Containers

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

And the PrimeElement way to do the same.

Events

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

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. Modena, Rio and Adamantium are now available at the brand new PrimeFaces Market.

Download

There are two ways to download the library, simpler way is to use bower and alternative is the zip file bundle. With bower it is easy as running “bower install primeui”. Zip file on the other hand is available at github releases. Check out quickstart page for the installation of the library.

Roadmap

Next major release is 3.1 along with 3.0.x maintenance releases. For 3.1, we plan to add new features to DataTable like frozen rows-columns, add new widgets like MegaMenu and DataList. In parallel, we’re doing proof-of-concept work to create a UI component suite called PrimeNG for AngularJS2.

Share
13 Comments
  • Asd
    11 January 2016 at 15:13

    I love it, it’s like moving half of JSF to client

  • Sudheer
    11 January 2016 at 15:19

    Congrats.Now PrimeUI looks cleaner and easier.All the best for PrimeNG !

  • Ronald van Kuijk
    11 January 2016 at 15:53

    Great… any chance this will become the ‘default’ for PrimeFaces to? Converting a : to a – in the tag should be easy (I still HATE, HATE, HATE the fact that the html standardization group (loosers) chose to use a weird dash-based ‘namespace’ like thing)

    • Daniel Buchner
      11 January 2016 at 22:22

      There are actually important reasons the Custom Elements spec requires a dash in a tag name, chiefly:

      – To distinguish custom elements from native elements, ensuring there is no collision with new native ones

      – The dash is required (vs a colon) because HTML Namespaces are already in existence, so this wasn’t an option, given all the reliant code that could exist on the web.

      There are a few other reasons, but I won’t belabor the point.

      • Ronald van Kuijk
        14 January 2016 at 21:16

        No offence to you but all tags in x-tag are new right? So simply declaring a real namespace with a ‘fixed’ part in the declaration like in http://stackoverflow.com/tags/composite-component/info so e.g. xmlns:pu=”http://www.w3.org/1999/xhtml/myCustomTagSpace” in the beginning of the page and using real namespace prefixes in the tags (pu:myTag) would have worked to, right? This would have made both your counter arguments invalid. Curious to the other arguments. Is there a good link anywhere about decisions?

  • Ahmet OZKESEK
    11 January 2016 at 16:44

    Nice job.

    By the way, same of the demo page is broken on PrimeUI Showcase likewise Tabview, Carousel, …

    It seems that whole site is needed to more test and fixing before go live.

      • Ahmet OZKESEK
        11 January 2016 at 18:14

        You right, everything looks normal after refreshing the page, my mistake.

        I definitely like PrimeElement.

  • grafity
    11 January 2016 at 19:56

    Nice, I use it in a project done with symfony…

    thanks…

  • Hugo Lopes
    11 January 2016 at 21:43

    Can’t use primeUi…is any file missing?

    The Path is right.

  • Svetlio
    13 January 2016 at 07:18

    Great work! I am a huge fan of primeUI and PrimeFaces with JSF.

    Do you plan to add the PrimeFaces charts for primeUI?

Post a Comment