Wednesday, April 9, 2014

a PickList component for angularjs

First, what is a PickList? See a demo here: http://www.primefaces.org/showcase/ui/picklist.jsf.

The example above is a PickList in JSF. In one of my project, I need such component working in angularjs fashion. I did not find one by googling around. I decided to code one by myself.  This is first version: https://github.com/jasonzhang2022/picklist.

Here is an exmaple how to use it.
<select name="pktest" size="20"  
data-ng-options="v.name for v in toptions"  
data-picklist="" multiple data-ng-model="tselected">  
</select>
data-ng-options and data-ng-model are directives from angularjs itself. data-picklist is from this component. Once <select> is decorated with all the three attributes, you have an PickList.

Angularjs V.S JSF implementation.

Use Component
For component user, angularjs approach is super easy, just one extra attribute for select element. PickList in PrimeFace is not so easy. First, you need to understand the data model behind the component. Second you need to add some classes and codes in server to work together with the PickList.

UI customization:
Again, angular js wins. All the html is a regular html template decorated with regular angularjs directives. You can replace with your own html template easily.  I usually customize JSF component from JSF libraries. It is just really tough.

Component creation:
Super easy in angular js. All I created is 300-line file including html template. Again, It is hard in JSF. You need to create html template, javascript, renderer, etc and configure them in one component.

Test:
I do not know how you test the JSF component. I guess you can use some end-to-end test code such as selenium. This angular component itself has test code. All javascript logic is tested thoroughly.





2 comments: