Theme Creation

8/13/2019 Theme Creation

http://slidepdf.com/reader/full/theme-creation 1/24

How-to GuideSAP NetWeaver ‘04

How To EditWeb Dynpro Themes

Version 1.00 – October 2004

Applicable Releases:SAP NetWeaver ’04, Stack 13 and higher

SAP NetWeaver ’04S Stack 7 and higher



© Copyright 2004 SAP AG. All rights reserved.

No part of this publication may be reproduced

or transmitted in any form or for any purposewithout the express permission of SAP AG. Theinformation contained herein may be changedwithout prior notice.

Some software products marketed by SAP AGand its distributors contain proprietary softwarecomponents of other software vendors.

Microsoft, Windows, Outlook, and PowerPoint

are registered trademarks of MicrosoftCorporation.

IBM, DB2, DB2 Universal Database, OS/2,Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries,xSeries, zSeries, z/OS, AFP, Intelligent Miner,WebSphere, Netfinity, Tivoli, and Informix aretrademarks or registered trademarks of IBMCorporation in the United States and/or othercountries.

Oracle is a registered trademark of OracleCorporation.

UNIX, X/Open, OSF/1, and Motif are registered

trademarks of the Open Group.

Citrix, ICA, Program Neighborhood,MetaFrame, WinFrame, VideoFrame, andMultiWin are trademarks or registeredtrademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarksor registered trademarks of W3C®, World WideWeb Consortium, Massachusetts Institute ofTechnology.

Java is a registered trademark of Sun

Microsystems, Inc.

JavaScript is a registered trademark of SunMicrosystems, Inc., used under license fortechnology invented and implemented byNetscape.

MaxDB is a trademark of MySQL AB, Sweden.

contained in this document serves informationalpurposes only. National product specificationsmay vary.

These materials are subject to change withoutnotice. These materials are provided by SAP AG and its affiliated companies ("SAP Group")for informational purposesonly, without representation or warranty of anykind, and SAP Group shall not be liable forerrors or omissions with respect to thematerials. The only warranties for SAPGroup products and services are those that areset forth in the express warranty statementsaccompanying such products and services, ifany. Nothing herein should be construed as

constituting an additional warranty.

These materials are provided “as is” without awarranty of any kind, either express or implied,including but not limited to, the impliedwarranties of merchantability, fitness for aparticular purpose, or non-infringement.SAP shall not be liable for damages of any kindincluding without limitation direct, special,indirect, or consequential damages that mayresult from the use of these materials.SAP does not warrant the accuracy orcompleteness of the information, text, graphics,

links or other items contained within thesematerials. SAP has no control over theinformation that you may access through theuse of hot links contained in these materials anddoes not endorse your use of third party webpages nor provide any warranty whatsoeverrelating to third party web pages.SAP NetWeaver “How-to” Guides are intendedto simplify the product implementation. Whilespecific product features and procedurestypically are explained in a practical businesscontext, it is not implied that those features andprocedures are the only approach in solving a

specific business problem using SAPNetWeaver. Should you wish to receiveadditional information, clarification or support,please refer to SAP Consulting. Any software coding and/or code lines / strings(“Code”) included in this documentation are onlyexamples and are not intended to be used in aproductive system environment. The Code isonly intended better explain and visualize the



SAP, R/3, mySAP, mySAP.com, xApps, xApp,SAP NetWeaver, and other SAP products andservices mentioned herein as well as theirrespective logos are trademarks or registeredtrademarks of SAP AG in Germany and inseveral other countries all over the world. Allother product and service names mentioned arethe trademarks of their respective companies.Data

syntax and phrasing rules of certain coding.SAP does not warrant the correctness andcompleteness of the Code given herein, andSAP shall not be liable for errors or damagescaused by the usage of the Code, except if suchdamages were caused by SAP intentionally orgrossly negligent.



- 1 -

1 Editing Themes Scenario

SAP strategy is that all SAP application are presented to the user via the SAP Enterpriseportal. As such, UI themes can be changed with the "Portal Theme Editor" which

is part of the Enterprise System Administration role.In order to overcome the fact that not all customers already have the right version of theEnterprise Portal with the "Theme Editor" we offer a version of the Theme Editor as astand alone tool via SDN. The usage of this standalone tool is described in the following.

2 Introduction

The Standalone Theme Editor is a Plugin-In to Eclipse and is optimized to run on MSWindows (uses MS Internet Explorer for previewing functionality). The minimum memoryrequirement is 512MB, a 2 Giga Hz processor is recommended. Using the Eclipse basedTheme Editor you will be able to edit themes of a Netweaver 04 or Netweaver 04S Stack.How to apply the theme to a Web Dynpro application is not subject of this document.



- 2 -

3 The Step By Step Solution

3.1 Installation

1. Unzip NW04[S]StackXXThemes.zipto your local filesystem, e.g.C:\\SAP.

2. Install JDK 1.4.2 latest version, e.g.fromhttp://java.sun.com/j2se/1.4.2/download.html. Reassure that your

JAVA_HOME environment variablepoints to the JDK installation.

3. Install Eclipse 2.1.3 e.g. fromhttp://archive.eclipse.org/eclipse/downloads/.

4. Check your Eclipse installation bylaunching eclipse.exe. CloseEclipse.

5. Create a shortcut to eclipse.exe asfollows ecl i pse - consol el og - vmar gs -

Xmx512M.

6. Launch eclipse shortcut and checkthat Eclipse is starting up. CloseEclipse.



- 3 -

7. UnzipNW04[S]StackXXThemesEditor intoyour Eclipse installations pluginsfolder.

8. Launch eclipse shortcut.



- 4 -

3.2 Project setup

9. Launch project wizard

10. Select “UR Themes Editor Project”and hit “Next”



- 5 -

11. Enter “Project Name” and use“Browse” to select the Projectlocation

12. Select as project location the folderto which you have unzippedNW04[S]StackXXThemes.zip and hit“OK”

13. Hit “Finish”



- 6 -

14. Now you can see your project insidethe “Themes Editor Project View”

15. If the Project View is not visible youcan make it visible by

16. Opening the Project Folder shouldshow all SAP template themes. Notethat SAP template themes cannot bemodified. You can create your ownthemes by modifying an SAPtemplate theme and saving it undera new name.



- 7 -

3.3 Browsing SAP template themes

17. Doubleclicking a SAP template

theme results in

18. For better browsing double click theSAP template theme Tab (heresap_tradeshow). To return to theprevious Eclipse View Layout onceagain doubleclick the theme tab.



- 8 -

19. Opening the “Elements Folder” andall of its sub folders shows allavailable User Interface Elementswhich can be visually adapted usingthe Theme Editor

20. Clicking on a User Interfaceelements displays its preview and its

editable theme parameters. Thepreview is displayed by your localMS Internet Explorer installation.Currently we support IE 5.5 andhigher.

21. For WYSIWYG editing of themesyou have to set the IE cachingsettings by adjusting the IE internetoptions



- 9 -

22. Set the Temporary Internet Filessettings to “Every visit to the page”

23. Now open all parameter folders toget an overview of all available

parameters. The “COMMON” foldercontains all parameters which havean impact not only on the currentUser Interface element.

24. The folder corresponding to thecurrently selected UI Element (her“Group”) contains all parameterswhich have only an impact on this UIelement.



- 10 -

25. Note that there might be additionalfolders of other User InterfaceElement which are additionallypresent inside the preview.

26. Rightclicking a parameter adds redbordered rectangles showing the

impact area of a parameter

27. To edit a parameter click on its valuewhich results in



- 11 -

28. If you are an CSS expert you maynow enter a value within theinputfield displayed (here magenta)and hit return. This results inrefreshing the preview showing theupdated parameter. Changes can be

undone using CTRL+Z and redoneusing CTRL+Y.

29. If you need assistance you may usethe build in value help by hitting the

“…” button.

30. To exchange an image select an socalled image parameter.



- 12 -

31. Doubleclick its value and hit the “…”button. Note that value of the imageis readonly whereas its content canbe changed by uploading an imagefrom you local disk.

32. This results in refreshing thepreview.

33. Manually you can refresh the currentpreview by hitting the “Refresh”button.



- 13 -

34. This results in refreshing thepreview.

35. After having browsed through allUser Interface elements and

adapted their parameters you cansave your changes by

36. Enter name and ID of you themeand hit “OK”.



- 14 -

37. The tab changes to “myTheme”.

38. A theme consists of images andstylesheets. For performance

reasons “Saving” a theme does notmean that all stylesheets belongingto the theme are generated. Only thestylesheet needed for correctpresentation of the preview isgenerated. If you are running MS IE6.0 only the stylesheet for IE 6.0 isgenerated.

39. To generate all stylesheets select“Generate” – “all browsers andsubdesignparts”



- 15 -

40. This results in the generation ofstylesheets for all browserssupported as of NW04 Stack9 and aset of smaller User Interface elementspecific stylesheets. Note that thefile system structure of a theme is by

no means an interface thus maychange within future NW04 Stacksand NW releases.

41. To launch the current preview withinbrowsers other than MS IE hit the“External Preview” button and

choose a local browser installation.

42. Close a modified current theme andgo to the next step.



- 16 -

43. Doubleclicking the myTheme tabbrings you back to the previous Viewlayout where the Theme EditorProjects View now shows youradded theme.



- 17 -

3.4 Theme Functionality

44. You can delete a theme byrightclicking it and selecting “Delete”

45. You can export a theme byrightclicking it and selecting “Export”



- 18 -

46. Hit “Browse” and select the name ofthe zip File to which the themeshould be exported. Once a newerNW04 Stack is out (e.g. Stack 10)you can import your exportedthemes into the newer stack. Hit

“Finish” to complete the export. Thisupgrading process is automatedwithin the Portal when using thePortal Theme Editor.

3.5 Theme Project Functionality

47. “Refresh” rereads projects themes



- 19 -

48. “Import” lets you choose an exportedtheme from your local hard disk. Theimported theme is upgraded to thecurrent stack.

49. “Remove” allows the removal of theproject. Note that removing a projectdoes not remove the projectscontents from you local hard disk.

3.6 Theme Editor Preferences



- 20 -

50. Launch the preference pages

51. Select SAP UR Plugins. You canchoose the version of your local IE

installation. This will ease ThemeEditors initial detection whichstylesheets to generate for updatingthe previews. However, if the ThemeEditor detects that your setting iswrong your setting is ignored.Furthermore you can configure yourexternal Browser here.

52. Select “Theme Editor Preferences”.The “Portal URL” parameter iscurrently not implemented. Thecheckbox “generate when parameterwas modified” defines whether thechanging of a parameter results inthe regeneration of stylesheets. Onweak processor machine stylesheetregeneration maybe to time

consuming, thus can be disabled.



www.sap.com/netweaver

Documents

Theme Creation