Upload
sktsuresh
View
216
Download
0
Embed Size (px)
Citation preview
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
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 2/24
© 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
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 3/24
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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 4/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 5/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 6/24
- 3 -
7. UnzipNW04[S]StackXXThemesEditor intoyour Eclipse installations pluginsfolder.
8. Launch eclipse shortcut.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 7/24
- 4 -
3.2 Project setup
9. Launch project wizard
10. Select “UR Themes Editor Project”and hit “Next”
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 8/24
- 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”
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 9/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 10/24
- 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/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 11/24
- 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
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 12/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 13/24
- 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
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 14/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 15/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 16/24
- 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”.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 17/24
- 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”
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 18/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 19/24
- 16 -
43. Doubleclicking the myTheme tabbrings you back to the previous Viewlayout where the Theme EditorProjects View now shows youradded theme.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 20/24
- 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”
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 21/24
- 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
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 22/24
- 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
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 23/24
- 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.
8/13/2019 Theme Creation
http://slidepdf.com/reader/full/theme-creation 24/24
www.sap.com/netweaver