{"id":492,"date":"2010-12-09T11:20:40","date_gmt":"2010-12-09T11:20:40","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=492"},"modified":"2010-12-09T11:20:40","modified_gmt":"2010-12-09T11:20:40","slug":"intro-sencha-touch","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/intro-sencha-touch\/","title":{"rendered":"Intro a Sencha Touch"},"content":{"rendered":"<p><a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> es un framework para el desarrollo de aplicaciones mobile centrado en WebKit, <a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> hace uso extensivo de CSS3 para todo lo referente a las animaciones y los styles que por suerte son f\u00e1cilmente personalizables y mas aun si usan <a href=\"http:\/\/sass-lang.com\/\" target=\"_blank\">Sass<\/a>, ya que cambiando el valor de unas cuantas variables podemos modificar totalmente la apariencia de una aplicaci\u00f3n, estas caracter\u00edsticas y funcionalidades han sido tremendamente optimizadas para lograr que todo quepa en aproximadamente 80k.<\/p>\n<p><a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> esta disponible tanto en un versi\u00f3n con licencia comercial como con una licencia Open Source, mas precisamente la GPL v3.<\/p>\n<h3>Componentes<\/h3>\n<p>Una de las principales ventajas de <a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> es la cantidad de controles que incluye, todos ellos muy f\u00e1ciles de usar y personalizar.<\/p>\n<ul>\n<li>Lists\n<ul>\n<li>Grouped<\/li>\n<li> Sortable<\/li>\n<li>Nested<\/li>\n<\/ul>\n<\/li>\n<li>Carousel<\/li>\n<li>Picker<\/li>\n<li>Overlay<\/li>\n<li>Toolbar &amp; Buttons<\/li>\n<li>Audio<\/li>\n<li>Video<\/li>\n<li>GeoLocation<\/li>\n<\/ul>\n<h3>Touch Events<\/h3>\n<p><a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> incluye los eventos que com\u00fanmente mas se usan en dispositivos touch:<\/p>\n<ul>\n<li>Tap<\/li>\n<li>Double Tap<\/li>\n<li>Tap and Hold<\/li>\n<li>Swipe<\/li>\n<li>Rotate<\/li>\n<li>Drag and Drop<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-518\" title=\"Sencha Touch Events\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/12\/Selection_007.png\" alt=\"Sencha Touch Events\" \/><\/p>\n<h3>Layouts<\/h3>\n<p>Existe dos conceptos utilizados por <a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a>, uno es el de <strong>panel<\/strong>, el cual act\u00faa de contenedor de componentes, el otro es el de <strong>layout<\/strong> el cual se aplica a un <strong>panel<\/strong> y especifica como deben mostrarse lo objetos que se encuentran dentro de el.<\/p>\n<p>Los layouts que incluye <a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> son:<\/p>\n<ul>\n<li>fit<\/li>\n<li>card<\/li>\n<li>vbox<\/li>\n<li>hbox<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/12\/layouts.jpg\" alt=\"Sencha Touch Layouts\" title=\"Sencha Touch Layouts\" \/><\/p>\n<h3>Models, Stores &#038; DataViews<\/h3>\n<p>Quiz\u00e1s las caracter\u00edsticas mas poderosas de <a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> son todas aquellas relacionadas con el manejo de datos, por un lado tenemos los <strong>Models<\/strong> que nos permiten representar un objeto, las validaciones que se deben aplicar cuando se usa en un formulario y las  relaciones que este tiene con otros objetos.<\/p>\n<p>Los <strong>Stores<\/strong> son una colecci\u00f3n de registros los cuales utilizan un proxy para leer y escribir data, por ultimo los <strong>DataView<\/strong> nos permite poblar de data una template con los datos de un <strong>Store<\/strong>.<\/p>\n<h3>Manos a la obra<\/h3>\n<p>En el siguiente ejemplo pueden ver como utilizamos los diferentes elementos antes detallados para crear una simple liste anidada.<\/p>\n<h5>index.js<\/h5>\n<pre>\nExt.setup({\n    onReady: function() {\n        Ext.regModel('Player', {\n\t    fields: [\n\t\t{name : &quot;name&quot;},\n\t\t{name : &quot;position&quot;},\n\t\t{name : &quot;number&quot;},\n\t\t{name : &quot;caps&quot;},\n\t\t{name : &quot;age&quot;},\n\t\t{name : &quot;picture&quot;}\n\t    ]\n        });\n\n        var itemTemplate = new Ext.XTemplate(\n            '&lt;tpl for=&quot;.&quot;&gt;',\n             '{number}',' {name}',\n            '&lt;\/tpl&gt;');\n            \n        var detailTemplate = new Ext.XTemplate(\n            '&lt;div class=&quot;detail&quot;&gt;',\n            \t'&lt;img src=&quot;{picture}&quot;\/&gt;&lt;br\/&gt;',\n                '{number}', ' {name} &lt;br\/&gt;',\n                'Position: {position} &lt;br\/&gt;',\n                'Age: {age} ',\n                'Caps: {caps} ',\n            '&lt;\/div&gt;'\n        );\n\n        var playersStore = new Ext.data.Store({\n            model: &quot;Player&quot;,\n            proxy: {\n                type: 'ajax',\n                url: 'http:\/\/localhost:3000\/players.json',\n            \treader: {\n                \ttype: 'json',\n                \trecord: 'player'\n                }\n            },\n            autoLoad:true\n        });\n\n        var navBar = new Ext.Toolbar({\n            itemId: 'navBar',\n            ui: 'light',\n            dock: 'top',\n            items: [\n                {\n                    text: 'Back',\n                    ui: 'back',\n                    handler: function(){\n                    panel.layout.prev({type: 'slide', direction: 'right'});\n                    }\n                }\n            ]\n        });\n        \n        var detailPanel = new Ext.Panel({\n            tpl: detailTemplate,\n            dockedItems: [ navBar ]\n        });\n           \n        var showDetail = function(record, btn, index) {\n            navBar.setTitle(record.get('name'));\n            detailPanel.update(record.data);\n            panel.setActiveItem(1);\n        }\n        \n        var listPanel = {\n            dockedItems: [\n                {\n                    title: 'Players',\n                    xtype: 'toolbar',\n                    ui: 'light',\n                    dock: 'top'\n                }\n            ],\n            layout: 'fit',\n            scroll: 'vertical',\n            items: [\n                {\n                    xtype: 'list',\n                    store: playersStore,\n                    itemTpl:itemTemplate,\n                    singleSelect: true,\n                    onItemDisclosure: showDetail\n                }\n            ]\n        };\n        \n        panel = new Ext.Panel({\n\t    fullscreen: true,\n\t    layout: 'card',\n\t    cardSwitchAnimation: 'slide',\n\t    items: [ listPanel, detailPanel ]\n\t    });\n\t}\n});\n<\/pre>\n<p>Al correr el ejemplo, veremos algo como esto:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/12\/sencha-sample.jpg\" alt=\"Sencha Touch\" title=\"Sencha Touch\"\/><\/p>\n<p><a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a>, viene con un style por default, que es el que usamos en el ejemplo anterior, pero ademas viene con dos styles mas, uno que se ajusta mejor al look and feel de Android y otro para iOS, cambiar entro uno y otro es solo cuesti\u00f3n de reemplazar la stylesheet.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/12\/sencha-styles.jpg\" alt=\"Sencha Touch styles\" title=\"Sencha Touch styles\"\/><\/p>\n<h3>Only for WebKit<\/h3>\n<p><a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch<\/a> tiene muchas cosas a favor, es f\u00e1cil de usar, es flexible y cuenta con muchas caracter\u00edsticas y funciones interesantes, pero solo funciona con WebKit, y es algo que para mi es molesto, porque muchas de estas funciones y caracter\u00edsticas, podr\u00edan funcionar en Firefox, Fennec y en menor medida Opera si ademas de usar las extensiones de WebKit usaran las de los dem\u00e1s fabricantes, o podr\u00edan simularse usando Javascript, as\u00ed que tengan en cuenta esta restricci\u00f3n ante de lanzarse de lleno a desarrollar con el. Quiz\u00e1s en un futuro esto cambie, pero por ahora, si usamos un browser que no se base en WebKit, solo obtendremos este resultado.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/12\/Fennec_017.png\" alt=\"Sencha Touch running on Fennec\" title=\"Sencha Touch running on Fennec\" \/><\/p>\n<h3>Recursos<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.sencha.com\/products\/touch\/\" target=\"_blank\">Sencha Touch &#8211; Homepage<\/a><\/li>\n<li><a href=\"http:\/\/www.sencha.com\/products\/touch\/download.php\" target=\"_blank\">Sencha Touch &#8211; Download<\/a><\/li>\n<li><a href=\"http:\/\/www.sencha.com\/products\/touch\/demos.php\" target=\"_blank\">Sencha Touch &#8211; Demos<\/a><\/li>\n<li><a href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/\" target=\"_blank\">Sencha Touch &#8211; API Documentation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Sencha Touch es un framework para el desarrollo de aplicaciones mobile centrado en WebKit, Sencha Touch hace uso extensivo de CSS3 para todo lo referente a las animaciones y los styles que por suerte son f\u00e1cilmente personalizables y mas aun si usan Sass, ya que cambiando el valor de unas cuantas variables podemos modificar totalmente [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,10],"tags":[14,20,28,49],"class_list":["post-492","post","type-post","status-publish","format-standard","hentry","category-ui","category-web-design","tag-css3","tag-html5","tag-mobile","tag-sencha"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=492"}],"version-history":[{"count":0,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/492\/revisions"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}