Developing and deploy XUI processor transactions

About this task

In the rich client sample, we will implement the apply credit card process. Below is the flow of this process.

Here is the file structure of XUI flow:

Do the following steps to apply a credit card:

Procedure

  1. From the initial state, the user enters the welcome page, and then the user can input the account number if the user has the account or just choose applying the new account. Below is the figure we will implement.
    Now we will use this page as the sample to describe how to develop it using XUI.
    1. Develop the welcome page UI. BTT provides XUI editor for developers to develop the XUI application efficiently. You can use drag and drop way to develop this UI using XUI editor in design mode.
    2. Configure the XUI state. After you develop the XUI, you can configure it in the XUI processor like below:
      <xuiState id="creditCardsWellcome" type="page"
      			typeIdInfo="jar:///xui/firstStep.xui">
      			<transitions>
      				<transition context="creditCardsWellcome_history_Ctx"
      					id="creditCardsWellcome.history"
      					targetState="creditHistoryOpState" />
      			</transitions>
      </xuiState>

      The type page means this xui state is a XUI page, the typeIdInfo is the xui file location, you can use fromJAR way to access it. The transitions describe the state transition according to the output.

    3. Trigger the state transition. After user click the continue button, the user will trigger the state transition. In the XUI editor design mode, click the continue button and in the Actions tab of the properties view, you can add the action com.ibm.btt.rcp.xui.action.StateChangeAction and configure the state value to history . When you click the continue button, the processor will enter the State creditHistoryOpState which responding to the transition creditCardsWellcome.history.
    4. Initialize the widget. When the user enter the welcome page, the account input text widget is disabled, after the user select the “I have an account” radio, and then the account input text widget is enabled. We can implement this function using widget initializer.
      public class RadioButtonInitializer implements IInitializer {
      	public void initialize(IXUIWidget widget) {
      		// Get the radio button using widget id
      		XUIRadioButton btn = (XUIRadioButton) widget.getXUIView().getXUIWidget(
      				"accountRadio");
      		//Set the enable property of input widget
      		((XUIText) widget).getWidget().setEnabled(
      				btn.getWidget().getSelection());
      	}
      }

      After you implement the Initializer you can configure it in XUI editor, click the input text widget, then you can set the initializer in initializer tab view.

    5. Customize the validation.
      XUI provides many predefined validations such as min length, max length, regular expression validation etc. But you can also implement your own validation and configure it in XUI editor. For example, we just do the validation after the user selects the “I have an account” radio button.
      public class AccountValidator extends Validator {
      	public String validate(IXUIWidget widget, String text) {
      		XUIRadioButton radio = (XUIRadioButton) widget.getXUIView()
      				.getXUIWidget("accountRadio");
      		if (radio.getWidget().getSelection()) {
      			if (text == null || text.length() != 8) {			 
      				return "Account Number's length should be 8";
      			}
      		}
      		return null;
      	}
      }

      After click the account input text widget, you can configure the validator in XUI editor.

    6. Communicate to the server side.
      After the user chooses the “I have an account” radio and input the account number, and then click continue button. Then the client side will send the account number to the server side to query the account whether it exist or not. To implement the client side operation, see the following example:
      public class CreditHistoryOperation extends com.ibm.btt.base.BTTClientOperation {
      
      	public void execute() throws Exception {
      		// Get the cs client service
      		CSClientService csClientService = CSClient.getCSClient("realCSClient");
      		//communicate with the server side
      		csClientService.sendAndWait(this, 60000);
      
      		OperationRepliedEvent event = new OperationRepliedEvent(this);
      		Hashtable ht = new Hashtable();
      		event.setParameters(ht);
      		String accountExist = (String) getContext().getValueAt("TrxReplyCode");//$NON-NLS-1$
      	    //Check the reply code
      		if ("true".equals(accountExist)) {
      			//Trigger the processor to accountExists state
      			ht.put(ExecuteOperationAct.EXIT_EVENT_NAME, "accountExists");//$NON-NLS-1$
      		} else {
                // Trigger the processor to newAccount state
      			ht.put(ExecuteOperationAct.EXIT_EVENT_NAME, "newAccount");//$NON-NLS-1$
      		}
              //fire the event
      		fireHandleOperationRepliedEvent(event);
      	}
      }
    7. Configure the operation state

      The check account history operation is an operation state; you can configure it in the XUI processor like below:

      	<!-- Operation state. The operation is executed by the specialized state. The operation is firing the exit events -->
      		<state id="creditHistoryOpState" type="operation">
      			<entryActions>
      				<executeOperationAct id="creditHistoryAct" linkContextTo="processor"
      					operationName="creditHistoryOp" />
      			</entryActions>
      			<transitions>
      				<transition id="creditHistoryAct.accountExists"
      					targetState="creditCardsPage" />
      				<transition id="creditHistoryAct.newAccount"
      					targetState="financialInfoState" />
      				<transition id="creditHistoryAct.error"
      					targetState="finalNotOk" />
      			</transitions>
      	</state>
  2. After checking the account number, if the account exists then enter the choose card page. If the account doesn’t exist, then enter the new account sub flow.
    The configuration of sub flow:
       	<xuiState id="financialInfoState">
    			<entryActions>
    				<executeXuiSubflowAct id="initialStep"
    					processor="financialInfoProc" />
    			</entryActions>
    			<transitions>
    				<transition id="initialStep.ok"
    					outputMapFmt="financialInfoToCreditApplFormat"
    					targetState="creditCardsPage" />
    				<transition id="initialStep.notOK"
    					outputMapFmt="errorMessagesMapper" targetState="finalNotOK" />
    				<transition id="initialStep.canceled"
    					targetState="creditCardsWellcome" />
    			</transitions>
    	</xuiState>
  3. After user enters the choose card state, it will show the choose card page.

    The user can choose continue processing application or cancel application in this page, so the continue button will trigger different event according to user’s selection . We can implement this action like below.

    public class SampleEventAction extends Action {
    	@Override
    	public boolean widgetSelected(IXUIWidget widget) {
    		IXUIView view = widget.getXUIView();
    		IModelAdapter model = view.getModel();
    		//Get user’s selection from the data model of the view
    		String state = (String) model.getValueAt("dse_nextEventName");
            //fire the event according to user’s selection
    		view.fireXUIEvent(new XUIEventObject(widget, Constants.STATE_CHANGE,state));
    		return super.widgetSelected(widget);
    	}
    }

    Then we can configure it in the XUI editor.

    After click the Continue button, then you can configure actions in the actions view.

  4. Trigger the flow from project’s plugin.xml, you should add a processorActivity to launch this processor. Fill in the fields following the snapshot below: