Author Archives

30 Jul 2015
0

XPages and Bootstrap Tip: Style the File Download control

This is a quick tip on how to convert a plain looking XPages File Download control into a Twitter Bootstrap style Table.

Everyone should know by now that the latest XPages Extension Library (2 versions ago actually) includes the Twitter Bootstrap framework. While is this brilliant, the reality is that many of us already have existing designs where Twitter Bootstrap is manually included. This means that XPages controls used in these designs look plain when compared to adding bootstrap-styled HTML.

A good example is the File Download Control below. I’ve added this control to my XPages app that has Twitter Bootstrap manually configured, but the control is not affected by this framework:

FileDownloadExample1

If you view the HTML source of the File Download Control in Firebug, you’ll see it’s just a table with row and column tags. This is good news, because Twitter Bootstrap’s table designs follow the same pattern, which means that by just adding 2 Bootstrap classes to the control, you change look of it to:

FileDownloadExample2

To achieve this, all you have to do is add the “table” and “table-hover” class to the File Download Control. See example below:

<xp:fileDownload
   value="#{attachmentsDoc.Attachments}"
   rows="1000"
   id="downloadAttachments"
   displayLastModified="false"
   hideWhen="true"
   allowDelete="true"
   displayCreated="false"
   styleClass="table table-hover">
</xp:fileDownload>

You can imagine that this one example opens a series of additional opportunities for those who are manually applying the Twitter Bootstrap framework to their XPages Design.

Till next time
Cheers :)

26 Jun 2015
3

Video Tutorial: Bootstrap Datepicker in XPages – Part 2

In this video tutorial, I demo how to modify the bootstrap date-picker that I introduced in Part 1, to be rendered as an inline date-picker instead of a popup.

Below is the URL to access the online date-picker sandbox dashboard, which is a great service to assist setting up the date-picker control:

Datepicker for Bootstrap Sandbox

Once again, a massive thanks to Mr David Leedy for presenting my video tutorials on NotesIn9, and for also making the NotesIn9 series freely available to the public. I know he spends his personal time getting out these videos and I know I speak for the entire community that it’s forever appreciated!!

NOTE: Apologies everyone for not embedding the video tutorial in this blog post. We are having some technical difficulties.

Click here to watch the video tutorial

Enjoy :)
John
25 Jun 2015
3

Video Tutorial: Bootstrap Datepicker in XPages – Part 1

In this video tutorial, I demo how to include a bootstrap date-picker into an XPages application that’s using the Twitter Bootstrap framework.

Below is the URL to access the online date-picker sandbox dashboard, which is a great service to assist setting up your date-picker control:

Datepicker for Bootstrap Sandbox

The following is the code to create the Bootstrap Resources custom control (ccBootstrapResources), which will reference the necessary Twitter Bootstrap and jQuery files via CDN services:

<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:script
			src="https://code.jquery.com/jquery-1.11.3.min.js"
			clientSide="true">
		</xp:script>
		<xp:script
			src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"
			clientSide="true">
		</xp:script>
		<xp:styleSheet
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		</xp:styleSheet>
	</xp:this.resources>
</xp:view>

The following is the code to create the Datepicker Resources custom control (ccDatePickerResources), which will reference the necessary Bootstrap Datepicker files that need to be added to the XPages design in the Web Content folder:

<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:script
			src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"
			clientSide="true">
		</xp:script>
		<xp:styleSheet
			href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
		</xp:styleSheet>
	</xp:this.resources>
</xp:view>

A special thanks to Mr David Leedy for presenting my video tutorial on NotesIn9.

NOTE: Apologies everyone for not embedding the video tutorial in this blog post. We are having some technical difficulties.

Click here to watch the video tutorial

Enjoy :)
John
24 Jun 2015
2

Video Tutorial: Bootstrap-style your XPages Pager control

In this video, I show you how to easily bootstrap-style the XPages Pager control in your app without needing to reference Twitter Bootstrap resources.

Thanks to 2 XSnippets i’ve published on OpenNTF, to implement this functionality is as easy as copy and paste. You can reference the 2 XSnippets using the below links:

OpenNTF XSnippet: Twitter Bootstrap Pager Template

OpenNTF XSnippet: Twitter Bootstrap Pager Template Stylesheet

Click here to reference Twitter Bootstrap’s Pagination Control:

A special thanks to Mr David Leedy for presenting my video tutorial on NotesIn9.

NOTE: Apologies everyone for not embedding the video tutorial in this blog post. We are having some technical difficulties.

Click here to watch the video tutorial

Enjoy :)
John
22 May 2015
2

Appcelerator Tip: How to recover a GIT Reset in Titanium Studio

This post is an example of how a GIT reset in Appcelerator’s Titanium Studio almost cost me 6 hours worth of work and how I managed to recover what I lost.

My Working Environment

Apple OSX 10

Titanium Studio

eGit and Mylyn for Bitbucket

Let me add some context

Once upon a time, about a year ago, I spent the most part of my day working on a mobile app, when a critical issue arose that forced me to switch my project’s current source control branch (using eGit Source Control), to its Master branch. After switching branches on my project, I made one small temp modification to the tiapp.xml file in the Master branch, then published a mobile build of the project to iOS.

I sent the updated mobile app to my client and all was right with the world again.

Then…

After I was done deploying the iOS fix, I switched back to the branch I was working on, when I received the following message:

Funny though that I didn’t get this message when switching from my current branch to Master initially, but anyways. I clicked on “Reset” because the change I made was temporary, so I was happy to have it reset to what is was prior to the change.

Then, came the fear. All my current work was gone. 6 good hours GONE!!! This was not my finest moment. While reacting to my client’s request, I accidentally forgot to commit my work to BitBucket. I tried all sorts of rollbacks against my project, but nothing was working. I searched online and only get mentions of reflogs, which won’t help in my case.

I was ready to take a walk…cry a little…and come back to start over. Before doing that though, I opened one of the JS files that was reset, to see how many changes I would need to make, when i tried the following:

I right-clicked on the JS file and noticed the option “Replace With\Local History“.

Screen Shot 2014-05-21 at 7.28.17 PM

Now, when you perform this action directly against the project’s root folder (which is an option and was the first thing I tried), you don’t get any positive results. But, if you do this directly against the file in your project….IT WORKS!!!

Eclipse/eGit was managing my saves per file automatically, so all I needed to do was perform individual replacements for every file in my project that was affected.

5 minutes later I was good to go.

Summary

First and foremost…based on what happened to me, I strongly recommend creating a habit of checking in your code in multiple increments per day and not just at the end of the day. I would’ve cried hard had I needed to spend an additional 6 hours unnecessarily.

Finally, what I mentioned above is relevant to Titanium Studio, but I’m almost positive this same exercise could work in other development environments, especially Eclipse.

Till next time

John :)