rally - Rally Cardboard UI を使用して先行/後続階層を表示する

Question

現在、選択したユーザーストーリーの先行者/後続者の階層を表示する Rally アプリを作成しようとしています。説明のために、ユーザーはセレクター UI 要素からユーザーストーリーを選択します。次に、3 列の Cardboard UI 要素が生成されます。左端の列には、選択したユーザーストーリーのすべての先行要素 (カード形式) が含まれ、中央の列には、選択したユーザーストーリーのカードが含まれ、右端の列にはすべてが含まれます。選択したユーザーストーリーの後継者 (カード形式)。そこから、先行者カードと後続者カードを削除し (選択したユーザーストーリーの先行者または後続者にならないことを示します)、新しい先行者/後続者カードを追加できます (選択したユーザーストーリーの新しい先行者/後続者になることを示します)。ユーザーストーリー）。

ただし、私の問題は次のとおりです。Cardboard UI は、1 つの特定の属性に対して異なる値のセットを表示するように設計されていますが、「先行者」と「後続者」はこのカテゴリに分類されません。ユーザーストーリーを表示し、その前任者と後任者を取得して、ボードの残りの部分に入力する方法はありますか? 元のボードにかなりの量の変更が必要になることを認識しています。

score 1 · Accepted Answer

表示できるようにハックする方法を見つけました。それが価値があるかどうか、および追加/削除のために何をしたいのかはわかりませんが、これは正しい道を歩むのに役立つかもしれません.

要約すると、問題は cardboard/column クラスが単一値フィールドで動作するように設計されており、作成された各列が列構成に基づいて Rally に対して個別のクエリを実行することです。rallycardboard と rallycolumn をオーバーライドする必要があります。以下に貼り付け可能な完全な html を示しますが、一度に 1 つずつ見ていきましょう。

少なくとも、これは rally クラスのソースコードを取得して、それらをオーバーライドする何かを作成する方法の良い例かもしれません。

データ：

既存の cardboard にレコードタイプとフィールドが与えられ、フィールドの有効な値ごとに列が作成されます。この情報は、Rally にストーリーと属性定義を照会することによって取得されます。ただし、データを少し異なる方法で使用したいので、別のデータストアを作成してフィードする必要があります。したがって、wsapidatastore を使用して、要求したレコードを取得します (この例では、先代後継者がいるUS37という話があります）。ある意味、これは Excel でクロス集計を行うようなものです。1 つのレコード (37) を別のレコードに関連付ける代わりに、すべてのストーリーのデータセットを作成し、"_column" と呼ばれる新しいフィールドでそれらの関係を定義したいと考えています。このような：

Ext.create('Rally.data.WsapiDataStore', {
            model: "hierarchicalrequirement",
            autoLoad: true,
            fetch: ['Name','Predecessors','Successors','FormattedID','ObjectID','_ref'],
            filters: [ {
                property: 'FormattedID', operator: 'contains', value: '37'
            } ] /* get the record US37 */,
            listeners: { 
                load: function(store,data,success) {
                    if ( data.length === 1 ) {
                        var base_story = data[0].data;
                        var modified_records = [];

                        base_story._column = "base";
                        modified_records.push( base_story );

                        Ext.Array.each( base_story.Predecessors, function( story ) {
                            story._column = "predecessor";
                            modified_records.push( story );
                        } );

                        Ext.Array.each( base_story.Successors, function(story) {
                            story._column = "successor";
                            modified_records.push( story );
                        } );

データを格納する列を定義する新しいフィールドを持つオブジェクトの配列にデータをプッシュします。しかし、データをストアに格納する必要があるため、これだけでは十分ではありません。ストアにはモデルが必要です。また、カードレンダーがデータへのアクセス方法を認識できるように、フィールドを定義する必要があります。既存のラリーモデルにフィールド定義を追加するだけの簡単な方法はないように思われるため、これで実行できるはずです (ラリーモデルには一意のフィールド情報と getField() というメソッドがあるため、それを追加する必要があります。

                        Ext.define('CardModel', { 
                            extend: 'Ext.data.Model',
                            fields: [
                                { name: '_ref', type: 'string' },
                                { name: 'ObjectID', type: 'number'},
                                { name: 'Name', type: 'string', attributeDefinition: { AttributeType: 'STRING'} },
                                { name: 'FormattedID', type: 'string'},
                                { name: '_column', type: 'string' },
                                { name: 'ScheduleState', type: 'string' } ] ,
                            getField: function(name) {
                                if ( this.data[name] ) { 
                                    var return_field = null;
                                    Ext.Array.each( this.store.model.getFields(), function(field) {
                                        if ( field.name === name ) {
                                            return_field = field;
                                        }
                                    } );

                                    return return_field;
                                } else {
                                    return null;
                                }
                            } 
                        });

                        var cardStore = Ext.create('Ext.data.Store',{
                            model: 'CardModel',
                            data: modified_records
                        });

ここで厚紙を作成しますが、ラリー厚紙の代わりに、以下で定義するクラス (「DependencyCardboard」) から厚紙を作成します。さらに、以下でも定義する列の新しい定義を渡します (「dependencycolumn」)。

                        var cardboard = Ext.create('DependencyCardboard', {
                            attribute: '_column',
                            store: cardStore, /* special to our new cardboard type */
                            height: 500,
                            columns: [{
                                xtype: 'dependencycolumn',
                                displayValue: 'predecessor',
                                value: 'predecessor',
                                store: cardStore
                            }, 
                            {
                                xtype: 'dependencycolumn',
                                displayValue: 'base',
                                value: 'base',
                                store: cardStore
                            },
                            {
                                xtype: 'dependencycolumn',
                                displayValue: 'successor',
                                value: 'successor',
                                store: cardStore
                            }]
                        });

段ボール：

ほとんどの場合、すべてのクエリは列自体で実行されるため、既存の Rally cardboard でニーズに対応できます。しかし、問題を引き起こしている関数が 1 つあるため、それをオーバーライドする必要があります: _retrieveModels. この関数は通常、レコードタイプ (ユーザーストーリーなど) を受け取り、それに基づいて Rally 定義に基づくデータモデルを作成します。ただし、UserStory レコードを直接使用しているわけではありません。「_columns」フィールドを追加できるように、独自のモデルを定義する必要がありました。そこで、新しい定義を作成します (上記の「DependencyCardboard」の create ステートメントで使用します)。

(タイトルをクリックするだけで、API 内のすべての Rally オブジェクトのソースコードを表示できるので、以下のメソッドを基本クラスのメソッドと比較できることを思い出してください。)

Rally カードボードが行うすべてのことを保持し、次のようにして 1 つのメソッドのみをオーバーライドできます。

Ext.define( 'DependencyCardboard', {
    extend: 'Rally.ui.cardboard.CardBoard',
    alias: 'widget.dependencycardboard',
    constructor: function(config) {
        this.mergeConfig(config);
        this.callParent([this.config]);
    },
    initComponent: function() {
        this.callParent(arguments);
    },
    _retrieveModels: function(success) {
        if ( this.store ) {
            this.models = [ this.store.getProxy().getModel() ];
            success.apply( this, arguments );
        }
    }

});

桁：

通常、各列は Rally に送られ、「列名と同じフィールドを持つすべてのストーリーを教えてください」と表示されます。しかし、store を cardboard に渡しているので、_queryForData をオーバーライドする必要があります。さらに、これを行うときに列の高さを定義する際に何かが行われているため (理由はわかりません!)、getColumnHeightFromCards() メソッドに小さなキャッチを追加する必要がありました。

_queryForData: function() {
        var allRecords = [];

        var records = this.store.queryBy( function( record ) {
            if ( record.data._column === this.getValue() ) { allRecords.push( record ); }
        }, this);

        this.createAndAddCards( allRecords );
    },
    getColumnHeightFromCards: function() {
        var contentMinHeight = 500,
            bottomPadding = 30,
            cards = this.query(this.cardConfig.xtype),
            height = bottomPadding;

        for(var i = 0, l = cards.length; i < l; ++i) {
            if ( cards[i].el ) {
                 height += cards[i].getHeight();
            } else {
                height += 100;
            }

        }

        height = Math.max(height, contentMinHeight);
        height += this.down('#columnHeader').getHeight();

        return height;
    }

終了

したがって、これらすべてのピースを一緒に追加すると、パネルにプッシュできる 1 つの長い html ファイルが得られます (そして、ドラッグ結果をオーバーライドする方法と、最初の項目のチューザーパネルを追加する方法を理解するために作業を続けることができます)。（そして、独自のクラスに抽象化することができます））。

完全なもの：

<!DOCTYPE html>
<html>
<head>
    <title>cardboard</title>

    <script type="text/javascript" src="/apps/2.0p3/sdk.js"></script>

    <script type="text/javascript">
        Rally.onReady(function() {
            /*global console, Ext */

            Ext.define( 'DependencyColumn', {
                extend: 'Rally.ui.cardboard.Column',
                alias: 'widget.dependencycolumn',
                constructor: function(config) {
                    this.mergeConfig(config);
                    this.callParent([this.config]);
                },
                initComponent: function() {
                    this.callParent(arguments);
                },
                _queryForData: function() {
                    var allRecords = [];

                    var records = this.store.queryBy( function( record ) {
                        if ( record.data._column === this.getValue() ) { allRecords.push( record ); }
                    }, this);

                    this.createAndAddCards( allRecords );
                },
                getColumnHeightFromCards: function() {
                    var contentMinHeight = 500,
                        bottomPadding = 30,
                        cards = this.query(this.cardConfig.xtype),
                        height = bottomPadding;

                    for(var i = 0, l = cards.length; i < l; ++i) {
                        if ( cards[i].el ) {
                             height += cards[i].getHeight();
                        } else {
                            height += 100;
                        }

                    }

                    height = Math.max(height, contentMinHeight);
                    height += this.down('#columnHeader').getHeight();

                    return height;
                } 

            });
            /*global console, Ext */

            Ext.define( 'DependencyCardboard', {
                extend: 'Rally.ui.cardboard.CardBoard',
                alias: 'widget.dependencycardboard',
                constructor: function(config) {
                    this.mergeConfig(config);
                    this.callParent([this.config]);
                },
                initComponent: function() {
                    this.callParent(arguments);
                },
                _retrieveModels: function(success) {
                    if ( this.store ) {
                        this.models = [ this.store.getProxy().getModel() ];
                        success.apply( this, arguments );
                    }
                }

            });
            /*global console, Ext */
            Ext.define('CustomApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',
                items: [ { xtype: 'container', itemId: 'outer_box' }],
                launch: function() {
                    Ext.create('Rally.data.WsapiDataStore', {
                        model: "hierarchicalrequirement",
                        autoLoad: true,
                        fetch: ['Name','Predecessors','Successors','FormattedID','ObjectID','_ref'],
                        filters: [ {
                            property: 'FormattedID', operator: 'contains', value: '37'
                        } ],
                        listeners: { 
                            load: function(store,data,success) {
                                if ( data.length === 1 ) {
                                    var base_story = data[0].data;
                                    var modified_records = [];

                                    base_story._column = "base";
                                    modified_records.push( base_story );

                                    Ext.Array.each( base_story.Predecessors, function( story ) {
                                        story._column = "predecessor";
                                        modified_records.push( story );
                                    } );

                                    Ext.Array.each( base_story.Successors, function(story) {
                                        story._column = "successor";
                                        modified_records.push( story );
                                    } );

                                    Ext.define('CardModel', { 
                                        extend: 'Ext.data.Model',
                                        fields: [
                                            { name: '_ref', type: 'string' },
                                            { name: 'ObjectID', type: 'number'},
                                            { name: 'Name', type: 'string', attributeDefinition: { AttributeType: 'STRING'} },
                                            { name: 'FormattedID', type: 'string'},
                                            { name: '_column', type: 'string' },
                                            { name: 'ScheduleState', type: 'string' } ] ,
                                        getField: function(name) {
                                            if ( this.data[name] ) { 
                                                var return_field = null;
                                                Ext.Array.each( this.store.model.getFields(), function(field) {
                                                    if ( field.name === name ) {
                                                        return_field = field;
                                                    }
                                                } );

                                                return return_field;
                                            } else {
                                                return null;
                                            }
                                        } 
                                    });

                                    var cardStore = Ext.create('Ext.data.Store',{
                                        model: 'CardModel',
                                        data: modified_records
                                    });

                                    var cardboard = Ext.create('DependencyCardboard', {
                                        attribute: '_column',
                                        store: cardStore,
                                        height: 500,
                                        columns: [{
                                            xtype: 'dependencycolumn',
                                            displayValue: 'predecessor',
                                            value: 'predecessor',
                                            store: cardStore
                                        }, 
                                        {
                                            xtype: 'dependencycolumn',
                                            displayValue: 'base',
                                            value: 'base',
                                            store: cardStore
                                        },
                                        {
                                            xtype: 'dependencycolumn',
                                            displayValue: 'successor',
                                            value: 'successor',
                                            store: cardStore
                                        }]
                                    });

                                    this.down('#outer_box').add( cardboard );
                                }
                            },
                            scope: this
                        }
                    });
                }
            });

            Rally.launchApp('CustomApp', {
                name: 'cardboard'
            });
        });
    </script>

    <style type="text/css">
        .app {
             /* Add app styles here */
        }
    </style>
</head>
<body></body>
</html>

rally - Rally Cardboard UI を使用して先行/後続階層を表示する

1 に答える 1

Related

Reference