Using the web UI framework designer workbench to create new screens for custom developers

You can use the web UI framework designer workbench to create new screens for custom developers.

Procedure

  1. Access the Designer Workbench from the Extensibility Workbench by clicking the Design new screens link in the lower right hand corner of the Extensibility Workbench.
  2. In the Designer Workbench, click the New button to create a new screen.
  3. Perform one or more of the following tasks:
    • To add a widget, click on the Palette tab. Select a widget. On the canvas, right-click or left-click where you want the widget to appear. You can later use the Tree View to rearrange the order of the widgets.
    • Use the Tree View to see a directory-style overview of how widgets are arranged on the canvas. Also use the Tree View to delete items or rearrange items (for example, move a column from one grid to another grid, or move a button from one panel to another panel).
    • Use the Properties view to add or change any widget properties. For more information about widget properties, refer to the Ext JS framework documentation for Version 2.2.1 or Version 3.0.2.
    • (Optional) To create a mashup, click the Data tab. Configure an output data source. Then click the Mashups button to create the mashup xml file, which will include a reference to the output data source.
    • (Optional) Use the Code Template Generator window to generate code that can be either pasted on the Code Update page and updated in the application or (if the changes are permanent) saved in a relevant file like mashup.xml or a Struts file for the application. Access the Code Template Generator window using the Generate Code button near the More button.
  4. To specify the project that will use the screens that you are creating and modifying, click the Files tab.
    1. Check the Notify project check box.
    2. Click the Options button.

      The Configure Project Directory dialog box appears.

    3. Configure your project directory and click OK.
  5. To save the new screen, click the Save button. The changes immediately appear in the project file.
  6. To return to the Extensibility Workbench, use the Back button of your browser. You will have to re-activate the Extensibility Workbench by clicking Shift + space bar.
  7. After you create all of your new screens, you must deploy them as an extension to the application.