Posts Tagged ‘jquery’

3 Feb 2014
3

Slides and Info for Worklight Session at IBM Connect 2014

Firstly, a big thanks to everyone who attended our session on “IBM Worklight and XPages” at IBM Connect 2014 last week. It was great to see so many people turn up, especially on the last day of IBM Connect.

Below are the slides to the IBM Worklight Session, which will be available on SlideShare and for download. I will be releasing a video on this topic and will submit it through David Leedy’s NotesIn9 VideoCast (Hopefully next week still). I will also have the source code available for download when submitting the video.

Thanks once again and see you all online.

Cheers
John
27 Apr 2013
10

Appcelerator Mobile Dev – Ch 2: Understanding the Titanium Framework

Welcome to Chapter 2 of the Appcelerator Mobile Development Series: Season 1. In this post I am going to explain how the Titanium Framework works and help you understand the pros and cons of using it. I’ll also touch on the Pricing model as I currently understand it, keeping in mind it changed recently.

At IBM Connect this year I had a “Birds of a feather” session that I facilitated and it was focused around Appcelerator Titanium as a Mobile Development Framework and how well it integrates with IBM Notes/Domino and XPages. Part of the session was to give an overview of which other Mobile Frameworks are available and what are the different ways one can develop for a mobile application. Today I will explain this in my post and go deeper into what Titanium offers that’s quite unique and powerful.

The different ways one can develop for a mobile application

For me, Mobile Applications come in 3 flavors:

1. Native Mobile Applications - An application developed for a specific mobile operating system that uses the OS’s core native UI Controls and Objects.

2. Mobile Web Applications - A mobile friendly web application developed using HTML5, CSS3 and Responsive Techniques, that’s hosted on a Server and accessed via the mobile device’s Web Browser.

3. Mobile Web Application in a native wrapper - A Mobile Web Application running in a Native Wrapper that gets installed as a mobile app on the Mobile Operating System.

To develop Native Mobile Applications, you can either use the Mobile Operating System’s core programming language and SDK, (Objective-C in XCode for iOS, Java in Android SDK for Android, Java in Blackberry SDK for Blackberry, C# in Windows Phone SDK for Windows Mobile), or you could use a cross platform SDK such as Appcelerator Titanium, LiveCode or Xamarin. The problem with trying to develop for each Mobile OS using its core SDK, is that it’s a massive learning curve. Also, to develop 1 Solution and deploy it to iOS, Android, Blackberry and Windows Mobile, would mean developing a mobile app for each Platform, even though it’s the same app. Imagine maintaining or enhancing this 1 solution. Quite scary don’t you think?

For Mobile Web Applications, you can use the following of the many JavaScript and CSS Frameworks available:

- jQuery Mobile
- Dojo Mobile
- Sencha Touch
- Twitter Bootstrap
 

When it comes to Mobile Web Application development, I personally prefer Twitter Bootstrap as it allows me to create 1 Website that’s responsive based on the device’s Screen Resolution. So with a little bit of effort, your Website can auto adjust itself, show/hide components, etc based on the device that loads it. Twitter Bootstrap is also integrated with jQuery Core, which is always a bonus. A good example of an online website that’s developed using Twitter Bootstrap is Collaboration Today (Did you know: Collaboration Today is developed using XPages and is Open Source).

Pretty much any Mobile Web Development framework can be used in a Native wrapper. Phonegap is a very popular framework and is free to use. Another great solution is IBM Worklight, which to me is Phonegap on steroids, but it’s focus is primarily for Businesses.

Overview Of Titanium Studio

Titanium is a free Application Development Platform built on top of Eclipse. You use Titanium to create cross platform native mobile applications using one programming language……JavaScript. This means no Objective-C, Java or C# skills required.

Currently Titanium allows you to create, run and package native mobile applications for iOS and Android. Blackberry is also an option but currently in Beta. Windows Mobile 8 Beta is on the way and should be released toward the end of 2013.

The Titanium Mobile API gives you access to pretty much all of the Native UI and non visual components that make up a Mobile Application. These components include Windows, Views, labels, buttons, switches, dashboards, navigation, local file storage, network access, etc.

In Titanium Studio, you can write, test and debug your mobile apps using both the Simulator and the actual mobile device.

So will my Mobile App be regarded as native?

The short answer is Yes. Let me explain.

When you create and build a mobile app with Titanium, the following happens:

1. Titanium precompiles your JavaScript code to minify it.
2. Titanium then builds a dependency hierarchy of all the Titanium API’s used by your application.
3. The front-end compiler creates native stub files, which include platform-specific native code, a native project file (only when necessary) and code to compile Titanium for a given platform compiler.
4. Titanium then calls the platform-specific compiler tool (e.g. xcodebuild) to compile the native application.

On iOS, your JavaScript is Base64 encoded. On Android, your JavaScript is precompiled to byte code. Your JavaScript code is never converted to Objective-C or Java. This is what differentiates a Titanium Mobile App from a Native Mobile App developed in XCode or Android SDK. This means your mobile app uses a JavaScript interpreter for your application logic. To summarize, there is an extra layer of processing in an Appcelerator mobile native app vs a standard native mobile app.

With all that being said though, everything that’s written to the screen is native. Windows, Scroll Views, sections, dashboards, buttons, switches, sliders, labels, pickers, tab groups, menu bars, animation transitions, popups, activity indicators and much much more.

You have near full access to all the device’s apis including camera, video, audio, sounds, recorder, contacts, accelerometer, geolocation, maps, sqlite storage, file system, calendar, facebook, yahoo, network and yes, much much more.

This means, that with an unnoticeable performance knock because you use JavaScript for your application logic and it has to be interpreted, everything else is native.

Can I use Titanium as a native wrapper for mobile web apps?

The answer is again Yes. Keep in mind that Titanium focuses only on iOS and Android, with Blackberry, Tizen and Windows Mobile 8 on the way.

Titanium has what is called a “WebView”. This contains your html code that references JavaScript and CSS files stored locally in your app. The great news is you can have a combination of native controls and html running in the same application. The even better news is they integrate and communicate with each other.

If you needed to create an app that runs on multiple platforms over and above iOS and Android, then PhoneGap might be the solution to go with, or IBM Worklight for businesses.

What else is worth mentioning about Titanium

Well, they are aggressive when it comes to updates, enhancements and new features. Version 3.1.0 of the Titanium SDK has just being released. With it, comes a 20% performance boost for apps developed for iOS and up to 36% for Android.

From version 3, you can make use of the Alloy MVC Framework. This means more structure in your application, better performance, cleaner code and less development time.

I’ll also note that when iOS 6 was released, 2 weeks later Titanium released their updated SDK to support it. That’s an incredible response time in my book.

There’s much one can still mention for this section, but I’ll leave some for the next chapters.

So what are the downsides of using Appcelerator Titanium?

For starters, you can only build for iOS and Android. I know that Blackberry is in a Beta phase, but Beta versions scare me at the best of times. Appcelerator could easily decide to stop supporting a certain api or funtion that was available in the Beta version. So as far as i’m concerned, I can use Titanium to develop for iOS and Android only.

I’m sure many will agree with me on this one. Their pricing model is terribly confusing. I’ve heard stories of developers using the free version and then being forced to pay a percentage or worse. The good news though is that Appcelerator have simplified their packages and i’ll explain them shortly.

Another downside is their sales team take forever to respond or in some cases don’t respond at all. I understand their Support team are only available mainly for the Paid subscriptions, but I can’t say I’m impressed their sales team not responding to potential sales leads or pricing queries that I submit.

How does the Pricing work?

Appcelerator offers the following 3 packages:

- Titanium Community Edition (Free)
- Appcelerator Platform (Public Cloud Enterprise Edition) = $999 / Month / Named User
- Appcelerator Platform (Virtual Private Cloud Enterprise Edition) = $2 667 / Month / Named User
 

Some quick notes about the Pricing Plans:

1. Everything mentioned in the previous sections are available in the Free version of Titanium.
2. A Named user is a Platform User with an Appcelerator User Account. This is not an end user of the mobile application.
3. All 3 packages offer Cloud Services like Push Notifications, API Calls, Cloud Storage, etc, but the Paid versions offer way more than the free version.
4. The Enterprise version of Titanium has more tools and plugins compared to the Free Version. This includes Code Analyzer, Live View, Profiler, etc.
 

Demos and Examples of Appcelerator Titanium Mobile Applications

There are many Mobile Apps that you can download from Online Stores that were developed using Appcelerator Titanium. Below are a few of them:

1. Firstly, here’s Appcelerator’s App Showcase Pinterest Board, just for reference and screen shots.

2. Then, you’ve got Mobile Apps developed by Elguji.com. These apps are available for download from the iStore and I highly recommend giving them a try.

3. Next is Domino To Go. YouAtNotes created an extension for Titanium to allow Appcelerator developers to connect to IBM Domino environments and take Domino data offline. More of a plugin than an application, but still awesome. They have 2 apps you can download from the iStore to try out.

4. There’s also OpenRest, which is a Mobile Application developed using Titanium and is used to create Food Ordering Portals.

Where can I find more resources on Appcelerator Titanium?

- Appcelerator Video Channel

- Appcelerator Online Documentation

- Follow Appcelerator on Twitter

- Follow #Appcelerator Hash Tag on Twitter

- Titanium Mobile Development Essential Training Course on Lynda.com

- Appcelerator Training Resources

- Book – Appcelerator Titanium: Patterns and Best Practices

- Book – Appcelerator Titanium: Up and Running

What’s next?

This concludes my introduction Posts to Appcelerator Titanium. Hopefully by now you have a good understanding of the Product and you have Titanium installed and the Basic Tab Template running on your iOS and Android Simulator.

In the upcoming posts we are going to be diving into Appcelerator Development. Most of these will be video tutorials and there will be many of them.

I’d love your feedback on this and my other posts. Feel free to argue cases or query something you don’t understand.

Thanks and good luck on your Mobile venture.

Regards
John
14 Jan 2013
13

My Take on Notes/Domino 9 Development – Part 1

Hi everyone. Since the launch of Notes/Domino 9 Beta last year December, I decided to start one of my Projects using Domino Designer 9. One would call this quite risky, but I must say that I’ve never struggled with Beta or First Releases of IBM Notes Software.

To make matters more risky, the Project I started involves the following technologies over and above XPages and very basic Dojo functionality:

- jQuery 1.8 Client Side Development (Mark Roden. Stop smiling already)

- Twitter Bootstrap Framework replacing OneUI Theme. (That goes for you too CollaborationToday.info Team)

- All my business Logic is written in Java as opposed to Server Side JavaScript (This is my first Project where all logic is Java Based)

- The Application’s Design is based on MVC Architecture. (All my Models and Controllers are managed in Java. No Data Sources, no SSJS)

 

Java Coding and Debugging

The good news is that I got the Java Debugger running the first time, although it returns a dodgy message that it cannot connect to the server if you try to start it up when it’s already running. The Java Debugger is a touch different from the LotusScript Debugger, but it definitely has more features. I just need to get more used to it and understand how it works.

Java coding is actually a pleasure once I started understanding Java Coding Concepts. The Editor is very friendly and does a lot of the work for you. It will be quite tough for me to go back to coding Business Logic in SSJS.

with most of my Logic sitting in SSJS in previous projects, It’s difficult to compare XPages Java Development in Domino Designer 9 vs 8.5, but I can definitely confirm that it’s responsive, friendly and a pleasure all in all.

 

XPages and Custom Controls

Many of the issues I faced day to day seemed to have disappeared. Stuff like not being able to drag custom controls into the Source or Design View if your XPage  has been open for a while. The Intelli-sense in the Source View also makes developing directly in the Source View friendlier, which is good news for those who still work in the Design View and want to make a change.

The Design Builds are also a pleasure. I’ve rarely used the “Project Clean and Build”, even when adding new design elements.

 

Summary

In short, so far I am very happy. The Domino Designer 9 is a touch faster than 8.5 and is very stable. I forget that I’m working in a Beta Client.

As far as my current Project goes, I’ve mingled with pretty much everything that I would need for my Application, so I’m not expecting many surprises before I complete Phase 1.

I would love to get feedback from others and their experience so far developing in Domino Designer 9 Beta.

 

Cheers for now

John.

9 Nov 2012
0

Use Dojo or jQuery to manipulate Printing of Web Pages

Hi everyone. Here’s a second post that was published by Johan Meyer, Ukuvuma’s senior Microsoft Developer.

Enjoy

John.

 

From Johan Meyer at Ukuvuma Solutions

Okay, this is a nice short tutorial where I will show you the following:

  1. How to create a print button on a web page.
  2. Use Firebug (Firefox), Developer Tools(IE) or any other developer tools available to identify what controls needs to be hidden or showed before the page gets printed.
  3. Show you what code is needed for jQuery or Dojo.

 

1. How to create a print button on a web page.
First off you need to create a Print button. Now normally when I create an image as a button on a web page I will use CSS for the style and a <div> for the button.

So first add a <div></div> tag to your Page and give it a class name, for this example I will be using “printButton” as the class name.
In your HTML file add this div:

<body> <div class="printButton"> </div> </body> 

Now that you have your div you need to create the Stylesheet that will style our print button.  Add a CSS file to your project and add the following to it.  The dot before printButton means that this style is applicable to the printButton Class.  If the printButton had a # before it would look for the div’s ID.

.printButton {

background-image: url(“printButton.jpg”);

background-repeat: no-repeat;

cursor: pointer;

cursor: hand;

height: 20px;

width: 20px;

padding: 5px;

}

 

This style will change your div however you want it.  The first two lines will show your image without repeating it.  Then we use two cursors, the first one works for IE and the second for Firefox (this is the code that will show the little hand when you hover over the image).  Then we set the fixed width of the div and the padding to make it look a bit nicer.

 

 

 

 

 

The image above shows how the button should look by now.  To create an actual print button we need to add the Javascript print command.  Add the following to your printButton div.

<html>

<head>

<script type=”text/javascript” language=”javascript”> function printDocument() { window.print(); } </script>

</head>

<body>

<div onclick=”javascript:printDocument();”> </div>

</body>

</html>

 

The onclick event fires a javascript function called printDocument().  Inside this function we call a JavaScript function that calls the browsers print class.  This will print the document but not always as the user would want it to print.

 

2.  Use Firebug to enhanced the nor window.print JavaScript function

For now I’m not going to go into depth of how firebug works but I will post on how to use it and all about what I know of firebug in one of my future posts.

Use Firebug and look through the website that you want to print and identify what controls you want to hide before printing, or what controls you want to modify in size before printing.

If you have a layout that looks like this, it is likely that you only want the content part of this layout.  So identify the controls by ID or by class and write them down.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The sections that we will want to hide are: LeftSide, Header, Footer and RightSide.

 

3.  JQuery and Dojo code

Now that you know what controls you don’t want to show, you need to hide them before calling the printing function and show them again after printing.

In the printDocument function add the following code for jQuery:

<script type=”text/javascript” language=”javascript”>

function printDocument() {

jQuery(“.LeftSide”).hide();

jQuery(“.Header”).hide();

jQuery(“.Footer”).hide();

jQuery(“.RightSide”).hide();

window.print();

jQuery(“.LeftSide”).show();

jQuery(“.Header”).show();

jQuery(“.Footer”).show();

jQuery(“.RightSide”).show();

}

</script>

 

And this if you want to use Dojo:

<script type=”text/javascript” language=”javascript”>

function printDocument() {

dojo.query(“.LeftSide”).style(“display”, “none”);

dojo.query(“.Header”).style(“display”, “none”);

dojo.query(“.Footer”).style(“display”, “none”);

dojo.query(“.RightSide”).style(“display”, “none”);

window.print();

dojo.query(“.LeftSide”).style(“display”, “block”);

dojo.query(“.Header”).style(“display”, “block”);

dojo.query(“.Footer”).style(“display”, “block”);

dojo.query(“.RightSide”).style(“display”, “block”);

}

</script>

 

If you need to call some of the controls on the ID instead of Class, you can change the jQuery to “#Header” and the dojo you need to remover the string with the dot and add dojo.byId(“Header”) instead.

You can manipulate the page as you like, just return everything back to normal after the user has printed or redirect them to a new page.

Hope you enjoyed this tutorial.

6 Nov 2012
6

Enabling Intelli-sense in Firebug for Dojo, jQuery and Javascript

Hi everyone. There are a couple of awesome posts that were published by Johan Meyer, Ukuvuma’s senior Microsoft Developer. I thought it best to re-blog some of his posts that I feel would add a lot of value to those who follow this particular blog.

Enjoy

John.

 

From Johan Meyer at Ukuvuma Solutions

I found a nifty plugin for Firefox that enables intelli-sense in the Firebug Console for certain Javascript Frameworks.

To enable intelli-sense for Dojo, jQuery and Javascript, install the following plugin for Firefox. This will enable the intelli-sense in Firebug’s Console Window.

Get the Firebug auto-completer Plugin