Add ADF Core Components to the JSF JSP File

show me how icon Show me           tell me more icon Tell me more

  1. In the Applications Navigator, select the JSF JSP file you created earlier and open it in the visual editor.
  2. In the Components Palette, select ADF Faces Core .
  3. Drag and drop an InputText component into the form component.

    Note: You can also drag and drop a component into the Structure window instead of the visual editor, to ensure the component is added to the correct node.

  4. In the Property Inspector, set the label property of the input text component to Enter Name.
  5. In the Structure window, double-click the input text component.
  6. In the InputText Properties dialog, click Bind corresponding to the value property.
  7. In the Bind to Data dialog, in Variables navigation tree, expand JSF Managed Beans and the node corresponding to the managed bean you created in Step 4, and select name.
  8. Click the right shuttle button to create an EL expression using the variable and click OK.
    tell me more icon Tell me more
  9. In the InputText Properties dialog, click OK .
  10. Drag and drop a CommandButton component after the input text component.
  11. In the Property Inspector, set the text property of the command button component to Submit.
  12. Drag and drop an OutputText component after the command button component.
  13. In the Structure window, double-click the af:outputText - outputText1 node.
  14. In the OutputText Properties dialog, click B ind.
  15. In the Bind to Data dialog, delete the default value and enter the text Hello (followed by a space) in the Expression text area.
    tell me more icon Tell me more about what I see in the IDE
  16. In Variables navigation tree, expand JSF Managed Beans and the node corresponding to the managed bean you created in Step 4, and select name.
  17. Click the right shuttle button to create an EL expression using the variable and click OK.
  18. In the OutputText Properties dialog, click OK .
  19. From the File menu, choose Save.

cue cards icon Next step