Archives for the ‘Tutorials’ Category

3 Jun 2014
2

Appcelerator Tutorial: Install Modules globally for Titanium Studio

One of the great features of Appcelerator Titanium is how you can extend its capability by installing Mobile Modules. Examples of some of these modules are:

  • Ti.Paint (A module that allows you to draw on a canvas within your mobile app…e.g. a user adding a signature)
  • Barcode Scanner (Barcode scanning for your mobile application)

A great place to find many of these modules is the Appcelerator Marketplace. You can also find many other modules on Github as well.

The best news is that it’s become very easy to install a mobile module for your Titanium development environment.

Some key notes about this Tutorial

  • For a detailed reference on how to install modules, click here
  • We will use the In-App Billing Module for this exercise
  • I’m using Android for this example but the same applies to a module developed for iOS
  • Mobile Modules are dependent on the Titanium SDK you are currently using for your mobile app
  • Modules are usually downloaded as zip files

To install a mobile module, do the following

  • Download the In-App Billing Module for Android
  • In Titanium Studio, click on “Help\Install Mobile Module…”

modules1

  • Select the Zip file you downloaded
  • Keep the Output Location as “Titanium SDK” (Remember, we want the module to be available throughout Titanium Studio)
  • Click “OK

modules5

  • Once the module has been installed, restart Titanium Studio (Just to be sure)
  • Once restarted, navigate to one of your mobile projects
  • Open you mobile app’s tiapp.xml file
  • On the right in the “Modules” section, click on the green plus sign (+)
  • In the list of modules dialog, select ti.inappbilling and click “OK”
  • Save the tiapp.xml file

modules4

That’s it. The module has been successfully installed and is available for any of your mobile apps via Titanium Studio. In the near future I’ll provide tutorials on how to make use of some of these modules within your mobile applications.

Till next time, happy coding :)
John
15 Apr 2014
0

Install previous versions of iOS SDK in your current version of Xcode

In some cases, one might be developing for iOS6 and therefore require the iOS6.1 SDK. Xcode 5 however, no longer has the iOS6.1 SDK installed. In this article I’ll show you how to install the iOS6.1 SDK in your current version of Xcode.

Download Xcode 4.6.3 to get the iOS6.1 SDK and Simulator

  • Make sure Xcode is closed. If you are using Appcelerator Titanium, make sure that’s closed as well.
  • Go to Apple’s Developer Center
  • Log into iOS Dev Center (You will need an Apple Developer License for this)
  • Under Downloads, where it currently shows Xcode 5, Click on “Go to older versions of XCode
  • Let’s say you want the latest iOS6 SDK, that would be XCode 4.6.3. Search for it in the list and download the full Xcode package (about 1.6GB)

xcode463

Install the iOS6.1 SDK and Simulator

  • Once downloaded, double click on the “xxx.dmg” file.
  • Right click on Xcode.app and select “Show Package Contents
  • Navigate to “Contents\Developer\Platforms“.

- When in the Platforms folder, to copy over the iOS 6.1 SDK:

  • In “iPhoneOS.platform\Developer\SDKs”, copy the folder “iPhoneOS6.1.sdk”.
  • In your Finder Window, go to “Applications”.
  • Right click on Xcode.app and select “Show Package Contents”
  • Navigate to “Contents\Developer\Platforms\iPhoneOS.platform\Developer\SDKs”.
  • Paste the “iPhoneOS6.1.sdk” folder.

- When in the Platforms folder, to copy over the iOS 6.1 Simulator:

  • In “iPhoneSimulator.platform\Developer\SDKs”, copy the folder “iPhoneSimulator6.1.sdk”.
  • In your Finder Window, go to “Applications”.
  • Right click on Xcode.app and select “Show Package Contents”
  • Navigate to “Contents\Developer\Platforms\iPhoneSimulator.platform\Developer\SDKs”.
  • Paste the “iPhoneSimulator6.1.sdk” folder.

 Conclusion

That’s it. You can now use iOS6.1 SDK and Simulator as well as whatever current SDK and simulator you had installed.

Till next time, enjoy :)
John
26 Oct 2013
0

XPages Tip: Comparing a value in your XPages with backend data

I forget sometimes that many who have taken the path of XPages, are not necessarily existing Domino Developers who understand the Domino Object Model. This is a quick tip on how to take a field value from your XPages App, and compare it with data inside a Notes Database, and more specifically, a Notes View.

The Back-End Database

Let’s say you have a Notes Database with a view called “Fruits“. This view has 1 column called “Fruit Name” and is sorted in ascending order. Inside this view you have a few Notes Documents listed based on the following fruits captured:

FuitsViews

The XPage

Next, you have a very simple XPage with a Text Field called “inputFruit“, where a user will enter a fruit name of their choosing. The XPage also has a button called “Submit” and calls the following Server Side JavaScript Function – checkFruits();

FruitsXPage

The JavaScript Function

Here we create a JavaScript Function called checkFruits(), which will use the value entered and check if it exists in the Notes Database:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function checkFruits(){
   //Set our variables
   var doc:NotesDocument = null;
   var view:NotesView = database.getView("Fruits"); //Get a Handle on the Database View
   var key = getComponent("inputFruits").getValue(); //Get the entered value
 
   //Check if fruit entered exists
   doc = view.getDocumentByKey(key, true) //The 2nd parameter 'true' means 'Exact Match'
   if(doc !== null){
      print("The Fruit Exists");
   }else{
      print("No Fruits Founds");
   }
 
   //A JS Function should always return something
   return true;
}
Hope this helps :)
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
0

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