How to implement Bootstrap Framework in IBM Websphere Portal for custom theme?
Today we will present some of the best practices about UI, Theme (html, css, javascript, images, fonts) code incorporation into the IBM websphere portal.
The front end framework includes a css file, which is responsive, which follows a grid system, provides styling for UI elements and takes care of accessibility and cross browser compatibility to an extent.
We have used Bootstrap 3.2.0, Bootstrap Theme provide grid system for a responsive design.
The HTML in the portal will only be referencing the class names that are defined in the framework’s css file, enhancing the user experience and this css file is included in the portal theme.
We have made Bootstrap Theme for Digital Experience Software.
How you can integrate Bootstrap into your Portal, allowing you to take advantage of Bootstrap's framework for developing responsive, mobile first pages.
- Bootstrap File structure
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
- Basic HTML template
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Bootstrap 101 Template</title>
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <!-- Bootstrap -->
7. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
8. </head>
9. <body>
10. <h1>Hello, world!</h1>
11. <script src="http://code.jquery.com/jquery.js"></script>
12. <script src="js/bootstrap.min.js"></script>
13. </body>
14. </html>
Now copy Bootstrap CSS & JS files into your portal static resources.
Now Edit theme_en.html in nls folder.
Change <!DOCTYPE> / <head> & <meta> Sections to use which Bootstrap provide. In Portal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
In Bootstrap:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Now we can include CSS and JavaScript files in theme level through theme.json make new module in theme.json, the file locate in contributions folder static resources.
Edit theme.json file.
{ "modules":[{ "id":"wp_theme_portal_7002",
"prereqs":[{ "id":"wp_client_main"
}],
"contributions":[{
"type":"head",
"sub-contributions":[{ "type":"js",
"uris":[{ "value":"/js/head.js"
}]
},{
"type":"css",
"uris":[{ "value":"/css/master.css"
},{
"value":"/css/masterRTL.css", "type":"rtl"
}]
}]
}]
}, {
"id":"wp_theme_edit",
"prereqs":[{
"id":"wp_client_main"
}],
"contributions":[{
"type":"config",
"sub-contributions":[{
"type":"js",
"uris":[{
"value":"/js/theme.js"
{
"value":"/js/theme.js.uncompressed.js", "type":"debug"
}]
}]
}]
},
{
"id":"wp_theme_menus",
"prereqs":[{
"id":"wp_client_main"
}, {
"id":"wp_portal"
}],
"contributions":[{
"type":"config",
"sub-contributions":[{
"type":"js",
"uris":[{ "value":"/js/contextmenu.js"
}, {
"value":"/js/contextmenu.js.uncompressed.js", "type":"debug"
}]
}]
}]
}
I have added a new module which is named "NewModuleAdd", then include CSS and JavaScript files into theme level.
,
{
"id":"NewModuleAdd",
"prereqs":[{ "id":"wp_client_main"
}],
"contributions":[{
"type":"head",
"sub-contributions":[
{
"type":"css",
"uris":[{
"value":"/css/bootstrap.min.css"
}]
},{ "type":"css",
"uris":[{
"value":"/css/sup_standards.css"
}]
},{ "type":"css",
"uris":[{
"value":"/css/navbar.css"
}]
},{ "type":"js",
"uris":[{
"value":"/js/jquery.min.js"
}]
},{ "type":"js",
"uris":[{
"value":"/js/bootstrap.min.js"
}]
},{ "type":"js",
"uris":[{
"value":"/js/navbar.js"
}]
},{ "type":"js",
"uris":[{ "value":"/js/fontsize.js"
}]
}]
}]
}]
}
Now you should Add Module name in theme profile the file locate in profiles folder static resources.
Edit profile_full.json in some editor and Save As different name, I have prefer to Save file" profile_responsive.json" name this is the best practices.
In profile_responsive.json I have just Add New Module which I have create in theme.json file "NewModuleAdd", examples given below.
{
"moduleIDs" : [
"wp_portal",
"wp_theme_portal_7002",
"wp_portlet_css",
"wp_legacy_layouts",
"wp_layout_windowstates",
"wp_client_main",
"wp_client_ext",
"wp_theme_menus",
"wp_one_ui_21",
"wp_theme_edit",
"wp_theme_widget",
"wp_pagebuilder_base",
"wp_pagebuilder_ui",
"wp_pagebuilder_controls",
"wp_pagebuilder_debug",
"wp_pagebuilder_data",
"wp_pagebuilder_dnd",
"wp_pagebuilder_shelf",
"wp_tagging_rating",
"wp_analytics",
"wp_liveobject_framework",
"mm_builder",
"mm_enabler",
"mm_open_ajax_hub",
"mm_page_toolbar",
"mm_customize_shelf",
"mm_new_page_dialog",
"mm_builder_wiring",
"mm_builder_dialogs",
"mm_move_page",
"mm_delete_page",
"mm_delete_control",
"mm_page_sharing",
"dojo_16",
"dojo_app_16",
"dojo_data_16",
"dojo_dom_16",
"dojo_dnd_basic_16",
"dojo_dnd_ext_16",
"dojo_fmt_16",
dojo_fx_16",
"dijit_16",
"dijit_form_16",
"dijit_layout_basic_16",
"dijit_menu_16",
"dijit_theme_tundra_16",
"dijit_tree_16",
"dojox_aspect_16",
"dojox_collections_16",
"dojox_data_basic_16",
"dojox_fx_16",
"dojox_io_16",
"dojox_layout_basic_16",
"dojox_string_16",
"dojox_uuid_16",
"dojox_xml_16",
"wp_portal_client_utils",
"wp_portlet_client_model",
"wp_portal_client_rest_utils",
"NewModuleAdd"
]
}
Now back to nls folder and edit theme_en.html, below is default portal theme.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="dynamic-content" href="co:head">
<link rel="dynamic-content" href="dyn-cs:id:7002theme_head">
</head>
<body class="tundra locale_en">
<div id="customizeShelfContainer"></div>
<div id="pageToolbarButtons"></div>
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
<span class="wpthemeAltText">IBM WebSphere Portal</span>
</div>
<a rel="dynamic-content" href="dyn-cs:id:7002theme_topNav"></a>
<a rel="dynamic-content" href="dyn-cs:id:7002theme_pageModeToggle"></a>
</div>
</div>
<div class="wpthemeBanner">
<div class="wpthemeBannerInner">
<div class="wpthemeInner">
<a rel="dynamic-content" href="dyn-cs:id:7002theme_primaryNav"></a>
<a rel="dynamic-content" href="dyn-cs:id:7002theme_commonActions"></a>
<div class="wpthemeClear"></div>
</div>
</div>
</div>
<div class="wpthemeSecondaryBanner">
<div class="wpthemeInner">
<a rel="dynamic-content" href="dyn-cs:id:7002theme_secondaryNav"></a>
<a rel="dynamic-content" href="dyn-cs:id:7002theme_search"></a>
<div class="wpthemeClear"></div>
</div>
</div>
</header>
<div class="wpthemeClear"></div>
<div class="wpthemeMainContent">
<div class="wpthemeInner">
<a rel="dynamic-content" href="dyn-cs:id:7002theme_crumbTrail"></a>
<div class="wpthemeClear"></div>
<div id="wpthemeStatusBarContainer"></div>
</div>
<a rel="dynamic-content" href="state.portlet:portlet?include=windowState&include=portletMode&mime-type=text/html"></a>
<div id="layoutContainers" class="wpthemeLayoutContainers wpthemeLayoutContainersHidden" role="main">
<div class="wpthemeInner">
<a rel="dynamic-content" href="dyn-cs:id:7002theme_layout"></a>
<div class="wpthemeClear"></div>
</div>
</div>
</div>
<footer class="wpthemeFooter">
<div class="wpthemeInner">
<a rel="dynamic-content" href="dyn-cs:id:7002theme_footer"></a>
<div class="wpthemeClear"></div>
</div>
</footer>
</div>
<a rel="dynamic-content" href="dyn-cs:id:7002theme_asa"></a>
<a rel="dynamic-content" href="co:config"></a>
</body>
</html>
We have incorporated the HTML theme layout structure which we have made into the theme_en.html, below is custom portal theme.
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="dynamic-content" href="co:head">
<link rel="dynamic-content" href="res:/Themedirectory.war/themes/html/dynamicSpots/head.jsp">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="themeBody" onLoad="setDefaultFontSize()">
<!-- Start frame -->
<!-- Start header -->
<header class="full-header">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4 logo">
/* URL href locate in dynamicSpots You Shuld change dynamicSpots path */
<a rel="dynamic-content" href="res:/themedirectory.war/themes/html/dynamicSpots/logo.jsp"></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-8 head-links">
<a rel="dynamic-content" href="res:/Themedirectory.war/themes/html/dynamicSpots/commonActions.jsp"></a>
<div>
</div>
</div>
</header>
<!-- end header -->
<!--Start main content-->
<section class="container">
<div class="row">
<div class="content-bg">
<div class="col-xs-12">
<a rel="dynamic-content" href="res:/Themedirectory.war/themes/html/dynamicSpots/contentNav.jsp"></a>
/* DO NOT CHANGE BELOW TWO BLACK CONTENT */
<!--start center content-->
<div id="layoutContainers" class="row" role="main">
<div class="col-xs-12">
<a rel="dynamic-content" href="dyn-cs:id:layout"></a>
</div>
</div>
<!--end center content-->
</div>
</div>
</div>
</section>
<!--end main content-->
<!-- Start footer -->
<div class="footer-bg">
<footer class="container">
<div class="row">
<a rel="dynamic-content" href="res:/Themedirectory.war/themes/html/dynamicSpots/footer.jsp"></a>
</div>
</footer>
</div><!-- end footer -->
<a rel="dynamic-content" href="res:/wps/themeModules/modules/asa/jsp/asa.jsp"></a>
</body>
</html>
Once these steps are done, you can begin to condense all files and make it into a .war file and deploy and test them as a guide to leverage Bootstrap as you need within your Portal.
These are the best practices a Front End Developer needs to follow while working with portal theme.
