XPages and Me

My Journey into XPages Development

Dabbling in Bootstrap and Font Awesome Part 2: The order of things – how to set up your Theme

When setting up your theme in order to use Bootstrap, the order in which CSS and JavaScript files are getting loaded is important. This is especially true when using Bootstrap with IE8 / IE9, as this requires additional JavaScript files, so, IE8 / IE9 will play nicely with Bootstrap.

Note: For my applications, I didn’t use any CDN sites to load the CSS and JavaScript files. My audience might not be connected to the internet, so, I decided to download all the files needed and put them in a web resources database from where they can be referenced from any application. That way, I just have to update any CSS and/or JavaScript files in one place. But this is not important for the topic of this post, however you load your files is fine.

Also, I won’t go into detail as to how to add Font Awesome / Bootstrap CSS and JavaScript files to your application as there are already plenty of blog posts regarding these topics. Simply do a search “XPages Bootstrap” or “XPages Font Awesome” and you’ll find these posts.

The way I set up my themes (I use additional bootswatch themes) was inspired by Tim Tripcony’s video post on NotesIn9 136: Using XPages with Bootstrap 3 and FontAwesome.

Lets get started.

Preparations:

As you might or might not know, in order for Bootstrap to work with IE8 / IE9, you have to use additional JavaScript files:

html5shiv.js (GitHub Project)

respond.js

If you decide to download the JavaScript files rather than going thru CDN, extract the .zip files and then either add the JavaScript files as a resource under files:

Image 1

Or you can store them in the WebContent Folder. Open the Package Explorer (Window – Show Eclipse View – Package Explorer) and locate the WebContent Folder. Do a right-mouse-click on the folder, then select “New – Other”:

Image 2

In the prompt, open the category “General” select “Folder” then click on “Next”:

Image 3

I gave my folder the name IE89 as I am going to put IE8 / IE9 specific files in there. Give your folder a name, then click on “Finish”:

Image 4

I also created two sub-folders under IE89 for each of the two JavaScript files: html5shim for html5shiv.js and respond for the respond.js. After you’ve created your folder structure, simply drag-and-drop the extracted files in there. After all that is done, mine looks like this:

Image 5

 

Now, lets get to setting up our Themes.

Font Awesome:

Create a new theme in your application and name it “fontawesome”. Delete everything from the theme until it looks like this:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >

</theme>

Then add fontawesome.min.css as a resource and your theme should look like this:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >

    <!-- Font Awesome Styleheet -->
        <resource>
            <content-type>text/css</content-type>
            <href>/.ibmxspres/domino/webres.nsf/font-awesome/css/font-awesome.min.css</href>
        </resource>

</theme>

Save and close your theme

 

Next up the Bootstrap Theme. This is where the magic happens.

Bootstrap:

Create another theme and name it “bootstrap”. Delete everything from it and have it extend our fontawesome theme. Your theme should now look like this:

<theme extends="fontawesome" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">

</theme>

The first thing that needs to be added is the Bootstrap CSS:

<theme extends="fontawesome" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">

    <!-- Bootstrap Styleheet -->
        <resource>
            <content-type>text/css</content-type>
            <href>/.ibmxspres/domino/webres.nsf/bootstrap/css/bootstrap.min.css</href>
        </resource>

</theme>

Next, add the html5shiv and respond JavaScript files. As we need them only for IE 8 / IE9, we add the rendered property, which will allow us to check, which browser opens our application and if it is IE8 / IE9, load these additional JavaScript files:

<theme extends="fontawesome" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">

    <!-- Bootstrap Styleheet -->
        <resource>
            <content-type>text/css</content-type>
            <href>/.ibmxspres/domino/webres.nsf/bootstrap/css/bootstrap.min.css</href>
        </resource>

       <!-- START: IE 9 and lower specific. -->
           
        <!-- JavaScript libraries to make IE8/9 play nicely with Bootstrap and Font Awesome        
             These files need to be loaded before the jquery and bootstrap JavaScript libraries -->
                 <resource rendered="#{javascript:context.getUserAgent().isIE(7,9)}">
                    <content-type>application/x-javascript</content-type>
                    <href>/.ibmxspres/domino/webres.nsf/IE89/html5shim/html5shiv.min.js</href>
                </resource>
                
                <resource rendered="#{javascript:context.getUserAgent().isIE(7,9)}">
                    <content-type>application/x-javascript</content-type>
                    <href>/.ibmxspres/domino/webres.nsf/IE89/respond/respond.min.js</href>
                </resource>
                
       <!-- END: IE 9 and lower specific. -->

</theme>

 

Note: You can use SSJS in your theme which gives you some great possibilities. I will elaborate on that in a different post.

Lastly, we add a meta tag that tells Bootstrap that we want a responsive layout and the JQuery and Bootstrap JavaScript files:

<theme extends="fontawesome" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">

    <!-- Bootstrap Styleheet -->
        <resource>
            <content-type>text/css</content-type>
            <href>/.ibmxspres/domino/webres.nsf/bootstrap/css/bootstrap.min.css</href>
        </resource>

       <!-- START: IE 9 and lower specific. -->
           
        <!-- JavaScript libraries to make IE8/9 play nicely with Bootstrap and Font Awesome        
             These files need to be loaded before the jquery and bootstrap JavaScript libraries -->
                 <resource rendered="#{javascript:context.getUserAgent().isIE(8,9)}">
                    <content-type>application/x-javascript</content-type>
                    <href>/.ibmxspres/domino/webres.nsf/IE89/html5shim/html5shiv.min.js</href>
                </resource>
                
                <resource rendered="#{javascript:context.getUserAgent().isIE(8,9)}">
                    <content-type>application/x-javascript</content-type>
                    <href>/.ibmxspres/domino/webres.nsf/IE89/respond/respond.min.js</href>
                </resource>
                
       <!-- END: IE 9 and lower specific. -->
       
       
       <!-- jquery and bootstrap JavaScript libraries need to be placed at the end of the head-tag -->
        <resources>
            <metaData name="viewport" content="width=device-width, initial-scale=1.0" />
            <script clientSide="true" src="/.ibmxspres/domino/webres.nsf/jquery/jquery.min.js" />
            <script clientSide="true" src="/.ibmxspres/domino/webres.nsf/bootstrap/js/bootstrap.min.js" />
        </resources>

</theme>

 

And there you go, you are all set to use Bootstrap and Font Awesome in your application. What I typically do is, I create another theme called application, extending the bootstrap theme and I use the application theme to add application specific resources / settings.

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: