Question

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

（1）如何在seam中创建模态弹出窗口。任何基本代码?? （2）如何使用jQuery调用部分提交（或ajax调用）？换句话说，如何从jQuery调用seam动作？

Answer 1

以下是我发现有用的实现技术的细分，当使用来自JQuery库的jQuery库（可能会添加更多超链接，但我仅限于2）使用UI Widgets增强现有Seam（2.x）+ JSF网页时：< / p>

导入jQuery Javascript库
- 例如，如果您使用的是JSF（Apache MyFaces），则可以像在<f:verbatim>标记内的HTML中那样执行此操作：
```
<f:verbatim>
    <source src="..path to jQuery.."></source>
</f:verbatim>
```
- 或者，像Trinidad或RichFaces这样的JSF组件库通常会有一个组件用于此目的。请参阅<trh:script (Trinidad)或<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导航规则集成）表格提交。例如，如果您使用特立尼达，请在页面上使用<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。

Answer 2

如果您只是想创建模态弹出窗口并调用部分提交，我建议使用您可能已经使用的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>

Answer 3

您可以通过Seam Remoting从jQuery调用seam组件。有关详细信息，请查看http://docs.jboss.org/seam/latest-2/reference/en-US/html/remoting.html。

Answer 4

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

通过icefaces部分提交：

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

带有冰面的

modal popup你可以在这里阅读更多信息。

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

Answer 5

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

如何使用jQuery集成seam

5 个答案: