Applications

Ups and downs when building apps – case study: ArtistBox

Post originally published on Appcelerator’s blog.

We’d like to share with you our story on how we built one of our iPhone apps – ArtistBox – and give you some insights on how we solved the (quite a few) issues that we had.

What’s ArtistBox?

Artistbox is an iPhone application (built with Titanium Appcelerator) that finds the most complete information about your favorite artists: their biography, discography, news, concerts in your area and worldwide, videos, pictures and similar artists.

We strive to gather way more information than any other music discovery app on the market – for example by adding up-to-date news or hi-res pictures – and for the next versions we will add more cool features.

ArtistBox listing all the artist in the iPhone libraryRihanna - Artist page in ArtistBoc app
Continue reading →

Learn Titanium Appcelerator

Let’s meet at TiConf 2013 in Valencia – Europe’s first Titanium Appcelerator conference

This will probably be the last blog post for 2012 and I don’t want to end this year and begin another one without sending an invitation to all Titanium Appcelerators DeveLovers out there to come and meet each other at TiConf 2013.

Let’s meet next February 23th in Valencia (Spain), have a drink and chat about Titanium, NodeJs, SQLite, your latest Android phone, the latest SDK available or the last night’s tapas tour. Whatever makes you happy, just come – spring in Valencia is awesome and there will also be plenty of time to tour the city and its bars too.
Continue reading →

CSS & CSS3

A fancy box with rounded corners and drop shadow with CSS3 only. Really?

I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.

What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.

If you’re not a patient person skip all this and go directly to the test page.
Continue reading →

CSS & CSS3

My own attempts to build CSS3 patterns

1 Comment

I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though).

One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made with images, just pure CSS3 gradients and lots of brains.

Here’s how some of them look like:

CSS3patterns by Lea Verou
Continue reading →

Android, iPhone, Learn Titanium Appcelerator

Seven days with Titanium – day 7 – orientation and accelerometer

Most of the devices nowadays are equipped with an accelerometer that detect the orientation of the device or the movements the user is doing with it.

Titanium exposes this functionality through its APIs so let’s take advantage of that 🙂

The orientation

The device can report 7 states of the orientation and they are defined in Titanium as follows:

  • Ti.UI.UNKNOWN – the app cannot detect the position
  • Ti.UI.PORTRAIT
  • Ti.UI.UPSIDE_PORTRAIT
  • Ti.UI.LANDSCAPE_LEFT
  • Ti.UI.LANDSCAPE_RIGHT
  • Ti.UI.FACE_DOWN – like resting on a table with the screen downward
  • Ti.UI.FACE_UP – like resting on a table but with the screen upward

While we have all this constants defined there are situations where they might not be available: in iOs when the user locks the orientation the device will report that orientation no matter how the device is held. On Android many devices can detect only the PORTRAIT and LANDSCAPE_LEFT orientations.

Since version 1.7.2 of the SDK the orientation API changed and is set per window (or activity). You can do this using the property orientationModes that accepts an array with the allowed orientation for that window. See this post on Appcelerator’s blog.

win.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_RIGHT];

There is also an event that triggers when the orientation changes allowing you to make the changes you might need (adapt the UI to the new orientation for example.)

Ti.Gesture.addEventListener('orientationchange',function(e) {
    alert(e.orientation);
});

The alert will show a number from 1 to 7 because the constants defined above are type INT. A good practice is to compare the orientation reported by the event with the constant and not directly with the number. In case something will change in the future this will assure you that the code will keep working.

You can find more about it in the docs page for Titanium.Gesture

The accelerometer

The accelerometer is a piece of hardware that is giving you the current position of the device in a 3D coordinates (x, y and z) vector. This can allow you for example to control the movements of an element on the screen.

To get this vector all you have to do is to catch the update event of the Titanium.Accelerometer APIs. It will return the vector we were talking about.

Ti.Accelerometer.addEventListener('update', function(e) {
    lbl.text = 'x: ' + e.x + 'y:' + e.y + 'z:' + e.z;
});

Again, it’s a good practice to remove the event when we don’t need it anymore to save some CPU cycles 🙂

Well, that’s it for Day 7. Code strong!