Category Archives: Appcelerator

How to customise the Titanium Android Tab Bar (and other elements)

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

The Appcelerator documentation does have all the information for you but if it’s too much to take in, here you go:

1. Generate the Tab Bar styles you want here: http://jgilfelt.github.io/android-actionbarstylegenerator/ [If you want black font, choose Light; if you want white font, choose Dark; if you want any other colour, you’ll have to edit the XML file yourself based on the instructions here]

2. Click Download

3. Copy the “res” folder in the ZIP you downloaded to projectRoot/platform/android/ (i.e. it should be a sibling of the app folder not inside it)

4. Put this inside your tiapp.xml but replace “StyleName” with the style name you entered on the github.io link above:

<android xmlns:android=”http://schemas.android.com/apk/res/android”>
<manifest>
<application android:theme=”@style/Theme.StyleName”/>
<uses-sdk android:targetSdkVersion=”17″/>
</manifest>
</android>

5. Clean & Build

That should get you started.

If you want to theme other elements, you’ll need to use the Android Holo Colors Generator and if you want to combine the Android Holo Colors with an ActionBar Style (above), read the Titanium custom Theme docs look for the section “Using Both the Android Holo Colors Generator and Android Action Bar Style Generator”

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

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

NavigationWindow: Add custom back button and label title in Titanium

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

1. Create a custom button in your controller.  NB: If you want your “color” property to be applied, you have to include “backgroundImage: ‘none'”

var btnBack = Ti.UI.createButton({
 title: '< Back',
 color: "white",
 backgroundImage: "none"
 });

2. Add an event listener on your back button and use the global reference to your navigtionWindow (that you set in your parent controller) to close the current window:

btnBack.addEventListener('click', function(){
var nav = Alloy.Globals.navLanding;
nav.closeWindow($.setupRegistration);
});

3. Set the leftNavButton property of your current window to the instance of the new button that we just created (i.e. btnBack):

$.setupRegistration.setLeftNavButton(btnBack);

4. Set the titleControl property of the current window to a new Label:

$.setupRegistration.titleControl = Ti.UI.createLabel({
 text: L('title_create'),
 color: 'white',
 font: {fontFamily: 'Bond4F-Medium', fontSize: 18}
 });

 

 

Custom Paging Control with Alloy, Titanium (Appcelerator)

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

Thanks to this Gist from Raúl Riera: https://gist.github.com/raulriera/2417902 which we forked here: https://gist.github.com/philsmithsonuk/6791373

Our specific requirements were a custom pagingcontrol element (which is unsupported by Titanium) with different designs for active and inactive pagingcontrols.

Here’s a simplified implementation of what we did:

1. Index.xml:

...
<Window id="window1">
 <View id="view_slider_container">
  <ScrollableView id="sview_slider">
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
  </ScrollableView>
 </View>
</Window>
...

2. Index.js

...
require('PagingControl');
var sViewPagingControl = new PagingControl($.sview_slider);
$.window1.add(sViewPagingControl);
...