2

我们的项目是用接缝开发的。客户更改 UI 并使用 jQuery 提供 UI 原型。现在我们在将 jQuery 集成到 seam 中遇到了很多麻烦。客户想要更丰富的 UI。

(1) 如何在 seam 中创建 modal-popup。有基本代码吗？？(2) 如何使用 jQuery 调用部分提交（或 ajax 调用）？换句话说，我如何从 jQuery 调用接缝动作？

4

5 回答 5

3

以下是我发现在使用来自 jQuery 等 Javascript 库的 UI Widgets 增强现有 Seam (2.x)+JSF 网页时有用的实现技术的分解（会放置更多超链接，但我仅限于 2 个）：

  • 导入 jQuery Javascript 库

    • 例如，如果您使用 JSF (Apache MyFaces)，您可以像在 HTML 中的<f:verbatim>标记内一样执行此操作：

      <f:verbatim>
    <source src="..path to jQuery.."></source>
</f:verbatim>

    • 或者，一个 JSF 组件库，如 Trinidad 或 RichFaces，通常会有一个用于此目的的组件。参见<trh:script（特立尼达）或<aj4:loadScript>（RichFaces）。

  • 使用 EL 从 Seam 自定义 jQuery UI 小部件（对话框、选项卡等）显示的文本（或行为）

    • 可以使用 Seam 资源包中的标题和文本来呈现 jQuery 对话框：

      <div id="dialog" title="#{messages.dialogTitle}">
    <p>#{messages.dialogText}</p>
</div>

    • EL 可以像这样使用来自 Seam 上下文的值来渲染任何 HTML 或 Javascript。这包括在客户端恢复状态 - 请参阅下面的 jQuery UI 选项卡组件示例。

  • 更新 Seam 组件中的状态/调用 JSF 操作

    • Seam Remoting (http://docs.jboss.org/seam/2.2.2.Final/reference/en-US/html/remoting.html) 允许任何 Seam 组件直接在 Javascript 中使用，就好像它是一个 Javascript 对象一样. 该文档包含有关如何在当前 Seam 对话中完成请求的说明。一个示例用例是存储用户选择的 jQuery UI 选项卡的状态，以便在同一个 Seam 对话中重新访问页面时，选项卡小部件将重新打开同一个选项卡。

      // Get a reference to the Javascript proxy for the Seam component that
// stores the selected tab state in the current Seam conversation
var tabStateSeamComponent = 
    Seam.Component.getInstance("tabComponent");

// Bind the tab select event to a function that updates
// the selected tab in the Seam component
$(function(){
    // Select the previously selected tab (or default) on
    // page load using the state stored in the Seam component
    $('#tabsId').tabs('select', 
                      #{tabComponent.getSelectedTab('#tabsId')});  

    $('#tabsId').bind('tabselect', 
        function(e,ui){
            // Seam remote calls will be made within the 
            // current Seam conversation
            Seam.Remoting.getContext()
                .setConversationId( #{conversation.id} );

            tabStateSeamComponent.setState('#tabsId', ui.index);
        });
    });

    • 如果需要，可以通过确定 JSF 组件库中的表单提交按钮如何实现表单提交，从 Javascript 中使用 JSF操作（例如与 Seam 导航规则集成）提交表单。例如，如果您使用 Trinidad，请使用<tr:commandButton action="actionString" ...>页面上的表单提交按钮，并使用 Firebug 或类似工具检查源中呈现的 HTML 按钮。或者，您可以只渲染按钮使其不可见（将 CSS 样式设置为display: none;）并使用 jQuery 使用按钮提交表单（例如$('#buttonId').click();）。您的 JSF 组件库可能有一个 Javascript API 以使编程表单峰会不那么麻烦。

  • 考虑使用 Facelets 将 jQuery UI 小部件快速打包为可重用的自定义 JSF 组件

    • （https://www.ibm.com/developerworks/java/library/j-facelets/）是一个很好的（JSF 1.2）教程。

    • 这将允许创建一个带有标签界面的模态对话框组件，例如

      <custom:dialog title="#{message.title}" 
               text="#{messages.text}" 
               action="jsfActionString" />

      其中实现在单独的 Facelet 文件中定义并使用 jQuery API。

于 2012-12-10T00:01:28.157 回答
2

如果您只是想创建 modal-popup 并调用部分提交，我建议您使用您可能已经在使用的 Richfaces 标签库。

要创建模态对话框，只需使用标签来创建模态面板：

<rich:modalPanel id="myModalPanel" minHeight="100" height="100" minWidth="100" width="100" zindex="2000">
    Insert content for modal panel here
</rich:modalPanel>

现在您可以将标签添加到按钮或链接以隐藏和显示模式面板：

<h:outputLink value="#" id="showLink">
    <rich:componentControl for="myModalPanel" attachTo="showLink" operation="show" event="onclick" />
</h:outputLink>


<h:outputLink value="#" id="hideLink">
        <rich:componentControl for="myModalPanel" attachTo="hideLink" operation="hide" event="onclick" />
</h:outputLink>

要进行 ajax 调用，您将使用要进行 ajax 调用的标签内的标签。因此，例如，如果您希望在字段文本更改时触发操作，您可以执行以下操作：

<h:inputText id="myField" value="#{myBean.myField}">
    <a4j:support ajaxSingle="true" event="onChange" reRender="list fields you want to rerender when the methods completes" action="#{myBean.methodToCall}" />
</h:inputText>
于 2009-06-10T23:24:43.340 回答
1

您可以通过 Seam Remoting 从 jQuery 调用 seam 组件。查看http://docs.jboss.org/seam/latest-2/reference/en-US/html/remoting.html了解更多信息。

于 2009-11-24T19:57:19.387 回答
0

您应该下载 jquery 库并<a:loadScript src="resource://jquery.js"/>在您的 xhtml 页面中使用标签。最重要的是用户"jQuery"而不是$ 或者你可以使用<rich:query组件。例如。:http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf;jsessionid=482C2B4F2C9C2DCE10573E0A02D468A9?c=jQuery&tab=usage

于 2011-12-16T12:43:42.687 回答
0

去看看icefaces和richfaces的组件展示，这两个 jsf AJAX 电缆库。

通过 icefaces 部分提交：

  <ice:outputText value="#{myBean.myField}" />
  <ice:form>
     <ice:commandButton action="#{myBean.doSomethingToField()}" value="button" />
  <ice:form>

带有icefaces的模态弹出窗口，您可以在此处阅读更多信息。

我对这两者的个人经验： Richfaces 与其他 jsf 库混合得更好，icefaces 具有更高级的 AJAX 功能（如服务器端推送，有点像彗星）基本的 AJAX 功能更容易设置和使用，但当你混合使用时有时会很困难与其他 jsf 库。两者都有不同的组件库，所以一定要检查它们；您以后不想混合这些库。

于 2009-06-11T17:19:39.713 回答