Insights from the Titanium App Developer certification exam

Recently I became a Titanium Certified Application Developer (TCAD) and I was thinking on giving some insights on the exam for those who want to take it.

The exam covers all the areas that exists in the process of developing an app with Titanium Appcelerator:

  • Code Questions,
  • Contacts and Social APIs,
  • Cross-Platform Development in Titanium,
  • Integrating Web Content,
  • Media and the Filesystem,
  • Using Location Services,
  • Working with Local Data,
  • Working With Remote Data,
  • You’re a Native Application Developer Now,
  • Zero To App Recap,
  • UI Fundamentals,
  • Deployment and Distribution.

To pass the exam you will need of course experience but the Appcelerator team has put online at Wiki the labs for each part of the exam. I strongly suggest you to take a good look at them, even at those that might look already known to you, because you might find some nice stuff inside and it will also remind you forgotten stuff at least.

Some of the courses have videos and also links to the downloadable projects.

The projects are a good point to start/learn how to do things “the right way” and explain pretty well some principles that apply to an Appcelerator app.

Don’t let the word “exam” scare you because it’s not really difficult – some of the questions are simple and common sense.

So go for it!

Possible new CSS features from Adobe

Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines.

You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media Module

Let’s see some examples that Adobe implemented:

Content threads and shapes using CSS regions

Text could easily flow from one region to the other and we can also choose to imbricate regions or give them different widths, heights and positions in the layout (see picture below)

multiple content threads with CSS regions
content shaped like a heart with CSS regions
If you can set rectangular regions, why not come up with weird custom shapes?

Text will also flow from one region (shape in this case) to another.

The idea is super-cool and we waited for it for a while now, but I do wonder about its usability if we think about the way people are reading web content versus printed text (that might change the bottom-top L shaped reading order observed with eye tracking methods).

Content exclusion

text exclusion with CSS
The opposite idea is to exclude text from a certain region or regions. (rectangular or custom shape)

Possible real world implementations

adaptive design
Adobe came up with more complex examples (they work in their own version of WebKit based browser only since these features are still a draft and highly experimental).

Text can flow into custom shape areas and that will allow us create CSS accessible pie charts and complex layouts involving images and text that will behave well on devices with different screen sizes and resolutions.

Update: Stephen Hay talking about these features at Fronteers 2011

Stephen Hay | Go with the flow | Fronteers 2011 from Fronteers on Vimeo.

In this session, Stephen will introduce, discuss and give examples of CSS3 Regions.

Browsers have begun to introduce actual layout mechanisms like Flexible Box Layout and Grid/Template Layout. For this, we kneel humbly and are thankful. But while we’re at it, why settle for rudimentary layout tools when we can add content flow to the mix? CSS Regions attempts to bring the power of content flow from print to the Web. Think of Regions as Multi-column layout on adrenaline. Regions can be extremely powerful and useful on their own. When combined with other CSS3 modules they will give web designers and developers creative freedom which rivals that of printed media.

Dan Tamas speaking about Titanium Appcelerator at TheEvent 2011, Cáceres, Spain

Dan Tamas was invited to talk about Titanium Appcelerator at TheEvnt 2011 in Cáceres, Spain, May 14th and the purpose of this talk was to present the advantages of using this framework to develop applications for iPhone, iPad and Android devices.

It was an introductory talk in order to present to the Spanish developers an alternative to ObjectiveC and the very popular Java.

For now I can only embed the slides (in Spanish) but I promise I will soon try to give you a link to the HTML version and also embed the video of the presentation.

Advanced Titanium Tutorial – Bonjour Networking

Titanium Appcelerator Mobile has implemented for iOs the Bonjour (or ZeroConf if you want) network protocol that allows you to connect to another device found in the same network.

Before starting with the boring part – I mean the code – let’s watch a video with a small demo showing 3 devices playing together 🙂

Networking with Titanium Mobile on iOs

I would like to mention that the iPod is a second generation one – so less capable (the delays are visible in the video) and somehow, sometimes, even seems to loose packets. I tested the same app with an iPad instead of the iPod and everything works just fine.
bubbles

Bonjour

Based on the code found in KitchenSink I created a small function that creates the connection for us and returns an object to allow you to start it, close it and write to the socket.

Bonjour is a little weird to understand for those with less experience but shortly, things are like this:

  • We need a socket in read-write mode that will be used by a localService to publish its presence.
  • Each localService have to have its own unique name to be able to identify it in the network.

Besides this, we need a serviceBrowser to find other devices around (that published their presence, of course).

Since everything is asynchronous we’ll have to rely on events to capture the data sent by somebody or the changes in the number of devices connected.

The serviceBrowser has the updatedServices event where we can capture the published services. Here in this function we’ll try to catch the read event for each service that is the one who tells us what data is sent over the network.

Warning: Close the network connection the moment you don’t need it anymore.

The Network Connection Function

The function I created takes care of this so you will just have to use it as in the example below:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

In other point of your app, where you want to send over a message, just do:

	connection.write('my_message');

As I said before, don’t forget to clean everything:

win.addEventListener('close', function(e) {
	connection.stop();
});

What is going on in the demo?

The example in the video is pretty simple. Depending on what blob you touch (red, green or blue) you create a new connection with this name and start it. At this moment any message coming from the network is JSON parsed and a small blob is created with the specified coordinates and color.

On your turn, when you touch the screen you send over the network your coordinates and color so the other devices know what to draw. Every message is a JSON stringified object like the one below:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

As an aside the demo uses zero images. None. Everything is native and I plan a future tutorial on how to do this 🙂

The code

The code is hosted on Github and you can download it from here. Everything is MIT licensed but I’d like to hear what you come up with.

Code strong!

PS. I’m allowed to say this cause I’m a titan 😀

Check the Spanish version of this post:
Tutorial Avanzado de Titanium – Bonjour Networking

Seven days with Titanium – day 6 – animations and transforms

Almost any UI element can be animated and transformed, allowing you to add to your application some eye candy or simply take advantage of predefined elements to give them a new role. For those familiar with CSS3 animations this will come very easy as the concept it’s pretty the same.

Animations

Pointless to say, an animation will change one or more properties of an element form the current stage to another (set by us) in a period of time.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

The simple code above will animate the height of my_view from 20 to 100.

You can complicate the things more adding more properties to animate (like the background color, opacity, etc), a duration (that needs to be in ms) and a curve (like ease-out or liniar, etc)

Some examples

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

If you need to make an animation to come back to the element’s original state and repeat it several times, there are 2 properties that might interest you :repeat and autoreverse

The below code will make the view “pulse” 3 times.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

The animations have 2 events: start and complete.The complete event is very useful because we can chain more animations one after another or start some other actions when the current one stops.

Transforms

Similar to CSS3 transforms, in Titanium you can use 2D or 3D transforms.

Basically you create a 2D or a 3D matrix for the transform or use the predefined “shortcuts” – (like scale or rotate) and pass this transform to the object you are creating or to the animation.

An example with transforms

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

The best resources to see how everything works are the examples provided by the Appcelerator team in the KitchenSink, the entry point being here:http://bit.ly/eiow0B

These animations and transforms are not suited to a very intensive usage (like games) but they can be used with success to improve the apps’ look and feel – and with this, the user experience.

As always, I wait for your questions, suggestions and what are you come up with 🙂
Check the Spanish version of this post:
Siete días con Titanium – día 6 – animaciones y transformaciones