Author Archives

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
0

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 :)

15 May 2015
10

XPages Tip: Filter your design elements for quicker navigation

This is a quick tip on how to filter your design elements in Domino Designer to help quickly find what you’re looking for.

I have to laugh at myself sometimes. 80% into one of my recent XPages Projects, I found myself completely frustrated, trying to pinpoint 1 of many custom control designs in Domino Designer. I almost fell off my chair when I realised that the solution was staring me in the face the entire time.

In Domino Designer, irrelevant of if you’re viewing XPages design elements, custom controls, views, forms, etc, there is a filter option on the top right side of the content Pane. This allows you to track a certain design element using a keyword. As long as that keyword exists in the design element name or alias column, you’re good to go.

EXAMPLE OF FULL LIST OF VIEWS

Screen Shot 2015-05-15 at 11.35.24 AM

EXAMPLE WHERE FILTERED BY KEWORD “Reports”

Screen Shot 2015-05-15 at 11.36.12 AM

Pity I only found this out now :(

Hope this helps.

Cheers. John

UPDATE:

Thanks to Tommy Valand and Per Lausten for suggesting Ctrl + Shift + R, which searches for any design element by name in applications that are open in DDE.

Per also referenced a great blog post: “10 Eclipse Navigation Shortcuts every Java programmer should know