A page/popup page state is a state that is bound to a page, and it is used to gather information through a page that has been created with the XUI editor. Widgets, such as the link or button widget are used to navigate from a page state to another state in the flow. Page state and Popup page state shares the same procedures of creation. Thus the following steps takes Page state as an example.
1 In the Project Explorer pane, double-click the transaction file that you want to edit.
It would be opened in the Flow editor.
2 Click the page/popup state in the Palette and then click the position where you want to place the state icon in the Editing area.
If you want to change the location of the state icon, drag and drop it to the desired location.
3 Define the required properties.
▪ In the Page field of the General tab, click the Browse icon .
The Selector opens.
▪ In the Selector, select the JSP file that you want to be displayed in the browser for the page state that you are configuring and then click OK.
▪ In the Name field, input a valid state name.
4 Alternatively, if the XUI file you want to add to the page/popup state is in the same project or on the multi-project environment, you can directly use it to generate the state.
▪ All the properties and events of the file are copied to the state.
▪ The name of the state is the name of the file.
▪ Drag the XUI file from the Project Explorer and drop it to the Editing area.
5 Select Page or Popup Page in the popup selection windows.
For popup state only, you can define its title and appearance.
6 In Title field, input the text directly or select from NLS by clicking the button to launch NLS window.
7 You can set its appearance, or leave them blank as the default setting.
▪ Size: Width and Height (in pixel)
Notes
▪ Set the page's size larger than its root container's size (panel). Otherwise, the generated view would have display problems.
▪ Set the width larger than 100px and height larger than 50px. Otherwise, it will be the default setting: "auto". Notice: The default size "auto" is parsed by web browsers, so different browsers may has different display results.
The recommended otherwise it will be set as default size: "auto".
▪ Position: Top and Left (in pixel)
▪ Closable: two options
▪ False: the popup page has no close button
▪ True: the popup page has close button. Users must define a "close" event transition on the popup state to give UDTT flow a direction; otherwise it will fail the validation and cause runtime problems.