A long weekend with Tizen, CreateJS and JQuery Mobile

Let’s start from the end of my weekend, this is what I’ve just finished:

And now it’s time to explain what there is behind.

What you have just seen is a PoC (Proof of Concept) for an application that I’ve in mind, it allowed me to study, test and having fun with different technologies, in this post I’d like to share what I’ve learnt in less than 24 hours.
I worked with different technologies as the post title suggest, I was really curios to see how I can create good application UI on Tizen OS and understand more about its limits (if there were of course) and performances.
At the beginning, I worked on the 2.5D animation where I had to scale, skew and rotate any images chosen by the user from the Gallery application.
When I started this part I tried immediately the CSS3 transitions, I thought: “They are new, so probably they care about performances on mobile!”, so after 3 hours to play with CSS3 transitions and trying to have a smooth animation on Tizen, I decide to move on Canvas!
CSS3 transitions are very good for web and desktop, but for mobile when you start to do many heavy animations they really suck, in this Tizen device (it has an hardware similar to Galaxy S3) that is so powerful everything has to work well and with them I can’t achieve my idea.

So I moved to Canvas, but I thought to find something that could help me during my “coding time” and that it feels me more comfortable so I remembered that I’ve used long time ago CreateJS for some test and in this case it helps me a lot.
When you work with CreateJS, more or less you are working with Actionscript with some small changes, for any Actionscript developer it should be a good start to move on Javascript, but there are many other options as Dart or Typescript for example that are good enough for any developer that is looking for something more than Javascript (my 2 cents).
But in this case CreateJS  helps me a lot because is highly focused on Canvas development so definitely what I was looking for.
I haven’t any trouble with this library on Tizen, the performance are so good as you have seen on the video and I didn’t write so much code, my Javascript file for the whole app is less than 260 lines, not a lot I guess.

After that I moved on and I start to work with Tizen web APIs to get images from the Gallery application.
In this case the Tizen developer forum and the online guide help me so much, in fact I found a working example in the forum that I had only to customise for my PoC.
The big issue that I found here is if I want to select more than one image, working with Gallery instance, I couldn’t do that or maybe I couldn’t find a way to do that, so I decided to create a quick picker (at the beginning of my application) to allow me to choose more than one image to the time.
To do that I had to work with filesystem APIs instead of the Gallery one, but in a while I had done everything, this is the code to retrieve all images from Image folder of Tizen OS, but you can use to retrieve any kind of files on Tizen OS:

function onResolveError() {
    console.log("error retrieve data");
}
function onsuccess(files) {
    for (var i = 0; i < files.length; i++) {
        console.log("File name is " + files[i].name + " and URL is " + files[i].toURI()); 
    }
}
function onResolveSuccess(dir) {
    dir.listFiles(onsuccess, onResolveError);
}
function openImages() {
    tizen.filesystem.resolve('images', onResolveSuccess, onResolveError, 'w'); 
}

After that I spend few hours to skin my app and get the right look and feel I had in mind with CSS and JQuery mobile and to create this post with the video.
A quick recap of my last experience:

• on Tizen if you need to improve performances try to work with Canvas instead of CSS transitions
• when you have to retrieve files (images, video or whatever) remember to set the right privileges on config.xml and then add the code you can find above
• CreateJS is a really good library if you want to work with Canvas efficiently and without wasting your time
• CreateJS has a good community and if you have a problem you can find a lot of solutions and suggestions
• CreateJS is familiar for any Actionscript 3 developer

That’s it!
Ah, if you are asking if I changed my “religion”? Don’t worry, soon you’ll have news about Flash Platform in this blog, but sometimes I want to experiment new things.