ios

Just swiping around the pages of icons and the search screen on my iPhone without any objective, for the sake of enjoying the smoothness of it, and was wondering if the searches in iOS is really as fast as the counterpart Finder in the OS X, which is blazing fast when I’m searching on the OS X. So I decided to randomly search for something in my phone.

And so I search for “lol”

While composing my previous post, I wanted to add a video to show the animation that I’m mention, so I decided to capture screen shots to show it on my post.

Lucky enough OS X came with many useful apps that most people might not aware about them, and download third party apps for the exact functionality. To capture the screen (in video), I use Quicktime’s screen recording function to capture iPhone Simulator and output as .mov file, then use a nice little free convertor called Adapter, to convert into flv, and was looking for WordPress plugin to post a video since then.

I have came across few, like Stream Video Player and JW Player, they both offer simple video browser to pick from my upload library, and generate the video player, but it keeps saying permission error when it plays, even though I already set permission 777 on uploads and plugin folder, no luck.

Then I remembered the HTML5 video, and the Gizmodo post, I decided to leave legacy browser behind, namely the IE 6 – 8, and go for HTML5 video. So I convert the mov file into mp4 and ogv, mainly because not all browser plays the same format as shown here. With a simple <video> with multiple source for supported browser to download.

Recently I’ve noticed that in iOS, the navigation animation for the title bar is more than simply slide in new screen from right to left, despite I’m using iPhone for few months now, I didn’t aware of the animation until I felt something different with the animation done by Sencha Touch, the attention paid to the detail made the whole screen switching much smoother.

Your browser does not support native video tag, that’s bad
(video quality might not be that clear, but still able to see the title bar animation)

It appears that Sencha Touch 2 provide a new component Ext.navigation.View, which according to the documentation, it’s a container with extra features. Using navigation view is a bit different than what I’ve done previously.

Another navigation animation I found different from iOS native and Sencha Touch is the tab panel switching, in Sencha Touch, it use the slide effects, while in stock apps in iOS, it don’t have animation, but this one is a quick fix in Sencha Touch.

So, as usual, we need the MVC folder structure, index.html, app.js and Viewport.js to get started. In this testing, I’m using tab panel on the viewport.