2015-07-10 4 views
0

В настоящее время я глубоко погружаюсь в JSF, и у меня есть вопрос. Я использую JSF 2.2 (Mojarra 2.2.9) в небольшом приложении. Я создал пользовательский компонент для отображения структуры данных в виде меню. Код выглядит как что-то вроде этого:onClick Event on Element in customComponent

@FacesComponent(createTag = true, tagName = "UIRecursiveTree", namespace = "") 
public class UIRecursiveTree extends UIComponentBase { 

    @Override 
    public String getFamily() { 
     return ""; 
    } 

    @Override 
    public void encodeBegin(FacesContext context) throws IOException { 

    } 

    private void writeFolderStructure(Map<IContainer, ?> map, ResponseWriter writer, String prefix) { 
    } 

} 

Я раздел код, и я, конечно, установил семью и пространство имен, просто спрятал. Элемент управления имеет атрибут value, который получает LinkedHashMap, который отображается в моем приложении. Все работает нормально. В настоящее время я просто печатаю несколько ярлыков с помощью ResponseWriter, которые представляют мою структуру. Проблема в том, что структура может быть довольно большой, а механик для загрузки структуры не идеален, по крайней мере, если я загружаю все сразу, что занимает много времени. Итак, моя идея состоит в том, что я хочу привязать свои элементы (в настоящее время только метки, но будет заменен ссылками или что-то в этом роде) на событие onClick, которое заставляет компонент снова загружать новые значения (Ajax) (выборка дочерние элементы текущего элемента и добавьте их в мою структуру, чтобы значения загружались только тогда, когда они были необходимы)

Я знаю, что в некоторых библиотеках есть некоторые элементы управления, которые я мог бы использовать для сопоставления такой структуры, но я Я изучаю JSF и использую уже сделанные вещи, ничего не учит. =)

Итак, вопрос в том, как связать событие onClick с моими элементами, чтобы заставить компонент обновиться?

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

+0

В этом отношении я многому научился, посмотрев на источник «других компонентов». Дерево PrimeFaces - хороший пример, который, я думаю, может вас многому научить. Возможно, у BalusC есть ссылка на какой-то учебник, но ответ на этот вопрос здесь займет много времени (моего) времени, так как это не просто некоторые oneliner ... – Kukeltje

+0

Спасибо за ответ, я рассмотрю его. Конечно, я не хочу, чтобы вы писали мой код, мне просто нужны некоторые подсказки о том, как это можно сделать. Я использовал аналогичную технологию в прошлом, и там было возможно добавить событие, в котором я мог бы вызвать метод в моем бэкэнд, и мог бы дать ему идентификатор, который будет обновлен. Есть ли аналогичный подход в JSF? –

+2

Что касается основной проблемы, которую вы пытались решить, OmniFaces имеет компонент без разметки, который дает вам полную свободу вносить разметку и события. Конечно, это тоже с открытым исходным кодом http://showcase.omnifaces.org/components/tree.Что касается конкретного вопроса, то он слишком широк и длинный, но я считаю, что вы конкретно ищете «ClientBehaviorHolder». – BalusC

ответ

0

после немного назад и вперед, я смог решить свою проблему. Я отложил курс «сделай это полностью самостоятельно» и использовал управление деревом из PrimeFaces.

<p:tree id="treeMap" value="#{treeView.root}" var="container" dynamic="true" selectionMode="single" selection="#{treeView.selectedNode}"> 
    <p:ajax event="expand" update="treeMap" listener="#{treeView.onNodeExpand}" /> 
    <p:ajax event="select" update=":form" listener="#{treeView.onNodeSelect}" /> 

    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> 
     <h:outputText value="#{container.getName()}" /> 
    </p:treeNode> 
    <p:treeNode type="dummy" icon="ui-icon-video" rendered="false" styleClass="hidden" /> 

</p:tree> 

<h:commandButton value="Reset Tree" action="#{treeView.reset()}" /> 

Я использую эти actionListeners для создания своего дерева.

Первоначально я нахожу только первый уровень предмета, который является корнем. Все остальное загружается, когда я расширяю узел. Чтобы иметь возможность развернуть узел (мне нужен дочерний узел под корневым узлом), я добавляю фиктивный узел под каждый узел. Когда я нажимаю на символ расширения, я запускаю прослушиватель onExpand. Этот метод вызывает мою службу, которая извлекает дочерние узлы текущего узла и помещает их под узел в моем компоненте и обновляет дерево. Таким образом, я могу создать свою структуру, когда мне нужны дочерние узлы. Единственная проблема - проклятие под каждым узлом есть фиктивный узел. Я удаляю фикцию, когда я расширил родительский узел, но без полного обновления есть значок расширения перед каждым узлом, независимо от того, есть ли на нем узел или нет. Но в моем случае это не так важно.

Я надеюсь, что смогу помочь кому-то, кто ищет аналогичное решение.