Making a combo-box in Titanium Appcelerator – code and video

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:

iPhone combobox with Titanium

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:

picker Titanium for combobox

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:
to produce multiple selection type data entry in a single window.
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

Create a countdown timer with Titanium Appcelerator

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

Countdown timer with Appcelerator

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

The dissapearance of H1

I was writing the other day about the importancy of the H1 heading and the necessity to use quality headings and content.

I started to search for big-names-earning-money-from-good-websites in order to find good examples of smart headings in their index pages. In case anyone would ask: “Ok smart….girl, show me a million dollar website if your’re so….” I would definitely say: “Look at Amazon or HP or BMW you…..” They have the money to buy web experts in case they don’t have an in-house department. They shoud know better than anyone how important is to have a good website.

But I can’t. Amazon, HP and BMW all have something in common. They all start their index page with a H2. Well it’s not the end of the world. Their pages still look good and at least they don’t say “welcome” 🙂

What do big guys say? H2 speaking…

Amazon says: “Shop Laptops at 20% Off or More”

HP US says: “Primary content tabs” or “Messaging banner” or “HP Newsroom links”…all for accessibility purposes…..

These 3 H2 tags are all having a CSS class that hides them. There are some H2 visible though …. In the footer we have “HP Corporate”, “Resources” and “Customer Support”.

BMW US says: “Your Saved Content”, “Your Saved Configurations” and “Sorry!” in case something bad happens. BTW, nice flash banner…..

Let’s find some good guys

Apple has:

H1: the Ipad image, with the message: “iPad is here.”
apple's h1 heading

H2-H6 missing

IBM has:

H1: an image with the message:”If the buildings in LA look smug, they have a good reason. Los Angeles emerges as te winner in the IBM Smarter Buildings Study. Find ut why–and see what else we learned.”
IBMs H1 heading

H2: missing
H3: “Featured topics”, “What IBM can do for…”, “How to buy”, “Products”, “Services”, “Evaluate”, “Design”……a lot….

The interesting thing about these 2 companies is that the H1 tag was also the most proeminent news in the page. They didn’t have, like HP, important tags used only for screen readers with no relation with what was important in the main visible layout.

In the end…

I think we all got the message. Forget about H1, who gives a ….flower about it anyway?

Newsletter WordPress Plugins

I needed a plugin to help me send the last posts of my blog as email to my subscribers. I chose 6 that might solve my problem and here they are, in alphabetical order:

Ajax Newsletter

It comes with a widget so make sure you install them both. It collects subscribers and sends email depending on the settings you decided upon.
ajax newsletter
(+) The widget will collect subscribers while the plugin will send email every X posts or weekly/monthly. Quite flexible with the settings and usable.
(+) You can preview the emails, to see what your subscribers will receive.
(+) The users receive a confirmation email and also there is always a link to unsubscribe from the newsletter.
(-) The user has to confirm the subscription and the confirmation page is quite ugly and not based on your theme. You have to work a bit to make it pretty. Also you have to spend a little time and improve the mail’s look.

Automatic Newsletter

Quite unusable for me.
automatic newsletter
(+) You can set the number of posts to send and how often
(-) Problems with the usability of the widget. After subscribing I am redirected to an error page while the error/success message is displayed under the newsletter form. So my attention goes to the page, displaying: “Sorry, no posts matched your criteria.” instead of the message under the form saying:”Email Added, Thank you”.
(-) No confirmation email is sent to the subscriber.
(-) I don’t see the subscribers and I wasn’t sure they will all receive my email until I actually sent a test email. The interface is not as usable as it could be and might confuse the user.
(-) There is no Unsubscibe link by defauls in each mail sent to the subscribers.

G-Lock Double Opt-in Manager

This was my choice in the end and I think it is the most complex plugin that I tested.
Glock newsletter
Glock newsletter
(+) It sends confirmation mails and the unsubscribe link is present in all their mails.
(+) You can send welcome messages
(+) You can customize emails for:subscribe, unsubscribe, the newsletter’s content, welcome mail.
(+) You can customize the newsletter’s fields. In this case I chose to show only the email field.
(+) It uses the current theme to display pages Success/Error/Confirmation pages in your blog and it saves you time with customizing them.
(+) Quite usable and flexible and with useful tips in te sidebar of the admin section.
(+) You can see your subscribers and unsubscribe/delete them.
(-) In case you already used a plugin before and have a DB of subscribers, there’s no way you can import it and use it with G-Lock. Too bad…:(

MeeNews

Comes with a widget so pay attention. It’s also partially in Spanish so you have to pay attention some more. But it’s better than Glock because it has statistics and more settings, but it does not send mail automatically and it’s a little too complex – too sofisticated perhaps.
Meenews Newsletter
(+) Sends a confirmation email.
(+) Very customizable and skinnable, maybe too much.
(+) You can customized the confirmation email, which is very good because their English is not 100% perfect.
(+) You can see the subscribers and also import them from .csv files.
(+) Access to statistics: how many subscribers you have, how many read your email, etc. Really cool feature!! (if you pay for it)
(-) It doesn’t use the blog’s theme for the confirmation mail, but their own.
(-) It does not send mails unless you pick the posts and send them yourself. It cannot do this automatically or when your blog reaches a certain number of posts. Too bad 🙁
(-) In the emails sent to the users I saw an unsubscribe message but the link was not functional.

Newsletter

(+) You can costomize the emails sent to the users.
Newsletter
(+) You have access to the subscribers’ list and you can import subscribers from a .csv file.
(+) It uses your blog’s theme for confirmation message, and it sends really polite mails. 🙂
(+) Quite customizable.
(-) It doesn’t use unubscribe links in the emails.
(-) It doesn’t have a scheduler for the emails, it keeps sending you to buy a better version that hasn’t been released yet. Quite frustrating. And expensive.

Subscribe2

Subscribe2
(+) Sends mails automatically.
(+) You have access to the subscribers list.
(-) You cannot customize many things, pretty simple compared to the other ones.
(-) You have to create a page with the newsletter form, it does not add itself in the sidebar.You really have to read the Help for this one.

Check the Spanish version of this post:
Plugins de Noticias WordPress

Why is “Welcome” so important?

I’m seeing a lot of websites lately that open their homepage with a big “Welcome” title. The beauty of this title is that usually somebody decides it is so important that it also deserves to be a H1 heading.

From the marketing-girl’s perspective – or the PR-guy if you want – probably welcoming your visitors with such a nice and polite heading is the good thing to do. And when a programmer like me decides your welcome does not worth the H1 and lowers its importancy to H3 (because I’m not allowed to delete it completely) then the war inside the company is about to begin.

When you have nothing else to say

Some people think the most important in your site is YOU. Your company’s name, slogan, discoveries, news…Sometimes the logo is also H1 – sometimes not. And this is where you stop. Not everybody agrees, but all agree that you have to have a H1.

Next in the line is H2. You can use it in any way you want but bear in mind that Google is listening and this H2 will mean a lot for SEO. And now we go back to “Welcome”.

What is Google learning from you when the most important message in your page is “welcome”?

Welcome message in a non existent site

Forget Google, what about information?

From the Information Architecture point of view, the fact that you open your website with a “Welcome” means that you have nothing better to say.

When I see it I think that this company has nothing interesting to write on the index page. The headings help me understand what is the company doing and how it can help me (because this is why I am here, I’m not surfing the net to waste time), so the index page is the most important page in the entire website.

The way it is designed, the content and most of all the headings should make me understand the company’s purpose and activity and convince me NOT to leave the website at once.

Nobody reads, everyone scans

Why are the headings so important? Besides the race to win Google’s heart, it’s all about money! When you have a boring index page with boring headings and insipid content, the huge Flash in the middle of the page won’t help you stop loosing your visitors. If the visitors come, get bored/scared/indiferent then they go somewhere else. And they take the wallet with them.

In case you don’t give a….flower on a web specialist’s opinion about your website then this argument should win. The analitycs were invented with a purpose. Knowing how many vistors come and go, how much time they spend on your website and why are they leaving after 30 seconds it’s suppose to make you win or at least stop loosing money. If you’re even more insensitive than that, think about them as wallets. The visitor goes = the money goes.

Does this make you more interested in the Web Architect’s opinion?

Check the Spanish version of this post:
Porqué “Binevenida” es tan importante?