It’s Friday, I was thinking to have a little fun and offer you this brand new multibrowser addon to create pixel-perfect layouts based on a horizontal grid.

We will also think about a vertical one, or mixing vertical and horizontal grids to bring some happiness into designers’ world

Suggestions and improvements are welcome and much appreciated.

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 server 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 he’s 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

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

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

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.

Why?

Because “Downloadify is a tiny JavaScript + Flash library that enables the generation and saving of files on the fly, in the browser, without server interaction.”

You can generate in the client side, with no server interaction files that can be saved on the user’s computer.

Think about this:

Downloadify, a clientside persistent storage script ( like persistjs or lawnchair), some manifest file for html5 cache  and of course a capable browser , and you have a full offline webapp capable of saving files to local disk and that can be syncronized with the server when internet is available.

Why?

MockApp.com gives you for free (you need only to register) a keynote document that allows you to mock up iPhone apps, and even simulate the behaviour (of course without animation).

After this you can export it to pdf, upload it and make a presentation on your iPhone.

Today’s website is a free online tool for creating Flash websites.

The steps to complete a beautiful Flash website are:

1. create your account
2. choose your free template
3. customize it
4. publish it
5. enjoy it.

The free templates that you can edit from are really beatiful and if you explore their gallery you can see that the sky is the limit when it comes to customizing them. All you need is patience, inspiration and a good Internet connection.

A useful tool for small businesses that need a website without spending too much time & money on it.

Today’s website: appcelerator.com

Why?

Because of the great product they offer for free: Titanium Developer.

Titanium is a tool that allows to webdevelopers to build native iPhone and Android apps without  needing to learn cocoa or java.

It will compile your project and even help you release it.

They have a great section with resources, screencasts, tutorials, code examples and documentations, and a nice community to share and solve your issues.

Take a look.

Website of the day: sequelpro.com

Why:

Because it’s design is sleek and beautiful, the information on it is very well structured, because is about mac

and  because they offer for FREE the best mysql admin tool for OsX.