Sunday, 2 June 2013

New widgets of AngularPrime 0.3

As explained in the previous post, the new widgets introduced in PrimeUI 0.9 are also integrated in the latest release of the AngularPrime library. This post gives a brief overview of them.


With the progressbar widget, you can show a value between 0 and 100 as a filling area that fills the block completely as at reach the 100. This widget can be used to indicate the progress in a lengthy process or indicate the amount that is already completed in a wizard.
The progressbar widget needs always a ‘model’ value, the value of the bar which must be between 0 and 100  both values included.
<div id="default" pui-progressbar="value" ></div>

where value is defined in javascript as following
$scope.value = 0;

When you change the value in the JavaScript object, the widget adjust the amount of the bar which is filled.  This change is by default animated. This animation can be defined, the type, like linear, easeInOutCirc, … and the time it takes.  By using these options carefully, you can create a fluent change from 0 to 100 in the desired time.

There is no timer functionality created within the widget itself. However, you can use the AngularJS features, like $timeout(function() { }, ); or any other JavaScript option to have the repeating change you need.

The widget has also the possibility to indicate the current value as a label in the center of the area.

In a future version there are a few enhancements planned for this widget:

  • It will have a configurable minimum and maximum value so that you can use it to display some numerical information on the screen.
  • The label feature will be enhanced so that you can show a text that is derived from the current value
  • The possibility to change the color of the filled area.  This can be used to indicate the range of the bar value like too cold, too hot, etc…


Within PrimeUI, there are several types of menu defined, having a different name like tiered Menu, Context Menu, etc …

They all are operating on the same HTML structure, an unordered list (<ul> tag) with items (<li> elements). Therefore I integrated them all in the pui-menu widget and when a different functionality is required, like the context menu, you can specify it through an option.
<ul id="submenu" pui-menu="">
   <li><a data-icon="ui-icon-document">File</a>
         <li><a data-icon="ui-icon-contact">New</a>
               <li><a ng-click="doCommand('project')">Project</a></li>
               <li><a ng-click="doCommand('other')">Other</a></li>
          <li><a ng-click="doCommand('open')">Open</a></li>
          <li><a ng-click="doCommand('quit')">Quit</a></li>

But the same menu structure can be turned into a context menu by just changing the pui-menu attribute to this
pui-menu="{isContextMenu: true}"

In a future version there are also a few enhancements planned

  • Create a menu-item directive so that an abstraction is made from the html representation, the <ul> and <li> tags, which is currently used.  And it is also more in line with the AngularJS philosophy that you declare the view declarative.
  • Better informing the developer when they have used some incompatible combinations like the <h3> element, for specifying a title section, in combination with nested <ul> tags for submenu.
  • Allow the creation of the menu based on some JavaScript model and react to changes when the model changes. This allows us to have dynamic menus.

And the list will probably grow with some more ideas.


The menubar is almost identical to the menu described above. It uses the same html structure, but now it is rendered in a horizontal layout.

Due to this layout difference, I decided to give it a different directive name.  But another option, like for instance for the context menu functionality, was also a possibility. And I might prefer this way, or a combination of both, in a future version.

The new features described at the menu widget are of course also applicable for the menu bar.


Also the breadcrumb widget is closely related to the menu and in particular the menu bar widget. It isn’t allowed to have sub items and the first level is also shown by an icon and not by the normal text item.

Since a breadcrumb is quit dynamic, I already created to possibility to manipulate the breadcrumb by changing a javascript object. The  directive takes an array of objects or you can specify the objects in the property items of the object you specify in the directive.  The properties of the object are described in the following table.

NameTypeDefault - Required?Description
idstringnull - required(unique) id that identifies the li instance for this item. Can also be used for the click action
labelstringnull - requiredText to be displayed by the breadcrumb item
onclickstringnull - optionalSignature of the function that needs to be executed when item is clicked. When no value is specified, the item is nog clickable (see also globalAction). The value can contain the placeholder {id} which will be replaced by the id. example doCommand('{id}').
globalActionbooleanfalse - optionalWhen true, the onclick value specified on this item will be used for lower levels items when no onclick is given

The menu item directive which is planned for the menu widget will also be usable for this breadcrumb widget. However, the dynamic option with the javascript array is in my opinion much more useful and important.


In this version, most of the widgets are just integrated and useable in an AngularJS application. There is already made an important addition for the breadcrumb widget, the definition based on a javascript object were the changes are reflected immediately on the screen.

If time permits, the enhancements described in this text will be incorporated in the next release, 0.4.

In any case, the new widgets available in the next PrimeUI release, 1.0, will be put in.

In the mean time, you can see the demo application on Google's app engine and the code and issue tracker is on GitHub

No comments:

Post a Comment