Using ADF Skin in JDevelope - Oracle...Using ADF Skin in JDeveloper 11g to change the Look and Feel...

Using ADF Skin in JDeveloper 11g to change the Look and Feel of an Application

Purpose

This Lab shows you how to create a custom skin (.css file) to change the look and feel of an application.

Time to Complete

Approximately 45 minutes.

Topics

This tutorial covers the following topics:

Starting Working with the Starter Application

Reviewing Skin Configuration

Changing the UI

Implementing Dynamic Skin Change

Start working with the Starter Application

You will use a predefined application and create a new ADF Skin file (.css) to skin the look and feel of the sample application. To upload

and run the predefined application, perform the following steps:

1. Click the Open Application link in the Application Navigator.

2. In the Open Application dialog, select the file C:\labs\skining\ADFSkinSample\ADFSkinSample.jws and click Open.

Using ADF Skin in JDeveloper 11g to change the Look and Feel of an App... http://stcontent.oracle.com/content/dav/oracle/Libraries/Java Curriculum ...

1 of 38 11/25/2010 6:37 PM

3. When loaded in JDeveloper, you can expand the Model node and review the Business Components created for this application.

Collapse the Model node.


2 of 38 11/25/2010 6:37 PM

4. Now expand the ViewController node and feel free to navigate through the nodes to review the existing components.

5. Right click the ViewController project and select New from dialog.

6. In the New Gallery, expand the Web Tier node, select JSF/Facelets and in the right hand pane, select ADF Skin as the item.


3 of 38 11/25/2010 6:37 PM

Click OK.

7. In the Create ADF Skin File dialog, change the file name to MyNewSkin.css. Append \MyNewSkin to the existing skins directorypath. Select the checkbox to make it as the default skin family for this project and in the Extends field choose to extend thefusion.desktop skin from the list of values.

Click OK.


4 of 38 11/25/2010 6:37 PM

8. The new skin file appears in the Application Navigator under the Web Content | skins | MyNewSkin nodes.

9. MyNewSkin opens by default in the design editor with a selector tree of components that you can navigate to. When you navigate

into the component, the preview will be updated with a view of that component.

If you click the Source editor tab, you will see that you have a new empty skin file.


5 of 38 11/25/2010 6:37 PM

10.Scroll down in the Navigator to locate the Home.jspx entry. Right-click and select Run from context to launch the page in Firefox

browser. This will verify that your application is running and has the look and feel of the skin you have extended, which is fusion.This is because you have not yet made any changes to your skin file to override the fusion look and feel.

Back to Topic List

Reviewing Skin Configuration

To verify the skin file being used for your application, perform the following steps:

1.While your page is being loaded, expand the WEB-INF node and double-click trinidad-skins.xml to open it in the editor.


6 of 38 11/25/2010 6:37 PM

2.The source shows that your skin file MyNewSkin has been added to other existing skins. These skins are potentially usable foryour project.

Click the cross on the right hand corner of the current tab to close the editor.

3.Double-click the trinidad-config.xml file. It shows that the current used skin for your application is MyNewSkin, you just created.


7 of 38 11/25/2010 6:37 PM

Click the cross on the right hand corner of the current tab to close the editor.

4.Switch to the Firefox window, now the Home page should be loaded up in your browser.

5.From the main menu toolbar, select View | Firebug.


8 of 38 11/25/2010 6:37 PM

Firebug is a convenient tool for web development allowing debugging, editing, and monitoring CSS, HTML, JavaScript and Net

requests in any web page.

6.Move up the Debug pane at the bottom of your page. It should display the HTML tab by default.

7. In the Right hand pane, the Style tab shows that you're using MyNewSkin . Hover over the MyNewSkin link, it displays thelocation of the skin file used and confirm that it is the one you've added to your application.

Notice that for now, the look and feel of the page is still using the default fusion style since we haven't made any changes yet toMyNewSkin to extend it.

8.From the main menu toolbar, re-select View | Firebug to hide the Debug pane.


9 of 38 11/25/2010 6:37 PM

9.Return to JDeveloper without closing the browser window.

Back to Topic List

Changing the UI

Using this new skin file we are now going to make various changes to give a different look and feel to the application.

Changing the Background of the Pages

Changing the Font Family

Updating the Table Headers Look and Feel

Changing the Link Look and Feel

Updating the Tab Pane Body

Changing the Shape of Tabs

Back to Topic List

Changing the Background of the Pages

1. In the Design editor of MyNewSkin, select the Faces Component Selectors | Document | af:document entry.


10 of 38 11/25/2010 6:37 PM

2. In the Property Inspector (use View | Property Inspector from the main menu if the pane is not visible), change thebackground color for a yellowish one. Click the down arrow at the right of the Background Color field and selectEdit.

In the Background Color dialog, type #fcfacb in the RGB Hex filed.


11 of 38 11/25/2010 6:37 PM

Click OK.

3. Using the drop down list, set the Background Image property to none.

4.Click the Save All button in the toolbar to save your work.

5. Switch to the Firefox window and reload the page.


12 of 38 11/25/2010 6:37 PM

6. Notice the change of the background now being reflected in your browser.

Back to Topic

Back to Topic List

Changing the Font Family

You are now going to change the Font of the application. To do this, perform the following steps:

1. Without closing the browser window, switch back to JDeveloper and in the Skin editor, expand the Global Selector

Aliases node, then scroll down and select the .AFDefaultFontFamily entry.


13 of 38 11/25/2010 6:37 PM

2. In the Property Inspector in the Font/Text section, from the drop down list on the Font Family attribute, select TimesNew Roman.

3. In the Navigator, select the .AFDefaultFont:alias.

In the Font/Text section, set the Font Size to 12 px.

In the Line Box section, set the Line Height to 18 px.


14 of 38 11/25/2010 6:37 PM


5. Switch to the Browser window and reload the page.

6. Notice the font changes in the page.


15 of 38 11/25/2010 6:37 PM

Don't close the Browser window. Now we are going to make changes on the look and feel of the Panel Header.

7. Switching back to JDeveloper, collapse the Global Selector Aliases node and in the Faces ComponentSelectors, expand the Panel Header | Pseudo-Elements nodes and update three of the components.

Select the title0 node.

In the Property Inspector, for the title0 component set the Background Color to #fff27e. (Enter the value and pressReturn)

Set the title-text0 component to:


16 of 38 11/25/2010 6:37 PM

Section Property Value

Font/Text Color Red (from LOV)

Set the content0 component to:

Section Property Value

Common Background Color White (from LOV)

Common Border 1px solid

Common Border Color #fff27e

The new rendering in the design editor should display like this:


17 of 38 11/25/2010 6:37 PM


9. Reload the page in Firefox.

10. Notice the changes on the UI. Also observe that only the Home tab is selectable at the moment. We need to login to

make other tabs accessible.

Back to Topic

Back to Topic List

Updating the Table Headers Look and Feel

To see the current look and feel of the table headers, you need to login to the application. To do so, perform the following steps:

1. Click the Login link to login to the application.


18 of 38 11/25/2010 6:37 PM

In the Login dialog, enter sking/Welcome1234. and click OK.

2. The tabs are now selectable. Click the Employees Overview tab.

Notice the rendering of the Employees table headers.

We are going to change the headers of the table to yellow with red font.


19 of 38 11/25/2010 6:37 PM

3. Switch back to JDeveloper. In the Faces Component Selectors, collapse the PanelHeader node and expand theTable Column | Pseudo-Elements node.

.

4. Select the column-header-table entry, and in the Common section set the following properties:

Property Value

Background Color #fff27e

Background Image none

5. In the Font/Text section set the Color attribute to Red from the drop down list.

The rendering pane should look like the following:



20 of 38 11/25/2010 6:37 PM


8. Click the Employees Overview tab and notice the changes in the table headers.

Back to Topic

Back to Topic List

Changing the Link Look and Feel

We are now going to change the look and feel of the links in the panel list.

1. Observe the panel list under the Welcome to Our Site message. Hover your mouse over the hyperlink texts.


21 of 38 11/25/2010 6:37 PM

2. Switch back to JDeveloper, collapse the Table Column node and expand the Panel List | Pseudo-Elements one.Select the link entry.

Notice the two sections in the rendering pane, the top one for link properties and the bottom one for the link hover

properties.

3. For the link properties, in the Property Inspector, in the Font/Text section, set the following properties:

Property Value

Color Red (from LOV)

Font Weight bold (from LOV)

Text Decoration underline (from LOV)


22 of 38 11/25/2010 6:37 PM

4. Click the link:hover section in the rendering pane and in the Property Inspector, in the Font/Text section, set thefollowing properties:

Property Value

Font Weight bold (from LOV)

Text Decoration none (from LOV)



23 of 38 11/25/2010 6:37 PM


7. Observe the UI changes in the panel list. The links are now red and underlined.

Back to Topic

Back to Topic List

Updating the Tab Pane Body

Update the skin so that the look and feel of the tab pane body is similar to the Panel Header one.

1.Observe the color differences within the Panel Header and the Tab content.


24 of 38 11/25/2010 6:37 PM

2.Don't close the browser window. Switch back to JDeveloper and collapse the Panel List node.

3.Expand the Panel Tabbed | Pseudo-Elements. The body of a panel tab has 3 components, the body-start (in green), the body (in yellow) and thebody-end (in red). The following image uses different colors to illustrate each part of the body. We want these properties to all be the same (white).

Select the body entry.

4. In the Property Inspector, in the Common section set the following values:

Property Value

Background Color White



25 of 38 11/25/2010 6:37 PM

5.Repeat the last step for the body-start component.

Property Value



6.Repeat the last step for the body-end component.

Property Value




8.Switch to Firefox and reload the page.


26 of 38 11/25/2010 6:37 PM

9.Click the Employees Overview tab to notice the changes.

Back to Topic

Back to Topic List

Changing the Shape of Tabs

Now we are going to change the look and feel of the Tabs, using different images for the tab shape, and defining other fonts and colors.

For this we will use image files provided with the application.

1. Switch back to JDeveloper. In the Selector navigator, collapse the Pseudo-elements node of the Panel Tabbed, andexpand the Component Aliases one.

Notice that there are a lot of existing components to define tabs. Some are for tabs located at the top (Above ones) andothers are for the tabs located at the footer (Below ones). Each tab has a start, middle and end part. We just want to

change header tabs in our application.

2. Select the AFTabAboveEndSelectedBackground:alias entry.


27 of 38 11/25/2010 6:37 PM

3.In the Property Inspector in the Common section, click the right most button next to the Background Image

property.

In the Edit Property dialog, navigate to skins | NewImages | af_panelTabbed where existing images are already

provided and select the t3_above_end_a.png.

Click OK.

The value should now be:

Alias component Background Image

.AFTabAboveEndSelectedBackground:alias t3_above_end_a.png


28 of 38 11/25/2010 6:37 PM

4. Repeat the above step for the following End parameters:


.AFTabAboveEndUnselectedBackground:alias t3_above_end_n.png

.AFTabAboveEndUnselectedDisabledBackground:alias t3_above_end_d.png

Eventually, you could repeat the operation for the Middle and the Start components to populate the following values:


.AFTabAboveMiddleSelectedBackground:alias t3_above_mid_a.png

.AFTabAboveMiddleUnselectedBackground:alias t3_above_mid_n.png

.AFTabAboveMiddleUnselectedDisabledBackground:alias t3_above_mid_d.png

.AFTabAboveStartSelectedBackground:alias:ltr t3_above_start_a.png

.AFTabAboveStartUnselectedBackground:alias:ltr t3_above_start_n.png

.AFTabAboveStartUnselectedDisabledBackground:alias:ltr t3_above_start_d.png

But there is a prepared file to do it.

5. In the Application Navigator, locate the readme.txt file and double-click to open it in the source editor.

6. Select and copy all the text with the exception of the first 2 lines.


29 of 38 11/25/2010 6:37 PM

Close the readme.txt.

7. Displaying the MyNewSkin.css file, click the Source tab at the bottom of the editor pane. Scroll down at the bottom of

the file to find the first image uses defined, then select all of these related component definitions.


30 of 38 11/25/2010 6:37 PM

Paste the clipboard text in the file to replace the selected statements.


31 of 38 11/25/2010 6:37 PM

8. Click the Design tab at the bottom of the editor to see the rendering for the new tab definitions. (you may need toreopen the Panel Tabbed | Component Aliases and select the first element).


10.Switch to Firefox browser window. To be able to see the new look and feel defined for the tabs, you need to press theCtrl key and click the reload button at the same time.


32 of 38 11/25/2010 6:37 PM

Observe the new rendering of your page. Click the Employees Overview tab to see the look and feel of active versusunselected tabs.

Back to Topic

Back to Topic List

Implementing Dynamic Skin Change

To be able to implement a Dynamic Skin UI change, perform the following steps:

1. For this new section, we need to re-deploy the application, so close the browser window this time and switch back to JDeveloper.

2. In the Log window, click the arrow within the Stop red icon and select ADFSkinSample to stop the running application. Notice that

you don't need to stop WebLogicServer.


33 of 38 11/25/2010 6:37 PM

3. Now enable our skin drop down list so we can switch the skin dynamically. Do this by updating the trinidad-config with the referenceto our dynamic code. Select the trinidad-config file editor.

The Source looks like the following:

4. Copy the comment line of code with the skin-family tag, and paste it in place of the active skin-family tag.

<skin-family>#{sessionScope.skinFamily!=null?sessionScope.skinFamily : 'fusion'}</skin-family>


34 of 38 11/25/2010 6:37 PM

5. In the Application Navigator, double-click the Home.jspx entry to open the page in the Design editor.

6. In the Design editor, click within the panel group layout component underneath myCompanyLogo. This selection highlights the

corresponding component in the Structure pane.

7. Click the Source tab at the bottom of the editor pane. The panelGroupLayout should be highlighted.


35 of 38 11/25/2010 6:37 PM

8. Notice the commented section.

9. Cut the end of comment tag (-->) and paste it at the end of the start comment tag line:



These new statements add a selector field to the page allowing you to choose a different Skin from a list of values.


11.Right click the home.jspx page and select Run for restart the page.


36 of 38 11/25/2010 6:37 PM

12.The page loads up in the browser window. Use the Choose a Skin field and select MyNewSkin from the list of values.

13.The new UI is dynamically changed. Use the Choose Skin field and select another Skin flavor from the list (i.e. princess-skin).

14.The new UI is dynamically changed.


37 of 38 11/25/2010 6:37 PM

15.Experiment with other look and feel choices from the list.

16.You've now completed the skin lab.


38 of 38 11/25/2010 6:37 PM

Date post:	30-Jun-2020
Category:	Documents
Upload:	others
View:	33 times
Download:	0 times

Using ADF Skin in JDevelope - Oracle...Using ADF Skin in JDeveloper 11g to change the Look and Feel...

Documents