Ext 5.0.1 の新機能
こんにちは、ゼノフィnakamuraです。
今日は Ext JS 5.0.1 の GA を発表できます！ このメンテナンスリリースには、Sencha の開発者コミュニティのフィードバックに基づいた、いくつかの改善が含まれています。
さて、何が変わったのかを見てみましょう。
アクセシビリティ
Ext JS 4.2.2 で アクセシビリティ ( WAI-ARIA 1.0 標準 で説明されるもの) の改善されたサポートを提供するために、”ext-aria” パッケージ公開しました。これは皆様のアプリケーションのアクセシビリティを改善するためのツールを提供するための重要な手順であり、また我々のテストパートナーと早々の利用者からのフィードバックからもたくさん学びました。
Ext JS 5 では、そのフィードバックを含めて、より良いソリューションを提供したいと考えました。Ext JS 5.0.1 では、アクセシビリティのサポートがとても改善したので嬉しく思います。もっとも大きな点は、フォーカスやキーボードナビゲーションのサポートは “ext-aria” からフレームワークに移行たという所です。
フォーカス
Ext JS 5.0.1 は、アクセシビリティ標準により従うために、フォーカスの内部的な管理を大きく改善しました。コアとなるコンポーネント (例えばボタン、タブ、フォームフィールド、グリッド) は、フォーカスについて、明確で視覚的な表示を提供するようになりました。これはアクセスしやすいアプリケーションにとって、重要な条件です。この新しい視覚的な観点を管理できるように、いくつかの新しい Sass 変数や mixin パラメータも追加されました。
キーボードナビゲーション
Ext JS の以前のリリースは、フォーカスを管理するために、Ext.FocusManager を提供していました。このクラスはまだありますが、推奨されるアプローチではありません。 その代わり、全てのコンポーネントには “focusable” プロパティがあり、DOM属性の tabIndex を管理するために使用されます。 このプロパティが true に設定されているコンポーネントは、クリックまたはキーボード経由でフォーカスを取得できます。
このフォーカスできるコンポーネントが、あるコンテナ (例えばツールバーへ) に設置されたら、コンテナは矢印キーのナビゲーションを提供し、コンテナに入る時にどの項目がフォーカスを受けるかを管理します。
これらのアクセシビリティや、フォーカスとキーボードナビゲーションの改善については、多くの情報があります。 詳しくは Accessibility Guide をご覧ください。
ViewModels
開発者の方たちが素早く ViewModels とデータバインディングの利用を始めているのを見てとてもよろこんでいます。一般的なバグフィックスに加えて、バインディングに関する改善もいくつかあります。
Selection Binding
多くの開発者は、”selection” の概念をサポートするコンポーネント (例えば ComboBox, Grids, Trees, Breadcrumbsなど) に “selection” バインド可能なプロパティとして利用する能力を進化するように提案しました。
このコンポーネントの selection を同期するためにバインディングを利用できるようになりました。詳しくは、 Kitchen Sink のサンプルをご覧ください。
モデルとフィールドのバリデーション
フォームフィールドの改善は、双方向バインディングにおいて、バインディングされたプロパティをアップデートする前に、値が有効であるかどうかをバリデートすることです。モデルフィールドにバインドする場合に対応するために、フォームフィールドはモデルの validators を取得し、自身のバリデーションに含む事ができます。
Ext JS 5.0.0 では、この validator は、まず (ひょっとすると無効な) 値を返してから確認できました。Ext JS 5.0.1 では、無効な値は一切レコードに戻されない事に安心できます。
データ
Ext.dataもこのリリースで、いくつかの重要なバグフィックスと改善がありました。
TreeStore 対 Node イベント
Ext JS 5.0.0 では、TreeStore クラスは、Ext.data.Store を拡張するために、リファクタリングされました。しかし、この処理では、一つの大きい問題が存在していました。TreeStore がルートノード (Ext.data.NodeInterface) からイベントを渡す方法でした。
ツリーノードから発火された、ほとんどのイベントの場合には、以前と同じように動作しました。残念ながら、いくつかのノードイベントは、ストアイベントとぶつかって、リスナーに問題を起こしました。一つの例は、”remove” イベントでした。
この課題の唯一の安全な解決は、ノードイベントをTreeStore イベントとして発火する前に、全てのノードイベントの頭に “node” のプレフィックスをつける事でした。このため、ノードの remove イベントは、TreeStore から “noderemove” として発火されます。弊社では、メンテナンスのリリースでこのような変更をなるべく避けるようにしていますが、ノードリスナー、またはストアリスナーを変更しないまま解決する方法はありませんでした。この変更のために起こる手間に関して、謝罪いたします。
アソシエーション
Ext JS 5.0.0 のアソシエーションに関する、一つの制限は、新しいレコードを生成してから、そのレコードを削除した場合に、その子レコードを整理するクリーンアップロジックがありませんでした。そのため、この子レコードのために、セッションが追加、更新の操作を生成、する状況が発生します。レコードは保存されないため、この操作は、サーバーで処理できませんでした。
Ext JS 5.0.1 では、モデル間で親子の所有関係を宣言する reference フィールドは、レコードを削除する時に確認されます。この種類の関連付けを指すと、削除されたレコードは、自動的に自身の子レコードを削除します。
例えば、
Ext.define('App.model.Order', { extend: 'Ext.data.Model', // ... }); Ext.define('App.model.OrderItem', { extend: 'Ext.data.Model', fields: [{ name: 'orderId', // このレコードが Order モデルから参照されていることを示す reference: { parent: 'Order' } }] }); |
このようにすると、Order が削除された時 (削除の印がされます) 、その子供 OrderItems も削除されます。
order.drop(); |
さらに、親の参照 (reference) を (例えば、親の関連するストアから削除するなどで) null に設定すると、
order.orderItems().removeAt(0); // 削除された orderItem は削除されます order.orderItems().getAt(0).setOrder(null); // このアイテムも削除されます |
最終的には、カスケード削除の責任はサーバー側が持ちますが、上記の管理があると、クライアントでは保存操作で削除されたレコードを参照することはなくなります。
Responsive コンフィグ
Ext.mixin.Responsive と Ext.plugin.Responsive が提供する、新しい responsiveConfig は、動的な状態を綺麗に管理するための、たくさんの柔軟性を提供します。
新しい responsiveFormulas があると、responsiveConfig ルールが利用するプロパティを追加する事ができます。例えば、Main コントローラーでこのようにすると、新しいプロパティを発行することができます。
Ext.define('MyApp.view.main.Main', { extend: 'Ext.container.Container', mixins: [ 'Ext.mixin.Responsive' ], responsiveFormulas: { small: 'width < 600', medium: 'width >= 600 && width < 800', large: 'width >= 800', tuesday: function (context) { return (new Date()).getDay() === 2; } } }); |
上記のサンプルを使うと、どの responsiveConfigs からでも、新しい値 (small など) を利用する事ができるようになります。アプリケーションの responsiveConfigs を合理化できますし、このような選択方法を一カ所に保つ場所も与えられます。
チャート
“sencha-charts” のパッケージにも、矢印、ダイアモンドといった再利用が可能なマーカーなど、いくつかの改善が含まれています。Sencha Cmd を利用していない方のために、snecha-charts パッケージのビルドが Ext JS 5.0.1 に含まれるようになりました。最も大きい変化は、カスタムチャートテーマを生成する方法をドキュメント化して公開しました。
チャートのテーマ
Ext JS 5.0.0 では、チャートにはいくつかの組込みテーマが含まれていて、そこから自分のチャートに合うテーマを選択できました。しかし、カスタマイズされたテーマの作成方法はドキュメントで説明されていませんでした。今回のリリースで、この機能を提供しましたので、独自のカラーパレットなど作成する事ができます。
チャートのテーマは、Ext.chart.theme.Baseから派生したクラスで、”chart.theme.” で始まるエイリアスが与えられています。基本的なテーマを作成するのは、次のようにとても簡単です。
Ext.define('App.chart.theme.Awesome', { extend: 'Ext.chart.theme.Base', singleton: true, alias: 'chart.theme.awesome', config: { baseColor: '#4d7fe6' } }); |
ここから、シリーズ、軸、マーカーをスタイリングするために、他のコンフィグを好きなだけ追加する事ができます。全てのオプションを見るには、利用できるコンフィグの API リファレンスを確認して下さい。新しく生成したテーマを使うには、対象のチャートに “theme” コンフィグを設定します。
theme: 'awesome' |
Sencha Cmd
最後になりましたが、Sencha Cmd 5.0.1 では、app.json のオプションを拡張して、ビルドスクリプトに入ることなしに、あなたのニーズに一致するよう設定を細かく調整できるようになりました。
output
この新しいコントロールの最も便利なものを紹介します。”output” オブジェクトをご覧ください。ある環境においてよくある必要条件は、Sencha のアプリケーションが存在しているフォルダと別なフォルダにマークアップファイルを置くようにする事です。例えば、
foo.php foo/ app.json app.js |
このモデルの異なる部分は、マークアップファイル (上記では “foo.php” ですが、別に何でもいいです) は親フォルダに入っています。以前のリリースでは、いくつかのビルドプロパティを設定する必要がありました。Sencha Cmd 5.0.1 は、これを app.json で行う事ができます。
{ ... "indexHtmlPath": "../foo.php", "output": { "page": { "path": "../foo.php", "enable": false } } } |
上記は、全てのパスは、親フォルダに相対的計算される事を確保し、markup ファイルを上書きするビルド手順を無効にします。 “output” オブジェクトは、コンパイルの最適化の有効化からマイクロローダーのチューニングまで、ビルドの出力の他の部分を管理する事もできます。
packager
新しい “packager” プロパティのお陰で、Cordova と PhoneGap は、より柔軟で利用が簡単になりました。この新しい設定があるため、app.json で直接パッケージャーを指定する事ができます (“cordova” または “phonegap”) 。Sencha Cmd 5.0.0 に追加された “builds” オブジェクトと組み合わせると、Web/iOS/Andriod 用にビルドするアプリケーションを作成できます。
For example: 例えば：
{ ... "builds": { "web": { "default": true // "sencha app build" で採用される }, "ios": { "packager": "phonegap", "phonegap": { "config": { "platform": "ios", "remote": true // PhoneGap ビルドを使う } } }, "android": { "packager": "phonegap" "phonegap": { "config": { "platform": "android" // ローカル Phonegap を使う } } } } } |
以前と同じく、ビルドは次のように実行できます。
sencha app build |
上記のコマンドでは、”builds” の中の “web” の定義を利用します。しかし、次のようにビルドすることもできます。
sencha app build ios
sencha app build android |
もちろん、PhoneGap がインストールされている必要があり、PhoneGap Build クレデンシャルを構成する必要もあります。他の方法としては、上記の “remote” コンフィグを削除して、”cordova” のパッケージャーに切り替える事もできます (もし Cordova があって、iOS 開発環境が設置されていたら) 。
形式以外に、皆様は、このプロパティがあなたのビルド処理を整理する事が理解できていると思います。このアプローチを利用すると、このビルドに “testing” を追加する必要をなくし、デバッグ用に圧縮されていない JavaScript のコードを取得する事ができます。 (以前のリリースでは、手動の調整が必要だった事) 。
まとめ
Ext JS 5.0.1 と Sencha Cmd 5.0.1 は、皆様から要望があった最も重要な改善を提供します。Ext JS 5 の多くの新しい機能性で、皆様がアプリケーションでどんな素晴らしい開発ができるか楽しみにしています。是非ダウンロードして、試して下さい。皆様の感想をフォーラムで書いて下さい。
