Accessing page controls

Introduction tutorial - Accessing page controls - Name the controls

SUMMARY Accessing controls on a XUI page is a simple matter of naming the control in the page XML declaration and using the findComponent of the XPage to retrieve it

FURTHER READING You are not limited to the controls available in XUI and you will probably build up a library of components for reuse. For more information on including custom components in your XUI application see 'Component Registration' in the 'Advanced Tutorial'

Quite often it's necessary to access the components which make up a page in order to do some work with them, whether it's retrieving their values, setting the visibility or other more advanced techniques. In order to illustrate how to do this the finance.xml page can be modified so as to include a label which gives the loan to value ratio of the finance being applied for.

The first thing that needs to be done is to modify the finance.xml file as in listing 1.

Listing 1 - finance.xml

<XPage class="net.xoetrope.mortgage.Finance">
  <Components>
    <Label x="71" y="79" w="171" h="20" style="prompt" content="Value of property:" 
	opaque="true"/>    
    <Edit name="propValueText" x="263" y="77" w="178" h="20" alignment="Leading"/> 
    <Label x="72" y="106" w="176" h="20" style="prompt" 
		content="Amount of mortgage required:" opaque="true"/>     
    <Edit name="mortAmtText" x="263" y="105" w="178" h="20" alignment="Leading"/> 
    <Label x="71" y="130" w="171" h="20" style="prompt" content="Loan to value:" 
	opaque="true"/> 
    <Label name="loanValue" x="263" y="130" w="50" h="20" alignment="Right"/> 
    <Label x="313" y="130" w="20" h="20" content="%" alignment="Right"/>
  </Components>
  <Data>
    <Bind target="propValueText" source="/mortapp/finance/propvalue" /> 
    <Bind target="mortAmtText" source="/mortapp/finance/mortamt" /> 
  </Data>
  <Events>
    <Event method="updateLTV" target="propValueText" type="KeyHandler"/>
    <Event method="updateLTV" target="mortAmtText" type="KeyHandler"/>
  </Events>
</XPage>

The modified file is now going to use the net.xoetrope.mortgage.Finance class to handle it's events. There are three new label controls to show the Loan to value ratio of the values entered and the existing two edit controls have key handlers attached to them. The method for both the edits is the same so the same function call can be used to update the loan to value information.

Now of course the Finance class needs to be created.

Listing 2 - Finance.java

package net.xoetrope.mortgage;

import net.xoetrope.xui.XPage;
import net.xoetrope.swing.XEdit;
import net.xoetrope.swing.XLabel;

public class Finance extends XPage {
  
  XLabel loanValue;
  XEdit propValueText, mortAmtText;

  public void pageCreated()
  {
    loanValue = ( XLabel )findComponent( "loanValue" );
    propValueText = ( XEdit )findComponent( "propValueText" );
    mortAmtText = ( XEdit )findComponent( "mortAmtText" );
  }
  
  public void updateLTV()
  {
    String propValue = propValueText.getText();
    String mortAmt = mortAmtText.getText();
    if ( ( mortAmt.length() > 0 ) && ( propValue.length() > 0 ) ) {
      double ltv = ( Double.parseDouble( mortAmt ) 
	  / Double.parseDouble( propValue ) ) * 100;
      loanValue.setText( String.valueOf( ltv ) );
    }
  }
}

The Finance class again extends the XPage class and declares local variables for the LTV label and the two edit controls.

The pageCreated method is of particular interest here as this is one of several methods which are called automatically by the XUI framework during the lifecycle of an XPage. The pageCreated event is called whenever the page is created and is a good place to get a reference to the page components which will need to be used within the page. The findComponent function is used to find a reference to the component in named as the argument and needs to be cast to the type of object it is declared as.

The updateLTV function is called whenever either of the two edit controls are changed with keyevents. This section illustrates how easy it is to hook your screens up to the business logic in your application.

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