Tag Archives: Sencha Touch

Decouple Controller and View in Sencha MVC

Posted on by
16

The MVC Architecture for Ext JS and Touch provides a solid foundation for building large and scalable apps; but if you follow the guides and implement in the way described you’ll notice that controllers and views are highly coupled. Controllers associate listeners to view events using component queries, thus making them aware of how the view is composed. As result we have a MVC architecture where the view is very light and does nothing but define components, and controllers will do all the heavy lifting by responding to user gestures, updating the view, dealing with models, business logic and more.
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Native Mobile to Web #2: Path Menu

Posted on by
2

Original iOS Interface

Here it is, another post where I take some cool native UI and reproduce using only HTML5 technologies. The first one was the Facebook Login page. The result was a pixel perfect UI, just as nice as the native one. Now I’m taking the Path animated menu!

For those who don’t know Path, it’s a social network for connecting with family and close friends, available for iOS and Android. It has very interesting features, but the thing that really caught my attention was their “fan-out animated menu”. When you tap the menu, the options fan out, with a nice circular animation. It’s so cool that I had to take this UI and port it. I translated <divs> to Ext.Buttons, created the CSS3 animation and calculations, so everything works properly with Touch components.
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Advanced CSS3 animations with Sencha Touch

Posted on by
5


Touch has some nice CSS3 animations like slide, flip, fade, pop and cube…but what if you need something different, like a custom slide-fade animation?

I’ve covered how to use animations in Using CSS3 animations on Sencha Touch and Animate components in a view, but I didn’t cover the internals of the framework, nor how can you create a custom animation. So let’s take a look at it, step by step.
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Animate components in a view

Posted on by
3

Since the last post (Using CSS3 animations on Sencha Touch) was about animations, and I stumbled upon this question at Sencha’s forum, I thought I would develop a simple demo showing how to take a view, and animate random components inside it.

Obviously there are simple page animations, such as with a card layout, but I’m looking for the right approach to animate an object like a button – for example to get it to fly in from the side after a delay, after the view is loaded.

Here’s hoping someone will take pity on me, and spell it out!

Allister

Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Using CSS3 animations on Sencha Touch

Posted on by
2

So you’ve seen all those cool animations on Touch demos right? Cards with slide effect, Message boxes that pop or fade out, etc… Here are some quick examples and tips on how you can change default animations and add more style to your app.

There’s basically 3 ways you can embed animations in your views:

  1. show(animationCfg) method: pass an individual config with show/hide methods
  2. showAnimation & hideAnimation configs
  3. animations with card layout

Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

How to create a mobile Flickr app with Sencha Touch 2

Posted on by
5

Touchr App

The best way for developers to learn new technology is definitely coding. For learning the new changes introduced with Touch 2, I created this little app that I called Touchr. It features some common components and basic filtering interaction, but also a customized proxy with YQL integration to consume Flickr. Check the list:

  • MVC architecture
  • Customized JSONP proxy that consumes YQL queries
  • Use of sencha.io service to resize images, optimizing for mobile screens.
  • Use of controller listeners to filter data stores
  • Use of TabPanel, DataView, Buttons, Toolbar, TextField
  • Use of custom theme to define new color, new icons and css optimizations

In this post I’ll share some details so you can also exercise some Touch skills as well!
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Quick Touch 2 scaffolding example

Posted on by
1

The new Sencha Touch 2 framework ships with a terminal SDK that makes it easier than ever to create, pack and deploy your application. Let’s take a look on how we start a brand new project with Touch 2.

First of all, make sure you check the official guide Using Sencha Command. It will help you have everything setup.

Scaffolding a new project requires a simple command. 

sencha app create <namespace> <path_to_project>

The trick here is that you need to be at the sencha framework folder to execute this line. If you execute sencha app create from any other folder, it won’t work. Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Sencha Touch – um framework HTML 5 para aplicativos móveis

Posted on by
7

And they did it again! Was not enough for the periodic releases from the Ext JS framework, the Ext team, now with the new name Sencha, took the next big step and introduced the first framework for mobile devices under the HTML 5 standard. See here a few features, and a first analysis of Sencha Touch framework.

Mobile applications without barriers

The first thing that caught my attention was the interface that the framework generates very similar to the standard Apple and Google. But being a web framework, you can create applications similar to existing mobile devices without worrying about the authorization of the manufacturers (read AppStore) or facilities, nor with the software distributions. Just develop, make available on a web server and all mobile device users can use.

I confess that I’m interested in the mobile area, especially with regard to the iPhone. But right away you need to have Mac OS on your computer. It is difficult to be installed on non-apple computers (not impossible but difficult). Then you have to learn objective-C, a language that to me is very boring. And finally you have to respect all the Apple standards because if you not they shouldn’t approve the distribution of your application. It’s easy to see how good was the launch of Sencha Framework. Imagine developing mobile applications using web language, it’s fantastic!

Integrating Ext JS with Sencha Touch

We must not confuse one framework with another. Ext JS is a web framework and Sencha Touch a mobile framework. But the team has said in his blog that the data layer is the same in both Sencha Touch as in Ext 4 (forthcoming). Knowing this, to turn a desktop application in mobile, you just have to reprogram the interface. All the data layer, queries to the database, and everything that relates to the server side (PHP, ASP.NET, Java, etc. ..) will remain equal!

Concluding

It is readily apparent that the “mobile wave” is increasing. First with the iPhone launch, a decent smartphone, without squeezed keyboard, not intuitive navigation, and etc (don’t want to join the discussion) … And then with the launching of multiple applications and development of even more advanced smartphones. It seems that the Sencha Touch greatly facilitate the migration to this platform.

It is also evident that the Sencha team is aware of new standards, and there is the promise of major advances in existing products in the company, mainly Ext JS. They have created a framework using CSS 3, demonstrating its ability to do the same in Ext Framework. Only the implementation of CSS 3 in the Ext JS represent one of the greatest advances made, because all images and sprites to build gradient and rounded corners would be exempt.

Congratulations to Sencha team! And you? What do you think the news? Cheers!

LinkedInDeliciousPinterestTumblrEmailShare