Sencha Touch 2

  • View
    23

  • Download
    2

Embed Size (px)

DESCRIPTION

Sencha Touch 2. 作成日:2013年0 5 月 26 日 作成者:石川. スマートフォン開発時の課題. スマートフォン開発には、以下の課題がある。 スマートフォン毎に仕様が異なる スマートフォンに向けた最適なユーザインターフェースが求められる これらを解決する手段の一つとして、以前の発表会では「 jQuery Mobile 」と いうモバイル用 JavaScript ライブラリについて発表しました。 今回は、 『 Sencha Touch 』 というモバイル用 JavaScript ライブラリについて 説明していきます。. - PowerPoint PPT Presentation

Text of Sencha Touch 2

  • Sencha Touch 2526

  • jQuery MobileJavaScript

    Sencha TouchJavaScript

  • Sencha TouchSencha Touch

    Sencha TouchHTML5ver 2.2.1

  • Sencha Touch

    Commercial Software License(Free) Commercial Software License(Embedded Devices)Commercial OEM License(Paid License)Sencha TouchOpen Source LicenseComplete LicenseExtJSSencha Archtect

  • WebKit

    HTML

    MVC

  • WebKitHTMLHTMLCSSJavaScript

    WebkitGoogle ChromeAndroidSafari

    WebKitGeckoNetscapeFirefoxTridentInternet Explorer

  • MVCModelViewController

    Model View Controller

    http://ja.wikipedia.org/wiki/Model_View_Controller

  • Sencha Touch

    Sencha Touch 2.1 SDK

    Sencha TouchCSS

    Sencha Cmd 3.0Javajre6

    Web

    Sencha Touch ApacheNginxWeb

  • CSSindex.html

    Model/View/Controller

    ModelViewController

    Sencha Cmd

  • Sencha// Ext.define('sample.Hoge', { // config: { name : null, age : null }, // constructor: function(config) { this.initConfig(config); }, // greet: function(message) { alert(message + ' + this._name + ' ' + this._age + ''); }});

  • greet

    var hoge = Ext.create('sample.Hoge', { name: '', age: 26 } );hoge.greet('');26

  • SenchaSencha

    MixinhasOne/hasMany

  • Mixin

    Mixin

    Mixin

  • Mixin

    fly() sail()/* */Ext.define('core.mixin.Plane', { // fly: function() { console.debug('call core.mixin.Plane#fly().'); },});/* */Ext.define('core.mixin.Boat', { // sail: function() { console.debug('call core.mixin.Boat#sail().'); },});

  • Mixinfly()seal()Mixin/* */Ext.define('core.mixin.SeaPlane', { // Mixin mixins : { plane : 'core.mixin.Plane', boat : 'core.mixin.Boat' }, doHoge : function() { this.mixins.plane.fly.apply(); // }});

  • SenchaMVC

    saveLocalStoragedelete

  • Sencha CmdSencha Touch

    >> sencha generate app {} {}{}appcontrollermodelprofilestoreviewreurcescssiconsloadingsassstartuptouch cmd microloader resources srcapp.jsapp.jsonbuild.xmlindex.htmlpackager.jsonMVCCSSSenchaapp.jsview

  • ModelSencha Cmd

    Ext.define('sample.model.Memo', { extend: 'Ext.data.Model', config: { fields: [ {name: 'id', type: 'int'}, {name: 'contents', type: 'string'} ], // proxy: { type: 'localstorage', id : 'store-memo' } }});>> sencha generate model -n Memo -f id:int,contents:string

  • proxytypelocalstrageid

    type

    proxy: { type: 'localstorage', id : 'store-memo'}

  • WebHTML5Cookie

    httpex) http://hogehoge:8080/

    Cookie4KBLocalStorage15MBSessionStorage

  • ViewSencha CmdView

    Ext.define('sample.view.MemoForm', { extend: 'Ext.form.Panel', xtype : 'memoform', config: { items: [ // { docked: 'top', xtype : 'titlebar', title : 'Sencha Touch 2', items : [ // save { xtype : 'button', align : 'left', text : 'save', ui : 'action', action: 'save' },

  • // delete { xtype : 'button', align : 'right', text : 'delete', ui : 'decline', action: 'delete' } ] }, // { xtype : 'fieldset', title : '', items : [ { xtype : 'textareafield', name : 'contents', maxRows: 15, placeHolder: '' } ] }] // end of items. } // end of config.});

  • ControllerSencha Cmd

    Ext.define('sample.controller.Memo', { extend: 'Ext.app.Controller', config: { // refs: { form: 'memoform' // form }, control: { 'memoform': { initialize : 'onInitializeForm' // }, 'button[action=save]' : { tap : 'onSaveButtonTap' // save }, 'button[action=delete]' : { tap : 'onDeleteButtonTap' // delete } } },>> sencha generate controller -n Memo

  • // (ModelView) onInitializeForm : function(form) { sample.model.Memo.load(1, { scope: form, success : function(record, operation) { this.setRecord(record); }, failure : function(record, operation) { } }); }, // save(ViewModel) onSaveButtonTap : function() { var form = this.getForm(); var values = form.getValues(); // form var record = form.getRecord(); // if (!record) { record = Ext.create('sample.model.Memo', {id: 1, contents: ''}); } Ext.Object.each(values, function(key, value) { record.set(key, value); }); record.save(function() { Ext.Msg.alert('', ''); }); },

  • // delete(Model) onDeleteButtonTap : function() { var form = this.getForm(); var record = form.getRecord(); if (record) { record.erase(function() { }); } form.down('textareafield').setValue(''); Ext.Msg.alert('', ''); }});

  • Viewapp.jslaunch

    Ext.application({ controllers: ["Memo"], models: ["Memo], name : 'sample', views : ['MemoForm'], // launch: function() { // View Ext.Viewport.add(Ext.create('sample.view.MemoForm')); }});

  • Web- - Sass/Compass

    iOSAndroidAPI- - - -

  • Sencha Cmd

    Webproduction10MB1MB>> sencha app build production

  • URLhttp://www.forefrontier.co.jp/sample/

  • HTMLHTML

  • LocalStorageLocalStorage

  • Sencha TouchHTML+JavaScript+CSSWebCSSCSSSass/CompassSass

    SassCSSCSSCSSMixinCSSRuby

    CompassSass

  • Sencha Touch HTML jQueryjQuery Mobile

    HTML

    HTML+CSS+JavaScriptjQuery

    Sencha Touch