と言うことです。先日来たVに「いつまであんなもん、メンテナンスしてるんだ？暇人め」と言われたような気もしますが、気にしません。そう言えば、雑談ばかりでやつは何しに来たんだ? と言うことはいいとして、Pythonのwebsocket-clientの0.11.0(python2.7,python3.3)をリリースしました。この人は、もともとはWebsocketのプロトコルの勉強のために作ったので、メンテナンスするつもりはありませんでした。なので、メンテナンスした人にはプレゼントします。spdyも何かやろうかとドキュメントを少し読んだのですが、control frameあたりで飽きちゃいました。
[続きを読む...]
Special thanks to Simon Brunel, creator of JDI. He gave me permission to use JDI’s code to describe how to develop Sencha Touch apps. I sincerely appreciate his great works and fraternity!
それでは JDI の作成に取りかかりましょう。今回は、アプリへの認証機能を実装します。
- ログイン画面
- ログアウト画面
今回のチュートリアルの完成形は、以下の URL から利用できます。
JDI at Tutorial #1:
http://apps.kawanoshinobu.com/jdi-1
JDI は HTML5 is Ready App Contest で 1 位を獲得した Sencha Touch アプリです。アプリの概要については、チュートリアル #0 を参照して下さい。
Sencha Touch Tutorial: HTML5 is Ready App Contest 1位アプリ「JDI」を作る #0:
http://dev.ariel-networks.com/wp/archives/3270
プロジェクトの作成と Sencha.io の準備を行います。
プロジェクトのディレクトリを作成して、application というディレクトリ以下に Sencha Touch アプリの雛形を生成します。
$ mkdir jdi $ cd jdi $ sencha -sdk ../touch-2.2.0 generate app App application ...
JDI では、データの永続化とログイン認証、異なるデバイス間でのデータの同期に Sencha.io を利用しています。Sencha.io の API を利用するために application 以下に libraries/sencha-io ディレクトリを作成して、そこに Sencha.io SDK を配置します。
Sencha.io SDK:
http://download.sencha.io/sencha-io-0.7.13.zip
$ mkdir -p libraries/sencha-io $ cp -r ~/Downloads/sencha-io-0.7.13/ libraries/sencha-io/
プロジェクトの準備を簡単に行うために、雛形プロジェクトを作りました。上記の手順を手作業で行う代わりに、以下のリポジトリを利用しても構いません。clone した後 Ant の initialize タスクを実行し、その後 Sass のコンパイルを行って下さい。
https://github.com/kawanoshinobu/sencha-io-app-template
$ git clone https://github.com/kawanoshinobu/sencha-io-app-template.git jdi $ sencha ant -f project.xml initialize $ compass compile application/resources/sass/
Sencha.io 側でアプリの準備を行います。まだアカウントがない場合は、以下の記事を参考に作成して下さい。
Practical Sencha Touch #3: Sencha の BaaS「Sencha.io」を使う:
http://dev.ariel-networks.com/wp/archives/3058
Sencha Cmd を使って Sencha.io にアプリを作成します。この際に生成される AppId は開発時に必要になるので書き留めておいて下さい。その後、アプリで利用する認証グループを作成し、アプリと関連づけます。
$ sencha io create-app jdi {$ユーザー名} {$パスワード}
Sencha Cmd v3.1.1.274
[INF] initializing Sencha.io...
[INF] authenticating developer...
[INF] using team: kawanoshinobu...
[INF] creating app: jdi...
[INF] App created successfully! Use the following AppId and AppSecret in your application code.
[INF] AppId: 78166768-435f-400c-a8cf-ccd70a49c01e
[INF] AppSecret: pGNF8CBDzmKiEfxH
[INF] shutting down Sencha.io...
$ sencha io create-auth-group jdi {$ユーザー名} {$パスワード}
Sencha Cmd v3.1.1.274
[INF] initializing Sencha.io...
[INF] authenticating developer...
[INF] using team: kawanoshinobu...
[INF] Created Auth. Group : jdi
[INF] shutting down Sencha.io...
$ sencha io app-set-group jdi jdi {$ユーザー名} {$パスワード}
Sencha Cmd v3.1.1.274
[INF] initializing Sencha.io...
[INF] authenticating developer...
[INF] using team: kawanoshinobu...
[INF] Auth Group successfully set for app
[INF] shutting down Sencha.io...
以上で下準備は完了です。実際にコードを書き始める前に、開発時の注意を 2 点。
Touch 2.2 で生成したプロジェクトでは、開発時に利用するフレームワークのコードが sencha-touch.js になっています。ただ、このままだとコードが圧縮されていてデバッグしづらいのと、エラーや警告を出してくれないので sencha-touch-all-debug.js を利用するように変更した方がよさそうです。
// application/app.json
"js": [
{
// "path": "touch/sencha-touch.js",
"path": "touch/sencha-touch-all-debug.js", // *1
"x-bootstrap": true
},
...
また開発時に利用するファイルの動的ローディングでは、現在のタイムスタンプをパラメータに指定して読み込むことで、ブラウザのキャッシュを回避しています。ただ、この仕組みだとデベロッパーツールでブレークポイントを張れません。コードをデバッグする時は Ext.Loader のコンフィグで disableCaching オプションに false を指定するとよいでしょう。
// application/app.js
Ext.Loader.setConfig({ disableCaching: false });
お待たせしました、それでは認証機能の実装を始めましょう。application ディレクトリに移動し Main コントローラを作成します。
$ cd application $ sencha generate controller Main
続いて application/app.js で Sencha.io のアプリとの関連づけを行います。
// application/app.js
Ext.Loader.setPath({
'Ext.io': 'libraries/sencha-io/src/io', // *1
'Ext.cf': 'libraries/sencha-io/src/cf', // *2
'Ext': 'touch/src',
'App': 'app'
});
io: {
appId: '78166768-435f-400c-a8cf-ccd70a49c01e' // *3
},
controllers: [
'Main',
'Ext.io.Controller' // *4
],
Ext.Loader に Sencha.io クラスの読み込みの設定を行います(*1, *2)。また io コンフィグの appId オプションに Sencha.io アプリの AppId を指定します(*3)。そして contollers オプションで Ext.io.Controller クラスを読み込むように指定します(*4)。この際、Main コントローラの後に Ext.io.Controller を読み込むよう指定する必要があるので注意して下さい。
実はこれだけで、認証機能が実装できてしまいます。未認証のユーザーの場合、ログイン画面が表示されます。認証後はログアウトボタンが表示されます。アカウントがないユーザーのための新規登録画面も用意されます。
このように Sencha.io と関連づけることで、自動で認証機能が備わります。ただ、今回は独自のログイン画面・ログアウト画面を作りたいので、io コンフィグに以下の設定を追加します。
io: {
appId: '78166768-435f-400c-a8cf-ccd70a49c01e',
manualLogin: true, // *1
authOnStartup: true // *2
},
ログインのタイミングを自由に実装できるよう manualLogin オプションに true を指定します(*1)。これで自動で認証画面が表示されなくなりました。その場合でも、authOnStartup オプションに true を指定して、起動時に認証は行うようにしておきます(*2)。
JDI では、認証機能を実現するために以下のクラスが構成されています。
メールアドレスとパスワードを入力するログインフォームです。ログインボタンとアカウント登録ボタンを用意して、状況に応じて表示を切り替えています。また、ボタンのタップイベントを一旦ビューでハンドリングして、その後カスタムイベントを発火してコントローラ側に処理を委譲しています。
アプリのロゴ、認証後に表示するユーザー情報パネル、認証フォームを保持するコンテナです。また、状況に応じてユーザー情報パネルを表示するか、認証フォームを表示するかを切り替えます。また JDI ではログインしたユーザーの顔写真を表示するために Gravatar API を利用しています。API へのリクエストが完了した後、userloaded イベントを発火します。
ユーザー情報（画像、アカウント名、メールアドレス）とログアウトボタンを表示するパネルです。
アプリのメイン画面です。今回はツールバーだけを配置しています。
JDI 用にカスタマイズしたツールバーです。今回はユーザーパネルを表示するためのボタンだけを配置しています。
JDI では view ディレクトリと controller ディレクトリに並列して widget ディレクトリを作成しています。このディレクトリにはビューよりも細かい単位の再利用可能なコンポーネントを配置しています。
状態を持つボタンです。チェックしている時とそうでない時で見た目を切り替えます。
Sencha.io の初期化、ユーザーのログイン・新規作成・ログアウト、SplashScreen の表示などアプリ全体に関わる処理を行うコントローラです。
Gravatar API を使った画像データの取得やユーザー情報の表示を制御するコントローラです。
都合上細かい説明は割愛しますが、リポジトリを参考にコードを写経してみて下さい。これらのクラスを実装すると、以下の表示になります。
- ログイン画面
- ログアウト画面
認証の流れとしては、まず Ext.Viewport に SplashScreen ビューを追加し、未認証の場合に SplashScreen を表示、そうでない場合は SplashScreen を破棄することで、ログイン画面を制御しています。認証には Sencha.io の Ext.io.User.authenticate メソッドを利用しています。認証後はメールアドレスを元に Gravatar API を使ってユーザー画像を取得し表示します。ログアウトボタンのタップイベントをトリガーに Sencha.io の API をコールしてログアウトします。
機能の実装が完了したら、見た目を調整しましょう。JDI では、dark.scss というファイルを resources/sass ディレクトリに作成しています。アプリケーションで dark.scss をコンパイルして出力される dark.css ファイルを利用するよう app.json を以下のように変更します。
"css": [
{
"path": "resources/css/dark.css", // *1
"update": "delta"
}
],
JDI で特徴的な部分として Android の Roboto フォントが使われている点が挙げられます。フォントファイルを resources/fonts ディレクトリに配置して、Sass のコンパイル時に参照できるよう config.rb を変更します。これに伴い、resources/sass/stylesheets/pictos ディレクトリも application/resources ディレクトリに移動します。
# resources/sass/config.rb
...
# Compass configurations
relative_assets = true
sass_path = dir
css_path = File.join(dir, "..", "css")
fonts_dir = File.join("..", "fonts")
images_dir = File.join('images')
今回の認証機能に必要なスタイルの記述は、以下のリポジトリを参考にして下さい。詳細の解説は割愛させて頂きます。
また前回のチュートリアルでもお話しましたが、Touch 2.2 では $font-family 変数が動かなくなっています。フレームワークの _Class.scss ファイルに以下の変更を適用して下さい。
// application/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss line:1
html, body {
// font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
font-family: $font-family;
font-weight: normal;
-webkit-text-size-adjust: none;
margin: 0;
cursor: default;
}
駆け足でしたが JDI の認証機能について解説しました。今回取り上げた内容を反映したリポジトリを以下に用意しました。説明が不足している箇所に関しては、このリポジトリのコードを参考にして頂ければと思います。
jdi-at-tutorial-1:
https://github.com/kawanoshinobu/jdi-at-tutorial-1
jdi (Original):
https://github.com/simonbrunel/jdi
How to use User Services:
http://docs.sencha.io/current/index.html#!/guide/concepts_user
先日リリースされたFirefox21でE4Xが完全削除されました。
https://developer.mozilla.org/ja/docs/Mozilla/Firefox/Releases/21#JavaScript
アリエルではAquaDesignerという製品でがっつりE4Xを使ってました。私が初めてAquaDesignerチームに入った時はまだ私がJavaScript自体にも慣れてなかったこともあり、この奇妙な文法には苦戦させられました。またXMLの作成処理が遅いので試しに
$A(arguments).each(function(dao) {
// dataとsynchronizeDataの戻り値はXMLオブジェクト
data.property += dao.synchronizeData();
});
となってるところを
$A(arguments).each(function(dao) {
data.appendChild(dao.synchronizeData());
});
にしたら15倍速くなったってこともありました（E4Xのプロパティアクセスと比較演算子）。
Firefox17でのE4Xデフォルト無効をきっかけに、AquaDesignerはE4XでやってたXML操作を全部DOMParserやquerySelectorなどに置き換わりました（私が担当したわけではないのですが）。副作用としてこれまでFirefoxでしか動かなかったのがIE10やChromeなどでもそれなりに動くようになりました。もし読者のなかにAquaDesignerのユーザーが居られたらバージョンアップの検討をおすすめします。
ところでnashornのlexerにあるXML_LITERALSってこれはいったい…
http://hg.openjdk.java.net/nashorn/jdk8/nashorn/file/40c107d1ae6f/src/jdk/nashorn/internal/parser/Lexer.java
Sencha Touch を使った Web アプリ開発では HTML を直接記述せず、組み立てたコンポーネントが自動的に HTML を出力します。コンポーネントがどのような HTML を出力するかはブラックボックスのようですが、実は elementConfig という定義情報を元にしています。今回は、カスタムコンポーネントを作成する際に便利な elementConfig の拡張方法について紹介します。
コンポーネントが出力する HTML 要素を自由に指定したい。
template プロパティで HTML の出力情報を定義します。
Ext.define('sample.view.MyComp', {
extend: 'Ext.Component',
xtype: 'mycomp',
template: [
{
tag: 'div', // <div></div>
class: 'left' // class="left"
},
{
tag: 'div',
class: 'right',
children: [ // 子要素
{
tag: 'span', // <span></span>
text: 'foo' // foo (innerText)
},
{
tag: 'span',
text: 'bar',
hidden: true // display: none;
}
]
},
{
tag: 'input', // <input></input>
name: 'baz', // name="baz"
value: 'foobar' // value="foobar"
}
]
});
このコンポーネントは以下のように表示されます。
出力される HTML 要素は以下です。
<div class="x-unsized" id="ext-mycomp-1">
<div class="left"></div>
<div class="right">
<span>foo</span>
<span style="display: none;">bar</span>
</div>
<input name="baz" value="foobar"/>
</div>一番外側はコンポーネントとして最低限必要な div 要素です。その中身は template で指定した内容を元に HTML 要素が出力されています。
コンポーネントの HTML 要素は AbstractComponent.js の initElement メソッド内で生成されます。ここで getElementConfig で取得した情報を元に Ext.Element.create メソッドを使って要素を生成しているのですが、その定義情報を拡張する手段として用意されているのが template プロパティです。
既に template プロパティが定義されているコンポーネントを継承している場合、template プロパティを設定すると継承元の定義を上書きしてしまうので要注意です。その場合は getTemplate メソッドをオーバーライドする方法で指定した方がよいでしょう。
getTemplate: function() {
var template = this.callParent(arguments);
template.push({
tag: 'div', // <div></div>
class: 'hoge' // class="left"
});
return template;
}
ただ、 getElementConfig メソッドを独自に上書きしているコンポーネントがあって、templete プロパティが無視されてしまうことがあります。container コンポーネントや toolbar コンポーネントなどが、それに該当します。。その場合は、仕方ないので、getElementConfig メソッドを直接オーバーライドして追加で定義を足す必要があります。
タグの属性は、どのようなものでも指定することができます。詳しくは Ext.dom.Element クラスの create メソッドを参照して下さい。
また reference という便利なプロパティがあります。reference プロパティを使えば、コンポーネントから要素に簡単にアクセスできます。
Ext.define('sample.view.MyComp', {
extend: 'Ext.Component',
xtype: 'mycomp',
template: [
{
tag: 'input',
value: 'hello!',
reference: 'hello'
}
],
initialize: function() {
var value = this.hello.getValue(); // 'hello' 要素にアクセス
alert(value); // => hello!
}
});
コンポーネントが出力する HTML を制御できると、Sencha Touch が身近に感じてきますね。以上、カスタムコンポーネントを作る時などに便利な elementConfig の拡張方法でした。
開発部 川野です。ゴールデンウィークでまとまった時間が取れたので、長らく放置していた Ext.ux.AccordionList のメンテナンスを行いました。Ext.ux.AccordionList は自作した Sencha Touch のカスタムコンポーネントで、項目を折り畳めるリストです。やりたいことが一通り完了したので、この機会にバージョン「1.0」と呼ぶことにしました 
変更点は以下です。
- Sencha Touch 2.2 対応
- コードのリファクタリング
- コンフィグオプションを追加（headerItemCls, contentItemCls, useSelectedHighlights, etc）
- サンプルを追加（複雑な入れ子ができることが分かるサンプル）
- Jasmine と Phantomjs ベースの単体テスト
- API ドキュメントを整備
ドキュメントはお馴染みの JSDuck を使って、憧れのライブプレビューを組み込みました。実は、ライブプレビューのデバイス画像は JSDuck の標準機能ではなく Sencha Touch 向けのハックのようです。デバイス画像を表示するには、ドキュメントビルド時に –touch-examples-ui という隠しオプションを true にする必要があります。
テストはブラウザだけでなく、コンソールでも実行できます。
ずっと気がかりだったタスクが終わって、すっきりしました ^^ ありがたいとことに、海外では使ってくれている人がたくさんいるようなので、今後もメンテナンスを続けていきたいと思います。
Repository:
https://github.com/kawanoshinobu/Ext.ux.AccordionList
Demo:
http://docs.kawanoshinobu.com/accordionlist
API Document:
http://docs.kawanoshinobu.com/touch/#!/api/Ext.ux.AccordionList
Sencha Market:
https://market.sencha.com/extensions/ext-ux-accordionlist
先週の火曜日、Sencha Touch のバージョン 2.2 が正式リリースされました。2.2 では、これまでの WebKit 前提で記述されていたスタイルシートが改修され、Windows Phone 8 上でもアプリが動作するようになりました。今後、さらに対応プラットフォームが広がるものと期待しています
2.2 リリースを機に Sencha Touch を本格的に始める方もいるはず！ということで、今回から数回に分けて、実践的な Sencha Touch アプリを開発するチュートリアルを連載します。
Sencha Touch をほとんど触ったことがない方は、まずは以下のチュートリアルをおすすめします。2.2 になってテーマシステムが変わりましたが、それ以外の内容は 2.2 でも問題なく通用します。
Sencha Touch 2.1 のチュートリアルを書きました！:
http://dev.ariel-networks.com/wp/archives/2791
先日、Sencha 社主催の Sencha Touch アプリコンテスト「HTML5 is Ready App Contest」が行われました。今回のチュートリアルでは、そのコンテストで 1位を獲得したアプリ「JDI」を作成します。JDI はいわゆる ToDo アプリです。タスクを管理する機能の他に、隙間時間を使ったタスク消化を支援するユニークな機能が備わっています。また、バックエンドに Sencha 社が提供する BaaS「Sencha.io」を使っている点も興味深いところです。
JDI はソースコードが公開されているのですが、Sencha Touch 2.1 ベースで実装されています。でも、これから始めるなら 2.2 を使いたいですよね。ということで、私の方で 2.2 に対応する改修を行いました。
jdi:
https://github.com/kawanoshinobu/jdi
2.2 では、テーマシステムの $font-family 変数が使えないバグがあるので、フレームワークのコードを一部変更する必要があります。。フォーラムにバグ報告して修正してもらえたので、次のバージョンでは問題ないと思いますが、Touch 2.2.0 では、_Class.scss ファイルを以下のように書き換えて下さい。
application/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss line:1
html, body {
- font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
+ font-family: $font-family;
font-weight: normal;
-webkit-text-size-adjust: none;
margin: 0;
jcursor: default;
}
上記のリポジトリを clone すれば、ローカルで 2.2 対応の JDI を動作させることができます。また、以下の URL で 2.2 対応の JDI を実際に試すことができます。
JDI with Touch 2.2.0:
http://kawanoshinobu.github.io/jdi
実際の開発は次回から行うことにして、今回は、これから作成するアプリの機能について紹介します。
メールアドレスとパスワードを入力して、新規にユーザーを作成する機能です。データは Sencha.io のストレージに保存します。メールアドレスが Gravatar に登録されている場合、そのアバターをアプリで利用します。
メールアドレスとパスワードを利用して、ログインの認証を行う機能です。認証は Sencha.io が提供する API を利用します。
作成フォームに「タスク名」「期限日」「所要時間」を入力してタスクを新規作成する機能です。タスクのデータも Sencha.io のストレージに保存します。
タスクを期限日毎に「Late」「Today」「Soon」「Someday」の 4つに分類して一覧表示する機能です。完了したタスクはグレイアウトして表示します。削除されたタスクは表示しません。一覧の項目を、右にスワイプしてタスクを完了する、左にスワイプして未完了にする、完了したタスクを右にスワイプして削除する、といった操作を行えます。
タスクの詳細を表示する機能です。一覧の項目を選択すると、右側からパネルが表示されます。×ボタン、もしくは右にスワイプすることで、パネルを閉じることができます。また、パネルのツールバーからタスクの完了、編集画面の表示、タスクの削除ができます。
タスクの「タスク名」「期限日」「所要時間」を変更する機能です。
隙間時間を利用して、タスクの消化を支援する機能です。使える時間を指定してスタートボタンを押すと、その時間内に収まる所要時間のタスクが一覧表示されます。一覧では、タスクは「Active（未完了タスク）」「Done（完了タスク）」「Postponed（後で行うことにしたタスク）」「Out of time（残り時間内では完了できない所要時間のタスク）」の 4つに分類されて表示されます。一覧の項目を、左にスワイプしてタスクを延期する、右にスワイプしてタスクを完了する、左にスワイプして未完了にする、完了したタスクを右にスワイプして削除する、といった操作を行えます。
JDI には、機能毎にヘルプが備わっています。画面各所にある「?」アイコンが該当のヘルプページにリンクされています。また、アプリの情報やサンプルデータを自動生成する機能があります。
アプリからサインアウトする機能です。
アクセスしたデバイスに応じて画面のレイアウトを切り替えます。スマートフォン以外のデバイスからアクセスした場合は、ツーペイン表示になります。
これから開発するアプリのイメージが掴めたでしょうか？JDI、かっこいいですよね。私はとても気に入っています。それでは次回から、開発プロジェクトをスタートしましょう！
jdi (Original):
https://github.com/simonbrunel/jdi
開発部 川野です。先日行われた 第4回 XPF（クロスプラットフォーム）開発技術勉強会で Sencha Touch をご紹介させて頂きました。
以下、発表資料です。
前半は Sencha Touch の概要をお話し、後半はライブコーディングを行いました。クロスプラットフォームのモバイルアプリを実装する手段として HTML5（Web）アプリは理想的だと思います。その一方で、満足いく性能で動作させることは難しい、という側面もあり。。そこで頼りになるのが Sencha Touch です。解説書も発売されたことですし、始めるなら今ですよ！（本、買って下さい）
Sencha Fastbook:
http://fb.html5isready.com
Sencha Fastbook Demo (Vimeo):
http://vimeo.com/55486684
JDI Source Code (GitHub):
https://github.com/simonbrunel/jdi
Weathy:
http://www.loopthy.com
Snapmate:
http://snapsmate.com
Sencha Touch App Gallery:
http://www.sencha.com/apps
Sencha Touch API Documentation:
http://docs.sencha.com/touch/2-1
ラスボスが気まぐれで始めたコロコロ教ですが、まだ続いているみたいですよ。
そんな中でコロコロ教の存在を脅かす新たな勢力が現れました。
それは、グルグル教です。
グルグル教とはパワーボールを使ってトレーニングを行う新興宗教で、パワーボールを回せるという特殊能力を持った選ばれし者によって構成されています。
指先から肩までの広範囲の筋肉をトレーニングできるので、壁バカに大受けです。
がしかし、回せない残念な人もいます。
回そうとしても回せない残念な人
本場パワーボール(左)とそのパチもの(右)
頑張って両手で回している図
皆様も是非パワーボールで壁バカになりましょう。
Sencha Touch のクラスシステムには、プロパティの getter / setter を自動生成し、変更前に値を検証するメソッド（applier）、値の変更後に実行するメソッド（updater）を呼び出す機能が備わっています。今回は、この updater のハマりポイントに関するトピックです。
コンポーネントの hidden プロパティや disabled プロパティの updater（updateHidden、updateDisabled）を定義したが、値を変更してもメソッドが呼び出されない。
プロパティの updater として実行するために、doSet{$プロパティ名} メソッドを定義します。
Ext.define('EventedConfigTest', { // *1
extend: 'Ext.Component', // *2
applyHidden: function(hidden) { // *3
console.log('apply:' + hidden);
return hidden;
},
updateHidden: function(hidden) { // *4
console.log('update:' + hidden);
},
doSetHidden: function(hidden) { // *5
console.log('doSet:' + hidden);
this.callParent(arguments);
}
});
var comp = Ext.create('EventedConfigTest'); // *6
comp.getHidden(); // *7
// > null
comp.setHidden(true); // *8
// > apply:true // *9
// > doSet:true // *10
comp.getHidden(); // *11
// > true
comp.setHidden(true); // *12
// > apply:true // *13
*1 ”EventedConfigTest” という名前のクラスを定義
*2 ”Ext.Component” クラスを継承
*3 hidden プロパティに対する applier を定義
*4 hidden プロパティに対する updater を定義
*5 hidden プロパティの updater として実行するために doSetHidden メソッドを定義
*6 ”EventedConfigTest” クラスのインスタンスを生成
*7 インスタンスの hidden プロパティの値を確認。このタイミングでは値に null が設定されている
*8 インスタンスの hidden プロパティに true を設定する
*9 applier が実行される
*10 updater は実行されない。定義した doSetHidden は実行される
*11 インスタンスの hidden プロパティの値を確認。値に true が設定されている
*12 もう一度、インスタンスの hidden プロパティに true を設定する
*13 applier が実行される。値の変更がないので、doSetHidden は実行されない
実は、コンポーネントのプロパティには、通常のプロパティの他に Evented なプロパティがあります。Ext.Component のソースコードを見ると、config オプションの他に eventedConfig オプションを定義していることが分かります。eventedConfig オプションは、初期化時の change アクションの実行を抑制するために利用されています。初期化時のパフォーマンス改善が目的のようです。
この eventedConfig オプションで定義したプロパティは config オプションで定義したプロパティと同様、getter / setter が自動生成されるのですが、挙動が微妙に異なります。そして最大の違いは、なんと updater が実行されないことです。。内部ではプロパティの値を変更した後、updater と似た用途で doSet{$プロパティ名} メソッドを実行しています。そのため、doSet{$プロパティ名} メソッドを定義することで updater の代替にできる、という解決策でした。
この解決策を採る際、doSet{$プロパティ名} メソッドで親クラスの同名メソッドを実行することを忘れないようにして下さい（具体的には、this.callParent(arguments) を忘れずに記述して下さい）。そうしないと本来実行されるべき処理が実行されなくなってしまいます。
正直なところ、doSet{$プロパティ名} メソッドの継承は、公式には推奨されていません。doSet{$プロパティ名} メソッドを継承するより、set{$プロパティ名} メソッドを継承して、処理の後、自前で updater 用に定義したメソッドを呼ぶ方が、バージョンアップで仕様が変わった際に安全かもしれません。微妙なノウハウですが、Evented なプロパティで updater が実行されないケースは結構ハマりがちだと思うので、今回ご紹介させて頂きました。
※個人的には、Evented なプロパティの場合でも、doSet{$プロパティ名} メソッドではなく、update{$プロパティ名} メソッドを実行するように仕様変更されることを願います。。
How to Use Classes in Sencha Touch：
http://docs.sencha.com/touch/2-1/#!/guide/class_system
Sencha Touch ソースコード：
Evented.js
AbstractComponent.js
Component.js
core/class/Class.js
アリエルの開発環境ってNotesのそれに似ているそうです。基本的にデータは全て、文書と呼ばれる単位で保存されます。RDBMSで言えば、テーブルの一レコードが一文書に相当します。それらの文書をアプリケーションって呼ばれる単位で格納しています。また、RDBMS的に言えばアプリケーションはテーブルに相当する概念らしいです。偉い人からは、厳密に言えばその説明は間違っている、って怒られそうですが…。
Notesの開発者にならもう少し厳密にマッピングできるように説明できるそうですが、Notesの開発者は希少種になりつつあるそうなので、それは触れてはいけないそうです。極めて単純化してしまえば、Notesも一覧画面と文書のCRUDが簡単に作れるシステムでしかないですよね。ちなみに、RDBMSもCRUDが簡単に作れるシステムの一つらしいです。
CRUDが簡単に作れるシステム、って言われても何ができるかよく分からないですよね。私も分かりません。RDBMSで何ができるのかもあまり想像ができません。でも、これで業務用のアプリケーションのかなりの部分ができちゃうそうです。
CTOの昔話につきあうと、CTOがLotusにいた頃のバグ管理システムはNotesのデータベースを使って行っていたそうです。一つのイシューが一つのNotesの文書に対応していて、各文書の特定のフィールドの値によって状態を管理して、一覧に表示していたそうです。gitlabのような製品の簡易なイシュー管理機能であればすぐに作れるようなものらしいです。そして、アリエルの開発環境でもそれは同じらしいです。Aqua Designerとか呼ばれている製品でアプリケーションを開発します。いろんな部品をぺたぺた貼って、プロパティを設定して開発するらしいです。よくある製品みたいですね。びじねすろじっく?ビジネスロジックはサーバーサイドJavaScriptで記述できるらしいです。あっ、アリエルの人って何人かはJavaScriptの本を書いたりしているらしいですが、みんなJavaScriptは嫌いだって言っています。秘密ですよ。
上のものを実際に実行環境で動かしたものがこれ。
Sencha Touch Tutorial: HTML5 is Ready App Contest 1位アプリ「JDI」を作る #1 | posted on 5月 20, 2013クロスオリジンなXMLHttpRequest2(XHR2)と独自ヘッダの落とし穴? | posted on 5月 9, 2011古のテクニックを見せようと思ったら最近の技術の前にあっさり敗北した話 | posted on 11月 15, 2011
「Emacsのトラノマキ」連載第09回「auto-completeを使おう」(松山智大) | posted on 1月 31, 2011モダンCommon Lisp第3回: SLIMEの使い方 基礎編 | posted on 4月 7, 2011
「Emacsのトラノマキ」連載第11回「Emacsをもっと快適にするElisp集」(佐藤寛之) | posted on 3月 21, 2011認可のためのプロトコルのOAuthが認証に使えることの説明 | posted on 2月 5, 2011
Sublime Text 2 のプラグインを作る | posted on 8月 13, 2012
