192 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 6
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 5
Simple Example: Bootstrap
Tue, May 3rd 2016 4
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 6
REST via Service Bean
Tue, Feb 16th 2016 3
Reversing the display order of a Multi-value field (XPages)
Wed, Jan 13th 2016 4
nhttp preview won't "switch ID"
Mon, Dec 7th 2015 5
Top 10
dataTable with Categories
Tue, Jul 14th 2015 6
Bootstrap Progress Bars - sample database
Wed, Aug 12th 2015 6
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 6
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 6
Populate an InputText Date field (that has a calendar picker)
Fri, Jun 26th 2015 5
dataTable column width
Tue, Jul 14th 2015 5
nhttp preview won't "switch ID"
Mon, Dec 7th 2015 5
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 5
DirectoryNavigator via Java
Wed, Nov 4th 2015 4
Reversing the display order of a Multi-value field (XPages)
Wed, Jan 13th 2016 4


Simple Example: Bootstrap
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

The Bootstrap library is a great way to do responsive design, and it's been incorporated into the Extension Library so you can use it "out of the box". The problem I've found is that the samples provided are pretty complex. Not too helpful if you are starting out since you have to try to figure out callbacks and a lot of other stuff to get to the points you want.

I think overly complex starter examples are a waste. They let the creator think they have provided something without actually helping the new person find their way. If you wanted the BootStrap Navbar, for example, it's hard to find that element in a way you can just use it and figure out how to get fancy later.

I've been taking a course that includes Bootstrap, and it's helped me figure out how it works. So I decided to so create a database showing some of the basics so someone moving to Bootstrap (especially from traditional Notes or non-Bootstrap XPage work). It's not designed to show everything, but to help out in showing some of the basics. I think once someone gets these under their belt, the rest will come more easily.

Here is what is in this example, all in separate XPages so you can see just that.

  1. NavBar: the useful top. This one includes some links that collapse to the burger menu when on a mobile device. Also I've included a glyph in the upper right which is common and looks good. 
  2. Jumbotron: The big top on a lot of websites, and with a button to go somewhere. It also shows how to use the Bootstrap styling of a button "btn btn-primary", you can put in "btn btn-success" for the green one, for example. 
  3. Well/InputForm: This is my most complex entry here. This gives the nice appearance where there is  grey box (the "well") with labels and fields and a nice button. 
    1. Put everything in a container, there there is a div for the well, then a div for the form group. These combine for the appearance desired.
    2. I use the a "Display Errors" control and style it with the "alert alert-danger" for the expected Bootstrap validation.
    3. I put in a combobox so you can see how it styles as well
  4. ContexturalBackgrounds: these show the colors behind a paragraph or other elements. I have a variety of them. 
  5. Lists: Also showing different colors for list items, list groups, and divs where you can put other elements.
  6. Offset columns: Bootstrap uses a grid system, and I have a page sampling the width and offset. Offset lets you specify the number of columns on either side of the 'populated' column. These allow the resizing needed going from desktops to mobile devices. 
 In the database, change theme to one of the Bootstrap ones provided, like Bootstrap3.2.0.

If you need to use Themes in your application, you can incorporate this one like this:

<theme extends="Bootstrap3.2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">
   
        <!-- jQuery -->
    <resource>
        <content-type>application/x-javascript</content-type>
        <href>bower_components/DataTables/media/js/jquery-2.2.0.min.js</href>
    </resource>
....(other resources)
</theme>


It's the first node, "theme extends" that does it, incorporating the Bootstrap theme from the Extension library into the theme you need.

It is my hope that this will be easier for someone to see how Bootstrap works in XPages

Here is the database.

Cheers,
Brian

---------------------
http://dominoherald.blogspot.com/2016/05/simple-example-bootstrap.html
May 03, 2016
5 hits



Recent Blog Posts
6
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 1:21p   Brian M. Moore
Declan Lynch provided a Signature Capture Control on OpenNTF some time ago. I had downloaded and played with it a bit, but hadn't had a production use for it, but it worked just like it said on the tin - drop it in and use it. Recently I was asked to come up with a way to let people sign into an event using tablets, so a perfect opportunity to pull it out. It was a breeze to add it to the sign-in portion, we display a page on a mobile device and the user can sign in on the canvas. That was the
5
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 11:22a   Brian M. Moore
So I find I need to purchase a Domino license again, this happens for independent developers. I make my selection and get taken to what IBM is now calling the "Marketplace" to check out. However the option to enter a credit card to actually pay for my purchase is greyed out. So I call in. There is a wait and a lady answers. She asks the typical questions and then for me to send them an email with a screen shot. I ask for a ticket number so I can track this request (my reopened ticket for Bluem
5
Simple Example: Bootstrap
Tue, May 3rd 2016 8:23p   Brian M. Moore
The Bootstrap library is a great way to do responsive design, and it's been incorporated into the Extension Library so you can use it "out of the box". The problem I've found is that the samples provided are pretty complex. Not too helpful if you are starting out since you have to try to figure out callbacks and a lot of other stuff to get to the points you want. I think overly complex starter examples are a waste. They let the creator think they have provided something without actually hel
6
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 9:17p   Brian M. Moore
We have not had a direct way to import into Notes since it became impossible to save a file in .123 format (or .wk4). I loved being able to import from a view. To work around this, some years ago I created an agent that used MSExcel and two files. That worked when I had MSExcel on my machines, but I don't any more, especially for my personal machines where I won't pay for it. So I needed to change to to import CSV files, which I can do via LibreOffice. So I updated what I had posted in 2009.




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition