OS:
Android 2.1

JS:
Sencha Touch 1.1

現象には以下のようないくつかの種類があります。

画面遷移後もフォームが画面の上に残る

次の画面遷移してもフォームが残る

フォーカスしたあとにスクロールするとフォームがずれる

スクロールでフォームがずれる

これらの根本的な原因はAndroidがフィールドの入力の際にinputフィールドとは別に入力フィールドが画面の上に表示して入力を実装していることのようです。
Android端末では、WebView上のテキストフィールドやパスワードフィールドは、ネイティブ側で上書きされているタメです。
Android 2.1系ではこのWebTextViewが良くない動きをしているようです。

そのため、テキストフィールドやパスワードフィールドが残ってしまう等現象が発生します。
これはPhoneGapを使っていなくてもブラウザであっても同じ不具合が発生します。
Sencha Touch の Kitchen Sink Demoでも再現します。
　→　http://dev.sencha.com/deploy/touch/examples/kitchensink/

これれSench のForumにも上がっているようですが、OPENのままなです。
　→　http://www.sencha.com/forum/showthread.php?118678-OPEN-660-Android-Password-Field-superfocus-persistance&p=579440&viewfull=1&langid=14

PhoneGap単体でも起こるらしいです。
　→　http://stackoverflow.com/questions/5681013/input-has-different-style-on-focus

この問題を回避するにはJavaScript単体で回避することは不可能で、Androidのネイティブコードから処理を行う必要があります。

ちなみに、上書きを行っているクラスは、WebTextViewクラスで行われています。
　→　http://www.androidjavadoc.com/2.3/android/webkit/WebTextView.html

また、上書きを行った際は、WebView のChildView として実行されるので、
WebViewクラスのremoveAllViewsInLayoutメソッドを使用して、
ChildViewをクリアすることで、本現象を解消することができます。

PanelがActiveになったタイミングや、スクロール開始時、フォーカスがあたったタイミング、フォーカスが外れたタイミングで、
以下のJavaScript コードを実行することで、ChildViewをクリアすることが可能です。

//PhoneGapを利用する
//ネイティブ側でこのメソッドを実装しておき、Phonegapを経由してコールする。
mywebview.removeAllViewsInLayout();

以下は、サンプルのJavaコードです。

=== MAIN CLASS ===
public class App extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.init();

        final MyWebView myWebView = new MyWebView(appView, this);
        appView.addJavascriptInterface(myWebView, "mywebview");

        super.loadUrl("file:///android_asset/www/index.html");
    }
}
=== MAIN CLASS ===

=== MyWebView CLASS ===
public class MyWebView extends Activity {
    public WebView webView;
    public DroidGap droidGap;

    public MyWebView(WebView webView, DroidGap droidGap) {
        this.webView = webView;
        this.droidGap = droidGap;
    }

    /**
     * Remove All ChildView on WebView
     *
     */
    public synchronized void removeAllViewsInLayout() {
        try {
            Runnable runnable = new Runnable() {
                public void run() {
                    webView.removeAllViewsInLayout();
                };
            };
            droidGap.runOnUiThread(runnable);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
=== MyWebView CLASS ===

上のようにJava側でメソッド（webView.removeAllViewsInLayoutメソッド）を作成して、JavaScriptからはPhoneGap経由でネイティブのメソッドをコールすることで、ChildViewをクリアして、HTMLの上に表示される別の入力フィールドを取り除きます。
残念ながら必ずネイティブのコードを利用しないといけないので、JSだけで解決できませんがPhoneGap等を使いネイティブにラップしてる場合はこのやり方が使えそうです。

本当は、なんとかJSだけで解決したいですね

• itemsに直接オブジェクトを書くと、レンダーしてくれない（泣。0.93までしてくれていて便利だったのに。１つのComponentを仕込むだけでも、配列で書きましょう。
• Ext.platform消滅。Ext.is.xxxで判断するように、サンプルの方は書き直されていました。
• NestedListがStoreを使うようになったみたい（これは聞いただけなので、自分自身ではまったところではない）。

itemsのところだけが、見つけるのが大変でしたが、あとはエラーを吐いてくれるので、Touch本体のソースを見ながら修正しました。
いやー、まだまだ仕様変わりそうだなぁ。

各カードの下にはインジケーターとして、○がアイテムの数だけ並んで現在のアイテムの位置は●になります。
今回はこのインジケーターの表示/非表示を簡単に切り替えるサンプルです。
インジケーターについての記述はほとんどAPIリファレンスに載っていないので、ソースコードを見ないとわかりません。

Ext.Carousel – Sencha Touch API Documentation
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel

・サンプルコード

Show/Hide Carousel Indicator – jsdo.it – share JavaScript, HTML5 and CSS

インジケーターの初期設定はExt.Carouselのindicatorコンフィグで行えます。

indicator : Boolean
Provides an indicator while toggling between child items to let the user know where they are in the card stack.

APIリファレンスによると受け付けるのはBooleanとのことですが、ソースコードを見ると以下のようになっています。
インジケーターについての記述はこれくらいで、他の情報がありません。なのでソースコードを見ます。

//Ext.Carouselクラス

    initComponent: function() {
       ・
       ・
       ・
        if (this.indicator) {
            var cfg = Ext.isObject(this.indicator) ? this.indicator : {};
            this.indicator = new Ext.Carousel.Indicator(Ext.apply({}, cfg, {
                direction: this.direction,
                carousel: this,
                ui: this.ui
            }));
        }

        Ext.Carousel.superclass.initComponent.call(this);
    },
   ・
   ・
   ・

indicatorコンフィグにオブジェクトが渡された場合、Ext.Carousel.Indicatorクラスのコンフィグオプションとしてバイパスするようになっています。
またCarouselが生成されると、このインスタンスのindicatorにはExt.Caorousel.Indicatorオブジェクトが設定されます。

つまり

• Ext.CarouselのindicatorコンフィグにはExt.Carousel.Indicatorクラスのコンフィグが渡せる。
• Ext.Carouselのindicatorコンフィグにtrueを渡すとデフォルトのExt.Carousel.Indicator、falseだと何も生成しない。
• Ext.CarouselオブジェクトのindicatorプロパティによってExt.Carousel.Indicatorオブジェクトが参照できる。

Ext.Carousel.IndicatorクラスはExt.Componentのサブクラスなので、Ext.Componentで設定できるコンフィグは受け付けることができます。サンプルコードではインジケーターの初期値にhiddenとshowAnimationを設定しています。

indicator:{
  hidden:true,
  showAnimation:{
    type:'fade'
  }
}

サンプルコードではさらにツールバーの稲妻ボタンで、インジケーターの表示/非表示を切り替えています。

if (carousel.indicator.isVisible()){
  carousel.indicator.show();
}else{
  carousel.indicator.hide();
}

ここではコンフィグで設定した、showAnimationで設定したアニメーションで表示が切り替えられます。ただし現状では非表示するときのアニメーションしか効いてないようです。
インジケーターもコンポーネントとして扱えるので、もっと複雑なことできそうです。

サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。

Ajax サンプル

まずAjaxでリクエストする先を用意する必要があります。
今回はPHPで作成しました。
・PHP

<?php
//サンプル

//3秒待つ
sleep(3);

//POST値の処理
$param = $_POST['id'];
$res['id'] = $param;

if ($param) {
    $res['success'] = true;
}else {
    $res['success'] = false;
}

//JSONで返す
header('Content-Type: application/json');
echo json_encode($res);
die();
?>

3秒処理を遅らせています。
レスポンスにはJSON形式でPOSTされた情報とサーバーサイドでの処理が正しく終わったらsuccessにtrueを返すようにしています。

HTMLファイルはSencha Touchの基本形のものでよいです。
・HTML

<!DOCTYPE html>
<html manifest="index.manifest">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Ajax Sample</title>
    <link rel="stylesheet" href="../../st/resources/css/ext-touch.css" type="text/css">
    <script type="text/javascript" src="../../st/ext-touch-debug.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>

今回のサンプルではパネルをひとつ作ってツールバー上に、Ajaxリクエストをキックするボタンを配置します。このボタンをタップするとAjax リクエストが実行されるようにします。

・Javascript

Ext.setup({
    onReady: function() {

        //リクエスト処理
        var ajax = function(callback) {
            //ローディングマスク
            panel.el.mask(
                false,
                ' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');

            //Ajax リクエスト
            Ext.Ajax.request({
                url:'post.php',
                params:{
                    id:'test'
                },
                success:function(result,opt){
                    //マスクを外す
                    panel.el.unmask();
                    var res = Ext.decode(result.responseText);
                    if (res.success) {
                        window.alert('Success');
                        if (Ext.isFunction(callback)) {callback()};
                    }
                },
                failure:function(result,opt){
                    window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
                }
            });
        };

        //パネルの生成
        var panel = new Ext.Panel({
            fullscreen: true,
            styleHtmlContent:true,
            dockedItems:[
                {
                    xtype:'toolbar',
                    dock:'top',
                    items:[
                        {
                            ui:'mask',
                            iconCls:'action',
                            handler:function(){
                                //コールバック関数
                                var callback = function(){
                                    panel.update('Success!');
                                };

                                //Ajax処理実行
                                ajax(callback);
                            }
                        }
                    ]
                }
            ],
            html:'Ajax Request Sample'
        });
    }
});

前回のHello, World　+ Tbarのサンプルによく似ていますが、今回はxtypeでツールバーを作成しています。
xtypeについてはコチラ

ボタンのコンフィグオプションで
ui:’mask’,
iconCls:’action’
が設定されています。iconClsではボタンに配置する画像をCSSで設定できますが、今回はSencha Touchに予め用意されているactionクラスをそのまま使います。
Sencha Touchのパッケージ内のexamplesのiconsサンプルをみるとどんなアイコンがあるのかが分かります。

Ajax リクエスト処理
Ext JSおよびSencha TouchではExt.Ajaxクラスを使用してAjax処理を行ないます。このクラスはシングルトンですので、Ajax処理を呼びたい箇所でExt.Ajaxのrequestメソッドを呼び出します。パラメーターはURLなので設定はオブジェクトで渡します。

・Ext.Ajax.request
Ext.Ajax.requestの引数に渡しているもの

• url:(String)リクエスト先のURL
• params:(Object) パラメータ
• success:(Function) Ajaxリクエスト成功時のコールバック関数
• failure:(Function) Ajaxリクエスト失敗時のコールバック関数

最も単純なAjaxリクエストへ渡す設定は上の4つのものになります。
paramsに設定されているパラメータをurlの先にPOSTして,正しいレスポンスが返ってきたときにsuccessに設定されているコールバック関数が実行されます。リクエスト自体が失敗した場合(404などが返ってきた場合。)にfailureに設定されているコールバックが実行されます。

サンプルではajaxという関数にAjaxの処理をまとめています。
Ext.Ajax.request()の部分で実際にAjaxを実行します。

ajax関数の中では、リクエスト中に画面全体にマスクを掛ける処理を、行っています。

・ローディングマスク

ローディングマスクを表示

panel.el.mask(
                false,
                ' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');

Ext.Elementのmaskメソッドでそのエレメントにマスクをかける処理を実行します。Ext JSとSencha Touchでは引数が違うので注意が必要です。
Sencha Touchのマスク処理はスタイルがあんまり良くないので、独自で設定する必要があります。ローディング用の画像もないので適当なものを用意する必要があります。今回はこんなのGifアニメを作って設定しています。

ローディング用Gifアニメ

マスクを外すときは同様にExt.Elementのunmaskメソッドで行ないます。サンプルでは
successのコールバックの中でpanel.elをunmaskを実行しています。

success:function(result,opt){
　//マスクを外す
　panel.el.unmask();
　　　　　・
　　　　　・
　　　　　・
}

・コールバック処理

success:function(result,opt){
  //マスクを外す
  panel.el.unmask();
  var res = Ext.decode(result.responseText);
  if (res.success) {
    window.alert('Success');
    if (Ext.isFunction(callback)) {callback()};
  }
},
failure:function(result,opt){
  window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}

リクエスト成功/失敗時はwindow.alertを使って結果を表示してます。
また今回のサンプルではsuccess時にさらに呼び出し元でコールバックを設定して、パネル内の要素を”Success”に書き換えています。

・レスポンスボディーの取り出し
successのコールバックの第一引数にレスポンスがオブジェクトとして渡されます。
サンプルではresultという名前に設定しています。resultの中のresponseTextにレスポンスのボディーが格納されています。
サンプルのPHPの場合ではJSONの文字列を返しています。レスポンスボディーはそのままではただのテキストです、そのため文字列からJSONに変換する必要があります。
Sencha TouchでもExt JSと同じようにExt.util.JSONクラスを使ってJSONの変換を行います。
今回は文字列からオブジェクトへの変換(JSON.decode)処理を使います。

success:function(result,opt){
  //文字列からオブジェクトに変換する
  var res = Ext.decode(result.responseText);

  //resはオブジェクトとして扱えるようになる。
  if (res.success) {
    window.alert('Success');
   　　・
　　　・
　　　・
  }
}

Ext.decodeはExt.util.JSON.decodeへのエイリアスです。Ext.decodeで呼び出した方が簡素なのでこちらを使っています。
このExt.decodeを使ってレスポンスボディの文字列をJavascriptのオブジェクトとして扱えるように変換します。
変換されたレスポンスボディはオブジェクトとして扱えるので、res.successのようにドットシンタックスで任意のプロパティ値を取得できるようになります。

以上、Ext.Ajax.requestの簡単な使い方です。詳しくはAPIリファレンスをご覧ください。
Sencha Touch API Documentation
http://www.sencha.com/deploy/touch/docs/?class=Ext.Ajax

7月の勉強会(東京)のまとめになります。

検証機(タッチパネルデバイス)
→　iPhone 3GS以降 or iPad　が無難。Mac があるならiPhone　シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。

APIリファレンス
→　発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。
http://www.sencha.com/deploy/touch/docs/

本家フォーラム
→　Sencha はExt の頃からforumで活発な議論が交わされています。Sencha のメンバーからのリプライも早いので、バグっぽいものを見つけたらとりあえずforum内を見てみると以外とすでに質問があがっていたりします。Sencha Touchのライブラリ自体に怪しい部分がたくさんあるので、困ったら覗いてみると良いかもしれません。
http://www.sencha.com/forum/

Hello,World!
とにかく短い行数でSencha Touchアプリを書く。
HTML + JSで30行くらいかけば、とりあえずSencha Touchで動くWebアプリになっている。
XCodeのプロジェクトテンプレートのviewベースのテンプレートのようなものを目指しました。
コードはjsdo.itにあがっている Hello, World!になります。
勉強会当日のサンプルコード間違ってました。すいません。jsdo.it上も修正済みです。

Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS

多くのSench TouchのHTMLは以下のようにシンプルなものになります。
・HTML

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>helloworld</title>
 <!-- 1. Sencha Touch CSSの読み込み-->
 <link rel="stylesheet" href="st/resources/css/ext-touch.css" type="text/css">
 <!-- 2. Sencha Touch ライブラリの読み込み-->
 <script type="text/javascript" src="st/ext-touch-debug.js"></script>
 <!-- 3. Sencha Touch アプリケーションの読み込み-->
 <script type="text/javascript" src="main.js"></script>
 </head>
 <body></body>
 </html>

この中でやることは3つ。

• Sencha TouchのCSSを読み込む
• Sencha TouchのJSを読み込む(3種類から選べるますが,ext-touch-debug.js)
• 自分のアプリケーションのJSファイル

Sencha Touchの中には3種類のライブラリがあります。ext-touch.jsが本番用の圧縮されたライブラリです。
運用環境ではこのライブラリを使うとファイル読み込みファイルが小さくなります。
ただし、難読化されているのでライブラリ中のバグが見つけにくくなります。開発中は-debugのついた2つのライブラリから選択するが無難です。
ext-touch-debug.jsとext-touch-debug-w-comments.jsはファイル名の通りコメントがあるかないかの違いがあります。コメント付きは当然ファイルが大きくなるので、ext-touch-debug.jsを選んでおくとちょうどよいかもしれません。

ではmain.jsの中を見ていきます

・javascript

 Ext.setup({
 onReady: function() {
 var panel = new Ext.Panel({
 fullscreen: true,
 styleHtmlContent:true,
 html:'Hello, Sencha Touch!!'
 });
 }
 });

これだけです。なるべくよけいな物を排除しました。ポイントはExt.setup()とその引数のオブジェクトです。複雑なアプリを作る場合でも、このサンプルのような処理を必ず行います。

Ext.setup()でアプリの起動時の動作を定義します。引数にアプリの基本設定をオブジェクトの形式で渡します。(オブジェクトリテラル)

 Ext.setup(
 {
 //オブジェクトリテラル
 }
 );

Ext JSおよびSencha Touchではこのオブジェクトでコンポーネントの基本設定を記述する方法をよく取ります。

引数に渡されているオブジェクトはこんな感じです。

 {
 onReady: function() {
 //起動の処理
 }
 }

onReadyというプロパティに関数をセットしています。この関数がSencha Touchアプリの起動ポイントになります。複雑なアプリでも基本的にこのonReadyに設定されている部分から処理が始まっていきます。

さらに、その処理の中身をみると、以下のようになっています。

 var panel = new Ext.Panel({
 fullscreen: true,
 styleHtmlContent:true,
 html:'Hello, Sencha Touch!!'
 });

panelという変数で新しいExt.Panelを作成しています。このパネルの引数にもパネルの初期設定がオブジェクトが渡されています。
ここで今回のサンプルの基本となるパネルを作成します。Sencha Touchでは様々なパネルが用意さていますが、このサンプルでは最も基本的なExt.Panelクラスのパネルを作成しています。
Ext.Panelクラスにはコンフィグオプションと呼ばれるもので作成するパネルを定義することができます。new Ext.Panel()の引数に渡されてるオブジェクトの中身が今回作成するExt.Panelのコンフィグオプション設定になります。
コンフィグオプションはクラスごとにあらかじめ定義されている、
特別なオプションのことでAPIリファレンスを見るとどのクラスがどんなコンフィグオプションを持っているかが分かります。

http://www.sencha.com/deploy/touch/docs/?class=Ext.Panel
今回のサンプルではfullscreen,styleHtmlContent,htmlの３つだけを使っています。

・fullscreen:boolean パネルのwidthとheightを可能であれば100%に設定する。初期値false。これをtrueにするとmonitorOrientationのコンフィグが強制的にtrueに設定されるそうです。

・styleHtmlContent:多分boolean(APIリファセンス間違ってる) 自動的にHTMLコンテンツ用のスタイルを適応します。初期値はfalse。これをtrueにするとSencha Touchで定義されているパネルないHTMLコンテンツ用のスタイルを設定します。パネルの内容がコンポーネント等でなくHTMLの時はtrueにしておくと良いようです。具体的には以下のCSSがパネルのHTML要素に設定されます。

-webkit-user-select: auto;
color: #333;
font-size: 0.8em;
line-height: 1.5;
padding: 1.5em;

・html:パネル内のHTMLコンテンツを設定。パネルがレンダリングされた後にこのHTMLが描画されます。

以上がHello, Worldサンプルのためのすべてのコードになります。
jsdo.it上であればHTMLファイルの方を記述する必要がないので、javascriptを10行書いて、Sencha Touchのライブラリ(jsとcss)を追加すればおしまいです。

・実行結果

Hello,Worldにツールバーを追加するサンプル

Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS

・HTML
同じ

・Javascript

Ext.setup({
onReady: function() {
//dockするアイテム
var tbar = new Ext.Toolbar({
dock:'top',　//dockする場所,
title:'Hello, World',　//Toolbarの見出し
items:[
{
text:'ボタン'
}
]
});

//Dock先
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:tbar,　//ここでtbarをdockedItemsに設定。
html:'Hello, Sencha Touch!!'
});
}
});

つぎにHello,Worldにツールバーを追加します。Ext JSではtbarというコンフィグオプションで設定していました。Sencha TouchではdockeItemsというコンフィグで設定します。
APIリファレンスによると
dockedItems:このパネルにドックされるコンポーネントまたはコンポーネントのまとまり(配列)
となっています。
コンポーネントであればなんでも設置できそうです。ここにExt.Toolbarオブジェクトを渡すことでiPhoneぽいUIのツールバーをパネルに追加できます。
まずExt.Toolbarを作成します。

//dockするアイテム
var tbar = new Ext.Toolbar({
dock:'top',　//dockする場所,
title:'Hello, World',　//Toolbarの見出し
items:[
{
text:'ボタン'
}
]
});

Ext.Toolbarにも様々なコンフィグオプションがあります。詳しくはAPIリファレンスで確認してください。ここではdock,title,itemsの3つを設定します。
http://www.sencha.com/deploy/touch/docs/?class=Ext.Toolbar

・dock：String(ドックさせる場所)。APIリファレンスに載っていませんが、親パネルのどの位置に自分を設置するかを指定します。選べる位置は4種類,top,bottom,left,rightです。
・title：String このツールバーの見出しのテキストを設定します。
・items：Object/Array　このツールバーの子の要素を設定します。

今回のサンプルではExt.Toolbarのitemsにnew したクラスでなくオブジェクトを渡しています。今のところはサンプルのように書けばボタンが作れると思っておいてよいです。そのうちブログでも取り上げるかもしれません。defaultsコンフィグとxtypeでボタンを生成しています。こちらの記事を参考にしていただけるよいかもしれません。
http://extjs.blog.sus4.co.jp/2009/11/11/extjs-tutorial5/

これでExt.Toolbarがtbarという変数で作成できたので、これをパネルのdockedItemsに設定します。

//Dock先
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:tbar,　//ここでtbarをdockedItemsに設定。
html:'Hello, Sencha Touch!!'
});

・実行結果

ツールバーがあるだけで、iPhoneアプリっぽくなりました。
Sencha Touchアプリの基本は今回のHello, Worldになります。これを改造していくことでより複雑なアプリが作れるようになります。Sencha Touch付属のexamplesの中を眺めてみるとよいかもしれません。

Powered by Twitter Tools

Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ

Sencha Touchのはじめかたサンプルコード

Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS

Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Touch Complex Docked Items
Sencha Touch Complex Docked Items – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Carousel (Edit)

Sencha Carousel (Edit) – jsdo.it – share JavaScript, HTML5 and CSS

2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4　佐竹の担当箇所のSencha Touch入門篇アジェンダです。

時間と場所は下記の通りです。残念ながら既に定員に達しているようです。
当日はUstreamでも配信も予定されているようですので、こちらでご覧ください。
http://www.ustream.tv/channel/extjapan
以下 Ext Japanブログより転載

日時：2010年7月28日（水）19:00～21:00（18:45開場）
募集人数：45名
場所：東京都港区東新橋1-9-1 東京汐留ビルディング9Fソフトバンク株式会社内（今回はいつもと会場が違いますので、ご注意ください。）
参加費：無料
アジェンダ：
Senchaへのブランド変更について（直鳥）
Sencha Touch入門（株式会社sus4 佐竹様）
Sencha TouchとYubizoで作るネイティブアプリ（株式会社アイキューブドシステムズ 佐々木様）
SpreadOfficeとSencha Touch（小堤）
ホワイトクラウド シェアードHaaSのご紹介（ソフトバンクテレコム株式会社 加藤様）

—–

Sencha Touch入門：Sencha Touchのはじめかた　佐竹裕行 – 株式会社sus4

・Sencha TouchでつくるiPhone/iPadアプリ

・Sencha Touchの環境
エディタ等
デバッグコンソール

・Hello, World!
Sencha Touchのアプリを作る。
HTML + JS合わせても30行くらいで
APIリファレンス、デバッグ環境など

・付属サンプルCarouselの解説
以前書いたブログの記事ベースにもう少し詳しく、Sencha Touchアプリの作り方を紹介します。
http://extjs.blog.sus4.co.jp/2010/06/28/sencha-ex-carousel/

—–

時間的にSencha Touchのさわり位しかできないと思いますが、
実際に手を動かしてSencha Touchを作ることと、その際のTipsが紹介できれば良いかなと思います。
APIリファレンスの読み方、フォーラム利用等。
内容はできるだけ簡単にして、ExtJSを知らなくても分かる内容です。
まさに入門という内容で、サンプルもできる限り簡単なものにしました。
Hello,World!に至ってはHTML + JS合わせても30行程度コードを書くだけです。
Sencha Touchの開発の雰囲気がつかめれば良いかなと思っています。
またSencha Touchのパッケージに含まれるexamplesを自力で読めるようになるのが目標です。

事前の準備しておくと良いもの：
・Sencha Touch ライブラリのダウンロード
http://extjs.co.jp/products/touch/

・iPhone、iPad、Androidでバイスの実機　もしくは　XCode付属iPhoneシュミレーター
Android,iPhone 3G以下はあまりおすすめできません。
XCodeはダウンロードに数GBかかるので事前にインストールしておくいていただくとスムーズです。

・ExtJS自体を知らない方はこのブログのチュートリアルの以前の記事を読んでおいていただけると良いかと思います。
勉強会ext-onreadyからはじめるextjsのまとめ
sus4 Ext JSブログ内Sencha Touchの記事

Powered by Twitter Tools

Powered by Twitter Tools