Working with the data model

Introduction tutorial - Working with the data model - Retrive some model nodes

SUMMARY The XModel built into XUI is a very powerful data storage mechanism and represents the 'M' in 'MVC' for XUI applications

FURTHER READING Many of the steps in the 'Advanced' and 'Carousel' tutorials touch on aspects of the XModel and how it can be manipulated.

The XModel data structure is one of the most powerful features in the XUI framework so now we're going to have a look at how we can use it to assist in building our application. Over this and the next step we will change the application to allow two applicants to be processed. In this step we'll put radio buttons on the welcome page which when clicked will update a node in the data model. In the personal page we will inspect that value and work the logic around it. In the next step, Dynamic binding, we'll change the navigation and bindings in order to complete this.

First off we are going to position two radio buttons on the welcome page and bind the first one to a node in the XModel structure.

Listing 1 - welcome.xml

<XPage next="personal" class="net.xoetrope.mortgage.Welcome">
  <Components>
    <Label x="146" y="84" w="322" h="60" style="Heading" 
	content="Welcome to ABC Bank's mortgage application. Before we proceed 
		please note the following..." 
	alignment="Left" opaque="true"/>
    <Panel x="0" y="150" w="650" h="50" style="banner/prompt">
      <RadioButton name="soleRadio" x="226" y="15" w="100" h="20" 
	  style="banner/prompt" content="Sole" alignment="Leading"/>
      <RadioButton name="jointRadio" x="330" y="15" w="100" h="20" 
	  style="banner/prompt" content="Joint" alignment="Leading"/>
    </Panel>
  </Components>
  <Data>
    <Bind target="soleRadio" source="/mortapp/numapplicants" 
	output="/mortapp/numapplicants"/>
  </Data>
</XPage>

The new net.xoetrope.mortgage.Welcome class as shown in listing 2.

Listing 2 - Welcome.java

package net.xoetrope.mortgage;

import net.xoetrope.xui.XPage;
import net.xoetrope.xui.XProjectManager;
import net.xoetrope.xui.data.XModel;

public class Welcome extends XPage {
  XModel currentCust;

  public void pageActivated() {
    currentCust.set( "1" );
  }

  public void pageCreated() {
    currentCust = (XModel)rootModel.get( "temp/currentCust" );
  }
}

The pageCreated method obtains a reference to the model node currentCust. When the pageActivated function is called the the currentCust model is set to "1" indicating that the first applicant is the next to be processed.

When a joint application is being processed it's necessary to show the personal page twice, once for each customer. In order to do this, it is necessary to create a class for the personal.xml file. So change the class attribute and add a new title label for this page...

Listing 3 - personal.xml

<XPage next="finance" class="net.xoetrope.mortgage.Personal">
  <Components>
    <Label name="Title" x="30" y="0" w="420" h="30" style="Title" 
	content="Personal Details (First Applicant)" alignment="Left" opaque="true"/>
    <Label x="123" y="51" w="100" h="20" style="prompt" content="Title:" 
	alignment="Left" opaque="true"/>
    <ComboBox name="titleList" x="238" y="51" w="100" h="20"/>
    ...

And now create the class file...

Listing 4 - Personal.java

package net.xoetrope.mortgage;

import net.xoetrope.swing.XLabel;
import net.xoetrope.xui.XPage;
import net.xoetrope.xui.data.XModel;

public class Personal extends XPage
{
  XLabel titleLabel;
  XModel joint, currentCust;

  public Personal()
  {
    joint = (XModel)rootModel.get( "mortapp/numapplicants" );
    currentCust = (XModel)rootModel.get( "temp/currentCust" );
  }

  public Object getAttribute( String name, String compName ) {
    boolean isJoint = joint.get().toString().compareTo( "Joint" ) == 0;
    if ( name.compareTo( "next" ) == 0 ) {
      if ( ( isJoint ) && ( currentCust.get().toString().compareTo( "1" ) == 0 ) ) {
        currentCust.set( "2" );
        return "personal";
      }
      return "finance";
    }
    else if ( name.compareTo( "prev" ) == 0 ) {
      if ( ( isJoint ) && ( currentCust.get().toString().compareTo( "2" ) == 0 ) ) {
        currentCust.set( "1" );
        return "personal";
      }
      return "welcome";
    }
    return null;
  }

  public void pageActivated() {
    if ( ( currentCust.get().toString().compareTo( "1" ) == 0 ) )
      titleLabel.setText( "Personal Details (First Applicant)" );
    else
      titleLabel.setText( "Personal Details (Second Applicant)" );
  }

  public void pageCreated() {
    titleLabel = (XLabel) findComponent( "Title" );
  }

}

The contructor for the page gets a reference to the joint and currentCust model nodes. The getAttribute function is overloaded so that the correct page name can be returned. If the navigation is going next and it's a joint application and the current customer is "1" then the next page we need to show is the personal page again but with the details for the second customer. Otherwise the finance page is displayed.

The pageActivated method sets the relevant title in the title label.

The NavPanel class needs to be modified because it is no longer sufficient to navigate backwards through the page history.

Listing 5 - NavPanel.java

    ...
  public void prevPage() {
    if ( wasMouseClicked() )
      navigateToPage( "prev" );
  }
    ...

And the finance.xml file needs to have a prev attribute added.

Listing 6 - finance.xml

<XPage next="finish" prev="personal" class="net.xoetrope.mortgage.Finance">

After compiling all edited java code, execute the run.bat file and the application will appear as in the screenshot.