The Promise of Ajax in JSF

JSF simplifies development of user interfaces for JavaServer applications and is widely used. Unfortunately the standard JSF only supports page to page navigation. In these Web 2.0 days more and more web applications are developed using Ajax and ordinary JSF applications are not very attractive. The Ajax frameworks however usually don't have a standard way to communicate with a JavaServer without additional development of serverside components like servlets or JSP pages generating XML or JSON data.

With these facts at hand it is pretty obvious that the combination between Ajax and JSF would be an excellent idea.

That is why we created the BindowsFaces product.

How BindowsFaces brings the promise of Ajax into JSF:

Use JSF "dataTable" constructions in BindowsFaces:

When using the well known standard JSF dataTable component the developer usually utilizes the column component and "facets" to create the table from data provided by managed beans.
Now BindowsFaces supports column and "facets" in ComboBox, ListBox, Autocomplete, Grid and Grid2.

Sample of a grid populated from a list (notice that outputText is used):

<bi:Grid id="grid1" sourceValue="#{tableBean.perInfoAll}" var="item"
left="0" top="0" right="0" bottom="100">

<h:column>
<f:facet name="header">
<h:outputText value="id" />
</f:facet>
<h:outputText value="#{item.id}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="name" />
</f:facet>
<h:outputText value="#{item.name}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="phone" />
</f:facet>
<h:outputText value="#{item.phone}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="city" />
</f:facet>
<h:outputText value="#{item.city}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="pin" />
</f:facet>
<h:outputText value="#{item.pin}"></h:outputText>
</h:column>
</bi:Grid>

Sample of how to use BindowsFaces components inside a column tag:

<bi:ComboBox id="combo1" sourceValue="#{tableBean.perInfoAll}" 
var="item"
left="0" top="0" width="200">

<h:column>
<bi:ComboBoxItem text="#{item.name}"
icon="#{item.city == 'aaa' ? '../bindows/html/images/alias.gif' : '../bindows/html/images/arrow.up.gif'}" />
</h:column>
</bi:ComboBox>

Live Scrolling in BindowsFaces

When a larger number of rows are to be loaded into a data grid the loading time will suffer. The live scrolling method helps to avoid slow user interfaces.

BindowsFaces now supports live scrolling in the Grid by simply changing some attributes.

To activate the live scrolling mechanism, the values of "rows" and "liveScrollingRows" attributes must be set to a value greater than 0. The "rows" attribute limits the initial number of rows to be loaded, meanwhile the "liveScrollRows" is the desired amount of rows to be loaded in each live scroll update.

<bi:Grid id="grid2" sourceValue="#{tableBean.perInfoAll}" var="item"
left="0" top="0" right="0" bottom="100" rows="6" liveScrollRows="3">