IBM WebSphere Portal v8 Customizing Theme 8.0

© 2012 IBM Corporation IBM WebSphere Portal v8 Customizing Theme 8.0 2 © 2012 IBM Corporation Agenda  A brief journey of portal theme and layout  Portal 8.0 Theme architecture  WebDAV – Overview  Theme 8.0 Basic  Portal Theme 8.0 Best Practice 3 © 2012 IBM Corporation V6.1 Theme Customizer Dynamic QuickLink Shelf Search Widget (Dojo) Web 2.0 Theme, LiveText, Themes in .war files CSA/SSA concept V7.0 WebDAV support, Lesser OOTB styles than V6.1.5 Restructuring of folder Deprecation of good old themes “Portal” Theme only for Administrative UI V6.1.5 Introducing Page Builder UI Navigation iWidget Hybrid Approach towards aggregation Lotus OneUI based A brief journey of Portal themes and Layouts (version 6.1 to version 8.0) V8.0 Introducing Theme 8.0 using modularization architecture, replace all previous themes 4 © 2012 IBM Corporation Server-Side Aggregation - SSA Client Browser Portal Server Navigation Content Layout Fragment JSP JS CSS M o d e l S P I / J S P t a g s 5 © 2012 IBM Corporation Client-Side Aggregation - CSA Client Browser Portal Server Navigation Content Layout Fragment JSP JS CSS bootstrap R E S T / A T O M A P I XSLT 6 © 2012 IBM Corporation Page Builder - Hybrid 7 © 2012 IBM Corporation Mashup Center - CSA 8 © 2012 IBM Corporation Page Builder2 - CSA2 9 © 2012 IBM Corporation Modularization 10 © 2012 IBM Corporation Modularization 11 © 2012 IBM Corporation Portal 8.0 Themes  Ship one theme – called Theme 8.0 ● Same theme modularization architecture from Portal ● Replace all previously shipped out of the box themes  Key features ● Modularization ● Server Side Aggregation support ● Portlet and iWidget support ● Static html templates: theme, skin, layout with WebDAV editing ● Dynamic-content provides means to inject server side logic into static templates without inserting code ● Dojo 1.7 12 © 2012 IBM Corporation Portal 8.0 Theme  The following portal themes were remove in WebSphere Portal version 8 ● Page Builder theme ● All Legacy themes 13 © 2012 IBM Corporation Theme Optimization Overview  The new modularized theme provides a very flexible framework that ● Minimizes download size by giving you the control to specify just the capabilities that are needed for a certain scenario or usecase and at the same time ● Minimizes the number of requests by combining necessary resources.  Theme optimization uses modules and profiles to achieve the flexibility that allows you to achieve better performance. ● Modules are the components of the new theme that define capabilities. Examples are Tagging&Rating, Dojo or jQuery. ● Profiles define sets of modules which can be assigned per page. A default profile is used if no page specific profile has been defined. 14 © 2012 IBM Corporation Theme Optimization Overview  Support to automatically combine javascript and css resources and more.  By applying these concepts it is possible to ● Turn on and off an arbitrary number of features for certain pages, ● Develop modules independent of each other for greater development speed and flexibility and ● Easily add new capabilities later on into an existing theme 15 © 2012 IBM Corporation Dynamic Content Spots  Dynamic spots ● Microformat defined in theme.html ● ● Parsed at runtime, href resolved and response streamed out  Dynamic spot registry ● WAS environment provider holds spot mappings ● Examples: – 16 © 2012 IBM Corporation Dynamic Content Spots 17 © 2012 IBM Corporation WebDAV  Web Server acts like a generic file server ● Clients can "mount" shared folders over HTTP that behave much like other network file systems ● Adobe Dreamweaver and Photoshop can mount WebDAV for direct editing  Portal 8 WebDAV entry points: ● http://:/wps/mycontenthandler/dav/fs-type1 – Themes, skins, layout templates, common-resources ● http://:/wps/mycontenthandler/dav/themelist/ ● http://:/wps/mycontenthandler/dav/skinlist/ – Create and define new themes and skin using this entry points 18 © 2012 IBM Corporation WebDAV – How it works Tool i.e. notepad.exe TextPad WebDAV Client WebDAV Servlet WebDAV ServiceWebDAV ServiceWebDAV Service DB Operating System HTTP WebSphere Portal Any system tool e.g. WebFolders GNOME WebDrive ... wp.webdav.ear wp.portaladmin.war (… more services in the future) The actual OS functionality is an implementation detail of the OS. Typical WebDAV clients map the WebDAV hierarchy to the filesystem. Others have special WebDAV browsers (e.g. Dreamweaver) 19 © 2012 IBM Corporation Static Templates  Static templates are stored in WebDAV  Themes ● Theme.html ● /fs-type1/themes//  Skins ● Skin.html ● /fs-type1/themes//skins/  Layouts ● Layout.html ● /fs-type1/themes//layout-template/  When editing using OOB templates, remember they are localized! ● You must edit the localized template to see changes ● Localized templates example: – /fs-type1/themes/Portal8.0/nls/theme_en.html 20 © 2012 IBM Corporation Theme 8.0 Basic - Layouts 21 © 2012 IBM Corporation Layout Template  Layout shelf configuration ● Add styles to the system/styles.json file for it to show up in the shelf.  Key elements ● Name: name of the container. Also used to distribute the portlets among the containers when switching between layouts ● Class: defines various semantic on the containers – component-container - main class that creates/renders a container – ibmDndColumn - enables drag and drop to/from the container – wpthemeCol/wpthemeRow - controls the layout of portlets within the container – wpthemePrimaryContainer/wpthemeSecondaryContainer/wpthemeTert iaryContainer - means to describe the visual importance of a container. Can be used to modify the look and feel of a piece of content when moving it from one container to another, e.g. by changing the size of the header. – hiddenWidgetsContainer - location for non-visual portlets which participate in the page via wiring/events, but aren't rendered 22 © 2012 IBM Corporation Theme 8.0 Basic - Skins 23 © 2012 IBM Corporation Skin Detail  Key elements - dynamic content spots ● server-side dynamic spot for injecting portlet display title ● server-side dynamic spot for injecting portlet body markup ● Required for site analytics ● Generates an anchor for this portlet with the window id  Key elements – class ● lm-dynamic-* - client-side dynamic spots which are resolved via javascript, e.g. 'lm-dynamic-title', which is utilized to allow a widget to change its title dynamically, such as to allow the title to include the number of unread emails ● Analytics. overlay - Will display the site analytics overlay when showing the data inline 24 © 2012 IBM Corporation Theme 8.0 Basic - Menu 25 © 2012 IBM Corporation Menu Detail  Injected into the page using a div with the class wpthemeMenuAnchor. This div must contain at least one div with the class wpthemeMenuRight or wpthemeMenuLeft  The menu span contains three template div elements ● The menu itself with a menu item template (wpthemeTemplateMenu) ● A loading template (wpthemeTemplateLoading) ● A sub menu template (wpthemeTemplateSubmenu) 26 © 2012 IBM Corporation Menu Detail 27 © 2012 IBM Corporation Theme 8.0 Best Practices - Modularization  Maximize performance by removing unused features  Modularization of Portal CSS, JavaScript, and configuration/markup code enables safe removal of features without touching code  CSS and JavaScript for included features are combined at runtime to reduce requests and download size  Customers can use the modularization framework to add your own features to the theme in a performant, maintainable fashion 28 © 2012 IBM Corporation Theme 8.0 Best Practices – Profile Detail  WebSphere Portal 8 ships 3 out of the box profiles: ● Full: includes all modules ● Deferred: includes a minimal set to render the page, everything else is loaded on demand ● Lightweight: only includes the minimal set, no page editing possible  Switching to another profile can easily be achieved by executing the following config task: ● ConfigEngine.bat/sh deploy-full-profile-800-theme -DportalAdminPwd= -DWasPassword= ● Other available task names are: deploy-deferred-profile-800- theme and deploylightweight- profile-800-theme 29 © 2012 IBM Corporation Theme 8.0 Best Practices – Profile Detail  Instead of using the theme default profile you can also define an arbitrary profile per page via the page properties dialog. 30 © 2012 IBM Corporation Example 31 © 2012 IBM Corporation Theme 8.0 Best Practices – Putting it all together  The profile for a given page is selected by using the theme default or - when defined - using the one defined as page metadata. Example: resourceaggregation.profile=profiles/profile_full.json  The selected profile is read and all modules that need to be served up initially are calculated.  As part of this process, not only system modules are loaded but also theme specific modules defined through the theme.json file (in fact any json file). 32 © 2012 IBM Corporation Theme 8.0 Best Practices – Putting it all together  Next the theme.html file is read and processed for dynamic spots.  The co:head dynamic spot writes out all resources applicable for the head section of the page. It takes all all recognized modules incl. Their dependencies into account.  At last the co:config dynamic spot writes out all remaining resources of the modules applicable to the body section of the page. 33 © 2012 IBM Corporation Theme 8.0 Best Practices – Deferred Modules/Profile  The module framework allows a profile to specify whether or not it wants to make a particular module deferred.  By default a module is loaded during the initial page load, but modules that are specified as deferred modules will be loaded after page load triggered through JavaScript:  Only a subset of contributions can be loaded deferred: ● CSS ● JavaScript code ● non-head contributed markup 34 © 2012 IBM Corporation Example 35 © 2012 IBM Corporation Portlet Dependencies on Theme Capabilities  Often portlets depend on certain features/capabilities to be available in the page such as Dojo or jQuery  With the concept of portlet dependencies in v8 a portlet developer can define which of those are required so that the portlet will only be rendered if all requirements have been fulfilled  The enduser is notified with an in-place message in case the prereqs are not fulfilled. The message contains details about what is missing 36 © 2012 IBM Corporation Portlet Dependencies on Theme Capabilities  Dependencies can only be set on capabilities, not modules  A dependency is defined with a preference pair. ● Preference 1 defining the capability name – = ● Preference 2 defining the capability value – capability..minValue = 37 © 2012 IBM Corporation Portlet Dependencies on Theme Capabilities  Here the example lets the system know that the portlet can only be rendered when at least Dojo 1.6 and OneUI 3.0.1 is available on the page  If it is not on the page an error message is rendered letting the user know what capabilities are missing. 38 © 2012 IBM Corporation




需要 6 金币 [ 分享pdf获得金币 ] 0 人已下载