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

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


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:


Using the Toolbar to Format Objects

Stylepoplist

Fontpoplist

Fontsize

Foregroundcolor

Backgroundcolor

Bold/italic/

underline

Align left/center/right

Numbered/bulleted

list

Decrease/increaseindent


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


Adding Images to JSPs

To add images to JSPs, drag an image file to the Visual Editor:


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


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.


Creating a New Style Sheet

CSS File

HTML

New Gallery

untitled1.css

Create Cascading Stylesheet


Editing Style Sheets


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.


Applying a Style Sheet to a Page


Adding Buttons to a JSP

• Form action buttons: Submit and Reset• Data control buttons

– Model: Commit and Rollback– View: Navigation and DML


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


Adding Navigation Buttons

Navigation Buttons

DepartmentsView1

Drop As:

Data Control Palette


Adding Form Action Buttons

Cursor


Supplementing Button Functionality

• Use button events.• The form action plus

defined events areperformed.


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:


Using EL Attributes

To reference attributes:• Enclose within ${}• Nest by using dot notation or []• Optionally include scope

<c:out value="${sessionScope.cart.numberOfItems} ">


Using EL Literals and Operators

• Literals: Values not beginning with ${

• Operators

<c:out value="Hello ${customer.firstName}"/>

<c:if test="${bean1.a < 3}" />


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.


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.


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


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

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

Documents

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