如何将服务器端和客户端的 tabview 组件与 jsf 匹配？

Posted 2023-05-08

【中文标题】如何将服务器端和客户端的 tabview 组件与 jsf 匹配？

【英文标题】：How to matching tabview component in server and client side with jsf?

【发布时间】：2012-11-02 17:16:42

【问题描述】：

我有两个问题如下；

我的页面左侧有一个菜单和子菜单，页面中心有一个 Tabview。当单击 menuItem 时，我使用 javascript 动态地将选项卡添加到 tabview 但我无法从支持 bean 中获取 tabview 的选项卡。在添加 javascript 之前，我只能阅读第一个选项卡。 所以我想在服务器端和客户端同步匹配tabview。

我该怎么做？

第二个； 当我关闭选项卡时，我在 onTabClos​​e 方法中使用 TabClos​​eEvent 但事件始终为空。可能会通过将 tabview 与服务器和客户端匹配来解决 我不知道。

代码如下。

请给我建议。

谢谢..

xhtml 代码：

<p:menuitem value="#itemMenu.menuAck" 
            action="#MenuBean.OpenPage(itemMenu.pageName)" 
            ajax="true"
            oncomplete="handleTabViewEvent(args);" />

<script type="text/javascript">
   function handleTabViewEvent(args) 
       alert('Add tab here..');
    
</script>

bean 代码：

public void OpenPage(String pageName) 
     String s = "Divert to handleTabViewEvent function";


public void onTabClose(TabCloseEvent event)   
     FacesContext context = FacesContext.getCurrentInstance();
     TabView tw = (TabView)context.getViewRoot().findComponent("centerForm:tw");
     String s = "I must delete tab here from tw which closed. 
                 But event does not give me tab information. It is always null. And tw has old values";

【问题讨论】：

如果您通过 javaScript 在客户端添加一个组件，那么在服务器端不可用是有意义的。您到底想从该选项卡中的 serverSide 访问什么？

一般思路 您可以使用隐藏输入，使用新选项卡名称填充它，而不是 process 它使用 ajax 到服务器（在服务器上使用它来生成新的选项卡）并更新选项卡容器

我想用 javascript 添加一个标签，但是如果用户再次点击相同的菜单，它不应该添加相同的标签。我在会话中保留打开的选项卡，但是当用户关闭选项卡时，我无法获取已关闭的选项卡信息。我必须从会话中删除此选项卡。如何在 javascript 中清除会话？

如果您只是想避免重复打开选项卡，您可以在客户端进行 :) 设置一些 cookie 并在您想要添加/不添加选项卡时检查它们的值。

【参考方案1】：

我用 javascript 动态地将标签添加到 tabview

首先这是完全错误的。

您需要使用 JSF 而不是 JS 添加选项卡。现在 JSF 完全不知道更改的客户端状态，并且永远不会知道新选项卡。任何解决方法最终都只会比仅通过 JSF 而不是 JS 来实现更丑陋且更难维护。

另见：

How to add button for adding new tabs near last tab? What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?

【讨论】：

感谢我的朋友，我在服务器端添加了标签，但是当刷新或回发页面时，标签（页面）的所有内容都很清晰，所以我使用了 javascript。

您应该只使用了正确的 bean 范围。另请参阅第一个“另请参阅”链接，了解类似方法的具体示例。