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
Hello, world!
Now copy Bootstrap CSS & JS files into your portal static resources.
Now Edit theme_en.html in nls folder.
Change / & Sections to use which Bootstrap provide.
In Portal:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In Bootstrap:
<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.
IBM WebSphere PortalWe have incorporated the HTML theme layout structure which we have made into the theme_en.html, below is custom portal theme.
/* URL href locate in dynamicSpots You Shuld change dynamicSpots path */
/* DO NOT CHANGE BELOW TWO BLACK CONTENT */
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.
