使用Dojo 1.8函數在JSF ajax上執行結果

Question

我是Dojo的新手（事實上，所有的前端編程，我一直在Java和C＃的服務器端工作多年）。我目前正在使用Java Server Faces（JSF）2.1，並嘗試使用JSF和Dojo Grid（dgrid）與Dojo 1.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文件拉，只是JSON數據在咕嚕咕嚕到Dojo的內存對象：

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; 
    } 
});}); 

現在，我要的是能夠調用託管Bean的方法的JSF將執行在後端的一些邏輯，然後返回JSON數據，我可以添加到Dojo的內存存儲並將其傳遞到GanttGrid，但是，我似乎無法弄清楚如何用ajax請求來關閉它。

以下是我在我的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> 

我想什麼是捕捉executeDemo的結果對JSF豆傳遞給創建GanttGrid的函數。我曾嘗試在DOJO中使用「on」功能，但只允許我捕獲按鈕單擊（從我所知道的情況來看）......我無法想出一種方法來知道執行何時完成，以便我可以從bean獲取數據並創建圖表。最大的問題是我無法弄清楚如何使用DOJO請求模塊來調用JSF bean。

我希望有人知道一個簡單的方法來實現這一點。提前感謝您的幫助！如果您需要更多信息，請告訴我...我試圖包含所有相關的代碼。

-Paul

Answer 1

那麼，JSF不允許使用JavaScript調用任意的Java代碼。 它只允許您觸發請求，如果JSF組件已經觸發它（例如，點擊了commandButton），它將調用它將調用的bean方法，並使用jsf.ajax Javascript對象。檢出the API here。

該API對View代碼非常嚴格，它會觸發一個請求，並觸發視圖各部分的更新。

例如，這裏是一個commandButton你的差不多，但使用香草JavaScript來觸發AJAX代替f: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代碼，你實際上不能「調用java bean代碼」來獲取你想要的數據。但是您可以使用JSF Ajax將數據放入DOM中，並在回調中從DOM中獲取數據。

下面是一個例子，讓你開始，即獲取JSON格式的數據：

一個簡單的bean方法返回一個JSON編碼對象的字符串：

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> 

參見以下相關問題：

• Using JSF AJAX methods to keep JavaScript module scope
• JSF 2: How show different ajax status in same input?