Manipular componentes ZK dentro de un componente macro.

Introducción

El uso de Componente macro es una técnica útil para modularizar páginas ZUL complejas [1], y permite mejorar la forma en que usamos el Framework ZK para el desarrollo de aplicaciones web dinámicas. En la mayoría de los casos de uso, los componentes macro constan de varios elementos fijos. Sin embargo, es posible que desee agregar más componentes dentro de un componente macro basado en algún tipo de acción. En este artículo mostraremos cómo se puede agregar componentes adicionales a un componente cableado dentro de un componente macro. Aquí vamos a utilizar un componente macro de tipo breadcrumb como ejemplo y crear dinámicamente componentes en su interior.

Escenario de ejemplo

En este ejemplo, hay un menú de la barra lateral con un componente de árbol, el componente macro de tipo breadcrumb va a cambiar la ruta de acceso de acuerdo con el evento clic sobre un treeitem.

Componente macro Breadcrumb

En primer lugar, crear un breadcrumb.zul como el siguiente para definir un componente macro.

<zk>

    <hlayout id="m_hlayout" hflex="1" height="20px"

        sclass="breadcrumb" spacing="10px">

    </hlayout>

</zk>

Página principal zul

A continuación, utilice el componente macro en la página principal de zul.

<?component name="breadcrumb" macroURI="/WEB-INF/macro/breadcrumb.zul" class="demo.macro.BreadCrumb"?>

<zk xmlns:n="native">

    <div vflex="1">

        <borderlayout hflex="1" vflex="1" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('demo.macro.MacroSampleVM')">

            <north border="none">

                <div>

                    <label value="Blog Title" />

                </div>

            </north>

            <east width="280px" border="none">

                <div>

                    <tree model="@bind(vm.menuModel)">

                        <template name="model" var="node">

                            <treeitem label="@load(node.data.label)" onClick="@command('loadArticle', node=node)" />

                        </template>

                    </tree>

                </div>

            </east>

            <center autoscroll="true" border="none">

                <vlayout>

                    <breadcrumb hflex="1" path="@bind(vm.path)" />

                    <vlayout>

                        article list

                    </vlayout>

                </vlayout>

</center>

        </borderlayout>

    </div>

</zk>

View Model

En View Model, registrar un evento de clic para el comando loadArticle y notificar el cambio de ruta de acceso al componente macro.

public class MacroSampleVM {

    private DefaultTreeModel<ArticleLabel> menuModel;

    private TreeNode<ArticleLabel> path;

    public MacroSampleVM() {

        // generate tree

        TreeNode<ArticleLabel> root = new DefaultTreeNode<ArticleLabel>(null, generateYears());

        menuModel = new DefaultTreeModel<ArticleLabel>(root);

    }

    @Command("loadArticle")

    @NotifyChange("path")

    public void loadArticle(@BindingParam("node") DefaultTreeNode<ArticleLabel> node) {

path = node;

    }

}

La clase del componente macro Breadcrumb

Por último, definir API setPath en BreadCrumb.java para añadir un nuevo componente dentro del componente macro

public class BreadCrumb extends HtmlMacroComponent {

    @Wire

    private Hlayout m_hlayout;

    //other member fields

    public BreadCrumb() {

        compose();

    }

    public TreeNode<ArticleLabel> getPath() {

        return _node;

    }

    public void setPath(TreeNode<ArticleLabel> node) {

        _node = node;

        _paths.clear();

        m_hlayout.getChildren().clear();

        generatePaths(node);

        //create components here and set parent to wired Hlayout

        A[] links = new A[_paths.size() - 1];

        for (int i = links.length - 1; i >= 0; i--) {

            TreeNode<ArticleLabel> n = _paths.pollLast();

            String label = n.getData().getLabel();

            links[i] = new A(label);

            links[i].setParent(m_hlayout);

        }

        _paths.clear();

    }

    private LinkedList<TreeNode<ArticleLabel>> generatePaths(TreeNode<ArticleLabel> node) {

//skip

    }

}

Comunicar los componentes internos con la Vista Modelo (View Model)

Como podemos ver en el ejemplo anterior, podemos crear componentes en el interior de un componente macro con un evento de clic definido en la Vista Modelo. Ahora le mostraremos cómo registrar un evento de un componente que acaba de agregar y pasarlo en la Vista Modelo.

En primer lugar, agregue un evento de interés el componente que acaba de agregar el componente de destino es el propio componente macro.

public class BreadCrumb extends HtmlMacroComponent {

    //omitted

    public void setPath(TreeNode<ArticleLabel> node) {

        //...

        A[] links = new A[_paths.size() - 1];

        for (int i = links.length - 1; i >= 0; i--) {

            TreeNode<ArticleLabel> n = _paths.pollLast();

            String label = n.getData().getLabel();

            links[i] = new A(label);

            links[i].setParent(m_hlayout);

            links[i].addForward(Events.ON_CLICK, this, "onPathClick", n);

}

        //...

    }

}

Entonces, podemos escuchar evento onPathClick en el .zul y se unen con MVVM.

<!-- omitted -->

<vlayout>

    <breadcrumb hflex="1" path="@bind(vm.path)"

        onPathClick="@command('loadArticle', node=event.data)" />

    <vlayout>

        article list

    </vlayout>

</vlayout>

<!-- omitted -->

Quedamos en espera de sus comentarios