ExtJS 最初の Sencha Touch アプリ

目次

FrontPage
・さくらVPS
・Fedora13
・SuSe10
・Docker
・Ansible
・Java
・Scala
・Python
・Ruby
・Lisp
・Computer
・GIS
・HTML
・Culture
・Random
・Link

訪問者

total: 2814
today: 1
yesterday: 6
now: 12

更新

最新の10件

人気の10件

MenuBar

Sencha Archetect とは? †

• https://www.sencha.com/
• Sencha の HTML5 アプリ基板
  • Ext JS : デスクトップ向け (Apple でいうところの MacOSX の位置づけ)
  • Sencha Touch : モバイル向け (Apple でいうところの iOS の位置づけ)
  • どちらも無償利用可能 (GPL だけど、どうせブラウザに Javascript ソースを配るので気にする必要はない)
• Sencha Architect
  • Ext JS, Sencha Touch アプリの GUI は、もはや人間がテキストエディタのみで作るには手に余る
  • Sencha Architect は、Ext JS, Sencha Touch の統合開発環境
  • GUI部分は、Sencha Architect の GUI エディタ上で　DnD して作る。イベント処理のみは自前でコードを書く (Visual Studio で VB アプリを作ったり、NetBeans? で Swing アプリをつくるような感じ)
  • 1 license $399 / 5 $1945 / 20 $7595 / 30日間試用版あり
  • 日本での代理店は、キャノンITソリューションズ http://www.canon-its.co.jp/tools/sencha/s_architect.html
• 使い分け
  • Ext JS vs Sencha Touch
    • 近年のトレンドは Mobile First なので、Sencha Touch で作りゃいいんじゃない
      
  • jQuery vs Sencha Touch
    • HTML 文書に動きを付けたい → jQuery
    • アプリを作りたい → Sencha Touch
  • jQuery Mobile vs Sencha Touch
    • $399 払って Sencha Architect つかおうよ
    • 原価で言ったら、せいぜい 1 人日〜2 人日、余裕でお釣りが来る
  • AngularJS vs Sencha Touch
    • AngularJS = 「ぼくのかんがえたさいきょうの*1ハイパーテキスト」。HTML に Widget を付け足すのではなく、もはや HTML の再発明的ななにか。一旦かじってみると、なんで HTML5 標準機能じゃないの ? ってくらいしっくり来る
    • jQuery と同様に、文書に動きを (超絶簡単に) 付けたいなら有力な選択肢
    • 一方 Sencha Touch はアプリフレームワーク
• 教科書
  
  Sencha Touch でつくる HTML5 モバイルアプリ、キャノンITソリューションズ、2013
  (原著 Creating Mobile Apps with Sencha Touch 2, John Earl Clark, Bryan P. Johnson, PACKET Publishing, 2013)

プロジェクトを作る †

1. Create Project
   
2. Blank Project を選択
   
3. Save する (ここで初めて、プロジェクトに名前を付けられる)
   

Hello Sencha †

• Toolbox から label を GUI にドラックアンドドロップする
• label の html プロパティに、"Hello Sencha Touch" と設定すれば最初の Sencha Touch アプリの完成
  
• 自動生成されたコードはこんな感じ
  • app.js

    Ext.Loader.setConfig({
    
    });
    
    
    Ext.application({
        views: [
            'MyLabel'
        ],
        name: 'ToDo_List',
    
        launch: function() {
    
            Ext.create('ToDo_List.view.MyLabel', {fullscreen: true});
        }
    
    });
    

  • MyLabel?.js

    Ext.define('ToDo_List.view.MyLabel', {
        extend: 'Ext.Label',
    
        config: {
            html: 'Hello Sencha Touch'
        }
    
    });
    

試しに動かしてみる †

• ブラウザのセキュリティ制約で、ローカルファイルのまま実行することはできない
• そこで、Python の Simple Http Server を利用する

  [~/Documents/Sencha]$ python -m SimpleHTTPServer
  Serving HTTP on 0.0.0.0 port 8000 ...

  (プロジェクトのディレクトリは ~/Documents/Sencha/ToDo_List_Project とする)
• http://localhost:8000/ToDo_List_Project で、今作ったアプリケーションを実行できる
  
• ※ 開発は、プロジェクトのディレクトリを HTTP Server で公開しながら行う。製品として出荷するときには、それらのファイルをビルドして "バイナリ(人間には読めない一つのJavascriptファイル)" にする。

HTML#ExtJS