number of ratings	0
average rating	0.00

Using library functions to bind components to the model

In this example we are going to show how the basic XUI databinding can include a reference to a library function. This provides a very effective way of separating common functionality in your application and in the process giving you an easy to configure plugin structure.

We can begin by creating the data which will be bound to our pages. This example will show how to switch unit sets for engineering calculations but this could just as easily be applied to currencies. The data we will be binding is shown in Listing 1.

As you can see there are two sets of units from which the user will be able to select their preference. Now we will create the welcome page as shown in Listing 2 where the unit set will be selected.

The ComboBox is bound to the units/sets XModel node and the button, when clicked, will call the proceed method in the net.xoetrope.libtest.Welcome class which is shown in Listing 3.

package net.xoetrope.libtest;

import net.xoetrope.xui.XPage;

public class Welcome extends XPage {

  public void proceed()
  {
  pageMgr.showPage( "unitspage" );
  }
  
}               

The unitspage in Listing 4 is displayed.

This page includes three labels which are bound to the a library class in the data binding node declarations. The first binding uses the syntax ${net.xoetrope.units.UnitHandler[unitlib].getSelectedUnit()} to call the getSelectedUnit function in the library class and subsequent calls can use the syntax ${[unitlib].getSelectedUnit()} as unitlib is the name under which the library instance is stored by XUI.

Now we can take a look at the library function in Listing 5

package net.xoetrope.units;

import net.xoetrope.xui.*;
import net.xoetrope.xui.data.*;

public class UnitHandler {

  public String getSelectedUnit() {
  XBaseModel rootModel = ( XBaseModel )XProjectManager.getModel();
  XBaseModel selMdl = ( XBaseModel ) rootModel.get( "xui_state/units/sets" );
  String selected = ( String ) selMdl.get();
  XBaseModel unitsMdl = ( XBaseModel ) rootModel.get( "units/sets" );
  for ( int i = 0; i < unitsMdl.getNumChildren(); i++ ) {
    XBaseModel child = ( XBaseModel )unitsMdl.get( i );
    if( child.get().toString().compareTo( selected ) == 0 ) {
    return child.getId();
    }
  }
  return "SI";
  }
  
}               

The ComboBox outputs its selected value to the xui_state/units/sets Model node and it is access in order to discover its value. Next the sets are iterated and compared to the selected one. When found the ID of the selected set is returned meaning that the components will effectively be bound to units/SI/power where SI replaces ${[unitlib].getSelectedUnit()} in the model path.

The running application can be seen in the screenshot below.

comments

If you were logged in you could rate this article or add a comment.