3

I've been searching around for any documentation relating to the PrimeFaces widgetVars Javascript components, looking for the API and any related documentation.

I find that while the PF JSF components are well documented in the PF docs, I can't seem to find anything relating to the Javascript widget library - how to use the widgets or manipulate them in JS.

Is there any documentation available for that? I found a great Intro to the WidgetVar blog by Hatem Alimam, but am looking for something a little more comprehensive that covers the different widgets, methods, etc.

Is my only choice to read through the JS code itself? The code is now hosted on github in src/main/resources/META-INF/resources. But I'm not even sure which file(s) to look at.

Eric B.
  • 23,425
  • 50
  • 169
  • 316
  • I would also like that, but it seems that they didn't create an official docs for that API... yet! It has been 6 versions and still nothing. One thing to notice is that the API is basically jquery, though the methods/functions you need to go though the code to understand. It is such a great library with this huge gap. =/ – Jorge Campos Apr 28 '17 at 02:10
  • @JorgeCampos My problem is that I'm not even sure which file(s) to read in the JS code. For instance, I'm trying to see how to select a radio button via the JS code, but don't even know in which JS file in META-INF/resources/primefaces to read! – Eric B. Apr 28 '17 at 03:01
  • 1
    Well, for that you can open the showcase page, go to the Inspect (F12 in Chrome), go to the Sources Tab, then go to the path `showcase -> javax.faces.resource -> component.js.xhtml?.....` here you will find all definitions for the Prime components (don't forget to click on the format code button `{}` on the bottom of the code panel). Couldn't find it on the primefaces github page. – Jorge Campos Apr 28 '17 at 03:42

2 Answers2

2

For many 'basic' components that have a direct html counterpart, you can always use the basic html api's (or their jquery counterparts), e.g. the plain html and 'PrimeFaces' counterpart for reading the selection of a radioButton, they are identical. Could this be enhanced with more intuitive PF('mySelectOneRadio').selected() ? Yes maybe... (file an enhancement request in github)

Additional functions are documented in the documentation, e.g. for the selectOneRadio or the selectManyMenu.

The widgetName is also in the documentation, e.g. 'PrimeFaces.widget.SelectOneRadio', which can easily be found with a recursive grep or a decent IDE. And it turns out that 'basic' form inputs are in the 'form.js', including the p:selectOneRadio.

More complex non-default ui components have their api also in the documentation and have their own .js files

E.g. the p:dataTable api and the corresponding PrimeFaces.widget.DataTable javascript file file

Community
  • 1
  • 1
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • Thanks. I don't know why I missed it b/c I had downloaded the code from github and did a full regressive search but hadn't found it. Not sure why the IDE didn't find it. – Eric B. Apr 28 '17 at 15:15
0

I just created the Primefaces widgetVar Documentation (below) where I want to show how widgetVar works and show the main Javascript functions.

Right now there is just the Datatable, however I plan to cover all the components if it could be of any help.

Note: I'm taking all the information from the .js in the GitHub Repository so the informations could be a little raw.

datatable.js in GitHub Reporitory

| Function| Details |
| --------- | ------- |
| bindPaginator: function() | Binds the change event listener and renders the paginator |

| loadLiveRows: function() | Loads rows on-the-fly when scrolling live |

| paginate: function(newState) | Ajax pagination |

| fetchNextPage: function(newState) | Loads next page asynchronously to keep it at viewstate and Updates viewstate |

| sort: function(columnHeader, order, multi) | Ajax sort |

| filter: function() | Ajax filter |

| onRowClick: function(event, rowElement, silent) | |

| onRowDblclick: function(event, row) | |

| highlightRow: function(row) | Highlights row as selected |

| unhighlightRow: function(row) | Clears selected visuals |

| fireRowSelectEvent: function(rowKey, behaviorEvent) | Sends a rowSelectEvent on server side to invoke a rowSelectListener if defined |

| fireRowUnselectEvent: function(rowKey, behaviorEvent)| Sends a rowUnselectEvent on server side to invoke a rowUnselectListener if defined |

| selectRowWithRadio: function(radio) | Selects the corresping row of a radio based column selection |

| unselectAllRows: function() | |

| selectAllRowsOnPage: function() | |

| unselectAllRowsOnPage: function() | |

| selectAllRows: function() | |

| toggleExpansion: function(toggler) | Expands a row to display detail content |

| collapseRow: function(row) | |

| collapseAllRows: function() | |

| getExpandedRows: function() | |

| switchToRowEdit: function(row) | |

| showRowEditors: function(row) | |

| saveRowEdit: function(rowEditor) | Saves the edited row |

| cancelRowEdit: function(rowEditor) | |

| updateRow: function(row, content) | Updates row with given content |

| clearSelection: function() | Clears the selection state |

| clearFilters: function() | Clears table filters |

| removeSelection: function(rowIndex) | Remove given rowIndex from selection |

| addSelection: function(rowKey) | Adds given rowKey to selection if it doesn't exist already |

| isSelected: function(rowKey) | Finds if given rowKey is in selection |

| saveColumnOrder: function() | |

| isEmpty: function() | Returns if there is any data displayed |

| getSelectedRowsCount: function() | | |

Graham
  • 7,431
  • 18
  • 59
  • 84
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
  • 1
    Don't do this. This isn't documentation. Those are internal implementation details, not part of an API. PF's User Guide documents some widget methods - that's an API. Everything else can change or be removed without warning in the next PF version, even in a minor version. If you rely on implementation details, you're gonna have a hard time updating to new PF versions. Which means no new features, no bugfixes. You're stuck now. – Vsevolod Golovanov Apr 28 '17 at 17:46
  • 1
    Yes, don't do this... Better then to fork the source, add stuff to the jsf files that can be used to generate jsdoc... and file pull requests – Kukeltje Apr 30 '17 at 20:23