ExtJSで楽しくRIA業務アプリ開発

Ext.Carouselのインジケーター設定 | Sencha Touch Tips

Livedoorクリップ - Ext.Carouselのインジケーター設定 | Sencha Touch Tips

Sencha Touchにはいかにもタッチスクリーン向けなパネルとして、Ext.Carouselがあります。
このパネルはカードレイアウトのパネルの一種で複数のカードを左右（または上下）に一列にならべて、
スワイプジェスチャーによって切り替えることができます。

各カードの下にはインジケーターとして、○がアイテムの数だけ並んで現在のアイテムの位置は●になります。
今回はこのインジケーターの表示/非表示を簡単に切り替えるサンプルです。
インジケーターについての記述はほとんど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で設定したアニメーションで表示が切り替えられます。ただし現状では非表示するときのアニメーションしか効いてないようです。
インジケーターもコンポーネントとして扱えるので、もっと複雑なことできそうです。

佐竹裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

9 月 1st, 2010 at 11:15 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料, Sencha Touch

Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

Livedoorクリップ - Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。

サンプルコードは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

佐竹裕行

Written by 佐竹裕行

8 月 5th, 2010 at 11:06 am

Posted in ExtJSチュートリアルｓｕｓ４版, Sencha Touch

Tagged with Ajax, Ext.Ajax, Ext.Ajax.request, ExtJS, JavaScript, js, Sencha Touch, Toolbar, サンプル, チュートリアル

7月のExt JS勉強会（東京）「Sencha Touchのはじめかた　」まとめ

Livedoorクリップ - 7月のExt JS勉強会（東京）「Sencha Touchのはじめかた　」まとめ

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

開発環境
→　好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。

検証機(タッチパネルデバイス)
→　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/

佐竹裕行

Written by 佐竹裕行

7 月 29th, 2010 at 8:52 pm

Posted in 未分類

Tagged with dockedItems, Ext.Panel, Ext.Toolbar, ExtJS, HelloWorld, js, sample, sencha, Sencha Touch, 勉強会

Twitter Updates for 2010-07-29

Livedoorクリップ - Twitter Updates for 2010-07-29

UStream中継10分ぐらい前から始まりました (#extjapan live at http://ustre.am/gab3 ) #
配信レート若干下げました。皆さん調子よさそうでしょうか？ (#extjapan live at http://ustre.am/gab3 ) #
@shirotorabyakko http://extjs.blog.sus4.co.jp/　でいろいろ公開しています in reply to shirotorabyakko #
これはいいな　Yubizo Engine (#extjapan live at http://ustre.am/gab3 ) #

野村亮之

2004年名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。

Written by 野村亮之

7 月 29th, 2010 at 3:14 pm

Posted in 未分類

Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード

Livedoorクリップ - Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード

2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4　佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に２,３つしか紹介できないと思います。
勉強会のアジェンダはこちらです。

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

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

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

佐竹裕行

Written by 佐竹裕行

7 月 27th, 2010 at 9:27 pm

Posted in 未分類

Tagged with dockedItems, Ext.Carousel, Ext.Toolbar, ExtJS, JavaScript, js, jsdo.it, sencha, Sencha Touch, 勉強会, 勉強会まとめ

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

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

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の記事