This doesn’t need any kind of introduction. You can use the location on the devices to find the user’s place and act accordingly. One thing good to know is that this needs the approval of the user, and for iOs > 3.2 you need to set a purpose property to let Apple know what you need it for.

Titanium.Geolocation.purpose = "GPS user coordinates";

How geolocation works

When you start the app the coordinates are the ones cached on the device, in other words the ones detected at the last time you used the geolocation on your device. Detecting the current position takes time so if you have an app based on geolocation you might want to take this in account to improve the user experience and avoid to get false results.

Titanium.Geolocation provides the needed methods to manage geolocation.

In general the most used method is getCurrentPosition that gives you the current position and fires once and the location event that triggers repeatedly on the location change. To be more clear think you want to log a route the user follow: when the app starts you get its start position then while walking you can get the points of the route with a adjustable granularity.

 
Titanium.Geolocation.distanceFilter = 10; // set the granularity of the location event
 
	Titanium.Geolocation.getCurrentPosition(function(e)
	{
		if (e.error)
		{
                // manage the error
                return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
                // we use the above data the way we need it
	});
 
	Titanium.Geolocation.addEventListener('location',function(e)
	{
		if (e.error)
		{
                // manage the error
		return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
               // again we use the gathered data
      });

There are some other methods that can be used like reverseGeocoder, forwardGeocoder, and getCurrentHeading – for compass. Because not all the devices have the GPS location (like iPod) or the compass and because the user can have the location services disabled you have to check if it exists, if it’s enabled and then let the user know about this.

As the documentation page is not complete yet, I suggest you to take a look at the geolocation example that shows very well how to use this.

Maps

The maps are created using the Titanium.Map methods. The maps are a little bit complicated but allows you to do some real nice interfaces. You can use a Mapview and add a route to it, or pins(markers) and to the pins to attach popups with images, titles, even “links” o another windows for a more detailed view of the specified place or whatever you may need.

Create a map

var mapview = Titanium.Map.createView({
	top:20,
	height:300,
	mapType: Titanium.Map.STANDARD_TYPE,
	region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},
	animate:true,
	regionFit:true,
	userLocation:true
});

Nothing complicated: the constructor can receive different arguments including the annotations (pins), but of course you will have to declare it first.

And this is done like this:

var apple = Titanium.Map.createAnnotation({
	latitude:37.33168900,
	longitude:-122.03073100,
	title:"Steve Jobs",
	subtitle:'Cupertino, CA',
	pincolor:Titanium.Map.ANNOTATION_GREEN,
	animate:true,
	rightButton: 'apple_logo.jpg',
	myid:2 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
});
 
var atlanta = Titanium.Map.createAnnotation({
		latitude:33.74511,
		longitude:-84.38993,
		title:"Atlanta, GA",
		subtitle:'Atlanta Braves Stadium\nfoo',
		animate:true,
		leftButton:'atlanta.jpg',
		rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
		myid:3 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
	});

and the map constructor gets

	annotations:[atlanta,apple]

or later you can add this annotation using

	mapview.addAnnotation(atlanta);

Map events

One thing you need to know is that the events are registered at the map level. So you cannot get a click event on a pin. You will have to get the click event of the mapview ad use the clicksource and the custom property (myId) properties to detect the annotation and what has been clicked (pin, leftbutton, rightbutton, title, subtitle)

	if (evt.source.myid == 3 && evt.clicksource == 'rightButton') {
        // do your stuff
        }

MapRoute

Another thing you can do with a map is to add a route (iOs only for now). Basically you can draw a line on the map specifying the points (gpd point) it needs to pass through.

A route can look like this:

var route = {
	name:"some name",
	points:points,
	color:"red",
	width:2
};

Where points it’s an array of objects containing latitude and longitude coordinates.

Example – add a route to a Mapview

Below is an example that adds a route to a mapview using some readymade coordinates. It will generate something similar to the screenshot in the right.

var center = {latitude:42.30,longitude:-71.18,latitudeDelta:0.03, longitudeDelta:0.1};
 
var mapview = Titanium.Map.createView({
	mapType: Titanium.Map.STANDARD_TYPE,
	region: center,
	animate:true,
	regionFit:true
});
 
points = [
	{latitude:42.31,longitude:-71.11},
	{latitude:42.32,longitude:-71.13},
	{latitude:42.31,longitude:-71.22},
	{latitude:42.28,longitude:-71.26}
]
 
// route object
var route = {
	name:"some name",
	points:points,
	color:"#00f",
	width:2
};
 
// add a route
mapview.addRoute(route);

What next?

A good exercise would be maybe to create an application that it’s watching your position while you are driving or walking and display it on a map. All you would have to do is to use the location event and use the returned value to append a new item to the points array.

Anybody wanna try ?

Check the Spanish version of this post:
Siete días con Titanium – día 5 – GPS y Mapas

Related posts:

1. Seven days with Titanium – day 7 – orientation and accelerometer
2. Seven days with Titanium – day 4 – Media – images, movies and sounds
3. Seven days with Titanium – day 6 – animations and transforms

The day 4 comes very late because it was a very busy period so I had no time to continue the tutorials.
Ok, so we should treat in this tutorial the media part of Appcelerator. This includes images – display and capture them with the camera – and how to play movie and sounds.

Display images with Appcelerator

To display an image we use the ImageView. The image view has some simple arguments, like any view in the Titanium framework. I won’t repeat them except for the important one. Obviously the source if the image is the one we are interested in set by the image argument, and accepts local or remote files.

var the_img = Titanium.UI.createImageView({ 
image:"test.jpg"
})

How does Titanium treat the path for local images? The path of the files are simply relative to the Resources folder. So you can use any folder/subfolder under the Resources one to locate the images of your application.

For the remote images a simple url to the image it’s enough.

var the_img = Titanium.UI.createImageView({ 
image:"http://example.com/test.png"
})

Titanium accepts all the formats the targeted OS supports.

How to take pictures using the camera?

The method you have to use is Titanium.Media.showCamera that will display the OS interface for taking photos and expose the 3 possible events (success, cancel, error) to us, so we can decide what to do next.

The function triggered by the success event receives as argument an object containing the media (the image itself) and the width and height of it. Using this data you can create a ImageView and add it to your window for example.

Below is a simple example:

var win = Titanium.UI.currentWindow;
Titanium.Media.showCamera({
 
	success:function(event)
	{
		var image = event.media;
 
		Ti.API.debug('Our type was: '+event.mediaType);
		if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
		{
			var imageView = Ti.UI.createImageView({width:win.width,height:win.height,image:event.media});
			win.add(imageView);  
		}
		else
		{
			alert("got the wrong type back ="+event.mediaType);
		}
	},
	cancel:function()
	{
               alert('You canceled the action.');
	},
	error:function(error)
	{
		// create alert
		var a = Titanium.UI.createAlertDialog({title:'Camera'});
 
		// set message
		if (error.code == Titanium.Media.NO_CAMERA)
		{
			a.setMessage('Please run this test on device');
		}
		else
		{
			a.setMessage('Unexpected error: ' + error.code);
		}
 
		// show alert
		a.show();
	},
	saveToPhotoGallery:true,
	allowEditing:true,
	mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO],
});

Like the previous examples this one is found in the Kitchensink provided by Titanium.

Basic sounds with Appcelerator

I will talk only about the basic sounds that are located on the device and can be used as games sounds or as sounds in your application.

The sounds are loaded by the method

var sound = Titanium.Media.createSound({
	url:'cricket.wav'
});

From here you can play, stop, pause, reset, and set the volume of the sound with the methods presented in the documentation page of Titanium.Media.Sound.

Each sound has its events, the most notable being the complete one that triggers when the sound finished to play.

If the sound file is big you should use the preload set to true when you build the sound. If you don’t do this the sound won’t start instantly when you call the play method.

One thing that you need to pay attention to is to release the sound if you don’t need it anymore. For example you play an intro sound only when the user starts the app, then after the sounds completes, you have to release it to free some memory on the device.

var intro_sound = Titanium.Media.createSound({
	url:'cricket.wav',
	preload:true
});
 
intro_sound.addEventListener('complete', function(e){ intro_sound.release(); });
intro_sound.play();
//... more code here

The above code will play the sound and autorelease it when it ends.

Play Videos

Using videos is similar with using sounds. You will have to create a player using the Titanium.Media.createVideoPlayer method.

 
var videoURL = 'http://movies.apple.com/media/us/ipad/2010/tours/apple-ipad-video-us-20100127_r848-9cie.mov';
 
var activeMovie = Titanium.Media.createVideoPlayer({
	url: videoURL,
	width:300,
	height:200,
	top:50,
	left:50,
	backgroundColor:'#0f0'
});
 
view.add(activeMovie);
activeMovie.play();

The url of the videoplayer can be a remote or a local file but you have to take care to be supported by the OS.

On the videoplayer documentation page you will find more about the properties, methods and events supported by this control.

A notable thing is that in the SDK > 3.2 you can embed the videoplayer in any view and play it here without the need of making it fullscreen as in the next screenshot:

That’s it for today, see you on Day 5.

Check the Spanish version of this post:
Siete días con Titanium – día 4 – Media – Imágenes, películas y sonidos

Related posts:

1. Seven days with Titanium – day 0 – introduction
2. Seven days with Titanium – day 5 – GPS and Maps
3. Seven days with Titanium – day 1 – windows, views, navigation and tabs

In “day 3″ we will learn how to make our application communicate with a webserver. There are 2 ways we can do this: one is to use a webview and point it to a real web page or using the HttpClient that Appcelerator provides us.

The WebView

What is WebView? A WebView is nothing more than a chromeless browser or, if you want, a “naked” browser (it misses the interface we’re used to) that allows us to open remote or local webpages and display it in our apps.

You can use the webview for many purposes starting from displaying some nice html/css formatted text to building your own in-app browser. One thing you must NOT forget is that the webview it’s very expensive for the device (in terms of CPU load and memory usage) so try to use it only when it’s really really needed.

The webview is created using the function Titanium.UI.createWebView. Some things to specify about it would be that you have to choose between managing the touch events as a Titanium entity, or let the webpage do this. You cannot have both in the same time.

Two events that deserve more attention are beforeLoad and load that can be used to show and hide a “loading…” screen from the moment you try to load a remote page until the webpage is fully loaded.

The HttpClient

If you need to communicate with a server on a lower level (REST APIs, your own server implementation, etc) you can use the HttpClient that is equivalent of XHR (or ajax) in web.

When you use HttpClient you need to take in account two things:

1. that the call is made asynchronous so your app logic needs to work this way
2. that you need to make it in a certain sequence: create, set events, open, send.

So you need to create the HttpClient, set its onload and onerror events (that triggers when the call reply is received or an error occurs), open the channel and send the request – with or without parameters.

var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function()
{
	Titanium.API.info('loaded');
 
};
xhr.onerror = function()
{
	Titanium.API.info('error');
};
xhr.open("GET","http://google.com");
xhr.send();

Within the function used with onload event you can use the responseText (normal or json reply), responseXML(XML reply) or responseData (binary reply) for further proccessing.

Things to mention when you use networking with your apps

Always let the user know that something is processing in the background – on a slow internet connection the users will believe the app crashed and will probably kill it.

For iPhone: if there is no network you need to alert the user about it – this is an Apple request and failing to do so might lead them to reject your app. This can be verified with the boolean Titanium.Network.online.

JSON , XML

When it’s about sending structured data over httpthe server can reply in a JSON or XML format. I prefer JSON for two reasons:

1. The JSON format is Javascript native
2. the overall size of the information received from the server is smaller, so the reply comes faster.

Titanium can use both formats: JSON with JSON.parse(string) and JSON.stringify(object) to manipulate the data and XML with the Titanium.XML. The XML string needs to be parsed and the result, an DOM2 object, needs further processing with the DOM2 own methods.

So as you see XML can get ugly( or at least for me). Because of this I use when possible YQL.

YQL

YQL is the SQL for the web (a SQL like implementation for HTML build by the guys from Yahoo) that allows you to use a syntax similar to SQL for the DOM elements in a webpage. I won’t go further into details, you can do it by yourself on the YQL page.

What I will show you is how to convert an XML reply into JSON using the Titanium.Yahoo.yql module.

First of all you need to go to the YQL Console page and try to transform an rss feed – that is pure XML into JSON. Go to this link, select JSON as format, empty the callback function input, un-check the Diagnostics checkbox and run the test. You will get the XML file converted in JSON.

We can do the same using the YQL module that Titanium provides us:

 
Titanium.Yahoo.yql(
   'select * from xml where url="http://developer.appcelerator.com/feed/questions/created"',
   function(e) {
    // e.data holds the reply in json format
   }
);

We covered a little the basic networking in Titanium but there are unlimited ways on how you can use it.

More resources

As always KitchenSink scroll at the end and take a look at all xhr*,xml*, yql* files.

A full Twitter APIs/Titanium XHR tutorial – a must read.

And of course the official documentation:

• WebView
• HttpClient
• YQL

If you have any questions or suggestions don’t hesitate to post them here.

Check the Spanish version of this post:
Siete días con Titanium – día 3 – ajax(xhr) y webviews

No related posts.

Welcome to day 2 with Titanium – Tables and pickers. A short reminder of what we’ve done till now:

• Introduction
• Day 1 – Windows, Views, navigation and Tabs.

Believe it or not, the table is the most used UI element in the iPhone SDK. If you play a little with the applications that come with your “iDevice” you will see that almost all the native apps have tables. Sometimes they are so well designed and the appearance so changed that you don’t even think of them as tables. But in time, while you will learn more, you will be able to spot it and a lot of ideas will come to you . Also I think that that the pickers are some sort of “undercover tables” so that’s why I’ll present both in the same tutorial.

The Table element

The table element is created using Titanium.UI.createTableView function. This function accepts an object as argument like we are used to – with the different settings we might want to give to the table. Besides the usual properties ( like top, left, etc) we have a very important one named data.

The Data property

The data property will hold the rows of the table as an array. The below code will show you what I’m talking about:

 
var win1 = Titanium.UI.createWindow({
	backgroundColor:"#fff"
});
 
var table1 =  Titanium.UI.createTableView({
	data:[
		{title:"Row 1 - simple row"},
		{title:"Row 2 -  with child", hasChild:true},
		{title:"Row 3 -  with detail", hasDetail:true},
		{title:"Row 4 -  with check", hasCheck:true},
		{title:"Row 5 -  red background", backgroundColor:"#f00"}
	]	
});
 
win1.add(table1);
win1.open();

So, what are we doing here?

We create a window. As we said in day 1, the application needs to have at least one window. Into this window we add table1 with the rows set as above.

This is the simplest way to do it, with the properties of the rows set as the Titanium.UI.TableViewRows documentation page specifies.

If you develop cross-platform you’ll need to take in account that each platform will show the data in it’s way (and some specific things may be missing). Below are 2 screenshots on how the above code looks on iPhone and Android.

A very important thing to know about tables

The rows into tables are rendered “on request”, so let’s say you have 20 rows – it’s clear that visible will be only a few (10 on a standard height). To save memory and to speed up the application the other rows will be rendered when the user scrolls the table. To do this faster the OS of the device creates some sort of template for each layout of the rows and reuse it changing only what’s different. To take advantage of this you MUST set a className attribute for the rows that share the same layout ( I didn’t do it above to simplify the code).

It is important mainly because for a few rows the memory usage is not too high, but for many rows – depending on how many and what’s inside the row – the app will move slow or even crash. The className can be any string you like:

{title:"Row 1 - simple row", className:"layout_one"}

More about tables

Each table has at least one section and each table can be plain (as above) or grouped. Let’s create a grouped table:

 
var table1 =  Titanium.UI.createTableView({
	style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
 
var section1 = Titanium.UI.createTableViewSection();
section1.headerTitle = "Hello";
var row1 = Titanium.UI.createTableViewRow({title:"Hello 1"});
var row2 = Titanium.UI.createTableViewRow({title:"Hello 2"});
section1.add(row1);
section1.add(row2);
 
var section2 = Titanium.UI.createTableViewSection();
section2.headerTitle = "Hello2";
var row3 = Titanium.UI.createTableViewRow({title:"Hello 3"});
var row4 = Titanium.UI.createTableViewRow({title:"Hello 4"});
section2.add(row3);
section2.add(row4);
 
table1.setData([section1,section2]);

And the result

As you see I used the method setData() to set the content of the table after it is created.

This method accepts any array of sections created with Titanium.UI.createTableViewSection , rows created with Titanium.UI.createTableViewRow or objects that describe the rows as in the first example.

Custom tables

All the above examples show you how to create simple tables. If you want to create a more complicated layout you will need to create custom rows for this and The Custom Rows tutorial explains how to do it..

The Pickers or PickerViews

The pickers are the equivalent of the select tag in html. The only difference is that you can create a multicolumn picker (which in HTML it’s not possible without using some tricks). The function that creates a picker is Titanium.UI.createPicker

A simple picker it’s created with the following code:

var picker = Titanium.UI.createPicker();
var data = [];
data.push(Titanium.UI.createPickerRow({title:'Bananas'}));
data.push(Titanium.UI.createPickerRow({title:'Strawberries'}));
data.push(Titanium.UI.createPickerRow({title:'Mangos'}));
data.push(Titanium.UI.createPickerRow({title:'Grapes'}));
picker.add(data);

Sadly for now it is implemented only on the Apple platform (please correct me if I’m wrong) so here it is how it should look like:

The type property of the picker lets you chose form the next predefined types but you always can create your own multicolumn picker.

Titanium.UI.PICKER_TYPE_PLAIN (default),
Titanium.UI.PICKER_TYPE_DATE_AND_TIME,
Titanium.UI.PICKER_TYPE_DATE,
Titanium.UI.PICKER_TYPE_TIME or
Titanium.UI.PICKER_TYPE_COUNT_DOWN_TIMER.

var picker = Titanium.UI.createPicker({
type:Titanium.UI.PICKER_TYPE_DATE_AND_TIME
});

Since the tables and the rows are similar you will be able to create your custom rows in the same way as for the tables using of course the specific functions for the picker (linked at the end of the tutorial).

I won’t go further as the post is big enough already but I’ll try in the future to create a set of posts that will be specific to an UI element and where I’ll try to “dissect” it as much as possible.

More resources

Here are some links to follow for more information:

• Custom table rows with Titanium
• A more advanced tutorial on how to create a picker that behaves like the keyboard on iPhone
• Titanium documentation for pickers, picker columns, picker rows and tables, table sections, table rows.

As always, thank you for reading this and I’m waiting for your questions and suggestions. If you have your own tutorials or links I’ll be glad to add them here to improve the quality of the posts.

See you on day 3.

Check the Spanish version of this post:
Siete días con Titanium – día 2 – tablas y selectores

Related posts:

1. Custom row for TableView in Appcelerator Titanium
2. Seven days with Titanium – day 0 – introduction
3. Seven days with Titanium – day 5 – GPS and Maps

Today is going to be the first day of the Titanium tutorial for beginners and a pretty long post.
Before we begin here is the recap of what we have written until now (and updated what will come): Seven days with Titanium – day 0 – introduction

As specified in the Introduction post I will try in this lesson to say some things about navigation, windows, views and tabs – the basics of the interface.

I will try to first to enumerate each of these elements and then explain what they do and how to use them. Also each interface element has a link to it’s documentation page on Appcelerator site.

Everything that is related to the interface you will find it into the Titanium.UI module. There are also some platform specific modules that cover elements of interface present only on the specific platform: Titanium.UI.Android,Titanium.UI.iPhone,Titanium.UI.iPad but for now we won’t talk about them.

The Window element

The basic element in a Titanium application is a Window. There is nothing complicated here, it’s a “container” for all the other elements if you wish. An application can have one or more windows but it must to have at least one window. A Window it’s one of the few elements that can exist by itself without the need to be a child of something.

The View element

Another basic element it’s a View. The View can be the analog of a div tag in HTML so basically it’s just a rectangle that can hold other elements for an easy and convenient control of the application’s layout. A View cannot exists by itself it will have to be a child of a Window or other element that accepts Views as child (a TableRowView or another View for example).

The TabGroup and the Tabs

The main navigational elements (and common to all platforms) is the TabGroup and the Tabs. Exactly what the names says – analog with a browser with tabs capabilities , a TabGroup will hold more Tabs. Each Tab will control (open) a window. If you decide that you application will have a TabGroup this will be the “root” of the application. What does it mean? That any window opened by the Tabs in TabGroup will be controlled by this and the TabGroup has one instance only and it cannot be closed or removed, but only hidden.

There is also an iPhone specific navigation element, named NavigationGroup that allows to navigate through windows without the need to create the navigation toolbar/buttons by ourselves.

Example

This is how an application with a TabGroup, 2 Windows, 2 Tabs and a View looks loke on the Android and the iPhone platforms.

More details about each element

Before we continue it would be great to take a look at each element documentation page because there is a lot of valuable info there. As you see, each interface element has some properties that are setters and/or getters like top, backgroundColor, etc), some methods (add(), open()) and events – usually user interaction events (touchstart, doubletap, etc) or specific events (open,close). Very similar with the web elements.

I want to specify some things:
sizes are in pixels but without the usual “px” notation, or in percents – but this requires to be written as a string:

...
top:25,
width:"50%"
...

colors are in hexa rgb , the short or the long form , don’t use names:

...
backgroundColor:"#f00",
borderColor:"#ff0055"
...

Let’s try to elaborate a little.

The Window element, again

The window element is created using the function Titanium.UI.createWindow.

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

What the above code means? That we pass to the createWindow function an object argument with all the properties that we want to set.

This could be written like this:

var win1 = Titanium.UI.createWindow();
 
win1.title='Tab 1'
win1.backgroundColor='#fff';

I think it’s pretty clear so I won’t go further with the code for view, tabs and so on. It’s similar to this only that you use Titanium.UI.createView, etc

How the tabGroup, tabs and the windows are related

The logic behind the above UI elements it’s as it follows:

The tabGroup is the root of the application, the “master”, it cannot be included in any other UI element.
This holds the tabs( at least one) and a tab, when clicked, opens the window associated with it.

Here is a sample code:

 
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
// create base UI tabs and  windows
 
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 2',
    window:win2
});
 
//  add tab
 
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
// open tab group
tabGroup.open();

The above code will generate a similar interface with the screenshots without the labels “I am window 1″ etc and the red view. This would be a good exercise for you .

Important !

As you see we set the same titles to tab1 – win1 and to tab2 – win2. This is not mandatory from the code point of view. The window associated to each tab is specified using the window property that points to the previous declared window. Why it’s like this then? It’s about usability. The user needs to have the same values when he/she has to associate two visual elements or will get confused. Also Apple might not like this when you will submit your app.

Resources

The above code it’s found in the default app.js file that you get when you create a new project. I only explained a little how things are.

A very very good resource it’s the KitcheSink project form Appcelerator team, found here.

For the advanced coders this is another tutorial on how to create a tooltip with Titanium that basically it’s just a view with a background image.

I think it’s enough for day 1, the post is too long and I’ll only add that I’m waiting for your questions, suggestions and critics if I made any mistake With your questions/suggestions I’ll update the post or create a new one linked to “day 1″.

Check the Spanish version of this post:
Siete días con Titanium – Día 1 – Ventanas, vistas, navegación y pestañas

Related posts:

1. Seven days with Titanium – day 2 – tables and pickers
2. Seven days with Titanium – day 6 – animations and transforms
3. Seven days with Titanium – day 0 – introduction

What is all about?

I intend this to be a set of seven tutorials to help beginners understand how to work with the Titanium mobile framework.

The guys at Appcelerator did a great job with the framework allowing to us, the web developers, to have access on native applications for mobile devices ( Apple iDevices, Android and soon BlackBerry).

The framework reached the 1.4 version and each day more developers seem to be interested in using it – especially because it’s free. The community is great and you’ll find answers on almost any problem you might have. But for the beginners is still a little difficult to start. From here surged the idea of this set of tutorials in which I will try to cover the basics of the development process for iPhone and Android.

Some things to start

Each post will contain a header with the previous tutorials written, for an easy follow. It will also have a footer part where some links of interest will be published.

It won’t be daily posts, I will write when I’ll have enough time to test and write the examples. I prefer a better written post to a fast one. And each post might be updated to add forgotten things (or to fix issues) so don’t forget to bookmark it.

The provided code will be licensed under the MIT license so you will be able to use it as you wish.

What should I know and/or what do I need?

Basically you need only Javascript knowledge. Some OOP coding routine would be great but is not mandatory ( we learn on the fly .

To develop for Android you will need Android SDK( Linux / OsX / Windows )
• To develop for iPhone you will need a Mac ( Apple’s rules not mine)

I will not show you how to install any of the frameworks, SDKs, etc. There are good tutorials and HowTo’s that will show you this so I don’t want to repeat what’s already out there.

What do I need to forget?

May look strange but you really have to forget about something: DOM. Why? Because there is no DOM in there. We are not anymore in the HTML world. So nothing from HTML applies here. There are similar things (events for example) but everything it’s just an analogy to make it easier to use it.

Forget also about using a library ( yes, no MooTools, jQuery, etc…), or at least for a start. Again why? Because all these libraries are DOM oriented and are used to fight with multiple browsers, to please each of them and this adds bloatware to your code – code that will not be used by the devices anyway.

Why “at least for a start” ? Well, later you might miss some functions and methods these libraries have (let’s say the array methods like filter, each, unique, etc… ) but you will be able to implement this by your own and avoid a 150k library.

What you will NOT learn in these tutorials:

You won’t learn Javascript (you need to know it already). You will not learn ObjC and/or Java (in the end this is the purpose of Titanium). I will try to provide the code for each thing you will learn about as well as screenshots and maybe videos.

And at last

What will you learn:

Day 1:

Some things about navigation, windows, views and tabs – the basics of the interface. I will try to briefly explain what does each of these elements and how to use them.

Day 2:

Tables and pickers (or option pickers, the ‘select’ tag equivalent)

Day 3:

Ajax (actually XHR) – on how to use the HttpClient for webpages, XML, JSON and YQL; The webview – how to embed html code in your apps.

Day 4:

Media – images, movies and sounds

Day 5:

GPS and maps.

Day 6:

Some eye-candy with animations and transforms

Day 7:

About orientation and accelerometer.

Day 8:

This will be a post-tutorials day where I’ll sum up the lessons, add links and so on.

I know I said seven days and in the end are 9, but this one and the last do not count as “learning” days. There is a lot of stuff left out like scrollviews, sliders, some modules – Facebook? – more advanced techniques – like app events – but hopefully these will be the subject of another tutorials.

Let me know your thoughts, if you have ideas of what should I write about – remember that this is a beginner’s guide – or to ask questions.

See you in day 1.

Update:

PDF documents on how to install Titanium on each of the supported platforms ( Linux / OsX / Windows ) can be found on Titanium Appcelerator blog, go get them

Check the Spanish version of this post:
Siete días con Titanium – Día 0 – Introducción

Related posts:

1. Seven days with Titanium – day 1 – windows, views, navigation and tabs
2. Seven days with Titanium – day 2 – tables and pickers
3. Seven days with Titanium – day 4 – Media – images, movies and sounds

Sometimes we need a true combobox for our projects but iPhone SDK does not have a native one (at least from what I know) and of course neither has Titanium.

So we will build one. A “true” iPhone or Ipad combobox that allows you to use the same textfield to input arbitrary text or select a value from a UIPicker element.

Updated with @CJ_Reed’s screenshot and code at the final of the tutorial.

Let’s see the video first, then we’ll get to work:

Ok, what do we need for this iPhone combobox ?

First of all we need a textField to accept input from the user. Titanium lets you set the leftButton and rightButton for this textField while constructing it. So we will take advantage of this and create a textField as it follows:

var my_combo = Titanium.UI.createTextField({
	hintText:"write your name or select one",
	height:40,
	width:300,
	top:20,
	borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});

Nothing special, a regular textField with a hint for the user that will disappear when the textField has a value.

Now we need to create the rightButton for it.

We will use a system button provided by Apple (Titanium.UI.iPhone.SystemButton.DISCLOSURE) only that we will rotate it 90 degrees to serve our purpose. This is the code that creates the rightButton and the transformation applied to it.

var tr = Titanium.UI.create2DMatrix();
tr = tr.rotate(90);
 
var drop_button =  Titanium.UI.createButton({
		style:Titanium.UI.iPhone.SystemButton.DISCLOSURE,
		transform:tr
});

Now that we have the rightButton as we need it, the textField constructor becomes:

var my_combo = Titanium.UI.createTextField({
	hintText:"write your name or select one",
	height:40,
	width:300,
	top:20,
	borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
	rightButton:drop_button,
	rightButtonMode:Titanium.UI.INPUT_BUTTONMODE_ALWAYS
});

Please note the rightButtonMode:Titanium.UI.INPUT_BUTTONMODE_ALWAYS declaration, it makes this button visible all the time.

This is how it looks:

Pretty sexy, isn’t it? Well we’re not done yet.

Building the modal picker

When the user focuses on the textField, the keyboard appears – so we will have to build our picker to emulate the same behaviour and to maximize the usability of our form. For this we will need a Picker and two buttons: Done and Cancel. These two buttons will be positioned in a Toolbar, again, to emulate as good as possible the keyboard behaviour.

Let’s build everything:

var picker_view = Titanium.UI.createView({
	height:251,
	bottom:0
});
 
var cancel =  Titanium.UI.createButton({
	title:'Cancel',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
 
var done =  Titanium.UI.createButton({
	title:'Done',
	style:Titanium.UI.iPhone.SystemButtonStyle.DONE
});
 
var spacer =  Titanium.UI.createButton({
	systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
 
var toolbar =  Titanium.UI.createToolbar({
	top:0,
	items:[cancel,spacer,done]
});
 
var picker = Titanium.UI.createPicker({
		top:43
});
picker.selectionIndicator=true;
 
var picker_data = [
	Titanium.UI.createPickerRow({title:'John'}),
	Titanium.UI.createPickerRow({title:'Alex'}),
	Titanium.UI.createPickerRow({title:'Marie'}),
	Titanium.UI.createPickerRow({title:'Eva'}),
	Titanium.UI.createPickerRow({title:'James'})
];
 
picker.add(picker_data);
 
picker_view.add(toolbar);
picker_view.add(picker);

The code is a little long but is not rocket science. Some stuff to talk about though:

• Everyting is wrapped inside a view – picker_view – because we will have to animate like the keyboard does, so it’s faster to animate one element only.
• The height of picker_view is the height of the toolbar (43px) + the height of the picker (208px). How do I know this? I just used a ruler

The combobox interface looks like this:

Creating the picker animation

We also need to create 2 animations: slide_in and slide_out. We will animate the bottom property of the picker_view. We will need to start with the picker_view off the screen, so we will build it with:

 bottom:-251

instead of 0 as it was initially.

var slide_in =  Titanium.UI.createAnimation({bottom:0});
var slide_out =  Titanium.UI.createAnimation({bottom:-251});

The logic behind the animations is this:

• The user focuses the textField – the keyboard appears ( it’s done by the OS , no worries here) and if the picker_view is visible we need to hide it.
• The user clicks the rightButton – we need to hide the keyboard and show the picker_view.

Here is the code:

my_combo.addEventListener('focus', function() {
	picker_view.animate(slide_out);
});
 
drop_button.addEventListener('click',function() {
	picker_view.animate(slide_in);
	my_combo.blur();
});
 
cancel.addEventListener('click',function() {
	picker_view.animate(slide_out);
});

I also added the click event on the cancel button to hide the picker_view.

Filling the textField with the picker’s value

The only thing we have left is to actually put the value of the picker in the my_combo textField when the user clicks the done button and hide the picker_view.

done.addEventListener('click',function() {
	my_combo.value =  picker.getSelectedRow(0).title;
	picker_view.animate(slide_out);
});

The getSelectedRow method of the picker is returning the selected row, and we use its title. The getSelectedRow argument is the index of the columns in the picker, and since we have only one, this is 0.

Download the project

The Resource folder of the project can be downloaded from here.

Everything is MIT licensed, but as usual, spread the word

We have an update

@CJ_Reed used this tutorial “to produce multiple selection type data entry in a single window.”
Here is how it looks like:

You can take a look at his code here.
Great work!

Check the Spanish version of this post:
Haciendo una lista de opciones desplegables en Titanium Appcelerator – Código y Vídeo

Related posts:

1. Seven days with Titanium – day 2 – tables and pickers
2. Create a countdown timer with Titanium Appcelerator
3. Seven days with Titanium – day 5 – GPS and Maps

In this post we will try to show you how to make a countdown timer using Titanium Appcelerator for Iphone or Android applications.

First we will create an OOP countDown object that can be used independently in the background of the application and then we will connect it with some interface elements.

The countDown object

To have functional a countdown timer we’ll need to declare some properties and some methods.

As properties we will set:

time:{ m : minutes, s : seconds },
total_seconds : m*60+s

I think this is pretty clear, time is an object with minutes and seconds and total_seconds contains the number of seconds until we reach 00:00.

We will need to set methods that will allow us to:

• set a time to count from
• stop the timer
• start it.

We also ned to set some callback functions that will be executed on each tick of the timer   – fn_tick – and one that will execute when the timer reaches 00:00 named fn_end.

We won’t make a callback for start because we know when this occurs we can trigger it by ourselves.

The countDown timer will look like this:

var my_timer = new countDown( minutes, seconds, fn_tick, fn_complete);

on this we will be able to apply

my_timer.set( minutes, seconds );
my_timer.start();
my_tmer.stop();

Below is the code that defines the countDown (pretty simple).

var countDown =  function( m , s, fn_tick, fn_end  ) {
	return {
		total_sec:m*60+s,
		timer:this.timer,
		set: function(m,s) {
			this.total_sec = parseInt(m)*60+parseInt(s);
			this.time = {m:m,s:s};
			return this;
		},
		start: function() {
			var self = this;
			this.timer = setInterval( function() {
				if (self.total_sec) {
					self.total_sec--;
					self.time = { m : parseInt(self.total_sec/60), s: (self.total_sec%60) };
					fn_tick();
				}
				else {
					self.stop();
					fn_end();
				}
				}, 1000 );
			return this;
		},
		stop: function() {
			clearInterval(this.timer)
			this.time = {m:0,s:0};
			this.total_sec = 0;
			return this;
		}
	}
}

And now to use it in our code we will do something like this:

var my_timer = new countDown(1 , 5 ,
	function()	{
		//something here...
	},
	function() {
		// something here...
	}
);
 
my_timer.start();

Ok, the above example is useless, we will need to display the current time on each tick of the countdown times (so on each second) and at the end we’ll have to alert the user when we reached 00:00.

We will also need some interface elements to access the countdown methods and to display the current time.

For this we will create a label named display_lbl, that will show the time and also 3 buttons : set_btn , start_btn and stop_btn.

Creating the code is pretty simple so I won’t put the code here but you will be able to take a look at it downloading the countdown project.

What is most important is to connect the interface with the countdown timer.

So we create the timer and set the fn_tick and fn_end functions

var my_timer = new countDown(5,30, 
		function() {
			display_lbl.text = my_timer.time.m+" : "+my_timer.time.s;
		},
		function() {
			alert("The time is up!");
		}
	);

And this is how we connect the buttons with my_timer

 
set_btn.addEventListener('click',function(){
	display_lbl.text = "5 : 30";
	my_timer.set(5,30);
});
 
stop_btn.addEventListener('click',function(){
	my_timer.stop();
});
 
start_btn.addEventListener('click',function(){
	my_timer.start();
});

As you see we also set the label’s text to the initial value when we set the timer because otherwise we’ll loose the first second. We do this here to keep the timer object clean of any external interaction so we can use it even without an interface.

This is how the final project looks like

Please keep in mind that this is just a simple example and we don’t have a control mechanism to detect when the user stopped the timer or it reached by itself 00:00 – but you can add it as an exercise

You can download the Resources folder of the project from here.

Everything is MIT licensed and you can use it in any application you want to, but spreading the word would be nice.

Check the Spanish version of this post:
Crear un temporizador regresivo con Titanium Appcelerator

Related posts:

1. Making a combo-box in Titanium Appcelerator – code and video
2. Custom row for TableView in Appcelerator Titanium
3. Create a nifty tooltip in Titanium

Google came with a new idea in their list of web toys. A font directory that allows you as a web developer to include some “fancy” fonts in your pages without struggle.

What is Google Fonts Directory all about?

All the fonts in the Google Font Directory are licensed under open source licenses that let you use them on any website, from a private blog to a big commercial site. The idea seems to be good and comes to complete the Google AJAX Libraries API.

For now there are only a few fonts available but in time I think the list will grow.

There are two ways to use this on your site

The first one is simple and only requires a css file retrieved from Google’s servers like below:

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine">
 
    <style>
      body {
        font-family: 'Tangerine';
        font-size: 48px;
      }
    </style>

You need to specify the family of the font and if it contains spaces you need to replace this with a “+” (plus character) sign

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Droid+Sans">

You can load multiple fonts in a single call. This will decrease the loading time because you use only one http request. The multiple fonts will be separated by a “|” ( pipe character ) sign.

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Normaly the fonts are loaded using the regular version but you have more control over the loaded font using some selectors for the style and weight, using a “:” ( colon character ) sign, and the values if more than one separated by a “,” ( comma )

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic">

The style and weight of the font can be specified using a fullname, an abbreviation or a numeric value ( for weight )

bold:b
bold:700
italic:i
bolditalic:bi

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700">

Take into account that not all the fonts have the styles you might need so first of all verify in the font directory if it does.

The second option

The second option to load the fonts is to use the webloader (Javascript) that Google offer for this. This script can be called directly ( which is faster) or using their AJAX API functions. The main advantage of this method is that you can load fonts provided by TypeKit and Google or from any other font provider at the same time from the same library.

WebFont.load({
 
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
 
    typekit: 'myKitId',
 
    custom: { 
       families: ['OneFont', 'AnotherFont'],
       urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
       'http://yetanotherwebfontprovider.com/stylesheet2.css' ] 
   }
});

The disadvantage of this method is the increased loading time comparing to the simple method.

Other things to consider

Loading external fonts is slow, at least the first time, until the font is cached on the visitor’s computer. Don’t overuse it.

You need to specify a fallback version for the font in case the browser is not supported. Here the browser uses a serif font in case it’s not able to load the “Tangerine” one.

  body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

The crossbrowsing issue

Each browser behaves in a different way, of course IE being the worse. To make a consistent behaviour across all the supported browsers you should use the webloader. This gives you the chance to display the styled elements with an initial font until the requested font file is loaded, and when this occurs to change it.

    .wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
    font-family: serif
  }
  .wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
    font-family: 'Tangerine', serif
  }

If the number of fonts will increase then Google Fonts Directory will be a good alternative compared to other webfonts providers that offer this as a paid service. But you still can have fun with it, I’m sure google will continue to improve this service.

Check the demo

A demo page can be seen here. Interesting to see how IE behaves.

More resources

Google Font Directory
Google Fonts Directory API

and of course

Typekit

Check the Spanish version of this post:
Tutorial de Fuentes de Google

Related posts:

1. Wacky fonts anyone?
2. 5 free retro fonts that you should use

Since google launched pagespeed add-on for firefox, everybody is talking about how to speedup you site, but there are few instructions about one aspect : the cookieless domain.

We should serve static components (css, images, javascript) with no cookies at all. Cookies are sent and received each time we make a request to the server. So from the bandwidth point of view, and of course load time for the user’s browser, this is bad.

More data about this here.

After talking more with Kyle Simpson or @getify on twitter , the author of labjs about this, he came with the next comments:

Most people don’t realize that “global cookies” (those that are set by session cookies and usually by analytics packages) creep over even into sub-domains of your main page domain.
It’s very common for people to set up something like “static.mydomain.com” and load all their assets that way
they think this protects those requests.
It usually doesn’t because they have some analytics package that sets cookies like “.mydomain.com”… notice the leading “.”, it means that ALL subdomains are included.
So it defeats the purpose of having your own sub-domain to “strip cookies”, so using an entirely separate domain is the only answer.

Now there are some solutions to address this issue:

-  to use a CDN, and set it to remove cookies( which could be expensive)

- to use a cookieless server, and make a bunch of  changes in your httpd.conf( in the case of apache ), but this requires root access on the server, and for the majority of shared hosting solutions this is not available.

Another  easy and free solution would be to use 2static.it ( in beta now ).

2static.it  is offering this as a FREE service, it strips the cookies, assigns you a DNS alias and makes the DNS redirect to your site.

This way the most complication you might have is to ask your hosting to create the alias for you, in case you cannot do it by yourself.

Starting form here all you need to do is to use the new alias for the static resources of your site.

I suggest you to read the faq page as it explains in details what it does.

No related posts.