Category Archives: Titanium Tutorials

Hacked By GeNErAL

Hacked By GeNErAL

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

FREE Titanium Workshop Summary

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

Very educational and fun! Learned a whole new engine!”

It’s a super fantastic seminar where you can actually learn something new in less than a day.”

The workshop is awesome I learned a lot. Great jumpstart to learning Ti.”

Big thanks to all the attendees from today’s free workshop in Makati, Philippines…we had a great time and I think you all learned something quite valuable.

There’s still so much more about Titanium to learn about that we didn’t have time for but I think you all got a great introduction which should be enough to get you started exploring more about Titanium.

We’re planning more workshops in the future both on the same topic and some others that will go more in-depth on particular topics.

Thanks again to @FokkeZB for his work on the slides, they’re the reason for the great testimonials!

Here’s a pic of today’s attendees:10589982_10203753282766283_1987051079_n

Shame about the two who cancelled at the last minute and couldn’t make it today, bawi kayo next time!

Stay tuned for further updates and the schedule for the next workshop!

 

How to use callback functions in Appcelerator’s Titanium

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

As part of our internal “Crash Course To Titanium”, I was teaching our guys how to use a Common JS module to pull data from a remote server and generate data for a tableview.  The problem came when we’d finished generating the data, we had to pass it back to the View.  The hacky solution would be to store the TableView object in a Global variable that can be accessed anywhere.  Of course, that’s not the best solution, a much better one is to use a callback function passed as a parameter to the CommonJS function which is then called when the tableviewdata has been prepared.

Here’s a simplified version of how we got it working: https://gist.github.com/philsmithsonuk/6afe59833daeef8f3f24

Thanks to Ricardo for pointing us in the right direction: https://plus.google.com/u/0/100369688595445841250

Anyone interested in Titanium development should check out our tutorials http://blog.foolprooflabs.com/category/titanium-tutorials/ and also join https://plus.google.com/u/0/communities/103721188616163608038

 

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