Colorful WebDynpro Applications

SDN Community Contribution
(This is not an official SAP document) Disclaimer & Liability Notice
This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

© 2005 SAP AG

The SAP Developer Network: http://sdn.sap.com

1

.........................................................................................................................2 Applies To:......1 Table of Contents ...............................11 Changing Font properties for a specific UI Element .........................3 Creating custom themes ...................................................................................4 Developing a Theme Editor Project.............................................................................................................................................................................................12 Disclaimer & Liability Notice ......3 Summary ......................................................................9 Limitations........................4 Steps Involved..............13 Author Bio...3 Need for Themes.............................................................Colorful WebDynpro Applications Table of Contents SDN Community Contribution .....................................................4 Settings in Visual Administrator ....................................................................................................................................................1 (This is not an official SAP document) .........................................................................................................1 Disclaimer & Liability Notice ..................................................................................................................................................................................................................................................................................................................................................................com 2 .........12 Application Specific Themes ................................13 © 2005 SAP AG The SAP Developer Network: http://sdn..................................................................................................3 About WebDynpro ...........................................................................................................................................................................................................................................................................................................................................................................................................................................3 Introduction to NetWeaver Developer Studio.....................................................sap....................................................11 Results............................................12 Conclusion..............................................................................................................................................................................................................................................................................................

We can write less code and fix bugs in a shorter time with lesser effort.Colorful WebDynpro Applications Applies To: SAP Web Application Server 6. For example if we are designing an ESS application for SAP we will be forced to maintain the SAP‘s standard blue.. So SAP does not provide them directly. If we include a feature in WebDynpro. Because logos and colors form an integral part of a company’s identity. About WebDynpro WebDynpro is a great modeling environment which stores the user-interface details in the form of metadata.40 SP 9 and SP11. How to implement them and the extent to which we can stretch their capabilities. NetWeaver Developer Studio 2. as it is used for different platforms like MI.It also briefs about the need for themes. an environment to develop J2EE projects and a lot more. They define their identity and companies will never sacrifice them.sap. WebDynpro does not come with a design environment where there is a flexibility to edit the UI element features and its colors. using WebDynpro modeling tools we are forced to maintain homogeneity in the design of user interfaces. Summary This document discusses about creating theme editor projects in WebDynpro and applying them to WebDynpro applications . we have to ensure that it is compatible with all the environments.9 and 2. © 2005 SAP AG The SAP Developer Network: http://sdn. By: Bharathwaj Company: Satyam Computer Services Ltd. It increases a programmer’s productivity by manifolds.0. Date: 15 June 2005 Introduction to NetWeaver Developer Studio SAP NetWeaver Developer Studio is an integrated Development environment with a standard set of tools which include a standard modeling environment for developing user-interfaces (WebDynpro). a tool to keep track of all the parts of a large scale program that is being developed by many developers (JDI).11. Instead they give the “Themes Editor “as an un-supported version. And it is not easy to bring it in. Need for Themes When WebDynpro is so well designed why do we need themes? It is because when we develop solutions for a particular enterprise.0. white and orange tinted yellow base throughout our applications.com 3 .

) For SP11 http://sapmats-de.servlet_1.themeseditor_1. If we upgrade our stack we have to upgrade this zip file to the corresponding version.com 4 . https://www.cm.cgi?id=8Z6FOZ0O8OU04KYDBLFFEA6EAUP3GGUF6RPRMC4LF4A3BVH28U For SP12 http://sapmats-de. Steps Involved Theme editing does not come in the standard set of installation.sap. https://www.sap. We can only edit an existing theme.sdn.Colorful WebDynpro Applications Creating custom themes Developing a Theme Editor Project There are a few steps in putting our own customized themes. com.sap.com/irj/servlet/prt/portal/prtroot/com.1. The corresponding files for SP11 and SP12 are available in the following links.previeweditor_1.cgi?id=1979MBH6BK6113CFUVAGAIS67J11E6DI8N5KOZ9UWARJ3RYIRE 2. The 3 plug-ins are: com.zip Note: NW04Stack09Themes is suitable for NW 04 stack 9 only. 1. NW04Stack09Themes And it is available in the following link.km.sdn.ur. We have to download a few files for this purpose. (Link paths might change in the future.sapag.sap.com/sdn/downloaditem.1.de/download/download.6. For editing the themes in NDS (NetWeaver Developer Studio) we have to download a few plug-ins .Copy these plug-ins to your SAP\JDT|eclipse\plugins folder.de/download/download.8.ur.sapag.ur.htm © 2005 SAP AG The SAP Developer Network: http://sdn. We can’t create a new theme from scratch.docs/business_packages/a1-84/NW04Stack09Themes.sdn?res=/html/themeeditor_download.8 and com.sap. The first of these is a zip file containing the standard themes provided by SAP. Download this file and unzip it in your local drive.sap.sap.1.

open NDS go to windows Design/themes open perspective choose SAP UR 4.Colorful WebDynpro Applications 3. Next go to File New Select a UR themes Editor project. After copying these plug-ins.com 5 . © 2005 SAP AG The SAP Developer Network: http://sdn.sap.

com 6 . font-color. © 2005 SAP AG The SAP Developer Network: http://sdn. Select a standard project from the existing themes and open it. 6. Usually the font.. font-size.Colorful WebDynpro Applications 5. Give the name of the project and point the project location to the path where you have downloaded the NW04Stack09Themes folder (as described in step 1). background color etc. We can select any element and edit its properties.sap. Now we will able to see the entire UI element’s in the left hand side of the screen.

Give it a theme name and a theme ID.Colorful WebDynpro Applications Here we are editing the properties of the group and the basic background color. (Otherwise it will usually generate style-sheets for the default browser alone. We are also changing the base font to Monotype Corsiva.sap.) 9.com 7 . After editing the necessary UI elements to suit to our requirements.) 10. Go to Generate and generate style sheets for all browsers and sub-design parts to ensure compatibility with a larger range of browsers. Save the design. (The editing of font type is not displayed here. © 2005 SAP AG The SAP Developer Network: http://sdn.

com 8 . <Drive name>:\sap\<instance name>\JC00\j2ee\cluster\server0\temp\webdynpro\web\sap. (As in step 1 and step 5). A folder with the corresponding theme name will be generated in the folder which we have pointed as the project location.sap.com\tc~wd~dispwda\global\SSR\themes © 2005 SAP AG The SAP Developer Network: http://sdn.Colorful WebDynpro Applications 11. 12. We should copy the whole folder and paste it in the following path in the server.

© 2005 SAP AG The SAP Developer Network: http://sdn.com Select the property sap.com 9 .default and set the following custom value.com/tc~wd~dispwda/global/SSR/themes/<theme name> Here the theme name is ThemeTest. http://<server name>:50000/webdynpro/resources/sap.Colorful WebDynpro Applications Settings in Visual Administrator 13. Go to visual administrator and server services Configuration Adapter tc~wd~dispwda Property Sheet Default. WebDynpro sap.sap.theme. Open it in edit mode.

Otherwise it will take the default portal theme for WebDynpro iViews.com 10 .sap.useWebDynproStylesheet = True Portal uses this theme in a WebDynpro iView.Colorful WebDynpro Applications . Now when we restart the server and deploy our WebDynpro applications the new custom theme will be applied. (If sap. © 2005 SAP AG The SAP Developer Network: http://sdn.

Change the font in the font-family to the required value (say Arial Black). font-style: normal. Theoretically when we follow this model we can select only one common font for all the UI elements. There have been quite a few discussions in forums. One of them I had come across is “How to change font for a particular UI element “without affecting other elements.ur_ie6. font-size: medium. border-color: #000. 2. There are 4 files ur_ie5.Arial.urTreWhl { cursor: default. In case of tree UI element I have recognized the location with descriptor urTreWhl . And restart the server.There will be a folder called “ur” where the style sheets are stored. but a one time process.Colorful WebDynpro Applications Limitations There are several limitations in creating a Theme editor project. width: 100%. Let’s assume we want to change the font of Tree UI element 1. background-color: #FFF. One point we have to keep in mind is that we should NOT generate the design again using WebDynpro (as in step 9). Open the themes folder say ThemeTest . Because this will over-ride the changes we had made directly in the style sheet © 2005 SAP AG The SAP Developer Network: http://sdn.sans-serif. Changing Font properties for a specific UI Element The trick to change the font properties for a particular UI element is to use the style sheets directly.ur_nn7. font-family: Verdana. 4.Helvetica. border-width: 1px } 5.css.ur_nn6.sap.css 3.css.css. border-style: solid. But we can do it in an un-conventional way.com 11 . font-weight: normal. Open anyone of them and search for location where this tree element design is defined. It’s a pain staking process.

as it is a big topic in itself. © 2005 SAP AG The SAP Developer Network: http://sdn. one more trick worth knowing is making them application specific.sap. We have to set the value of this parameter to the path as mentioned in step 14.Rememeber always that when we are upgrading from one version to another. Fig.com/tc~wd~dispwda/global/SSR/themes/<theme name> And presto. the old plug in files (for the theme editor) placed in the “eclipse\ plug in” folder have to be replaced with the new plug ins provided. And the project folder (NW0should point to the themes folder they have given.! Your theme will become application specific. but it wise to use them judiciously.com 12 . Standard Theme (SAP Tradeshow) Vs Custom Theme (ThemeTest) Application Specific Themes Finally.. Like say: http://sdn001:50000/webdynpro/local/MyProject? sap-cssurl = http://<server name>:50000/webdynpro/resources/sap. And append this name-value pair to the application URL. Conclusion Themes are a nice addition to WebDynpro. We will discuss about the general idea behind it.Colorful WebDynpro Applications Results An example of how the results will look after these changes. (Note: In this case it is sufficient if the theme is in the SSR\themes folder. There is a url-parameter called sap-cssurl. No settings have to be made in the visual admin in this case)..

SAP responsible or liable with respect to the content of this document.sap. You agree that you will not hold. His primary area of interest includes Java and WebDynpro.He is a core team member of Satyam NetWeaver CoE. © 2005 SAP AG The SAP Developer Network: http://sdn. Changes made based on this information are not supported and can be overwritten during an upgrade. and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample. including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. or seek to hold. Author Bio Bharathwaj is an applications developer currently working for Satyam Computer Services Ltd.com 13 . code or methods suggested in this document.Colorful WebDynpro Applications Disclaimer & Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. SAP will not be held liable for any damages caused by using or misusing the information.

Sign up to vote on this title
UsefulNot useful