Archive for the ‘Tutorial’ Category

Google’s new Android SDK Tools revision 14

Thursday, October 20th, 2011

Yesterday, Google updated it’s Android SDK Tools to revision 14, and with it was introduced a much clearer UI to manage your packages. To benefit from this release, launch the Android AVD and Package Manager, select the Installed packages menu and click the “Update All…” button. Accept the Tools and Platform-tools items and reject all other updates that may be listed on your system:

screenshot

Once complete, you will be prompted to restart the application, at which point you will be presented with the new Interface. You will notice that the Android AVD and Package Manager has now been renamed as simply, “Android SDK Manager”.

Use the checkboxes at the bottom to filter between updated and new packages and installed packages. Tick both Updates/New and Installed, click the Deselect All link, and then look through the list and tick all those with the message Updates available, shown in the Status column. Then click the Install x packages… button, to bring your installed packages up-to-date.

screenshot

The following shows the packages that we recommend at the time of writing, but it’s always useful to refer to the Titanium Compatibility Matrix for the latest information:

screenshot

You will notice that all references to Android virtual devices (AVDs) have been removed, but it is now available from the Tools > Manage AVDs menu at the top.

screenshot

Just as with every other time you have installed or updated your Android packages, you will need to delete any AVDs that have been replaced by new revisions, otherwise they won’t be used.

Unless you have modified any AVD’s hardware configuration, it’s easier to simply clear all existing AVDs altogether. Thus, select each one in turn and click the delete button to do this.

screenshot

Have fun and CODESTRONG!

Titanium Quickie: Toggling Object In A TableViewRow

Monday, October 17th, 2011

Editors Note: This technique will work only in Titanium Mobile 1.7.x. This article was cross-posted with permission from Aaron Saunders at Clearly Innovative.

So, the basic problem is that we have a checkBox, switch, button or any object that we need to capture the click event for and keep some state information about that object. I want to be able to click the object, save its state and not impact the rest of the items in the row.

I also need a way to find out which items are selected, since multiple items could be selected and it is the object that is selected not the row.

The first example is pretty straight forward, but then there are additional methods that I have added as a possible way to solve additional problems that come up when working with tables and objects in rows

In the table above, we are able to find the child elements because we know where we put it; also there is only one element.

tableRow.children[0]

If there are multiple elements, one solution is to provide ids and then use a function like the one below to iterate through the child objects and find the one you are looking for.

Another thing that might come in handy is a method for finding which elements are selected

Final Solution with helpers included to show more fun stuff:

Customized TabBar for iOS in pure JS

Monday, September 26th, 2011

Back when I first started using Titanium, I was working on an app that I wanted to have a color button (aka not use the gradient that iOS uses by default). To do this I hacked away for days to come up with a solution, and I found it! but repeating this look in new apps meant starting from zero time and again.

Fast forward about a year and I come on board Appcelerator and I vowed to get this script finished and out in the wild! Why? Two reasons, the first is its a cool script (if I do say so myself) But also it proves a point, that you can do a lot with the bare APIs in Titanium.

Screen Shot 2011-09-26 at 4.56.36 PM.png

So lets go through this shall we? What does this script provide?

  • A drop in replacement for the default tabGroup, that with less then 3 lines of JS can get you started with adding these cool features to your already started app.
  • The ability to have large (bigger then the default tabbar height) full color tabs to enhance your UI using the new tabHeight and tabWidth properties on your tab.
  • An onClick property for your tabs so tabs can be more then just a window, for example a tab could end up being a reload button, or open the camera view…
  • A modal property to open your window in a modal window
  • A currentTab property to access the currently active tab off the tabGroup object
  • A currentTabIndex to access the index of the current tab off the tabGroup object
  • hideTabBar and showTabBar methods off of the tab group to hide and show the tabBar
  • selectedImage property to use an image for the highlighted bg of the currently selected tab

 

This code is compatible with all iOS devices ONLY, android is not supported at this time.

So how do we set it up? Simple!

Simply copy the files from the customTabBar Github repo to the Resources dir of your project, then replace your Ti.UI.createTabGroup(); code in your app with:

and add your newly available properties as desired! (for more advanced details on usage, checkout this file in the repo)

Have any questions? hit me up in the comments!

Forging Titanium Episode 7: Titanium and Twilio for Cloud Communications

Thursday, September 22nd, 2011

Editor’s note: This and future episodes of Forging Titanium are available here.

In this week’s episode, we’ll be taking a look at Twilio, a cloud-based service for adding telephony features to applications through a RESTful web service API. Using Twilio, developers can send and receive phone calls and SMS text messages, enabling the creation of interfaces that pass beyond the reach of smart phones.

Learn how to send and receive phone calls and text messages in your mobile applications in this week’s episode of Forging Titanium.

Episode Resources:



Forging Titanium Episode 6: A Single Context Tabbed Application Template

Wednesday, September 14th, 2011

Editor’s note: This and future episodes of Forging Titanium are available here.

In this week’s episode, we’ll be taking a look at how to implement a tab-based application in a single JavaScript context in Titanium Mobile. Throughout our reference guides and official training course, we generally advocate the use of a single JavaScript context in your Titanium applications.

However, in our most popular demo application, the Titanium Mobile Kitchen Sink, a tab-based application is developed using multiple contexts by associating each window opened with a URL to a JavaScript file. While this approach is technically valid, it presents the developer with difficulties around sharing data between windows, confusion around when code for a window has been executed, possible object reference issues which can lead to memory leaks, and reloading of JavaScript code in every window for shared libraries. For those reasons, unless you have a specific need for a “clean slate” in every window, using multiple JavaScript contexts cannot be considered a best practice approach to structuring a Titanium Mobile application.

What then would be a reasonable approach to structuring windows in a tabbed application? And how do we work around the loss of Ti.UI.currentTab and friends? Find out the answer in this week’s episode of Forging Titanium.

Episode Resources: