1. 14 Copyright © 2004, Oracle. All rights reserved. Enhancing the User Interface

2. 14-2 Copyright © 2004, Oracle. All rights reserved. Objectives After completing this lesson, you should be able to do the following: Use the Property Inspector to modify visual components Use the Structure pane to modify data elements Add navigational elements

3. 14-3 Copyright © 2004, Oracle. All rights reserved. Modifying Visual Component Properties To change the appearance of an object in the Visual Editor, you can use: Formatting toolbar of the HTML/JSP Visual Editor: Property Inspector:

4. 14-4 Copyright © 2004, Oracle. All rights reserved. Using the Toolbar to Format Objects Style poplist Font poplist Font size Foreground color Background color Bold/ italic/ underline Align left/ center/right Numbered/ bulleted list Decrease/ increase indent

5. 14-5 Copyright © 2004, Oracle. All rights reserved. Using the Property Inspector The Property Inspector: Displays attributes of the selected tag or tags Displays intersection or union of attributes for multiple selected tags Visually distinguishes changed attributes

6. 14-6 Copyright © 2004, Oracle. All rights reserved. Adding Images to JSPs To add images to JSPs, drag an image file to the Visual Editor:

7. 14-7 Copyright © 2004, Oracle. All rights reserved. Using Style Sheets You can use the following types: Style sheets available in JDeveloper: –Oracle –Browser Look and Feel (BLAF) –JDeveloper Style sheets that you add to the Component Palette

8. 14-8 Copyright © 2004, Oracle. All rights reserved. Editing Default Style Sheets To modify an existing style sheet, open it in the Code Editor: Code insight is available for CSS files. Saving the file updates the CSS for the current application workspace.

9. 14-9 Copyright © 2004, Oracle. All rights reserved. Creating a New Style Sheet CSS File HTML New Gallery untitled1.css Create Cascading Stylesheet

10. 14-10 Copyright © 2004, Oracle. All rights reserved. Editing Style Sheets

11. 14-11 Copyright © 2004, Oracle. All rights reserved. Adding a Style Sheet to the Component Palette To add a style sheet: 1.Select CSS from the pop-up list. 2.Right-click in the Component Palette. 3.Select Add Component. 4.Click Browse to choose file. 5.Enter name.

12. 14-12 Copyright © 2004, Oracle. All rights reserved. Applying a Style Sheet to a Page

13. 14-13 Copyright © 2004, Oracle. All rights reserved. Adding Buttons to a JSP Form action buttons: Submit and Reset Data control buttons –Model: Commit and Rollback –View: Navigation and DML

14. 14-14 Copyright © 2004, Oracle. All rights reserved. Adding Data Control Buttons Data control buttons: Are added to JSP from Data Control Palette Are related to data on the page When related to view, can control navigation or initiate DML When related to model, can commit or rollback Model operations View operations

15. 14-15 Copyright © 2004, Oracle. All rights reserved. Adding Navigation Buttons Navigation Buttons DepartmentsView1 Drop As: Data Control Palette

16. 14-16 Copyright © 2004, Oracle. All rights reserved. Adding Form Action Buttons Cursor

17. 14-17 Copyright © 2004, Oracle. All rights reserved. Supplementing Button Functionality Use button events. The form action plus defined events are performed.

18. 14-18 Copyright © 2004, Oracle. All rights reserved. Using Expression Language Expression Language is: Used in combination with JSTL tags A way to provide dynamic content without scripts or JSP expressions "> Using a JSP expression to access an attribute: The simpler syntax of Expression Language:

19. 14-19 Copyright © 2004, Oracle. All rights reserved. Using EL Attributes To reference attributes: Enclose within ${} Nest by using dot notation or [] Optionally include scope <c:out value= "${sessionScope.cart.numberOfItems} ">

20. 14-20 Copyright © 2004, Oracle. All rights reserved. Using EL Literals and Operators Literals: Values not beginning with ${ Operators

21. 14-21 Copyright © 2004, Oracle. All rights reserved. Using EL Implicit Objects When referenced by name, the appropriate object is returned instead of the corresponding attribute. Examples: ${pageContext} returns the pageContext object. ${pageContext.request.contextPath} returns the context path (obtained from HttpServletRequest ). ${sessionScope.cart.numberOfItems} returns the numberOfItems property of the session- scoped attribute named cart. ${param["mycom.productId"]} returns the String value of the mycom.productId parameter.

22. 14-22 Copyright © 2004, Oracle. All rights reserved. Using EL to Customize a Page You can add conditional display logic using EL For example, display a message and value only if the value is not empty.

23. 14-23 Copyright © 2004, Oracle. All rights reserved. Summary In this lesson, you should have learned how to: Use the Property Inspector to modify visual components Use the Structure pane to modify data elements Use EL to add conditional display logic

24. 14-24 Copyright © 2004, Oracle. All rights reserved. Practice 14: Overview This practice covers the following topics: Modifying visual elements of a JSP –Using the formatting toolbar –Using the Property Inspector Adding navigation buttons to a JSP Adding a button to a JSP that invokes an external Web page Creating a style sheet and applying it to the JSP

25. 14-25 Copyright © 2004, Oracle. All rights reserved. Practice 14-1

26. 14-26 Copyright © 2004, Oracle. All rights reserved. Practice 14-1