SDN Community Contribution

Transcription

1 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 SAP AG The SAP Developer Network: 1

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

3 Applies To: SAP Web Application Server 6.40 SP 9 and SP11, NetWeaver Developer Studio and Summary This document discusses about creating theme editor projects in WebDynpro and applying them to WebDynpro applications.it also briefs about the need for themes, How to implement them and the extent to which we can stretch their capabilities. By: Bharathwaj Company: Satyam Computer Services Ltd., 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), an environment to develop J2EE projects and a lot more. About WebDynpro WebDynpro is a great modeling environment which stores the user-interface details in the form of metadata. We can write less code and fix bugs in a shorter time with lesser effort. It increases a programmer s productivity by manifolds. 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, using WebDynpro modeling tools we are forced to maintain homogeneity in the design of user interfaces. For example if we are designing an ESS application for SAP we will be forced to maintain the SAP s standard blue, white and orange tinted yellow base throughout our applications. Because logos and colors form an integral part of a company s identity. They define their identity and companies will never sacrifice them. WebDynpro does not come with a design environment where there is a flexibility to edit the UI element features and its colors. And it is not easy to bring it in, as it is used for different platforms like MI. If we include a feature in WebDynpro, we have to ensure that it is compatible with all the environments. So SAP does not provide them directly. Instead they give the Themes Editor as an un-supported version SAP AG The SAP Developer Network: 3

4 Creating custom themes Developing a Theme Editor Project There are a few steps in putting our own customized themes. Steps Involved Theme editing does not come in the standard set of installation. We have to download a few files for this purpose. 1. 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. NW04Stack09Themes And it is available in the following link. 4/NW04Stack09Themes.zip Note: NW04Stack09Themes is suitable for NW 04 stack 9 only. If we upgrade our stack we have to upgrade this zip file to the corresponding version. The corresponding files for SP11 and SP12 are available in the following links. (Link paths might change in the future.) For SP11 For SP We can t create a new theme from scratch. We can only edit an existing theme. 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. The 3 plug-ins are: com.sap.ur.previeweditor_1.1.6, com.sap.ur.servlet_1.1.8 and com.sap.ur.themeseditor_ SAP AG The SAP Developer Network: 4

5 3. After copying these plug-ins, open NDS go to windows open perspective choose SAP UR Design/themes 4. Next go to File New Select a UR themes Editor project SAP AG The SAP Developer Network: 5

6 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). 6. Select a standard project from the existing themes and open it. Now we will able to see the entire UI element s in the left hand side of the screen. We can select any element and edit its properties. Usually the font, font-color, font-size, background color etc., 2005 SAP AG The SAP Developer Network: 6

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

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

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

10 . (If sap.usewebdynprostylesheet = True Portal uses this theme in a WebDynpro iview. Otherwise it will take the default portal theme for WebDynpro iviews. Now when we restart the server and deploy our WebDynpro applications the new custom theme will be applied SAP AG The SAP Developer Network: 10

11 Limitations There are several limitations in creating a Theme editor project. 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. Theoretically when we follow this model we can select only one common font for all the UI elements. But we can do it in an un-conventional way. 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. Let s assume we want to change the font of Tree UI element 1. Open the themes folder say ThemeTest.There will be a folder called ur where the style sheets are stored. 2. There are 4 files ur_ie5.css,ur_ie6.css,ur_nn6.css,ur_nn7.css 3. Open anyone of them and search for location where this tree element design is defined. It s a pain staking process, but a one time process. 4. In case of tree UI element I have recognized the location with descriptor urtrewhl.urtrewhl { } cursor: default; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: medium; font-style: normal; font-weight: normal; width: 100%; background-color: #FFF; border-color: #000; border-style: solid; border-width: 1px 5. Change the font in the font-family to the required value (say Arial Black). And restart the server. One point we have to keep in mind is that we should NOT generate the design again using WebDynpro (as in step 9). Because this will over-ride the changes we had made directly in the style sheet 2005 SAP AG The SAP Developer Network: 11

12 Results An example of how the results will look after these changes. Fig. Standard Theme (SAP Tradeshow) Vs Custom Theme (ThemeTest) Application Specific Themes Finally, one more trick worth knowing is making them application specific. We will discuss about the general idea behind it, as it is a big topic in itself. There is a url-parameter called sap-cssurl. We have to set the value of this parameter to the path as mentioned in step 14. And append this name-value pair to the application URL. Like say: sap-cssurl = name>:50000/webdynpro/resources/sap.com/tc~wd~dispwda/global/ssr/themes/<theme name> And presto...! Your theme will become application specific. (Note: In this case it is sufficient if the theme is in the SSR\themes folder. No settings have to be made in the visual admin in this case). Conclusion Themes are a nice addition to WebDynpro, but it wise to use them judiciously.rememeber always that when we are upgrading from one version to another, 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 SAP AG The SAP Developer Network: 12

13 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. Author Bio Bharathwaj is an applications developer currently working for Satyam Computer Services Ltd.He is a core team member of Satyam NetWeaver CoE. His primary area of interest includes Java and WebDynpro SAP AG The SAP Developer Network: 13