websphere portal v8.5 lab manual · 2015-08-27 · ibm digital experience version 8.5 lab 2 create...

52
IBM Digital Experience Version 8.5 IBM Ecosystem Development Last Updated: August 20, 2014 WebSphere Portal V8.5 Lab Manual Theme Customization Lab COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM EcoSystem Development 1

Upload: others

Post on 15-May-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

IBM Ecosystem DevelopmentLast Updated: August 20, 2014

WebSphere Portal V8.5

Lab Manual

Theme Customization Lab

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

1

Page 2: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Table of Contents

OVERVIEW 4INTRODUCTION........................................................................................................................................................4

ADDITIONAL INFORMATION....................................................................................................................................6

THEME CUSTOMIZATION.............................................................................................................................................7LAB 1 CREATE THEME DEVELOPMENT PAGE..........................................................................................8LAB 2 CREATE CUSTOM THEME...............................................................................................................11LAB 3 EXPLORE DYNAMIC CONTENT SPOTS..........................................................................................23LAB 4 COMBINING OF RESOURCES IN THEME OPTIMIZATION............................................................27LAB 5 CREATING CUSTOM STYLES..........................................................................................................31LAB 6 THEME PROFILES.............................................................................................................................38APPENDIX A NOTICES...............................................................................................................................................49APPENDIX B TRADEMARKS AND COPYRIGHTS....................................................................................................51

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

2

Page 3: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

3

Page 4: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Overview

In IBM WebSphere Portal, “themes” allows you to customize the overall look and feel of the page. In addition to themes, “skins” allows you to customize the decoration around individual portlets on a page. This lab will focus on themes, but the knowledge and concepts you learn will also apply to the customization of skins.You can learn more about developing Portal themes in the online community article at http://www-10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=Developing%20Themes%20for%20WebSphere%20Portal

Modern websites and browsers enable incredible new capabilities that can greatly enhance your user's web experiences. However, these capabilities are not without cost in terms of larger page sizes and additional processing within the web browser when each page is rendered. These capabilities are worth it when you need them, but removing them for an entire site, or including them only on pages that take advantage of these capabilities provides for more flexibility.The IBM WebSphere Portal modularized theme provides a flexible framework that:

▪ Minimizes download size by giving you the control to specify just the capabilities that are needed for a certain scenario or use case.

▪ Minimizes the number of requests by combining necessary resources.

Previous themes required a monolithic design in that the same content was downloaded for every page. Theme optimization allows the theme to be highly adaptive to the content you are displaying on certain pages. For example, on pages where only simple content is displayed you can define a lightweight profile. A lightweight profile causes the system to download few static resources such as JavaScript and CSS files. However, on pages where more advanced scenarios are required you can choose to switch to a more powerful profile that causes more resources (i.e. Dojo) to download than on the other pages. This way you have only the capabilities you need on certain pages, but all other pages do not pay the penalty. As a result the overall system performance increases significantly.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 is defined.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, easily add new capabilities later on into an existing theme and build an altogether new theme with the existing one. This building block concept allows the new theme to work side by side through self contained modules without risking the existing theme.

Introduction

For this lab you will have been allocated a server. Substitute this server name whenever you see <your_server_hostname> in this lab.

In this lab you will learn how to customize the look-and-feel of the portal page. This will include the following:

▪ Creating a custom theme and changing the page logo▪ Creating customized page styles▪ Creating customized page layouts▪ Understanding the new theme optimization framework. This includes the creation

of custom profiles and modules.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

4

Page 5: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

This allows you to turn the default theme from

into

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

5

Page 6: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Please note that the lab has been written for all persons to complete. However, in order to gain full benefits, some web design knowledge would be beneficial. This includes an understanding of HTML, Style Sheets (CSS), and JavaScript.

Additional Information

You should be able to complete this lab in approximately 60 minutes.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

6

Page 7: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Theme Customization

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

7

Page 8: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Lab 1 Create Theme Development Page

As a best practice, theme design should be done on a test/development page. In this section, you will create a page to be used for developing and testing theme customization.

__1. Using a web browser, login to the portal as fadams (password is passw0rd).

__2. Navigate to CTC Demo

The Content Template Catalog demo site will be used in this Theme customization lab. However, the concepts/steps can be applied to any other part of the Portal.

__3. Switch to Edit Mode

__4. Create a new page

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

8

Page 9: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__5. Enter ThemeDev as the page name and ThemeDev as the friendly URL name. Select CTC Standalone Topic as the page template to base this new page on.

__6. Create Page.

__7. Switch back to View Mode

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

9

Page 10: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__8. Verify that your theme test page appears as shown

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

10

Page 11: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Lab 2 Create Custom Theme

In this section, you will learn how to use the WebDAV interface to connect to the WebSphere Portal Server. Once connected to WebDAV, you will create a copy of an existing theme so you can safely perform your own customizations.

__1. Complete the following steps to setup the AnyClient WebDAV client.

A WebDAV “client” is needed to connect to WebSphere Portal (which is a WebDAV “server”). For this lab, you will be using the AnyClient WebDAV client. This client provides a FTP based type of IDE. There are many other WebDAV client available as well, some of which allows you to 'map' a drive to WebDAV.

__2. Double-click on the AnyClient icon on the desktop (Ignore the update message for newer version).

__3. Select File → Site Manager from the menu bar.

__4. Click the New button to define a new site.

__5. Click the Rename button and enter themelist as the new site name.

__6. Select WebDav as the protocol to use. Then enter the remaining values:

Host : http://<your_portal_server>:10039/wps/mycontenthandler/dav/themelistUsername : fadamsPassword : passw0rdLocal Dir : <a local directory>

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

11

Page 12: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__7. Verify your new site appears as follows and then click the Save button to save.

__8. Select the themelist site and click the Connect button.

I M P O R T A N T

The “ /wps/mycontenthandler/dav/themelist” WebDAV entry point should be used when you are creating a new theme (typically by an administrator). Once the theme is created, you must use the the file store entry point /wps/mycontenthandler/dav/fs-type1 to modify the theme static artifacts.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

12

Page 13: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__9. The AnyClient interface allows you to move files between the Local System and the Remote System (which in this case is the Portal Server). Highlight the ibm.portal.85Theme folder that is listed under Remote System and click the green arrow to copy it to your local desktop.

__10. WAIT until you see a “File Transfer Complete” message. (The transfers progress bar may not always be accurate.) This may take 1-2 minutes.

I M P O R T A N T !!

Some WebDAV Clients allow you to directly edit files on the WebDAV drive (similar to working with a network shared drive). Unfortunately, the AnyClient WebDAV client does not provide this functionality. As such, when using AnyClient, it is important to understand that you will be modifying theme files from your local desktop and then copying them back to the server.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

13

Page 14: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__11. Go to your desktop. Rename the copied folder from “ibm.portal.85Theme” to custom.portal.85Theme.

__12. Open the custom.portal.85Theme\metadata.properties file in a text editor. Update the com.ibm.portal.layout.template.href value by replacing “Portal8.5” with “custom.portal.85Theme” (as shown in the figure below). When done save and close this file.

The com.ibm.portal.layout.template.href value specifies the default layout of newly created pages that use this theme. You will be learning more about layouts in a later section of the lab.

__13. Open the custom.portal.85Theme\metadata\localized_en.properties file in a text editor, and change the title property value to Custom Portal Theme. Save and close the file.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

14

Page 15: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__14. Open the custom.portal.85Theme\theme.html file in a text editor and make the following updates:

Use <!-- and --> to comment out the locale links, as shown in the figure below.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

15

Page 16: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

I M P O R T A N T !

Portal themes allow for the use of separate localized theme files, as specified by the lines similar to the following:

<link rel="alternate" href="nls/theme_en.html" hreflang="en">

This indicates that when the browser is using the English locale, then the theme_en.html file located within the nls directory will be used. Having different theme files may be useful when you want to control the placement and order of items on the page (particular in right-to-left vs left-to-right languages).

For this lab, commenting out the language specific lines will force only the theme.html file to be used, regardless of the user's locale. Note that this just means the overall look and feel, and placement of items/menus on the page will remain the same for all languages. The actual content/text on the page can still display different languages as that is managed by WCM (ie content items) and Portal (ie page titles).

__15. Locate the <body> tag and insert the following line immediately afterwards:

<div>Custom Portal Theme</div>

__16. Save and close the file when complete.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

16

Page 17: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__17. Navigate back to AnyConnect Client.

Complete the following steps to use AnyConnect client to copy the entire custom.portal.85Theme folder from your local desktop into the WebDAV themelist directory:

__18. Click the refresh toolbar button to update the local system directory listing.

__19. Highlight the custom.portal.85Theme folder that is listed under Local System and click the green arrow to copy it to the themelist directory on the Portal server.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

17

Page 18: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__20. WAIT until you see a “File Transfer Complete” message. (The transfers progress bar may not always be accurate.) This may take 1-2 minutes.

__21. Verify that the custom.portal.85Theme folder now appears under the Remote System themelist directory. BROWSE THROUGH THE DIRECTORIES ON WEBDAV AND VERIFY THAT ALL THE FILES WERE SUCCESSFULLY COPIED.

__22. From the web browser, navigate to Administration → Portal User Interface → Themes and Skins page. Observe your new theme appears in the list of installed themes:

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

18

Page 19: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

NOTE: If you see a theme name that appears to be a system generated id, use the AnyClient WebDAV Client and verify that the localized_en.properties file (located in the metadata theme directory) was successfully copied. Remember, this is the file that contains the friendly theme title for the English locale and is what you previously modified.

__23. Now that the theme has been defined, you must configure which skins are to be associated with the new theme:

__24. Highlight the “Custom Portal Theme” and then click Edit Theme.

__25. Add all the Portal 8.5 skins to the list of skins for this theme. Set “Portal 8.5 – Hidden Plus” as the default skin for this theme.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

19

Page 20: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__26. Click OK to save the changes.

__27. Complete the following steps to update your ThemeDev page to use this newly created theme:

__a. Navigate to the CTC Demo → ThemeDev page.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

20

Page 21: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__b. Click the Edit Mode link to switch from view mode to edit mode.

__c. Edit the Page theme.

__d. From the Page Properties dialog window, go to the Advanced tab. Select Custom Portal Theme as the theme and click Save.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

21

Page 22: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__e. Click on View Mode to switch from edit mode to view mode.

__f. Observe the ThemeDev page is now using the new theme, as indicated by the small message that was inserted at the top of the page:

You might be wondering “why WebDAV?” and “where are the theme files stored?” By using the WebDAV interface, web designers can have easy access to the theme folder of the Portal environment. In effect, they are “mapping” a drive to Portal through a standards based protocol.

Theme files are stored within the Portal database. The database is shared among cluster members. As such, theme customizations are easily made available to all cluster nodes.

Before WebDAV, theme developers would work directly on the file system, and would have to rely on coordination with administrators for changes to be propagated to all cluster nodes.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

22

Page 23: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Lab 3 Explore Dynamic Content Spots

In this section, you will learn about dynamic content spots. The static template HTML theme files use dynamic content spots to reference JSP files or other dynamic resources. The dynamic resources are stored in a WAR file. The creation of dynamic content spots does require some development skill, and is beyond the scope of this lab. However, it is important to understand how they are used within the theme design, and as such, will be touched upon in this section.

__1. Start the WebDAV client. Create a new connection to the WebDAV mount point:

http://<your_hostname>:10039/wps/mycontenthandler/dav/fs-type1.

__2. Open the /themes/Custom Portal 8.5Theme/theme.html file in a text editor. (Right-Click on the file and select Open With → Text Editor )

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

23

Page 24: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__3. Observe that this is a static HTML file that contains the typical HTML elements and CSS class attributes. Also observe that HTML tags are also used to specify “dynamic content spots”, where dynamic content will be “inserted” during runtime (as shown in the figure below).

When done reviewing the HTML, close the theme.html file.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

24

Page 25: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

The dynamic content spots in the above picture use a 'logical name' (dyn-cs:id:85theme_topNav). With the 'logical name', the web designer only needs to reference a name/variable in the HTML file. The mapping of the name/variable to the actual dynamic code (JSP file) can be handled within the WebSphere Admin Console. This loose-coupling allows you to easily change the JSP file and keeps the web designer from having to know exact details about the JSP file URL.

Another method of referencing a dynamic content spot is by a 'direct name' (res:/ctc_theme/jsp/HomeLink.jsp). In this case, the theme developer must know the direct path to the JSP file. With the 'direct name', the web designer must work more closely with the developer, and must know the exact URL for the JSP files. While this does provide tighter-coupling, it removes the need to manage or map variable names to JSP files in the WebSphere Admin Console.

__4. You can see which JSP this dynamic content is mapped to in the theme's plugin.xml.

__5. It is mapped to /themes/html/dynamicSpots/navigation.jsp

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

25

Page 26: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

I M P O R T A N T!

If you are not a JAVA Developer, the contents of the JSP files may appear completely foreign to you. This is OK! The point here is that the web design (which includes HTML and CSS) is separate from the dynamic code (JSP files). The designer and the developer can work in parallel. In addition, as you will see later in the lab, most of the customization of the look and feel of a theme is handled within the CSS Styles and not necessarily within the JSP files.

Modifying the dynamic content spot JSP files provided by WebSphere Portal (i.e. navigation.jsp) is not recommended. Nor is saving your own custom JSPs into the “C:\IBM\WebSphere\PortalServer\theme\wp.theme.themes\default85\installedApps\DefaultTheme85.ear\DefaultTheme85.war” directory.

The reason is is that your changes may be lost when a fixpack is later applied. You should package your customized JSP files within your own web application. Details on how to do this is described within the WebSphere Portal InfoCenter.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

26

Page 27: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Lab 4 Combining of Resources in Theme Optimization

Although not visually apparent to the end-user, there are a number of techniques used by the server to perform theme optimization. One such technique is the combining of multiple resources (i.e. style sheets) into a single request.

__1. Using a web browser, login to the portal as fadams (password is passw0rd).

__2. Navigate to the CTC Demo → ThemeDev page.

__3. Open up developer tools. Examples for Firefox and Chrome are shown below

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

27

Page 28: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__4. From the developer console monitor the CSS network traffic. Refresh/reload the browser window. Observe there are a few requests for style sheets.

__5. Right-Click on the IBM Logo (located towards the top-left of the page) and select Inspect Element.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

28

Page 29: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__6. Observe that the style sheet that is used to style the logo area is of a combined type.

__7. To temporarily turn off this theme optimization, navigate to the Administration → Enable Traces page and add the following trace string:

com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

29

Page 30: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__8. Navigate back to the CTC Demo → ThemeDev page. Refresh/reload the browser window. Observe that the style sheet requests are no longer combined.

__9. Observe that the style sheet that is used to style the logo area is of a single type.

Temporarily turning off theme optimization is useful to the theme designer as it allows him/her to see the exact location of the CSS files that are contributing to a specific element style.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

30

Page 31: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Lab 5 Creating Custom Styles

Themes in WebSphere Portal follow modern web design practices in that CSS is heavily used for styling and positioning of elements on a page. Within the static html template (theme.html), you may have noticed the absence of the HTML Table tags, which were once used in older theme designs. The use of CSS allows for more optimization and flexibility, and has become a valuable tool in the web designer's toolbox. A single theme may take on different appearances based on the CSS Style that is applied to it. In this section, you will learn how to create your own custom style.

__1. If not already there, navigate to the CTC Demo → ThemeDev page. Click the Edit Mode link to switch from view mode to edit mode.

__2. From the Page toolbar go to the Style section.

NOTE: If you do not see any style colors, use the WebDAV Client to verify that the files from the /root/Desktop/custom.portal.85Theme/system directory were successfully copied to the /themes/custom.portal.85Theme/system directory on WebDAV.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

31

Page 32: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__3. Select the Red style. The Red CSS Stylesheet is automatically applied. Observe there is a slight change in the appearance of the page (i.e. red banner):

__4. Select the CTC Bordered style to go back to the original setting. Click Save and then click the View Mode link to switch from edit mode to back to view mode.

At this point you have seen the effect different styles can have on the theme. In the next set of steps, you will learn how to create your own customized style.

For the purposes of this lab, we will focus on the process for deploying additional, customized styles.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

32

Page 33: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__5. Complete the following steps to create a new directory structure for the new custom style:

__6. Navigate to the custom.portal.85Theme\css directory.

NOTE: Use the folder that you saved on your local desktop. Opening files directly on the WebDAV drive is also supported, but its performance is dependent on the WebDAV client being used.

__7. Within the css directory , create a new directory named ctcCustom.

__8. Copy the ctcCustom.css and icon.gif files from your lab files directory (under the Themes/styles section folder) into the newly created ctcCustom directory.

__9. (Optional) If you have time, you may want to quickly open ctcCustom.css in a text editor. Be careful not to make any changes. Observe that the file contains CSS styling.

__10. Verify that your directory structure now appears as follows:

Please Note – Once you open AnyClient, it is recommended you Disconnect and Connect again. This is to avoid any issues with connectivity. Please ensure you follow this step every time when you work with AnyClient and for all of the sections outlined below before you transfer files from Local System to a Remote System.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

33

Page 34: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__11. From AnyClient, navigate to the /root/Desktop/custom.portal.85Theme/css directory on the local system and the /themelist/custom.portal.85Theme/css directory on the remote system. Select the ctcCustom folder on the local system and click the green arrow to copy it to the portal server (as shown in the figure below).

__12. At this point, the new style directory and files have been copied. What remains to be done is to define this new style in the edit shelf/palette:

__13. Navigate to the custom.portal.85Theme\system directory.

NOTE: Use the folder that you saved on your local desktop. Opening files directly on the WebDAV drive is also supported, but its performance is dependent on the WebDAV client being used.

__14. Open the styles.json file in a text editor and add the following line to the styles.json. Refer to the screenshot below to help you ensure its inserted in the correct location. Don't forget to add a comma to separate this newly added line from the previous one.

{'label':'CTC Custom Style','id':'ctcCustom.css','url':'css/ctcCustom/ctcCustom.css','thumbnail':ibmCfg.themeConfig.themeRootURI+'/css/ctcCustom/icon.gif','help':''}

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

34

Page 35: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

NOTE: This should be entered in a single line. In the screenshot below, word-wrap was turned on to make viewing easier. In addition, instead of manually typing this in, you can copy/paste from the styles.txt helper file (located in the lab files directory under Themes – Styles folder).

__15. Save and close the styles.json file.

Please Note – Once you open AnyClient, it is recommended you Disconnect and Connect again. This is to avoid any issues with connectivity. Please ensure you follow this step every time when you work with AnyClient and for all of the sections outlined below before you transfer files from Local System to a Remote System.

__16. From AnyClient, navigate to the /custom.portal.85Theme/system directory on the local system and the /themelist/custom.portal.85Theme/system directory on the remote system. Select the styles.json file on the local system and click the green arrow to copy it to the portal server (as shown in the figure below).

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

35

Page 36: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__17. Clear the web browser cache and reload the browser page.

__18. Switch to Edit Mode

__19. Select the Page toolbar option and then the Style section. You should see your newly defined “CTC Custom Style” in the list:

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

36

Page 37: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__20. Select the CTC Custom Style. Switch to View Mode. Observe that a new style and new logo has been applied to the page.

The important concept in this section is that you can have one theme but different styles. Changing styles allows non-technical business owners to customize the appearance of the page.

Styles are created by persons with web design skill. CSS is a very powerful in that almost every aspect of the page can be controlled from a customized style sheet. This includes colors, element positions, and even background images. A web designer may use a Web Designer IDE to create a set of styles, which can then be added to the Portal as a customized style.

Although not covered in this lab, adding additional custom page layouts follows a similar process as adding new styles.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

37

Page 38: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Lab 6 Theme Profiles

Theme profiles are assigned to a page, and has a direct effect on how a theme renders and which features are available. The features are listed as 'modules' within a profile. In this section, you will learn about theme profiles and create your own custom profile.

S P E C I A L N O T E:

Usually, the profiles and module contributions are determined once, when the portal server is started and then they are used unchanged. Updates to the system are not included until a server restart occurs, for performance reasons.

Fortunately, a development mode can be enabled so changes can be seen immediately. To enable development mode, the resourceaggregation.development.mode property should be set to true within the WP ConfigService resource environment provider (REP). The WP ConfigService REP can be found within the WAS console under:Resources > Resource Environment > Resource Environment Providers.

This has already been done for you on the lab image.

__1. Navigate to the custom.Portal.85Theme\profiles directory on your desktop. Open the file profile_ctc_deferred.json

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

38

Page 39: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__2. Note the title

__3. and the description

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

39

Page 40: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__4. Close the file.

__5. In a browser open up your ThemeDev page and switch on Edit Mode. Open the Page toolbar and edit the page properties.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

40

Page 41: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__6. Switch to the Advanced tab. Note the CTC Content profile is in use and that the text matches the description from the json file.

__7. Make a copy of the profile_ctc_deferred.json file and name it profile_ctc_custom.json.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

41

Page 42: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Each profile has a different number of modules within them. For example, the lightweight profile includes the minimal modules required to render a portlet on a page. The full profile includes all modules rendered at page initialization, essentially the same amount of functionality that was seen in previous themes. The deferred profile will load the same modules as the lightweight profile in view mode, but when entering edit mode or opening the actions menu will load the deferred modules as well.

__8. Open the profile_ctc_custom.json file in a text editor. Locate the section which defines the title for the “en” language title, and change the value to “Custom Content with Tagging and Rating” (as shown in the figure below).

__9. Also modify the description

__10. Save and close the profile_ctc_custom.json file.

__11. From AnyClient, navigate to the custom.portal.85Theme/profiles directory on the local system and the /custom.portal.85Theme/profiles directory on the remote system. Select the profile_ctc_custom.json file on the local system and click the green arrow to copy it to the portal server (as shown in the figure below).

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

42

Page 43: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__12. In your web browser open your ThemeDev page, Clear the web browser cache and reload the ThemeDev page.

__13. In your web From the ThemeDev page, switch to Edit Mode

__14. Open the Page properties and edit the Profile setting.

__15. Select “Custom Content with Tagging and Rating” as the profile and click Save.

NOTE:: If you do not see “Custom Content with Tagging and Rating” listed in the profile list, please clear your browser cache.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

43

Page 44: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

At this point, you have made a copy of an existing profile and have configured the ThemeDev page to use this new profile. In the next set of steps you will make some modifications to this new custom profile.

__16. On your ThemeDev page click on Actions. Note that the drop down menu currently contains options for analytic reports..

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

44

Page 45: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__17. Edit your profile_ctc_custom.json file and remove the analytics contribution.

__18. Save your changes and copy them to the server.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

45

Page 46: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__19. In your browser switch to the Portal Analysis Administration option.

__20. Select Theme Analyzer

__21. Select Utilities

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

46

Page 47: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

__22. Select Control Center

__23. and Invalidate the cache.

__24. Now back on your THEMEDEV page you will see the reports options are no longer contributing.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

47

Page 48: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Profiles also allow for another level of theme optimization. Note that modules listed under the “deferredModuleIDs” section are NOT loaded during the initial page render. Instead, resources for this module are loaded only when needed (i.e. when the user switches the page from View mode to Edit mode).

You have now successfully completed this lab and learned how to customize a theme.

END OF THIS LAB

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

48

Page 49: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Software

Appendix A Notices

This information was developed for products and services offered in the U.S.A.

IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service.

IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing of this document does not grant you any license to these patents. You can send license inquiries, in writing, to:

IBM Director of LicensingIBM CorporationNorth Castle DriveArmonk, NY 10504-1785U.S.A.

For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property Department in your country or send inquiries, in writing, to:

IBM World Trade Asia CorporationLicensing2-31 Roppongi 3-chome, Minato-kuTokyo 106-0032, Japan

The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement may not apply to you.

This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice.

Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk.

IBM may use or distribute any of the information you supply in any way it believes appropriate without incurring any obligation to you.

Appendix Page 49

Page 50: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Digital Experience Version 8.5

Any performance data contained herein was determined in a controlled environment. Therefore, the results obtained in other operating environments may vary significantly. Some measurements may have been made on development-level systems and there is no guarantee that these measurements will be the same on generally available systems. Furthermore, some measurements may have been estimated through extrapolation. Actual results may vary. Users of this document should verify the applicable data for their specific environment.

Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products.

All statements regarding IBM's future direction and intent are subject to change or withdrawal without notice, and represent goals and objectives only.

This information contains examples of data and reports used in daily business operations. To illustrate them as completely as possible, the examples include the names of individuals, companies, brands, and products. All of these names are fictitious and any similarity to the names and addresses used by an actual business enterprise is entirely coincidental. All references to fictitious companies or individuals are used for illustration purposes only.

COPYRIGHT LICENSE:

This information contains sample application programs in source language, which illustrate programming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operating platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs.

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM EcoSystem Development

50

Page 51: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

IBM Software

Appendix B Trademarks and copyrights

The following terms are trademarks of International Business Machines Corporation in the United States, other countries, or both:

IBM AIX CICS ClearCase ClearQuest Cloudscape

Cube Views DB2 developerWorks DRDA IMS IMS/ESA

Informix Lotus Lotus Workflow MQSeries OmniFind

Rational Redbooks Red Brick RequisitePro System i

System z Tivoli WebSphere Workplace System p

Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.

IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications Agency which is now part of the Office of Government Commerce.

Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both.

ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet Office, and is registered in the U.S. Patent and Trademark Office.

UNIX is a registered trademark of The Open Group in the United States and other countries.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or its affiliates.

Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other countries, or both and is used under license therefrom.

Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp. and Quantum in the U.S. and other countries.

Appendix Page 51

Page 52: WebSphere Portal V8.5 Lab Manual · 2015-08-27 · IBM Digital Experience Version 8.5 Lab 2 Create Custom Theme In this section, you will learn how to use the WebDAV interface to

© Copyright IBM Corporation 2014

The information contained in these materials is provided for

informational purposes only, and 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, these

materials. Nothing contained in these materials 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. References in these materials to IBM products,

programs, or services do not imply that they will be available in all

countries in which IBM operates. This information is based on

current IBM product plans and strategy, which are subject to change

by IBM without notice. Product release dates and/or capabilities

referenced in these materials may change at any time at IBM’s sole

discretion based on market opportunities or other factors, and are not

intended to be a commitment to future product or feature availability

in any way.

IBM, the IBM logo, and ibm.com are trademarks of International

Business Machines Corp., registered in many jurisdictions

worldwide. Other product and service names might be trademarks of

IBM or other companies. A current list of IBM trademarks is

available on the Web at “Copyright and trademark information” at

www.ibm.com/legal/copytrade.shtml.