Using Bootstap to Create a Responsive Application Design - Part 1

My new project involves creating an entirely new Purchase Order database to replace a "traditional" domino application.    We decided to sunset the our old PO database, and start from scratch using xpages and a modern look and feel.   This application will be customer facing, so unlike an internal app, I don't know what user agent the customer will be using.

To make the app friendly to any type of device, I decided to create a responsive design using Bootstrap.   I will create a series of post based on my experience (or lack thereof) using this method.

To start, I decided to use Collaboration Today as a model.   The design is out on openntf for all to use.   Prior to starting this project, I learned as much as I could on Bootstrap and managed Java beans since I will be using both on this project.

Getting started was selectively copying elements from CT.nsf into my design, and removing elements I don't need.   This is the first app that I used a theme, and I finally see the benefits of using them.   Another strange thing that happened is that I found myself (so far) exclusively using the Source pane.  When integrating outside frameworks, the design pane is virtually useless.

My design has far less content that CT, so I so far am using just two custom controls for the layout.   One called "layout" which contains the grid, and one called "header" which contains the menu bar.   All of my xpages will call these two custom controls.

This is all subject to change, but this is how it looks so far.

This is the design when viewed in a normal desktop and a tablet in the horizontal position.

This is the very same design when view on a tablet vertically.  Notice button bar instead of dropdown menu.

Again, the very same design in a mobile device.   Note:  I load a smaller logo for mobile, but otherwise the same a vertical tablet.

Effect of touching menu button.  The main content slides down gracefully.

Notes:

• I am using Google Web Fonts.   I haven't used them before, but now I am a big fan.  I might do a separate post on how easy they are to use.
• In my CSS, I make extensive use of media queries, to setting padding, borders, etc. 
• My main grid at this point is a 1-10-1 layout.   This is subject to change.
• I am really just beginning here, and will document more coding methods as I get further into this project.

Java vs .NET

This is a technical blog and all, but I couldn't resist posting this funny video about .NET and Java.   The voices are in Norwegian (I think), with English subtitles.   Worth a watch!

Command Not Handled Exception

I discovered today that it is real easy to have something minor wrong in XML, and got a Command Not Handled Exception.

I was going through the exercise of creating a new managed bean for an upcoming project.  I was working through Russ Maher's master class from IBM Connect 2013.  The links to all the xpages presentations have recently been posted here.   I had previously reviewed the slides, but now the video is available!  What is cool, is that as I work through the presentation, I am actually coding for my new project.  You can't pause a live presentation, like you can the video.

When I copied existing XML from another faces-config, I somehow made a syntax mistake, and got the "Command Not Handled Exception" as a result.    To figure out what is wrong, you need to look on the server in the "data/IBM_TECHNICAL_SUPPORT" folder and see the stack trace for the unhandled exception.   

I had thought the issue was that I was using 9.0 and the development server was 8.5.3, but it had nothing to do with that.   I guess another reason to hate XML.  I am glad that JSON is eclipsing the use of XML these days.  Of course, XML will likely be around in some form forever.  

Wow, my first Notes In 9 Episode

It was quite the honor to have the opportunity to present in Episode 107 of Notes In 9.   A year ago, I was trying to learn Xpages solely from the Mastering Xpages book and had yet to discover the wealth of knowledge out there.   

Last June, I started looking for work again, and had an interview cancelled after I told them that I hadn't yet worked with Xpages.  I was really disappointed since it seemed like a great job in a desirable location near where I grew up in Pennsylvania.   In hindsight, I can clearly see why it mattered so much to have someone who knew Xpages, and that all that traditional Notes experience wouldn't cut it.     After this happened, we visited my parents and parked there for three weeks (we were living in an RV at that time).   I studied for 10-12 hours each day and started to get some knowledge under my belt. 

During this time, I discovered Notes in 9 on YouTube.  It explained Xpages in a way that made the sense to me, something that honestly the Mastering Xpages book failed to do.   Nothing against the book, but I am a visual person.  The book also tends to exclude the Xpages Design view, and focus solely on the Source view. 

I have heard it said, that you might be surprised how little you can accomplish in a day, but how much you can in a year.   After making this blog, I sent Dave a quick note, thanking him for the push to create it.   He wrote back and thought the Feb 27 post on launching attachments from a view control was worthy of a show.   I initially balked, but then agreed to do it, and am really glad how it came out.   I would never have guessed that 10 months ago that I would ever actually be a guest contributor.  

Here is the link to the show.  A big thanks to Dave Leedy for the chance to share something back with the Notes community!

My unconventional use of Fancy Typeahead

Last week, I implemented using Fancy Typeahead to replace a combobox I was using to lookup Vendor information.   It works way better and was well received by the users!   No more @DbColumn, no more explaining that I can't have more that 1500 vendors or the application will break.   No designer in this decade puts 800 values in a dropdown.

This post is not intended to go over the details of how Fancy Typeahead works.   It is best explained by its creator, Tim Tripcony on his blog, or by David Leedy in this Notes in 9 episode.

Let me explain my unconventional use of fancy typeahead by first saying the other night at 3AM my two year old son came blazing in our room and woke me up so that I couldn't get back to sleep.   During this time it occurred to me that I could use the same functionality to give the users a way to check the status of an invoice document.  Nevermind that they don't need to do anything with the information that is returned.

Here is how it works:
1) This is how it looks when section is expanded.  Notice the HTML5 placeholder text.

 

2)  When you start typing an invoice number, the type ahead starts working.

3)  When the user finds the invoice they are looking for.  They can read the typeahead info and find all the info that they will need.   This will be the most useful part!

4) The user can if they choose click on the typeahead value, and it will return the first line to the input box.  I have to return something to get it to work.  At any point, if the user has seen all they need, then can push the black X to clear the field and start typing the next invoice to look up.

The hardest part of implementing this, was getting the HTML correct in the typeahead text.  I used a table with two columns, the first with a rowspan=2.  I used simple if statements, to set different text and images depending on the approval status. The rest was a lot of trial and error until I liked the way it looked.  Also, I had to bind the textbox to something, so I bound it to a viewScope variable appropriately named 'saveNever'.

Useful tool for creating Regular Expressions

I needed to create a regular expression in javascript to validate a textbox where I was using typeahead to populate the data.    If the user entered garbage the typeahead data would go away and the garbage would stay.

I decided to use a RegEx to fix this issue, but honestly I was not all that familiar with them.   I had used them in years past, but just copied and pasted ones created by someone else.   In this case, I had to create my own expression.

I tried reading up on them in my javascript book: Javascript for Web Developers, but I just wasn't getting it.   I then remembered that there was a video training course on Lynda.com that covered RegEx.   The whole course is over five hours, but I was able to get what I needed in the first 4 chapters.   The teacher really helps to make sense of them.  (You will need to be a subscriber to see videos)

In the course, he recommends the tool Regex Pal, as a means of testing your expressions.   It is very simple and easy to use and a good tool in the toolbox.  The format is standard across all major programming languages.

Here is the finished clientside javascript that I added to my application.  The tool helped me to generate the second line, and allow me to paste actual data to test that the expression correctly matches.

var x=document.getElementById("#{id:inputText2}").value;

var expression = /.* - .* - .*/;  //regex matching vendor format

if (expression.test(x)=== false)

{

   alert("Please choose proper Vendor Name from the dropdown list.");

   document.getElementById("#{id:inputText2}").value = "";

   document.getElementById("#{id:inputText2}").focus();

   return false;

} 

Video Based Training rocks!

I discovered this year how much I enjoy formal video based training.  For me, it is really beneficial because I fit in anytime whether eating lunch or in the evening.   I like the way it is broken into short chapters.  I had already discovered subject based videos like Notes and 9 and benefited greatly, but what I am talking about here is more like a college class with subjects that are covered in a comprehensive way.

I still like books, and all but admit that I struggle every time I try to open my "Mastering Xpages" book.   I am making good progress with Head First Java, but still have a ways to go.   Books are great for helping me fall asleep.

This year I was turned on to Lynda.com, which is amusing for me because my wife's name is Linda.   I first heard about it from listening to the Taking Notes podcast.   Since then I have signed up and have completed 8 courses, and have many more that I intend to watch.  It cost $25 a month and is well worth it.

The course I have completed on Lynda.com are:

• Up and Running with HTML - although I knew this pretty well, this helped fill in the gaps with the current version of HTML.  James Williamson is an excellent teacher.
• Javascript Essential Training - another subject I knew fairly well, but this course really gave me a more rounded understanding of how Javascript works and then in the end tells you to learn jQuery.
• HTML5 First Look - Great course on the new standard for the web
• CSS Fundamentals - I really needed this one.  
• Javascript and AJAX - loved this course, Ray Villalobos really taught me a lot
• Responsive Design Fundamentals - I feel better prepared for the eventual mobile development project
• Javascript and JSON - similar to JS and AJAX - really learned a lot of good stuff in this one
• CGI Essential Training - older course, but I wanted to know more about the old way of doing things

These are courses I am currently working through:

• jQuery Essential Training - taking lots of notes, great course so far
• Java Essential Training - using to help train my daughter to learn java
• Up and Running with Bootstrap - just started this one

In the future, I have intentions to use Lynda.com to learn Sharepoint, and Ruby on Rails, just because I want to know how other frameworks do things, and you never know when that might be needed.

In addition to Lynda.com, I have a free month to use at some point on pluralsight.com, which has a lot of the same content. 

I am also working through Matt White's XPages101, but I will save that for another post.