Sencha Advent Calendar 2014 – 12月19日ルーティング #ExtJS

Advent Calender２回目の投稿です、佐藤です。

今回はルーティングについて説明します。
ルーティングは、リクエストのURLに設定されたハッシュを元にメソッドの呼び出し処理を行う仕組みの事を言います。一般的にページ遷移させる為にはユーザーの操作によって何らかのアクションを起こし、別ページへ遷移させます。しかし、シングルページアプリケーション(SPA)では単一ページで処理されるため、URLでの遷移は行う事が出来ません。
それを補う事が出来るのがルーティングという技術です。

Extjs5でもこのルーティングを提供しています。これにより、ExtJS5ではSPAでも他コンテンツへ遷移させる事が可能になりました。そしてその実装方法も簡単です。
早速ルーティングの実装について説明します。

Extjs5ではコントローラーに'routes'オブジェクトを追加し下記の様に「ハッシュ:メソッド」を定義するだけでルーティング機能を実装することができます。

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    routes : {
        'home' : 'onHome'
    },
    onHome : function() {
        alert("call");
    }
});

この場合、'routes'オブジェクトに追加した'home'がハッシュで、'onHome'がメソッドになります。

「localhost#home」というURLを例にすると「#home」がハッシュになり、このハッシュが一致するとonHome()メソッドが実行されます。
ローカルにプロジェクトを生成し、ウェブサーバを立てて「localhost#home」にアクセスしてみて下さい。「call」というアラートメッセージが表示されます。これはハッシュであるhomeに定義したonHomeメソッドがコールされた為です。

また、URLに直接ハッシュを付与するだけではなく、処理の途中でハッシュを変更したい場合も出てくると思います。そのような場合はハッシュを更新する'redirectTo()'メソッドを実行するだけで変更が可能になります。

this.redirectTo('change');

このようにredirectTo()に変更したいハッシュ名を設定します。これだけでハッシュの更新が可能になります。
では実際にハッシュを変更してみましょう。先程のサンプルを編集するだけで確認する事ができます。

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    routes : {
        'home' : 'onHome',
        'change': 'onChange'
    },
    onHome : function() {
        alert("call");
    },
    onClickButton: function () {
        this.redirectTo('change');
    },
    onChange : function() {
        alert("change");
    }        
});

ボタン押下時のイベントである'onClickButton'メソッドを定義し、その中で'redirectoTo'メソッドを実行し、変更するハッシュ名を設定します。
これでbuttonを押下するとURLにハッシュ(#change)が付与され、'onChange'メソッドが実行されます。
では、実際にハッシュの変更が実行されることを確認します。
まず始めに「localhost#home」にアクセスして「call」アラートが表示されることを確認します。
次にボタンを押下してみて下さい。すると「change」アラートが表示されます。URLも#homeハッシュが#changeに変更されていることが確認できます。これでハッシュの変更が出来ました。
次は「Ext.util.History」の中身を参照してハッシュが変更されることを確認してみます。
再度、「localhost#home」にアクセスしブラウザの開発ツールのコンソールで「Ext.util.History」と入力して下さい。するとオブジェクトを参照する事ができ、その中の「currentToken: "home"」が記載されており、現在のハッシュがhomeであることが確認できます。では、ボタンを押下後、再度コンソールに「Ext.util.History」を記載し、実行して下さい。するとcurrentTokenが'change'に変更されていることが確認できます。Extjs5ではExtjs4のように直接「Ext.util.History」に追加処理を実装する必要はありませんが、内部的にはExtjs5も「Ext.util.History」で管理している事になります。

このメソッドを使用する事である特定の条件やイベントの場合はハッシュを変更し別ページへの遷移を促す事が出来る様になります。このメソッドを応用してSPAの実装を進めて行く事ができます。

勿論ハッシュにはパラメータを引数としてメソッドに渡す事ができます。

引数を渡す為には下記の様に定義します。

Ext.define('MyApp.controller.Main', {
    extend : 'Ext.app.ViewController',
    alias: 'controller.main',

    routes : {
        'home/:name' : 'onHome',
        'change/:num': 'onChange',
        'change': 'hashChange'
    },
    onHome : function(name) {
        alert(name);
    },
    onClickButton: function () {
        this.redirectTo("change/123");
    },
    onChange: function (num){
        alert(num);
    }
});

このようにハッシュとパラメータを「/:(スラッシュ、コロン)」で区切ります。これでonHomeメソッドにnameという引数を渡す事ができます。「localhost#home/tarou」を例にすると「tarou」がonHomeメソッドに引数として渡されます。実際に「localhost#home/tarou」にアクセスすると引数として渡したtarouという名前がアラートに表示されます。
また、'redirectTo'メソッドを使用して引数を渡す場合はonClickButtonメソッドでやっているように「ハッシュ/引数」をredirectToメソッドに設定して実行します。
この場合は123がonChangeメソッドに引数として渡されます。実際にボタンを押下して確認してみて下さい。
引数に渡した123がアラートに表示されます。

ExtJS5ではこのように簡単にルーティング機能を実装する事ができます。

まとめ

SPAでのページ遷移はルーティングを使用
ExtJS5ではroutes{}オブジェクトにハッシュと実行するメソッド名を定義する。
redirectTo()メソッドでハッシュを更新。
#ハッシュ名/引数でパラメータをメソッドに渡す

このようにExtJS5ではルーティング機能を簡単に実装させる事ができます。

是非、ExtJs5でルーティング機能を実装してSPAの開発を進めてみて下さい。

明日はyasutomo.gotoさんです。

Sencha Advent Calendar 2014 – 12月19日 ルーティング

まとめ

Sencha Advent Calendar 2014 – 12月19日ルーティング