使用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?