Posts Tagged ‘videos’

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
30 Aug 2013
0

Appcelerator Mobile Dev – Ch 5 – Tab Groups

In this video tutorial, I discuss Appcelerator’s Tab Group control. I also show how to simulate a single Window Application and still make use of features that only a Tab Group or Navigation Group can provide out the box.

This tutorial forms part of my Blog Series called “Appcelerator Mobile Development – Season 1“.

Tab Groups are very important and can take your Mobile App into a new direction. While many are starting to make use of features like the  “Screen Break Menu”, which many apps including Facebook use, understanding the basics of managing multiple Windows in your mobile app is always important.

NOTE: I apologize for messing up my Android Demo. I shouldn’t have added the 3rd Tab as Android frowns on adding Tabs dynamically.

I would like to thank David Leedy for presenting this video as part of his NotesIn9 Video Series.

Please feel free to add comments, suggestions, etc.

Enjoy
John

 

26 Aug 2013
1

Appcelerator Mobile Dev – Ch 4 – Windows

In this video tutorial, I discuss Appcelerator’s Window control and how it’s used in one’s Mobile Application. I also discuss how to position child controls within the Window Control.

This tutorial forms part of my Blog Series called “Appcelerator Mobile Development – Season 1“.

While this is not one of the more exciting videos I plan on publishing, it’s definitely an important starting point to mobile development, because mobile apps running on Android or iOS are made up of Windows in the same way that Web Apps are made up of HTML Pages.

NOTE: I performed all my demos using the iOS Simulator, but the good news is that the very same code will work on Android.

I would like to thank David Leedy for presenting this video as part of his NotesIn9 Video Series.

Please feel free to add comments, suggestions, etc.

Enjoy
John