Category Archives: Titanium

Simple Animations with Appcelerator’s Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Every app you make can be brightened up by some animation.

Here’s a very quick + dirty test gist we did for a request to have each word of a sentence fade in word by word and play a sound when the word has faded in:

https://gist.github.com/philsmithsonuk/3ee8de53c410d4ffbebb

Further reading:

http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Animation

http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.2DMatrix

Creating your own ios slide to unlock feature on Titanium Appcelerator

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

We currently have a project that requires a lock feature without using the actual lock button on the iPhone, since I have to somehow copy the “slide to unlock” of the iOS, I did a research thinking maybe someone have already done that on Titanium then voila! There is one! Thanks to a user named pec1985, here’s the link to the code repo.

Unfortunately he created the code during an earlier version of the Ti SDK,  Continue reading

Appcelerator Titanium Tutorial part 2 – Laying Out Using Alloy

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Hello! Welcome to the second part of our tutorial about Apccelerator Titanium.

In our previous tutorial we tackled the importance and installation of Appcelerator Titanium now we will tackle how to layout in Appcelerator Titanium. Continue reading

Appcelerator Titanium Tutorial part 3 – Dynamic Layout

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

On the last part of the tutorial we created Views using the Alloy markup. Now we will try to create a View using the hard way and you have to decide which way do you prefer. Using the xml or using the .js file ? Continue reading

Appcelerator Titanium Tutorial part 1 – First Steps in Appcelerator Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Do you want to be an Android and iOS developer using your web skills?Or are you sick of creating mobile applications that can only run on one mobile platform? Worry not, because Appcelerator Titanium is here to save your day. Continue reading

How to integrate MixPanel Events and People Tracking to Appcelerator’s Titanium

MixPanel has event tracking and funnels etc for mobile applications and sites but the best feature looks to be their person level tracking that allows you to see full profiles of each user based on the events they’ve performed, e.g.:

Screen Shot 2014-02-06 at 2.38.11 PM

It also lets you send users Push notifications based on a user’s actions.

But how do you integrate it to Appcelerator’s Titanium? Just drop in Greg McCullough‘s gist to your application: https://gist.github.com/gmccullough/7738182

Works great 🙂

Thanks Greg!

How to revert Alloy to previous version

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

One of our development machines was recently upgraded to the latest version of Alloy and Appcelerator’s Titanium SDK which gave us a couple of minor display bugs that we didn’t want to spend time fixing at this particular moment in time.

It’s quite easy to revert as long as you know the previous version that you’d like to revert to.

Just type:

sudo npm install -g alloy@1.2.2

and just replace “1.2.2” with the version you’d like to revert to.  Don’t forget to update the Alloy version in your tiapp.xml as well if you made changes there.  And if you did make changes to your tiapp.xml don’t forget to “clean” your project before you re-build 🙂

(Thanks to the documentation: https://github.com/appcelerator/alloy/blob/master/CHANGELOG.md)

TableViewRow left offset no support in Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

While creating the layout for our Mobile App project, there was one Window where the TableViewRows should have a border at the bottom. I thought the separatorColor property would solve it but this was the result in iOS7 simulator: TableViewRowBug
As you can see, there’s a gap on the left side of the Window and the fix for this “bug” on Titanium will be released on December 9 2013, well our project cannot wait for a long time. I saw some hacks from other websites like adding a View inside the TableViewRow, etc.., but none of them really work for me. So I tried to hack it on my own and I managed to solve our problem by inserting a TableViewRow with a different property.

Now this is the result we had:

TableViewRoxFix

The height of the TableViewRow you’ll be inserting should be 1dp and change the backgroundColor to the color you need.

Quick Tips:

Our TableViewRows and the other elements in our project are added dynamically.

Here’s how we did it:

You can’t add a TableViewRow in a TableView, so you should first create an Array e.g var rowArray = []; then push the TableViewRow inside the array e.g rowArray.push(newTableViewRowName); and finally set the TableView data to the rowArray YourTableView.setData(rowArray);

Hope this will help you in some way.

How to reduce your Titanium Android build/install/test cycle

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

I recently had to use Appcelerator’s updated Google Maps module for a project which, if you read the documentation “Only works on Android devices. Not supported on the Android emulator.”

Which means that you can no longer user the Emulator to test your project and have to go through the long compile and installation cycle to install it on your device.

Luckily there is a way to avoid the long boot cycle and get a faster emulator at the same time (Since, let’s be honest, the standard Android emulator is *painfully* slow).

You need to install GenyMotion which will give you a blindingly quick Anrdoid install (Much quicker than my actual device in fact) and in our tests reduced the compile and installation cycle from 60 seconds to 35 seconds.

Big thanks to Joseph Burger CTO of Labor Sync for providing the detailed instructions of exactly how to set up in the accepted answer on this page: http://developer.appcelerator.com/question/154253/there-must-be-a-way-to-use-the-new-genymotion-emulator

Go there and run through the steps, it won’t take long and will save you a lot of time and stress in the long run.

It’s currently free but I wouldn’t be surprised if they start charging at some point so enjoy it while you can.

SOLVED: How to fix unlicensed modules detected error in Titanium (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

If you see an the “unlicensed modules detected” error and all of your plugins are free.  Here’s a solution that worked for us (thanks to Matt Perkins’ comment here http://developer.appcelerator.com/question/126870/unlicensed-modules-detected-on-plus-modules#264492):

1. Open Terminal and run “uuidgen”

2. Copy the code you see on the terminal

3. Open tiapp.xml, replace what’s in the “guid” tag with the the code you copied.

4. In Titanium Studio, do Project –> Clean

5. Run

Further Reading: http://developer.appcelerator.com/blog/2011/09/module-verification.html