Category Archives: TiAlloy

How to use HighCharts with Titanium

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

We made a sample app based on Appcelerator’s post here: http://www.appcelerator.com/blog/2013/09/interactive-charts-in-appcelerator-titanium/

The good thing about HighCharts is that they allow offline usage while Google Charts doesn’t.

Here’s the GitHub link: https://github.com/foolprooflabs/TitaniumHighCharts

EDIT: Just seen this https://github.com/ricardoalcocer/TiAlloyCharts/tree/master/app/widgets/com.alco.highcharts which I expect does pretty much the same thing except in Widget format.  You should probably use that instead if there are no issues with it.

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”

TiDynamicGrid combined to read data from a blog

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

On the day of our TiAlloy training 2 days ago, a module was released called TiDynamicGrid (Gittio link) which lets you quickly create a dynamic grid of content in your app.

As a quick bonus for the attendees of our training, I did a quick, basic combination of both TiDynamicGrid and concepts from FokkeZB’s tutorial slides.  Works on iOS and Android.

The code should be pretty self explanatory for those who attended, it’s a very simple implementation but a good example of what you can do with Titanium in a very short space of time.

Any post that doesn’t have a Featured Image set in WordPress (which is most of them at time of writing :P) defaults to our company logo:

iOS:

Screen Shot 2014-08-11 at 7.37.06 AM

 

Android:

Screen Shot 2014-08-11 at 7.59.23 AM

 

Github repo: https://github.com/foolprooflabs/dynamicgridblog