首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在单一视图中切换面板还是重定向到其他页面?

在单一视图中切换面板还是重定向到其他页面?
EN

Stack Overflow用户
提问于 2014-10-07 08:21:18
回答 1查看 674关注 0票数 0

我正在编程一个应用程序(而不是一个网站)的北面板,保持不变,西部面板的菜单和中心面板。西面面板和中央面板可以改变。

就概念而言,是在一个视图上工作并切换面板更好,还是应该创建几个页面?

例如:解决方案1:中心面板显示汽车图像,我在西部面板上选择一个汽车品牌,因此我用另一个菜单(该品牌的汽车型号)切换西部面板,并切换带有品牌标识图像的中心面板。

解决方案2:中心面板显示一个汽车图像,我在西部面板上选择一个汽车品牌,因此我重定向到另一个页面,在左边的菜单上显示该品牌的汽车型号,而在中间面板中,我选择了品牌标识的图像。

谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-10-07 09:12:37

我建议您在应用JSF模板时使用解决方案2。通过应用这种方法,您的页面易于扩展和重用。

这是我使用p:layoutui:composition等的例子。

layout.xhtml

代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Layout-menu</title>
    </h:head>
    <h:body>
        <p:layout>
            <p:layoutUnit position="west" 
                          resizable="true" 
                          size="250" 
                          minSize="40" 
                          maxSize="400">
                <h:form>
                    <p:menu>
                        <p:submenu label="Navigations">
                            <p:menuitem value="input" 
                                        outcome="inputText" 
                                        icon="ui-icon-star"/>
                            <p:menuitem value="dropdown" 
                                        outcome="selectOneMenu" 
                                        icon="ui-icon-star"/>
                        </p:submenu>
                    </p:menu>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <ui:insert name="source" />
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

inputText.xhtml

代码语言:javascript
复制
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="layout.xhtml">
    <ui:define name="source">
        <h:form>
            inputText
        </h:form>
    </ui:define>

</ui:composition>

selectOneMenu.xhtml

代码语言:javascript
复制
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="layout.xhtml">
    <ui:define name="source">
        <h:form>
            selectOneMenu
        </h:form>
    </ui:define>

</ui:composition>

您可以像下面这样在layout.xhtml页面上运行测试

您可以从其他站点(如JSF 2模板与Facelets示例使用Facelets模板等)查看有关模板的更多信息。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26231593

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档