Oracle ADF 11g Developer Lesson 2Name – Rakesh GujjarlapudiEmail Address – rakesh_gujj@yahoo.comIN THIS LAB, YOU LEARN HOW...
OVERVIEWThis tutorial shows you how to create a custom skin (.css file) to change the look and feel of an application.Purp...
7. In the Open Application dialog, select the file C:labsADFSkinADFSkinSampleADFSkinSample.jws and   click Open.    If you...
10. Next to the Connection field, click the Edit icon.11. In the Edit Database Connection dialog, type the following value...
12. Click Test Connection to confirm that you can connect.   Click OK if the connection was successful.13. Expand the Mode...
The Model project node contains all the data model Business Components needed for your application.    14. Now expand the ...
Click OK.3. In the Create ADF Skin File dialog, change the file name to MyNewSkin.css. Append MyNewSkin to the   existing ...
4. MyNewSkin.css opens by default in the design editor with a selector tree of components that you can   navigate to. When...
The trinidad-skins.xml file is a registry file of all custom skins available to an application.7. The source shows that yo...
Click the cross on the right hand corner of the current tab to close the editor.   The family name is used to configure th...
An easy way to find the CSS class is by using a free add-on for Mozilla Firefox called Firebug.   To install Firebug, in F...
Step 3: Changing the UI - Page Background and Font FamilyThe ADF skin defines rules that determine how to apply CSS style ...
Click OK.4. Using the drop down list, set the Background Image property to none.5. Click the Save All button in the toolba...
6. Switch to the Firefox window and reload the page.7. Notice the change of the background now reflected in your browser.8...
Each category may include one or more of these types of ADF Faces skin selectors.9. In the Property Inspector in the Font/...
12. In the Line Box section, set the Line Height to 18 px.13. Click the Save All button in the toolbar to save your work.1...
Dont close the browser window. You are now going to make changes to the look and feel of the Panel    Header.16. Switching...
18. Set the title-text0 > Font/Text > Color component to Red.19. Set the content0 component to the following properties:  ...
21. Click the Save All button in the toolbar to save your work.22. Reload the page in Firefox.23. Notice the changes in th...
Step 4: Updating the Look & Feel for Table Headers and Links   1. To see the current look and feel of the table headers, y...
Notice the rendering of the Employees table headers.4. In the next few steps, you are going to change the headers of the t...
6. In the Font/Text section set the Color attribute to Red from the drop down list.    The rendering pane should look like...
10. You are now going to change the look and feel of the links in the panel list. Observe the panel list under    the Welc...
13. For the link properties, in the Property Inspector, in the Font/Text section, set the following properties:         Pr...
14. Click the link:hover section in the rendering pane and in the Property Inspector, in the Font/Text    section, set the...
17. Observe the UI changes in the panel list. The links are now red and the underline state works the other        way aro...
Notice that there are a lot of existing components to define tabs.3. Select the AFTabAboveEndSelectedBackground:alias:ltr ...
Click OK. The value should now be:        Alias component                                   Background Image        AFTabA...
8. Select and copy all the text with the exception of the first 2 lines.    Close the readme.txt.9. With the MyNewSkin.css...
10. The clipboard text in the file to replace the selected statements.
11. Click the Design tab at the bottom of the editor and select the Panel Tabbed | af|panelTabbed to see    the rendering ...
14. To be able to see the new look and feel defined for the tabs, you need to press the Ctrl key and click the    reload b...
17. Click the Save All button in the toolbar to save your work.18. Switch back to Firefox.    and reload the page.19. Obse...
Step 6: Implementing Dynamic Skin ChangeTo be able to implement a Dynamic Skin UI change, perform the following steps:   1...
4. Copy the comment line of code with the skin-family tag, and paste it in place of the active skin-family   MyNewSkin tag...
8. Notice the commented section.9. Cut the end of comment tag (-->) and paste it at the end of the start comment tag line:...
12. The page loads up in the browser window.13. Use the Choose a Skin field and select MyNewSkin from the list of values.1...
15. The UI is dynamically changed.16. Experiment with other look and feel choices from the list.
Youve now completed the skin tutorial.SummaryIn this tutorial you saw how to change the look and feel of components such a...
Upcoming SlideShare
Loading in...5
×

Oracle ADF 11g Skinning Tutorial

6,827

Published on

• Create a new ADF Skin and check Skin values being used
• Change the page background and font family
• Update the look and feel for table headers and links
• Change the pane body and shape of tabs
• Implement dynamic skin change

3 Comments
11 Likes
Statistics
Notes
  • You can get this on below Oracle linlk :) -
    http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_83/jdtut_11r2_83.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • hi very good and useful tutorial thank you for the efforts
    so how i can download this tutorail i need it
    best regards
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Rakesh,
    I want to download this tutorial, can you please tell me how i can dowload this. or can you please mail me the same on - ramit.mathur27m@gmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,827
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
3
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Oracle ADF 11g Skinning Tutorial"

  1. 1. Oracle ADF 11g Developer Lesson 2Name – Rakesh GujjarlapudiEmail Address – rakesh_gujj@yahoo.comIN THIS LAB, YOU LEARN HOW TO CREATE A CUSTOM SKIN (CSSFILE) FOR AN APPLICATION AND SEE HOW THE CHANGES YOUMAKE TO THE SKIN AFFECT THE LOOK AND FEEL OF THEAPPLICATION.
  2. 2. OVERVIEWThis tutorial shows you how to create a custom skin (.css file) to change the look and feel of an application.PurposeIn this lesson, you learn how to create a custom skin (css file) for an application and see how the changes youmake to the skin affect the look and feel of the application.Step 1: Getting Started 1. It assumed that you have an Oracle db installed, with the HR schema also installed. 2. Unzip the adfskin.zip file to a local directory of your choice (i.e. labs). 3. Start JDeveloper by selecting Start > All Programs > Oracle Fusion Middleware 11.1.2.0.0 > JDeveloper Studio 11.1.2.0.0 4. If prompted for a Role, choose Studio Developer (All Features) and click OK. 5. Close the Tip of the Day window. Once loaded, the JDeveloper IDE appears. 6. Click the Open Application link in the Application Navigator. From the predefined application you downloaded, you create a new ADF Skin file (.css) to modify the look and feel of the sample application.
  3. 3. 7. In the Open Application dialog, select the file C:labsADFSkinADFSkinSampleADFSkinSample.jws and click Open. If you are prompted to migrate the project, click Yes to confirm.8. Once the application is loaded in JDeveloper, check the database connection. Right-click the Model node and select Project Properties from context.9. In the Project Properties dialog, select the Business Components and if required click Load Extension to load the appropriated library files.
  4. 4. 10. Next to the Connection field, click the Edit icon.11. In the Edit Database Connection dialog, type the following values. Note that the values provided here as example may need to be modified to work with your environment. Property Value Connection Name hrconn Username/Password hr / <your hr password> Save Password Checkbox checked Driver Thin Host Name The machine where the schema is installed (e.g. localhost) SID SID The database where the HR schema is installed (XE, orcl...) Your application needs to be able to communicate with the database.
  5. 5. 12. Click Test Connection to confirm that you can connect. Click OK if the connection was successful.13. Expand the Model project node to review the Business Components created for this application. The Application Navigator should look like the following:
  6. 6. The Model project node contains all the data model Business Components needed for your application. 14. Now expand the ViewController node and feel free to navigate through the nodes to review the existing components. The Application Navigator should look like the following:Step 2: Creating a New ADF Skin and Reviewing Skin ConfigurationAn ADF skin is a type of CSS file where you define CSS style properties based on the Cascading Style Sheet (CSS)specification for the component for which you want to customize the appearance. 1. In the Application Navigator, Right-click the ViewController project and select New from the context menu. 2. In the New Gallery, expand the Web Tier node, select JSF/Facelets and in the right hand pane, select ADF Skin as the item.
  7. 7. Click OK.3. In the Create ADF Skin File dialog, change the file name to MyNewSkin.css. Append MyNewSkin to the existing skins directory path. Check the Use as the default skin family for this project checkbox and in the Extends field choose to extend the fusionFx-simple-v2.desktop skin from the list of values. Click OK. Oracle ADF provides a set of ADF skins that you can extend...
  8. 8. 4. MyNewSkin.css 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. Scroll down in the Navigator to locate the Home.jspx entry. Right-click and select Run from context to launch the page in the Firefox browser. This verifies that your application is running and has the look and feel of the skin you have extended, which is fusionFx-simple-v2.desktop. This is because you have not yet made any changes to your skin file to override the fusionFx- simple-v2 look and feel. Note that after a fresh install of JDeveloper, the first time you deploy your application, you need to create a default domain for WebLogic server.6. While your page is being loaded, expand the WEB-INF node and double-click trinidad-skins.xml to open it in the editor.
  9. 9. The trinidad-skins.xml file is a registry file of all custom skins available to an application.7. The source shows that your skin file, MyNewSkin has been added to other existing skins. These skins are registered skins and available for use by your project. Click the cross on the right hand corner of the current tab to close the editor.8. Double-click the trinidad-config.xml file. It shows that the current skin for your application is MyNewSkin, the skin you just created.
  10. 10. Click the cross on the right hand corner of the current tab to close the editor. The family name is used to configure the custom skin that is applied to the running application.9. Switch to the Firefox window, now the Home page should be loaded in the browser.10. From the main menu toolbar, select View > Firebug.
  11. 11. An easy way to find the CSS class is by using a free add-on for Mozilla Firefox called Firebug. To install Firebug, in Firefox, select Tools | Add-ons from the Firefox menu and type firebug in the search field. (Download, install and reload firefox).11. Move the Debug pane at the bottom of your page to make it visible. It should display the HTML tab by default.12. In the right hand pane, the Style tab shows that youre using MyNewSkin . Hover over the MyNewSkin link, it displays the location of the skin file used. Confirm that it is the one youve added to your application. Notice that for now, the look and feel of the page is still using the default fusion style.13. From the main menu toolbar, re-select View > Firebug to hide the Debug pane.14. Return to JDeveloper without closing the browser window.
  12. 12. Step 3: Changing the UI - Page Background and Font FamilyThe ADF skin defines rules that determine how to apply CSS style properties to specific components or groups ofcomponents. 1. In the Design editor of MyNewSkin, select the Faces Component Selectors > Document > af|document entry. 2. In the Property Inspector (use View | Property Inspector from the main menu if the pane is not visible), change the background color for a yellowish one. Click the down arrow at the right of the Background Color field and select Edit. 3. In the Background Color dialog, type #fcfacb in the RGB Hex filed.
  13. 13. Click OK.4. Using the drop down list, set the Background Image property to none.5. Click the Save All button in the toolbar to save your work.
  14. 14. 6. Switch to the Firefox window and reload the page.7. Notice the change of the background now reflected in your browser.8. You are now going to change the font of the application text. Without closing the browser window, switch back to JDeveloper and in the Skin editor, expand the Global Selector Aliases | Font nodes, and select the .AFDefaultFontFamily entry.
  15. 15. Each category may include one or more of these types of ADF Faces skin selectors.9. In the Property Inspector in the Font/Text section, from the drop down list on the Font Family attribute, select Times New Roman.10. In the Navigator, select the .AFDefaultFont:alias. The :alias pseudo-class is a special type of class that serves as a syntax aid to organize code in your skin file.11. In the Font/Text section, set the Font Size to 12 px.
  16. 16. 12. In the Line Box section, set the Line Height to 18 px.13. Click the Save All button in the toolbar to save your work.14. Switch to the browser window and reload the page.15. Notice the font changes in the page.
  17. 17. Dont close the browser window. You are now going to make changes to the look and feel of the Panel Header.16. Switching back to JDeveloper, collapse the Global Selector Aliases node and in the Faces Component Selectors, expand the Panel Header | Pseudo-Elements nodes and update three of the components. Select the title0 node. Pseudo-elements are used to denote a specific area of a component that can have styles applied.17. In the Property Inspector, for the title0 component set the Background Color to #fff27e. (Enter the value and press Return)
  18. 18. 18. Set the title-text0 > Font/Text > Color component to Red.19. Set the content0 component to the following properties: Section Property Value Common Background Color White (from LOV) Common Border 1px solid Common Border Color #fff27e20. The new rendering in the design editor should display like this:
  19. 19. 21. Click the Save All button in the toolbar to save your work.22. Reload the page in Firefox.23. Notice the changes in the UI. Also observe that only the Home tab is selectable at the moment. You need to login to make other tabs accessible.
  20. 20. Step 4: Updating the Look & Feel for Table Headers and Links 1. To see the current look and feel of the table headers, you need to login to the application. Click the Login link. 2. In the Login dialog, enter sking/Welcome1234. and click OK. 3. The tabs are now selectable. Click the Employees Overview tab.
  21. 21. Notice the rendering of the Employees table headers.4. In the next few steps, you are going to change the headers of the table to yellow with red font. Switch back to JDeveloper. In the Faces Component Selectors, collapse the PanelHeader node and expand the Column | Pseudo-Elements node and select the column-header-table entry.5. In the Property Inspector, in the Common section set the following properties: Property Value Background Color #fff27e Background Image none
  22. 22. 6. In the Font/Text section set the Color attribute to Red from the drop down list. The rendering pane should look like the following:7. Click the Save All button in the toolbar to save your work.8. Reload the page in Firefox.9. Click the Employees Overview tab and notice the changes in the table headers.
  23. 23. 10. You are now going to change the look and feel of the links in the panel list. Observe the panel list under the Welcome to Our Site message. Hover your mouse over the hyperlink text, and note that then the text becomes underligned.11. Switch back to JDeveloper, collapse the Column node and expand the Panel List > Pseudo-Elements one. Select the link entry.12. Notice the two sections in the rendering pane, the top one for link properties and the bottom one for the link hover properties.
  24. 24. 13. 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)
  25. 25. 14. Click the link:hover section in the rendering pane and in the Property Inspector, in the Font/Text section, set the following properties: Property Value Font Weight bold (from LOV) Text Decoration none (from LOV)15. Click the Save All button in the toolbar to save your work.16. Reload the page in Firefox.
  26. 26. 17. Observe the UI changes in the panel list. The links are now red and the underline state works the other way around when hovering over.Step 5: Updating the Pane Body and the Shape of the TabsYou are now going to change the look and feel of the tabs, using different images for the tab shape, and definingdifferent fonts and colors. For this, you use image files provided with the application. 1. Dont close the browser window. Switch back to JDeveloper and collapse the Panel List node. 2. Navigate to the Global Selector Aliases Folder and expand the node Component Group Tabs. (NEW SCREEN)
  27. 27. Notice that there are a lot of existing components to define tabs.3. Select the AFTabAboveEndSelectedBackground:alias:ltr entry.4. In the Property Inspector in the Common section, click the right-most down arrow next to the Background Image property and select Edit from context.5. 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.
  28. 28. Click OK. The value should now be: Alias component Background Image AFTabAboveEndSelectedBackground:alias t3_above_end_a.png6. Repeat the above step for the following End tab parameters: Alias component Background Image .AFTabAboveEndUnselectedBackground:alias:ltr t3_above_end_n.png .AFTabAboveEndUnselectedDisabledBackground:alias:ltr t3_above_end_d.png You could repeat the operation for the Middle and the Start components. 7. Populate the Middle and Start values from a prepared file, in the Application Navigator, locate the readme.txt file and double-click to open it in the source editor.
  29. 29. 8. Select and copy all the text with the exception of the first 2 lines. Close the readme.txt.9. With the MyNewSkin.css file displayed, 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. Right-click and Paste from context.
  30. 30. 10. The clipboard text in the file to replace the selected statements.
  31. 31. 11. Click the Design tab at the bottom of the editor and select the Panel Tabbed | af|panelTabbed to see the rendering for the new tab definitions.12. Click the Save All button in the toolbar to save your work.13. Switch to Firefox browser window.
  32. 32. 14. To be able to see the new look and feel defined for the tabs, you need to press the Ctrl key and click the reload button at the same time (In case the [Ctrl] + [Reload] action does not refresh the page, re-run the home page from JDeveloper). Observe the new rendering of your page. Click the Employees Overview tab to see the look and feel of active versus unselected tabs.15. Switch back to JDeveloper. Now you need to update the text color of the link in the tabs to better match our styling. Navigate to the af|panelTabbed node and click the Source tab.16. Enter the following statements at the bottom of the code to define the new tab aspect. af|panelTabbed::header-center { background-image: url("../NewImages/af_panelTabbed/ptt.png"); } af|panelTabbed::tab af|panelTabbed::tab-text-link { color: white; font-weight: bold; } af|panelTabbed::tab:selected af|panelTabbed::tab-text-link { color:red; font-weight: bold; } af|panelTabbed::tab:hover af|panelTabbed::tab-text-link { color:white; } af|panelTabbed::tab:selected:hover af|panelTabbed::tab-text-link { color:red }
  33. 33. 17. Click the Save All button in the toolbar to save your work.18. Switch back to Firefox. and reload the page.19. Observe the new rendering of your page. Click the Employees Overview tab to see the look and feel of active versus unselected tabs.
  34. 34. Step 6: Implementing Dynamic Skin ChangeTo be able to implement a Dynamic Skin UI change, perform the following steps: 1. For this new section, you 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 dont need to stop WebLogicServer. 3. Now enable the skin drop down list so you can switch the skin dynamically. Do this by updating the trinidad-config file with the reference to the dynamic code. Select the trinidad-config file editor. The Source looks like the following:
  35. 35. 4. Copy the comment line of code with the skin-family tag, and paste it in place of the active skin-family MyNewSkin tag. <skin-family>#{sessionScope.skinFamily!=null?sessionScope.skinFamily : fusion}</skin-family>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.
  36. 36. 8. Notice the commented section.9. Cut the end of comment tag (-->) and paste it at the end of the start comment tag line: <!-- Uncomment once you have updated trinidad-config to enable dynamic loading of skins-->10. Click the Save All button in the toolbar to save your work.11. Right click the Home.jspx page and select Run to restart the page.
  37. 37. 12. The page loads up in the browser window.13. Use the Choose a Skin field and select MyNewSkin from the list of values.14. The new UI is dynamically changed. Use the Choose Skin field and select another Skin flavor from the list (i.e. princess-skin).
  38. 38. 15. The UI is dynamically changed.16. Experiment with other look and feel choices from the list.
  39. 39. Youve now completed the skin tutorial.SummaryIn this tutorial you saw how to change the look and feel of components such as panels, panel tabs, fonts,table headers and links by creating your own skin (.css file) in JDeveloper. Finally, you updated yourapplication so that the UI can be dynamically changed at run time. You learned how to:  Create a new ADF Skin and check Skin values being used  Change the page background and font family  Update the look and feel for table headers and links  Change the pane body and shape of tabs  Implement dynamic skin changeTo learn more about ADF skins, refer to:  Skin Editor Users Guide for Oracle ADF  Customizing the Appearance Using Styles and Skins" in Web User Interface Developers Guide for Oracle ADF  Creating and Managing Skins" in Developers Guide for Oracle WebCenter  Selectors for Skinning ADF Faces Components

×