Tuesday, 29 January 2013

AngularPrime, Integration of PrimeUI within AngularJS


Introduction

I received a lot of reactions on the first trial of my integration between PrimeUI and AngularJS (see here). Therefor I decided to try a more complete integration where all the 16 components of the 0.7 release of PrimeUI are integrated as widgets in AngularJS

Alpha release

My code can be found in GitHub at the following location.
For the moment, it isn’t yet a real widget module like AngularUI.  I created some pages where all the widgets are tested and where you can see what I added as a directive to make it work.
I concentrated myself mainly on the graphical aspects and not always on the functional side of the integration.  Therefor you can find a disabled button that is still clickable, making components dynamical disabled and enabled isn’t always foreseen, and so on.
Also the browser support is minimal.  I mainly tested with Firefox and Chrome and found out that for instance with IE9, there is a problem on all pages.

One or multiple directives

For the widgets that I started first (like panel), I could implement all the functionality with one new directive and at most 2 additional attributes that defines the extra functionality.  So I had the following tag

<div id="options" pui-panel pui-collapsed=”false” pui-closable style="margin-bottom:20px" title="Toggle and Close">

The pui-panel attribute is a real directive, the other 2, pui-collapsed and pui-closable, where just inspected in the directive code.

But soon I found out that for some widgets, like Galleria, there where too much options. Implementing them all with an attribute would made the html unreadable.

For the second group of widgets, I started to use the pui-options attribute for specifying the configuration.  That allowed me to use the object notation to define the parameters, something like

<div id="options" pui-panel pui-options="{'collapsed': false, 'closable': true}" style="margin-bottom:20px" title="Toggle and Close">

This made it more compact but had another benefit.  I could also write the name of a property within the controller to define the options.

<div id="options" pui-panel pui-options="panelOptions" style="margin-bottom:20px" title="Toggle and Close">

$scope.panelOptions = {collapsed: false, closable: true}
 
Changing the object, like setting collapsed to true, has no effect. For some options, like collapsed I think I can foresee that in one of the next versions, but for others like closable it isn’t possible. It will not be possible since the DOM structure is changed to make closable possible. On the other side, something like collapsed is just changing the visual state and can easily be done.
At the end, I also abandoned the pui-options attribute and used the directive itself. Because then there is no longer the confusion between the real directive and the attribute.

Based on PrimeUI

AngularPrime uses the widgets which are provided by Çağatay Çivici in the PrimeUI library.
I try to use the code unmodified but needed already 3 small changes. But when there will be some more complex widgets in the next releases of PrimeUI, I’m afraid that I need to modify the code to make the integration possible.
However, I hope to be able to integrate the bugfixes made for the PrimeUI components into the AngularPrime module.

Requirements

Since PrimeUI builds on JQuery and JQueryUI, AngularPrime needs those JavaScript frameworks.
This means that the people that try to create an application with only a few kiloBytes of download, will not be able to use AngularPrime. For me, that is not a concern as my main goal is to learn JavaScript and AngularJS.

Widget overview 

Accordion: Container component that displays content in stacked format.
Button: Button with theming
Checkbox: Also with theming
Dialog: Panel component that can overlay other elements on page.
Fieldset: Grouping component as an extension to html fieldset.
Galleria: Display a set of images
Growl: Based on the Mac’s growl notification widget
Inputtext: With theming
Inputtextarea: With theming, autosizeable and with counter of remaining characters
Panel: Grouping component with content toggle
Password: Has a strength indicator
Radiobutton: With theming
Rating: Star based rating system
Spinner: To provide a numerical input via increment and decrement buttons
TabView: Tabbed panel component.
This widget is the first major difference with PrimeUI. You don’t have to specify the span to have a closable version. Just setting the option closable to true, the required changes in the DOM are performed.

Next version

I’m already planning version 0.2 since creating this alpha version was a pleasure. So what can you expect:
- Define AngularPrime as a real AngularJS module. So adding the javaScript files and putting a dependency will be enough.
- Integrate the new widgets in versions 0.8 and later of the PrimeUI library
- Fix the todos mentioned on the example pages. Most of them are related to the dynamic disabling and enabling of widgets.
- Provide minified and regular JavaScript and CSS code of AngularPrime

Conclusion

With this first version I just tried to have the graphical aspects more or less correct. Now I need to make the directive more uniform, provide more functionality and make it a real AngularJS module. Stay tuned.

No comments:

Post a Comment