Monday, 20 May 2013

Release of AngularPrime 0.3

Introduction

AngularPrime, based on PrimeUI and created to integrate it in the AngularJS framework, has reached a new release.  With the latest release of PrimeUI 0.9, there are a couple of new widgets which are now integrated.

Besides the new widgets, there is also a major addition to the Accordion and Tabview  widgets. Until now it was only possible to have a static number of panels in them.  Now you can add and/or remove these panels at ‘runtime’ and the HTML for these panels can be ‘included’ from a separate html file.

Dynamic features for Accordion and Tabview widgets

In the previous version, the Accordion and Tabview widgets could only operate on the information defined within the div element with the specified directive.
There are some disadvantages associated with this way of working. The html can become very verbose and confusing as it is not clear which panel shows which html content in a lengthy section.
The first change I did was to create the possibility to have the definitions of the ‘panels’ load from separate html files. Then it is much more clear which what goes under each tab or accordion panel. Therefor the directive can be supplied with an array of Strings which is interpreted as URLs to the contents of the panels. 
 
<div id="tabs" pui-tabview="includeList"></div>

This is all that is needed in the html, in the scope we need to define the array, for example.
 
$scope.includeList = ["partials/puiTabview/include/panel1.html"
        , "partials/puiTabview/include/panel2.html"];

Now it is much clearer what goes in each panel of the widgets. And the next step is not that difficult from here on.  By ‘watching’ the array in AngularJS, we can recreate the widget when the contents of the String array changes. This allows to have a Tabview or Accordion widget where the number of ‘panels’ can be changed by simply change the contents of the String array.

    $scope.addPanel = function() {
        $scope.includeList.push("partials/puiTabview/include/panel3.html");
    }

Lightbox


For the Lightbox widget, I did something similar to achieve a dynamic number of images that are shown.

But here it wasn’t enough to have a list of URL’s because we need 4 values to define a Lightbox item. So a list of objects is needed as shown.
    $scope.items = [
        { title: 'Sopranos1'
         ,oneLiner: 'One line about Sopranos1'
         ,image: 'demo/images/sopranos/sopranos1.jpg'
         ,thumbnail: 'demo/images/sopranos/sopranos1_small.jpg'
        },
...
    ]
The idea however is the same, changing the array changes the contents shown on the screen.

Panel widget used within Accordion and Tabview widget


To define a ‘panel’ for the Accordion widget is a bit different then defining one for the Tabview widget with PrimeUI. The html elements are different as is the structuring. h3 tag for the title for the Accordion but li elements for the tabview which are all placed at the top within an ul element.

But basically, it is always a title and some content, just like the panel widget. So I made the panel widget aware of his immediate parent. And when within an Accordion or Tabview widget, it ‘renders’ itself according the requirements of these 2 widgets.

So you no longer need to remember how the panels needs to be structured for an Accordion or Tabview widget, as long as you know it for Panel (which is much easier)

PrimeUI 0.9 Widgets


As this version of AngularPrime is based on the newest release of PrimeUI, the new widgets which are available are also integrated. So now you can find Progressbar, Menu (which also contains the context menu usage), Menubar and Breadcrumb widgets in this release.

I’ll describe them in more detail in another blog item.

Growl as a service


The growl widget is now also accessible from a service. Injected into a controller, you can ask it to show some messages, just like before you could do it from the rootscope. But now you also have access to the timing and sticky options.

Although it is not the best practice to access the DOM structure from with a service, it seemed the only option for me.

Conclusion


The new features of the release can be described in 3 groups.

  • The new widgets from PrimeUI 0.9
  • Dynamic features for the Accordion, Tabview and Lightbox widgets. Also the Panel widget can be used to define the panels of Accordion and Tabview
  • Improvement for showing messages with Growl by a service.

The code can be found on Github.

Update: Demo application is deployed on Google App Engine

Have fun with it.

2 comments:

  1. I have put the demo application on google app engine.

    You can find it here http://angularprime.appspot.com

    ReplyDelete