Develop Engaging and High Performance Portal Themes That Power Exceptional Digital Experiences

50 %
50 %
Information about Develop Engaging and High Performance Portal Themes That Power...
Technology

Published on February 18, 2014

Author: shesmer

Source: slideshare.net

Description

IBM Connect 2014 - WebSphere Portal

Develop Engaging and High Performance Portal Themes That Power Exceptional Digital Experiences

AD404: Develop Engaging and High Performance Portal Themes That Power Exceptional Digital Experiences Stephan Hesmer, Web 2.0 and Theme Architect, IBM © 2014 IBM Corporation

Please Note IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion. Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here. 2

Agenda  Overview –  WebSphere Portal 8.0 Theme Framework – – – – – –  Basics Static Template Details Request flow Theme Optimization Debugging, Pitfalls & Tips Portlet Integration WebSphere Portal V.next - Theme improvements – – – 3 Introduction, What is in the box, Theme Optimization Simpler and easier to use Dynamic Content Spot Debugging Theme Analyzer improvements

What is a theme ? 4

What is a theme ? And what are the elements ?  5 Theme artifacts – Navigation – Search bar – User Information – Footer – Static Resources

What is a theme ? And what are the elements ?   6 Theme artifacts – Navigation – Search bar – User Information – Footer – Static Resources Skin artifacts – Shown “around” a portlet or piece of content on the page

What is a theme ? And what are the elements ?    7 Theme artifacts – Navigation – Search bar – User Information – Footer – Static Resources Skin artifacts – Shown “around” a portlet or piece of content on the page Layout of the page – 2 columns in this case

Portal 8 Themes  Ships with one Theme - called Theme 8.0 – replaces all previously shipped out of the box themes  Key Features – – – – – 8 Theme Optimization (Modularization) Portlet and iWidget support ● Gadgets can be used through catalog download Dynamic and static files ● Static templates: theme, skin, layouts, with webDAV editing Dynamic-content provides means to inject server-side logic into static templates without inserting code Dojo 1.7.x in the box, allowing any arbitrary other framework as well such as jQuery

What is theme optimization?  Theme optimization provides a framework that... – – minimizes the number of requests ● Resource aggregation – 9 minimizes download size ● Control the capabilities that are needed for a certain scenario Improves theme performance

How does theme optimization work?  Theme optimization uses modules and profiles  By applying these concepts it is possible to – – Ability to pull in theme resources only when needed or desired – 10 Turn on and off an arbitrary number of features for certain pages Develop modules independent of each other

Theme Optimization Performance  Response time of new theme showing 3 theme profiles – – lightweight contains only what is minimum needed to render a page in view mode – 11 full contains more features than the 7.0 Theme (kitchen sink) standard which is lightweight+dojo_base

Theme Basics 12

Theme Resources Header / Navigation    Static Resources – Javascript, CSS, Markup – Templates for page rendering Dynamic Resources – Rendered through JSPs – Fills in areas in the webpage Dynamic Content Spot References (Optional) – Allows for indirection of the JSP with the static template Page Layout Footer 13

Theme Resources Header / Navigation    Static Resources – Javascript, CSS, Markup – Templates for page rendering Dynamic Resources – Rendered through JSPs – Fills in areas in the webpage Dynamic Content Spot References (Optional) – Allows for indirection of the JSP with the static template Page Layout Footer 14

Theme Resources Header / Navigation    Static Resources – Javascript, CSS, Markup – Templates for page rendering Dynamic Resources – Rendered through JSPs – Fills in areas in the webpage Dynamic Content Spot References (Optional) – Allows for indirection of the JSP with the static template Page Layout Footer 15

WebDAV for static files     16 What used to be in one Theme WAR file is split into dynamic and static content – Dynamic content stays in the WAR file, e.g. JSPs – Static content such as HTML, JavaScript, CSS, images is stored in WebDAV Allows for separation of concern... – ...such as tighter access control on dynamic content as it can bring down your server and usually on WAS admins have access to the WAR file WebDAV server (Portal) acts like a generic file server – Mount shared folders over HTTP that behave much like other network file systems – Adobe Dreamweaver and Photoshop can mount WebDAV for direct editing WebDAV entry points – http://<host>:<port>/wps/mycontenthandler/dav/fs-type1 ● Themes, skins, layout templates, common-resources – http://<host>:<port>/wps/mycontenthandler/dav/themelist/ – http://<host>:<port>/wps/mycontenthandler/dav/skinlist/ ● Create and define new themes and skins using these entry points

Static Templates      17 Static templates are stored in WebDAV Themes – theme.html in /fs-type1/themes/<theme-name>/ Skins – skin.html in /fs-type1/themes/Portal8.0/skins/<skin-name>/ Layouts – layout.html in /fs-type1/themes/Portal8.0/layout-templates/<layout-name>/ 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

Theme Templates (theme.html) 18

Layouts (layout.html) 19

Layouts – 3 Column Center Layout 20

Layouts – Location of files  Configure which layouts to show in the palette or add your own in layouts.json within WebDAV  Add your own layout templates or change existing ones in the layout-templates folder of WebDAV 21

Skins (skin.html) 22

Dynamic Content Spots  Dynamic spots – Microformat defined in theme.html and other static files – <a rel=”dynamic-content' href='<URI>'/> – Parsed at runtime, href resolved and response streamed out  Dynamic spot registry – WAS environment provider holds dynamic content spot mappings – Examples: ● ● 23 <a rel=”dynamic-content' href='res:/MyTheme/banner_nav.jsp'/> <a rel=”dynamic-content” href=”dyn-cs:id:bannerNav”/>

Dynamic Content Spots theme_en.html WebSphere Application Server Resource Environment Provider Theme Web App 24 <PortalServer>/theme/wp.theme.themes/default80/installedApps/ DefaultTheme80.ear/DefaultTheme80.war/themes/html/dynamicSpots

Rendering, involved components and flow Portal Request Theme WAR Default.jsp Theme WAR theme.html EL Beans, Model API, ... fetch information from models such as navigation nodes various dynamic content spots JSPs layout.html WebDAV 25 Portal WebDAV skin.html include portlets WebDAV Portlet WAR

Advanced Theme Topics 26

Theme Expression Logic (EL) Bean  Includes very simple access to: Portal models – meta data – resource environment providers (REP) More Information: – http://www-10.lotus.com/ldd/portalwiki.nsf/dx/Portal_EL_Beans Common examples: –   ${wp.selectionModel.selected} = selected node ${wp.metadata[wp.selectionModel.selected]['someKey']} = access page meta data ${wp.rep['WP GlobalThemeConfig']} = REP access ${wp.identification[node]} = retrieve node object id ${wp.themeList.current.metadata['someKey']} = access theme meta data ${wp.ac[node].hasPermission[someRole]} = access permissions 27

Theme Optimization - Modularization  Maximize performance by removing Widget Support unused features CSS JS markup  Modularization of Portal CSS, Page Editing 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  Note: Demo UI, not real It provides a case study of how to select modules to execute for a given page/theme. 28 CSS JS markup Tagging / Rating      CSS JS markup Analytics CSS JS markup Drag and Drop CSS JS markup

Theme Optimization - Terminology  Modules – – 29 Component defining a single feature that contributes various artifacts to the page ● Javascript, CSS, markup Can be reused across multiple themes ● Global (System-wide) vs. Scoped (Theme specific)

Examples   Theme Module - theme.json System Module - plugin.xml Prereqs Contributions 30

Theme Optimization - Terminology     31 Modules – Component defining a single feature that contributes various artifacts to the page ● Javascript, CSS, markup – Can be reused across multiple themes ● Global (System-wide) vs. Scoped (Theme specific) Profiles – Set of modules that are scoped to a theme or page. ● JSON file Contributions – Formalization of the single markup fragment that a module may inject into the complete page. Capabilities – Contributed as part of individual modules – Previously defined as theme metadata ● For example: The Dojo Module defines the capability “dojo”

Development / Adding custom JavaScript and CSS  32 Development time – Switch portal into development mode Set the resourceaggregation.development.mode property to true within the WP ConfigService resource environment provider to disable caching of modules and profiles – Turn on remote debugging Enable the following tracing with the Portal Admin Trace Portlet: com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all This will cause the uncompressed JavaScript, CSS,... to be loaded as individual requests – Use theme scoped modules defined through JSON in WebDAV to load your JavaScript and CSS ● Note: theme scoped modules cannot include complete URIs but have to be relative to WebDAV / the static content root. Example: – Invalid: dav:fs-type1/themes/Portal8.0/profiles/profile_full.json – Valid: profiles/profile_full.json – Add the new module to your profile

Development / Adding custom JavaScript and CSS  33 Production – Still need to minify your JavaScript and compact your CSS – If desired create a system module using the plugin.xml syntax to define your module ● Define a production and debug version of your JavaScript – It is still recommended to create sprites for your images and use those – No aggregation step required anymore. Automatically taken care for you!

Theme Optimization - Flow 1) WebDAV: Profile file location 2) WebDAV: Theme module folder, Every JSON file is picked up and parsed for theme modules. 3) Content of the deferred profile 4) Location in the theme.html where all aggregated head resources are injected 5) Location in the theme.html where all aggregated config resources are injected Theme template Profile 2 3 1 4 5 34 WebDAV

Live Demo – Theme Optimization    35 Various Profiles Adding our own module Adding our own profile

Theme Optimization - Deferred Modules/Profile profile.json  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:  – – – 36 CSS JavaScript code non-head contributed markup

Example from 7.0.0.2 How does the Edit Mode work with Deferred Profile 1) Edit Icon is embedded into the page by using this dynamic spot 2) Definition of the dynamic spot based on a module condition 37 3) only if the module is loaded into the page (here: referenced in the profile) the dynamic spot is activated if the module is removed from the profile, the icon shown in step (1) will disappear

Portlet Dependencies on Modules    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  Dependencies can only be set on capabilities, not modules  A dependency is defined with a preference pair. – Preference 1 defining the capability name ● capability.<sequence-number>.id = <the capability name> – Preference 2 defining the capability value ● capability.<sequence-number>.minValue = <the capability value> 38

Portlet Dependencies on Modules  Below example lets the system know that the portlet can only be rendered when at least Dojo 1.7 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. <portlet-preferences> <preference> <name>capability.1.id</name> </preference><preference> <name>capability.1.minValue</name> </preference><preference> <name>capability.2.id</name> </preference><preference> <name>capability.2.minValue</name> </preference><preference> <name>capabilities.selfManaged</name> </preference> </portlet-preferences> 39 <value>dojo</value> <value>1.7</value> <value>oneUI</value> <value>3.0.1</value> <value>false</value>

Common Theme Pitfalls  A few important things to help you along the way...  What profile is being used on the current page? – (a) The following trace will log very little and tell you the profile for a given page id: com.ibm.wps.resourceaggregator.profile.ProfileHelper=Finer – (b) Use the Theme Analyzer to look up the page – (c) Add the following scriplet to your JSPs and it will output the currently used profile URI <c:set var="themeID" value="${wp.themeList.current.objectID}" /> <c:set var="navNode" value="${wp.selectionModel.selected}" /> <% com.ibm.portal.ObjectID themeID = (com.ibm.portal.ObjectID)pageContext.getAttribute("themeID"); com.ibm.portal.navigation.NavigationNode navNode = (NavigationNode) pageContext.getAttribute("navNode"); 40 javax.naming.Context ctx = new javax.naming.InitialContext(); com.ibm.portal.resourceaggregator.profile.PortalProfileListHome home = (PortalProfileListHome) ctx.lookup( com.ibm.portal.resourceaggregator.profile.PortalProfileListHome.JNDI_NAME); if (home != null) { com.ibm.portal.resourceaggregator.profile.ProfileList model = home.getProfileList(themeID, request, response); com.ibm.portal.resourceaggregator.profile.Profile profile = model.getProfile(navNode); %>Current Profile: <%=profile.getURI().toString()%><% } %>

Common Theme Pitfalls  Make sure that your contributions folder and profiles folder... – do not contain any non-json files and sub directories and – do not contain any files other than JSON files as the system will search for all files regardless of the suffix. So if you have a file named myModule.json.bak it will still be picked up! – Those files are ignores with the latest Fixpack  When switching the static content from WebDAV to be WAR based, be sure to use the war: schema and not the res: schema 41

Common Theme Pitfalls  42 In case your theme doesn't seem to work at all anymore and you see Javascript errors in the console, then – most likely there is one JS error that interrupts processing of the one Javascript layer that is returned from the resource aggregator. – Because the system is now returning just one big JS file in one request, the browser will stop processing the remainder of the file in case of a Javascript error that is not catched or handled. – In this case please turn on remote debugging to have all files served up individually – This will allow you not only to most likely revive your theme but also – allow you you to see the Javascript file that caused the error and therefore identify the module that caused the issue.

Theme Optimization Portlet  Allows to look at all aspects of the theme framework including pages, profiles, modules, etc.  Allows to display rich validation report which analyzes the theme for well known issues  Allows for easier development and troubleshooting 43

Future: Theme Analyzer Validation Report 44

Future: Theme Analyzer Development Tools 45

Future: Dynamic Content Spot Debugging 46

Future: Dynamic Content Spot Debugging (Movie) 47

Future: Simple Modules  Quick and simple way to define a new module through folders and files.  Simply create a new folder, drop a file in it and be done.  Readme files within all well-defined folders of WebDAV provide inline help right where you need it. 48

Live Demo – Future Theme Improvements     49 Theme Analyzer – Control Center – Validation Reports – Size Charts Simple Modules Dynamic Content Spot Debugging And many more...

Engage Online  SocialBiz User Group socialbizug.org – Join the epicenter of Notes and Collaboration user groups  Follow us on Twitter Engage – @IBMConnect and @IBMSocialBiz  LinkedIn http://bit.ly/SBComm – Participate in the IBM Social Business group on LinkedIn:  Facebook https://www.facebook.com/IBMSocialBiz – Like IBM Social Business on Facebook  Social Business Insights blog ibm.com/blogs/socialbusiness – Read and engage with our bloggers 50 Online

 Access Connect Online to complete your session surveys using any: – Web or mobile browser – Connect Online kiosk onsite 51

Acknowledgements and Disclaimers Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. © Copyright IBM Corporation 2014. All rights reserved.  U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.  Please update paragraph below for the particular product or family brand trademarks you mention such as WebSphere, DB2, Maximo, Clearcase, Lotus, etc.  IBM, the IBM logo, ibm.com, [IBM Brand, if trademarked], and [IBM Product, if trademarked] are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml If you have mentioned trademarks that are not from IBM, please update and add the following lines: [Insert any special 3rd party trademark names/attributions here] Other company, product, or service names may be trademarks or service marks of others. 52

Add a comment

Related presentations

Related pages

IBM Connect Sessions & Lotusphere Slides

AD404 Develop Engaging and High Performance Portal Themes That Power Exceptional Digital Experiences (2014) Stephan Hesmer January 27 2014 01:15:00 PM
Read more

Develop Engaging and High Performance Portal Themes That ...

Home; Technology; Develop Engaging and High Performance Portal Themes That Power Exceptional Digital Experiences
Read more

IBM Connect Sessions & Lotusphere Slides

embedded experiences; Exceptional Customer ... AD404 Develop Engaging and High Performance Portal Themes That Power Exceptional Digital Experiences ...
Read more

Connections Developers | App Dev Presentations from IBM ...

App Dev Presentations from IBM Connect 2014 on Slideshare. Niklas Heidloff / February 11, 2014 / 1 comment. Below is a list of app dev sessions from IBM ...
Read more

Breakout Sessions - pressganey.com

... improve key drivers of exceptional experiences to earn patient loyalty and present objective performance data ... you develop a high ...
Read more

Studypool - Online Homework Help & Answers - Online Tutors

Studypool is your source for easy online academic & homework ... Back in high school, ... He took a subject I hated and made it fun and engaging for me.
Read more

Group XP Experience Index 2016 WEB6 - scribd.com

High performing experiences in action ... exceptional customer experience. ... BRAND PERFORMANCE // HIGH EXPERIENCE
Read more

Career Skills - Career Development Tools and Ideas from ...

Learn new career skills every week, ... Using High-Performance Habits to Achieve Significant ... Jon Acuff talks about actively seeking an engaging and ...
Read more

Peliculotas

¿Qué podemos decir?. En Peliculotas nos dedicamos a subir peliculas completas en español latino sobre todos los géneros. Disfruta y comparte.
Read more