0

我是 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 文件中提取的，只是被吞入 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;
    }
});});

现在，我想要的是能够调用 JSF Managed Bean 的方法，该方法将在后端执行一些逻辑，然后返回我可以添加到 DOJO 的内存存储并将其传递到 GanttGrid 的 JSON 数据，但是，我似乎无法弄清楚如何使用 ajax 请求来解决这个问题。

这是我在 XHTML 文件中成功从 bean 获取数据并将其显示在屏幕上的内容：

<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 中使用“on”功能，但这只允许我捕获按钮单击（据我所知）......我想不出一种方法来知道执行何时完成，以便我可以从 bean 中获取数据并创建图表。最大的问题是我不知道如何使用 DOJO 请求模块调用 JSF bean。

我希望有人知道一个简单的方法来实现这一点。提前感谢您的帮助！如果您需要更多信息，请告诉我...我试图包含所有相关代码。

-保罗

4

1 回答 1

2

好吧，JSF 不允许使用 JavaScript 调用任意 Java 代码。它只允许您使用Javascript 对象触发调用调用 bean 方法的请求，如果 JSF 组件触发了它（例如，commandButton单击了 a） 。jsf.ajax在这里查看API。

这个 API 对 View 代码非常严格，它会触发请求以及对部分视图的更新。

例如，这里commandButton与您的非常相似，但使用 vanilla 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>

另请参阅这些相关问题：

于 2013-03-21T12:49:50.777 回答