Дерево простых лиц - выборка не обновлена ​​в <p: layout /> с помощью <ui: include /> - PullRequest
Новая
       7

Дерево простых лиц - выборка не обновлена ​​в <p: layout /> с помощью <ui: include />

0 голосов
/ 25 мая 2011

Я экспериментирую с использованием дерева навигации с <p:layout /> и <ui:include />, которое я хочу динамически обновлять <ui:include /> при нажатии на узел дерева. 

<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view contentType="text/html">
<h:head></h:head>
<h:body>
<p:layout fullPage="true">
   <p:layoutUnit position="left" width="200" resizable="true" collapsible="true">
      <h:form>
         <p:tree expanded="true" nodeSelectListener="#{menutree.onTreeNodeClicked}" id="tree"
               value="#{menutree.menuTree}" var="node" update="test,tree"
               selection="#{menutree.selectedNode}" selectionMode="single">
            <p:treeNode>
               <h:outputText value="#{node}" />
            </p:treeNode>
         </p:tree>
      </h:form>
   </p:layoutUnit>
       <p:layoutUnit position="center" resizable="true" collapsible="false">
      <h:panelGroup id="test" layout="block">
         <ui:include src="${menutree.selectedNode.name}.xhtml" />
      </h:panelGroup>
   </p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>

вспомогательный компонент выглядит следующим образом: 

@SessionScoped
public class MenuTreeBean implements Serializable
{
    private final Log logger = LogFactory.getLog(getClass());

    private final TreeNode root;

    private TreeNode selectedNode;

    public MenuTreeBean()
    {
        root = new DefaultTreeNode("root", null);

        CustomTreeNode aaRoot = new CustomTreeNode("welcome", "Widgets", root);

        new CustomTreeNode("1", "Editor", aaRoot);
        new CustomTreeNode("2", "Calendar", aaRoot);

        setSelectedNode(aaRoot);
    }

    public TreeNode getMenuTree()
    {
        return root;
    }

    public TreeNode getSelectedNode()
    {
        logger.info("Selected: " + selectedNode);
        return selectedNode;
    }

    public void setSelectedNode(TreeNode selectedNode)
    {
        logger.info("Selected: " + selectedNode);
        this.selectedNode = selectedNode;
    }

    public void onTreeNodeClicked(NodeSelectEvent e)
    {
        logger.info("Clicked: " + e.getTreeNode());
        selectedNode = e.getTreeNode();
    }
}

Соответственно, есть еще несколько маленьких страниц, которые не содержат ничего, кроме виджета Primefaces - или просто HTML.

Это дает такой макет в сетибраузер: 

------------------------------------
| Widget      |                    |
|   Editor    |                    |
|   Calendar  |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
|             |                    |
------------------------------------

У меня проблема

  • , когда я нажимаю на узел редактора выше, он выделяется и подсвечивается, а <ui:include /> загружает страницу / блокЯ запросил
  • , когда нажимаю на узел «Календарь» выше, он выделяется и подсвечивается, а <ui:include /> загружает страницу / чанк, который я запрашивал
  • , когда я снова нажимаю на узел «Редактор» выше, он не был выбран, но <ui:include /> по-прежнему загружает запрошенную мной страницу / чанк;узел календаря все еще выделен

Если я отключу атрибут обновления на <p:tree />, выбор и выделение узла дерева будут работать, как и ожидалось;за исключением того, что мне не хватает динамического <ui:include />, который мне был нужен.

Что касается вышеперечисленных трассировок, виджеты изначально выбраны.Затем, когда я нажал «Редактор», последовательность методов была 

2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Widgets
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Widgets
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean setSelectedNode
INFO: Selected: Editor
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean onTreeNodeClicked
INFO: Clicked: Editor
2011/05/24 23:06:25 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Editor

Но когда я нажал «Календарь», последовательность стала 

2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Editor
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Editor
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean setSelectedNode
INFO: Selected: Editor
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean onTreeNodeClicked
INFO: Clicked: Calendar
2011/05/24 23:07:15 com.foo.bar.MenuTreeBean getSelectedNode
INFO: Selected: Calendar

Интересно, я что-то пропустил, чтобы приЯ щелкаю узлы дерева, <ui:include /> загружается, и узел дерева подсвечивается?

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 25 мая 2011

Я согласен с maple_shaft, что вы должны использовать шаблон для этого.Однако, если вам нужно придерживаться этого взгляда на атрибут update элемента p: tree .Там вы указываете идентификатор элемента для обновления, который может быть вашим элементом ui: include , поскольку это UIComponent.

В моем приложении я также использую p:дерево для навигации, но я предпочитаю принудительно перенаправлять при нажатии на узел.Причиной этого является то, что полученная страница является закладкой браузера.Другими словами, целевой URL заканчивается в текстовом поле адреса браузера.

То, как я это делаю, заключается в следующем компоненте: 

public void onNodeSelect(NodeSelectEvent event) {

    selectedNode = event.getTreeNode();
    String url =  // compute some URL to move to based on selectedNode

    FacesContext fc = FacesContext.getCurrentInstance();
    ExternalContext ec = fc.getExternalContext();
    try {
        ec.redirect(url);
    } catch (IOException ex) {
        Logger.getLogger(Navigation.class.getName()).log(Level.SEVERE, null, ex);
    }
}

Повторение: используйте шаблон дажеесли это означает для вас кривую обучения и фактически заставит ваше веб-приложение быть более сплоченным и дисциплинированным.

0 голосов
/ 26 мая 2011

В конце концов я решил проблему самостоятельно.

Оказалось, что в Javascript есть проблема, что узел дерева не будет выделен, когда я укажу <p:tree update="" /> для нескольких пунктов назначения.

Итак, после прочтения кода и документов YUI, наконец, я обошел проблему, добавив функцию Javascript в обработчик onNodeClick <p:tree />, чтобы принудительно выделить выделенный узел.

Функция просто заставляет подсвечивать выбранный узел. 

function highlightNode(e)
{
    e.node.highlight();
}

По крайней мере, работает в моей ситуации с использованием официальных jar-файлов Primefaces:)

0 голосов
/ 25 мая 2011

Я могу понять, что вы пытаетесь сделать, но я не обязательно думаю, что это лучший подход.

Вместо того, чтобы динамически изменять атрибут src тега <ui:include, на который вы должны обратить вниманиеглавная страница шаблона, от которой все дочерние страницы будут наследовать свое базовое содержимое.

На своей странице шаблона вы можете определить layoutUnit следующим образом: 

<p:layoutUnit position="center" scrollable="true">
  <ui:insert name="content">
  <!-- content would go here -->
  </ui:insert>
</p:layoutUnit>

Затем на ваших дочерних страницах вы должны указатьтег композиции. 

<ui:composition template="/WEB-INF/templates/master.xhtml">

Теперь ваши узлы дерева вместо динамического обновления атрибута src могут просто перенаправить на соответствующий URL-адрес, и ваш узел дерева и содержимое главной страницы будут загружены соответствующим образом.

...