Custom table rows with Titanium
iPhone, Learn Titanium Appcelerator

Custom row for TableView in Appcelerator Titanium

58 Comments

In this post  I will try to explain how to create custom rows for TableViews using Titanium Mobile.

If you don’t know what Titanium is about,  take a look here. I suppose you already know how to setup and start a Titanium project so I’ll show only how to create a custom row.

By default a TableView will let you create a row that can have: the left image, the title and the row type decorator set. The next code is an example of the standard data that needs to be passed to a TableView.

var RegData = [
 
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
];
 
var TheTable = Titanium.UI.createTableView({
data:RegData
});

And the result is this:

Ok, we would like to add more data to a row, maybe something like this:

This will require to build the row “by hand”. So we need to add a 2 imageViews, the flag and the trend, and  labelViews for the country and the percent . We also need to change the data array of course.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }
];

We create a data variable as an array that will hold the row objects generated.

var data=[];

then we walk through the CustomData array, create  a new row , the imageViews and labels and add them to the row.

for (var i = CustomData.length - 1; i <= 0; i--) {
var row = Titanium.UI.createTableViewRow();
 
var flag =  Titanium.UI.createImageView({
url:CustomData[i].flag,
width:32,
height:32,
left:4,
top:2
});
 
var country = Titanium.UI.createLabel({
text:CustomData[i].country,
font:{fontSize:16,fontWeight:'bold'},
width:'auto',
textAlign:'left',
top:2,
left:40,
height:16
});
 
var percent =  Titanium.UI.createLabel({
text:CustomData[i].percent,
font:{fontSize:12,fontWeight:'bold'},
width:'auto',
textAlign:'left',
bottom:0,
left:60,
height:12
});
 
var trend =  Titanium.UI.createImageView({
url:CustomData[i].trend,
width:16,
height:16,
right:10
});
 
row.add(flag);
row.add(country);
row.add(percent);
row.add(trend);
row.hasChild=CustomData[i].hasChild;
 
row.className = 'coutry_row';
 
data.push(row);
};

As you see we also add a className to the row to improve the rendering performance, as the iPhone will reuse the row template with every new data when rendering the table.

The obtained result is this:

You can download the complete Titanium project from here. You will have to create a new project in Titanium and replace the resource folder with the one in the archive.

Let me know your thoughts.

Check the Spanish version of this post:
Como crear filas personalizadas para TableViews usando Titanium Móvil

CSS & CSS3, Javascript, News & Gossip

Everything is green with IE9

I am sure you all know about Mictosoft’s IE9 Testdrive. Its main target was, for now, the developer – in an attempt to showcase the improvements in IE9 and maybe make us be more nice to them and forget how much time we waste with IE6.

What I was interested as a frontend developer was the the compatibility tables for features like SVG, CSS3 and DOM. And the test results, as per Microsoft’s page, are all gorgeous.
IE9 testdrive results

A more detailed list of supported features can be seen by checking their website but long story short, everything is green for them and not so green for the other browsers, except CSS3 :nth-child selector and CSS comments
CSS3 supported selectors

and DOM level 2 style @import inside of @media
DOM level2 table

Another very interesting source of information regarding the present and future features supported by the browsers is When can I use… that also includes HTML5 elements – I notice IE9 testdrive page is not mentioning anything about HTML5 altough IE9 is expecting to support it in a certain percentage. They have also calculated the support that past and future browsers have for some features and their numbers are like this:
Test result When can I use

But you’d better check their website to see the features they worked with cause there are some differences that worth being taking into account.

We salute Microsofts initiative, altough we would love to see some of these CSS3 borders, backgrounds and selectors embedded in an IE8 update…cause we all check our statistics….

Coffee break, Website of the day

A website is not a kilogram of apples

4 Comments

I have recently discovered an interesting blog and while reading one of its posts I firmly believed Julio, the author, read my mind. I translated it with his help and with the help of Alex & Gillian Meldrum and here it is for you to read and enjoy.

When quoting for work, we seem to hear the same refrain – “expensive”. Why?

When you take your car to the garage to be repaired, do you automatically question the cost and suggest that the mechanic’s hourly rate is too high? Probably not. Yet we hear it routinely. Why should construction of a website be any different? Is there any real suggestion that the level of skill involved in creating websites is in any way less valuable than that of a mechanic? Or any other skilled trade or profession for that matter?

And even if your business model is geared to offer the client genuine value for the level of expertise provided, it’s still the same complaint. Somehow, clients are able to find lower quotes and still think that this will deliver the same result (“their website”) and therefore that we are “expensive”. And they are not afraid to tell us this.

There are a number of reasons why this is happening. One of them is that the market is not yet ready to really understand what constitutes a ‘good’ website. There is a difference between being able to find what you need on the web (as a user) and understanding the architecture that the site needs to guide users to it. Many clients don’t really understand what they need so they leap into the unknown and keep their fingers crossed. After all, when people are competing for your work, they will always tell you that they can deliver what you need – and they will usually tell you what you want to hear (as opposed to what you need to hear).

Let’s think about this in a wider context. If you need a very good brain surgeon, how do you reach one? How would you choose one? You can’t exactly look in Yellow Pages, under “good surgeons”! Other doctors would recommend one based on reputation and experience in their field. After all, most of us wouldn’t know where to start with a list of criteria that makes a good brain surgeon. But what if you still had to choose from a shortlist? Where would you start? What if none of the candidates is suitable? How can YOU evaluate them, when THEY are the experts?

Inexperienced clients tend to rely either on mainly subjective criteria (such as the impression given by the salesman/developer and whether their face fits) or on a very common objective one: the price.

If the quotes for the “same job” are 6.000 Euros and 1.500 Euros respectively, what quote would you choose? The majority of clients would instinctively say “the 1500 Euros one”.

But if you think about it for a moment, is it ever really possible to get more for less?

Clients are rightly wary, but if somebody offers a product for a fraction of the price, they somehow still believe that the final product will be essentially the same. But here’s the crunch: all website are not equal. And if we continue the car analogy, if somebody offers you a brand new top of the range Mercedes for next to nothing, do you really think that it’s a genuine bargain? Or do you suspect that there must be something amiss?

The truth is that, at the moment, websites seem to be bought much like apples at the supermarket. You can go to the budget supermarket, where they’ll be cheaper, because you know there won’t be much difference between them. Or if there is, it is probably so subtle that it is not really worth the effort of going to a different shop. After all, it’s only apples.

But a website is not a kilogram of apples. It’s not simple merchandise. A website is a custom development and the difference is always in the team working on it. The experience, knowledge, formation, seriousness and commitment of the team is key. The final product and its quality will be the fruit of this custom development and the results obtained from it will be directly proportional to this quality.

This is what the client needs to appreciate. If the product or the strategy of the client is not correctly established, or if the website is not usable, accessible from different platforms or if the code is not standard and semantic (and hence indexable by search engines) then they are wasting their money.

Suddenly the 1500 Euros “bargain” will be seen for what it is – a false economy. Perhaps the client will recognize that they have missed an opportunity to promote their business, to outshine their competition and to have a website that does what they need. Sooner or later they may need to develop a new website from scratch. This involves investing further time, energy and of course money.

Unfortunately, the majority of projects seem to fall into this category and that’s why a lot of companies go through various websites, always looking for “the final version”. Browsing a few random websites is enough to see how much wasted money and how many lost business opportunities there are.

Now that’s what I call “expensive”.

Other interesting posts can be found on Julios blogs: Stanque and Realidad Aparte. I strongly recommend those who understand Spanish language to take a look at Padres y empleadores. Clientes y usuarios.

Development tools

speedup your site – 2static.it

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.

Ajax, Javascript, MooTools

Upload forms – enhanced

Upload forms are something we often use in our projects. Sometimes a simple upload form is not enough, so I’ll try to compile a list with enhanced file upload forms that help us to improve the look, functionality and usability of our sites.

Stickman multiple file uploader

capture-11

The linked version is Mootools v1.2 based but there is a version for v1.1 and also one framework independent.

The script allows you to add multiple files in a nice form,multiple forms in the same page, and customization.

FancyUpload – Swiff meets Ajax (v3.0)

Flash+Mootools unobtrusive upload form.

  • Select and upload multiple files
  • Filter files by type in the select dialog
  • Optional Events to add your own behavior
  • Show and filter useful file information before the upload starts
  • Limit uploads by file count and/or file size
  • Platform and server independent, just needs Flash 9+ (> 95% penetration)
  • Unobtrusive, since the element is replaced after the swf loaded successfully
  • Cancel running uploads, add files during upload
  • Everything is optional, documented and easy editable
  • New in 2.0
    • Get the server response after upload for showing additional information or previewing the image, etc.
    • Shows the current upload speed and the time left
    • Send additional request data via GET or POST variables
    • Set the filename for the upload request

Ajax file upload

Jquery and Prototype versions available.
capture-31