0

私はDojoを初めて使用します（実際、すべてのフロントエンドプログラミングでは、JavaとC＃で何年もサーバー側で作業しています）。私は現在、Java Server Faces（JSF）2.1を使用しており、JSFとDojo Grid（dgrid）をDojo1.8で使用して簡単なデモをまとめようとしています。ガントチャートの作成方法を示すdgridサイトの例がありますが、この例では、アプリケーションサーバーからJSONデータを抽出して関数にフィードする方法を示していません。問題は、脳をARMに巻き付けるのに苦労していることです。そこでの経験が、私の痛みの一部を軽減するのに役立つことを願っています。ここにいくつかのコードがあります：

これは私が作成したhtmlファイルにあり、ロード時にガントを作成するだけです。

<script>
    require([ "gantt/GanttGrid", "gantt/data" ], function(GanttGrid, data){
        // Instantiate the GanttGrid using predefined test data
        new GanttGrid({
            store: data,
            query: {
                // Only tasks with no parent task should be displayed in the root of the chart
                parent: undefined
            }
        }, "gantt");
    });
</script>

「データ」は別のjsファイルから取得され、DOJOのMemoryオブジェクトに丸呑みされたJSONデータです。

define(["dojo/store/Memory"],function(Memory){
return new Memory({data:[
        {name: "100", start: 1327900000000, end: 1328300000000, completed: 0.9, id: 1},
        {name: "101", start: 1328100000000, end: 1328400000000, completed: 0.9, id: 2},
        {name: "102", start: 1329100000000, end: 1329800000000, completed: 0.4, dependencies:[1], id: 3},
        {name: "103", start: 1328400000000, end: 1328900000000, completed: 0.4, dependencies:[1], id: 4},
        {name: "104", start: 1329000000000, end: 1329800000000, completed: 0.4, id: 5},
        {name: "105", start: 1329000000000, end: 1329400000000, completed: 0.4, id: 6},
        {name: "106", start: 1329400000000, end: 1329800000000, completed: 0.4, id: 7}
    ],
    getChildren: function(parent, options){
        return this.query({parent: parent.id}, options);
    },
    mayHaveChildren: function(parent){
        return parent.hasChildren;
    }
});});

さて、私が欲しいのは、バックエンドでいくつかのロジックを実行し、DOJOのメモリストアに追加してGanttGridに渡すことができるJSONデータを返すJSFマネージドBeanのメソッドを呼び出すことができることですが、私は思えませんajaxリクエストでそれを実現する方法を理解するために。

これが、Beanからデータを正常に取得して画面に表示するXHTMLファイルにあるものです。

<fieldset>
    <h:form id="schedulerForm">
        <h:commandButton value="Execute Demo" id="executeDemo">
            <f:ajax event="click" listener="#{autoScheduler.executeDemo}" render="result"  />
        </h:commandButton>
        <p />
        <h:outputText id="result" value="#{autoScheduler.result}"  />
    </h:form>
</fieldset>

私が欲しいのは、JSF BeanでexecuteDemoの結果をキャプチャして、GanttGridを作成する関数に渡すことです。DOJOの「オン」機能を使用してみましたが、ボタンのクリックをキャプチャすることしかできません（私が言えることから）...実行がいつ完了したかを知る方法がわからないので、 Beanからデータを取得し、グラフを作成します。最大の問題は、DOJOリクエストモジュールを使用してJSFBeanを呼び出す方法がわからないことです。

誰かがこれを達成する簡単な方法を知っていることを願っています。助けてくれてありがとう！さらに情報が必要な場合はお知らせください...関連するすべてのコードを含めようとしました。

-ポール

4

1 に答える 1

2

JSFでは、JavaScriptを使用して任意のJavaコードを呼び出すことはできません。Javascriptオブジェクトを使用して、JSFコンポーネントがトリガーした場合（たとえば、acommandButtonがクリックされた場合）に呼び出すBeanメソッドを呼び出すリクエストのみをトリガーできます。ここでAPIをjsf.ajax確認してください。

このAPIはビューコードに非常に厳密であり、リクエストとビューの一部の更新をトリガーします。

たとえば、commandButtonこれはあなたのものと非常に似ていますが、f:ajaxタグの代わりにバニラJavaScriptを使用してAJAXをトリガーし、追加のJSコードを少し追加します。

<h:commandButton value="Execute Demo" id="executeDemo"
  onclick="console.log('hey, I am an arbitrary JS code');
  jsf.ajax.request(this, event, {execute:'@this', render: 'result'});
  return false;" />

さらに、f:ajaxリクエストが完了したときにJavaScriptコードを実行することはできますが、この時点で必要なデータを取得するために「JavaBeanコードを呼び出す」ことは実際にはできません。ただし、JSF Ajaxを使用してデータをDOMに配置し、コールバックのDOMからデータを取得することができます。

次に、JSONでフォーマットされたデータを取得するための例を示します。

JSONでエンコードされたオブジェクトを含む文字列を返す単純なBeanメソッド：

public String getMyData() {
    return "{\"fruit\": \"banana\"}";
}

コードを表示：

<fieldset>
    <h:form id="schedulerForm">
        <h:commandButton value="Execute Demo" id="executeDemo">
            <f:ajax event="click" listener="#{autoScheduler.executeDemo}"
               render="result myHiddenData" onevent="parseData()" />
        </h:commandButton>
        <p />
        <h:outputText id="result" value="#{autoScheduler.result}"  />
        <h:panelGroup id="myHiddenData" style="display: none">#{autoScheduler.myData}</h:panelGroup>
    </h:form>
    <script>
        function parseData(data){
            if (data.status == "success") {
                var myRawData = document.getElementById("schedulerForm:myHiddenData").innerHTML;
                var myJsonData = JSON.parse(myRawData);
                alert(myJsonData.fruit);
            }
        }
    </script>
</fieldset>

これらの関連する質問も参照してください。

于 2013-03-21T12:49:50.777 に答える