Upload
oswin-hoover
View
219
Download
0
Embed Size (px)
DESCRIPTION
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:
Citation preview
14Copyright © 2004, Oracle. All rights reserved.
Enhancing the User Interface
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
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:
14-4 Copyright © 2004, Oracle. All rights reserved.
Using the Toolbar to Format Objects
Stylepoplist
Fontpoplist
Fontsize
Foregroundcolor
Backgroundcolor
Bold/italic/
underline
Align left/center/right
Numbered/bulleted
list
Decrease/increaseindent
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
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:
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
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 CSSfiles.
• Saving the fileupdates the CSSfor the currentapplicationworkspace.
14-9 Copyright © 2004, Oracle. All rights reserved.
Creating a New Style Sheet
CSS File
HTML
New Gallery
untitled1.css
Create Cascading Stylesheet
14-10 Copyright © 2004, Oracle. All rights reserved.
Editing Style Sheets
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.
14-12 Copyright © 2004, Oracle. All rights reserved.
Applying a Style Sheet to a Page
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 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
Modeloperations
Viewoperations
14-15 Copyright © 2004, Oracle. All rights reserved.
Adding Navigation Buttons
Navigation Buttons
DepartmentsView1
Drop As:
Data Control Palette
14-16 Copyright © 2004, Oracle. All rights reserved.
Adding Form Action Buttons
Cursor
14-17 Copyright © 2004, Oracle. All rights reserved.
Supplementing Button Functionality
• Use button events.• The form action plus
defined events areperformed.
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
<x:aTag att="<%= pageContext.getAttribute("aName") %>">
<x:aTag att= "${aName}">
Using a JSP expression to access an attribute:
The simpler syntax of Expression Language:
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} ">
14-20 Copyright © 2004, Oracle. All rights reserved.
Using EL Literals and Operators
• Literals: Values not beginning with ${
• Operators
<c:out value="Hello ${customer.firstName}"/>
<c:if test="${bean1.a < 3}" />
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.
14-22 Copyright © 2004, Oracle. All rights reserved.
Using EL to Customize a Page
You can add conditional display logic using ELFor example, display a message and value only if the
value is not empty.
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
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