Arquivos da Tag: Sencha Touch

Decouple Controller and View in Sencha MVC

Publicado em por
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.
Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

Native Mobile to Web #2: Path Menu

Publicado em por
2

Desculpe-nos, mas este texto está apenas disponível em English.

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.
Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

Advanced CSS3 animations with Sencha Touch

Publicado em por
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.
Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

Animate components in a view

Publicado em por
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

Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

Using CSS3 animations on Sencha Touch

Publicado em por
2

Desculpe-nos, mas este texto está apenas disponível em English.

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

Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

Native Mobile to Web #1: Facebook Login

Publicado em por
12

Desculpe-nos, mas este texto está apenas disponível em English.

Original iOS Interface

Wouldn’t be cool if we selected some native mobile UI and try to recreate them using only HTML5, CSS3 and JavaScript? So, today is Facebook’s extraordinary IPO and I took their clean & classy login screen and recreated it for the web! Here it is the final result, some code and also comments.
Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

How to create a mobile Flickr app with Sencha Touch 2

Publicado em por
5

Desculpe-nos, mas este texto está apenas disponível em English.

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!
Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

Quick Touch 2 scaffolding example

Publicado em por
1

Desculpe-nos, mas este texto está apenas disponível em English.

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. Continuar lendo →

LinkedInDeliciousPinterestTumblrEmailShare

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

Publicado em por
7

 

E eles fizeram novamente! Já não bastasse os periódicos lançamentos e novidades do framework Ext JS, a equipe Ext, agora com o novo nome Sencha, deu o próximo grande passo e lançou o primeiro framework para dispositivos mobile sob o padrão HTML 5. Acompanhe aqui algumas características, e uma primeira análise do Sencha Touch framework.

Aplicativos mobile sem barreiras

O primeiro ponto que me chamou a atenção foi a interface que o framework gera, muito similar ao padrão Apple e Google. Porém sendo um framework web, será possível criar aplicativos iguais aos existentes para dipositivos móveis sem se preocupar com autorização dos fabricantes (leia-se AppStore) , nem com instalações, nem com distribuições do software. Basta desenvolver, disponibilizar em um servidor web, e todos usuários de dispositivos móveis podem fazer uso.

Confesso que me interesso pela área mobile, principalmente no que diz respeito ao iPhone. Porém logo de cara você precisa ter o Mac OS no seu computador. Ele é difícil de ser instalado em computadores não-apple (não impossível, mas é difícil). Depois você tem que aprender objective-C, uma linguagem que ao meu ver é muito entediante. E por fim você tem que respeitar todos os padrões Apple porque senão eles não aprovam a distribuição do seu aplicativo. Fica fácil ver o quão bom foi o lançamento do Sencha Framework. Imaginar desenvolver aplicativos mobile usando linguagem web, é fantástico!

Integrando Ext JS com o Sencha Touch

Não devemos confundir um framework com outro. Ext JS é um framework Web e Sencha Touch um framework mobile. Porém a equipe já adiantou no seu blog que a camada de dados será a mesma tanto no Sencha Touch quanto no Ext 4 (a ser lançado). Sabendo disso, para transformar um aplicativo desktop em mobile, basta reprogramar a interface. Toda a camada de dados, consultas ao banco de dados, e tudo que diz respeito a parte do servidor (PHP, ASP.NET, Java, etc..) permanecerá igual!

Finalizando

É facilmente visível que a “onda mobile” está cada vez maior. Primeiro com lançamento do iPhone, um smartphone decente, sem teclados espremidos, navegação pouco intuitiva, e etc (não quero entrar na discussão)… E depois com o lançamento de vários aplicativos e desenvolvimento de smartphones ainda mais avançados.  Parece que o Sencha Touch facilitará muito a migração para essa plataforma.

Também fica evidente que a equipe Sencha está atenta aos novos padrões, e existe a promessa de grandes avanços em produtos já existentes na companhia, principalmente o Ext JS. Eles já criaram um framework usando CSS 3, demonstrando a sua capacidade de fazer o mesmo no Ext Framework. Só a implementação de CSS 3 no Ext JS representaria um dos maiores avanços realizados, porque todas as imagens degradês e sprites para construir cantos arrendondados seriam dispensados.

Parabéns a equipe Sencha! E você? O que achou da novidade? Até em breve!

LinkedInDeliciousPinterestTumblrEmailShare