0

Display data from database on a rendered Grid

asked 2020-01-10 00:15:14 +0800

pablo123 gravatar image pablo123
31 1

Hi! I'm new in ZK and im trying to learn by myself, so my knolwedge is quite basic, also in java.

I need to display the data from my database at the time I open the web page. Im working in a simple Grid using render (I don't know how should I call it properly).

I have the database working already, tested doing a query in the main. All I need to know is how to bind the data to my project. What do I need, how should I start, which classes do the work?

Thank you!!

ZUL:

<div apply="main.java.grid.dynamic_renderer.ClienteRenderController">   
<grid model="${$composer.clientes}" 
    rowRenderer="main.java.grid.dynamic_renderer.ClienteRender"
    mold="paging" pageSize="10">
    <auxhead sclass="category-center">
       <auxheader colspan="6" rowspan="1">
            <image src="/img/logo.jpg" width="100%" height="220px" />
       </auxheader>
    </auxhead>  
    <columns menupopup = "auto-keep">
        <column width="6%" label="ID"/> 
        <column sort="auto(cliente)" tooltiptext="Ordenar" label="Clientes"/>
        <column sort="auto(fecha)" tooltiptext="Ordenar" label="Fecha"/>
        <column sort="auto(importe)" tooltiptext="Ordenar" width="10%" label="Importe"/>
        <column sort="auto(condiciones)" tooltiptext="Ordenar" label="Condiciones"/>
        <column sort="auto(metodo_pago)" tooltiptext="Ordenar" label="Método de pago"/>
    </columns>      
</grid>

ClienteRender.java

public class ClienteRender implements RowRenderer<Cliente>{

public void render(Row row, Cliente data, int index) { 

    row.appendChild(new Label(Integer.toString(index)));
    row.appendChild(new Label(data.getCliente()));
    row.appendChild(new Label(data.getFecha()));
    row.appendChild(new Label(data.getImporte()));
    row.appendChild(new Label(data.getCondiciones()));
    row.appendChild(new Label(data.getMetodo_pago()));
}

ClienteRenderController

public class ClienteRenderController extends SelectorComposer<Component>{

private static final long serialVersionUID = 1L;

private final ListModel<Cliente> clientes = new ListModelList<Cliente>(new ClienteData().getClientes());

public ListModel<Cliente> getClientes() {
    return clientes;
}
delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted
1

answered 2020-01-10 12:48:29 +0800

MDuchemin gravatar image MDuchemin
1511 1 5
ZK Team

Hi Pablo123,

Welcome to the forum :)

I haven't ran your code, but it looks like a solid first attempt. Do you encounter any specific issue at the moment?

I can see that you are already using ListModel / ListModelList for your model data, which is a good choice. ListModels will automatically update the view if you add or remove entries in the list, so it's pretty easy to update the content after user operations.

I also see that you are using a renderer to generate each row. Also good and standard. If you prefer the zul notation to java code, you could consider using a template instead. It's mostly the same, with a different syntax though :D For each entry in your ListModel, the grid will use the renderer or the template to generate a row (and fill in variables as you declared).

As for "how to bind the data", it looks to me that you have already done everything necessary? Assuming that new ClienteData().getClientes() returns your dataset, then it should be used by the grid based on what I read here.

A good thing to know if you want to do a more complicated ListModel init is that Composers have a overridable doAfterCompose() method, which is called when the components have been created, but before the page is rendered. It's a good place to do any data operation, such as retrieving database content, filling ListModels or updating the page properties.

Hope that helps :) Let me know if you'd like a more in-depth look into specific part of that grid loading from DB ;)

PS: there is also a bunch of resources available in the documentations. If you have already read the getting started guides, then you will find more info in the developer reference here.

link publish delete flag offensive edit

Comments

As a side note, you are assigning the model to the grid using $composer in zul. A more efficient way would be to use @Bind annotation in composer to have access to the grid component in your composer. From there, you can do myGrid.setModel(myModel) in java code directly.

MDuchemin ( 2020-01-10 18:29:45 +0800 )edit

This said, if you like the databinding notation, you could read-up on MVVM pattern for ZK. (You are using a composer, which is typically and MVC pattern tool). Both MVC and MVVM have valid use cases. I like MVVM slightly more for the model / view separation, but that's personal tastes.

MDuchemin ( 2020-01-10 18:32:18 +0800 )edit

Thank you for your response. I managed to get the grid working with my database. Now I'm encountering problems with the functionalities of the grid (like sorting, editing in row, etc). I searched a bit and considering your words I'll take a look at the Model thing you mentioned. Thank you so much :D

pablo123 ( 2020-01-11 00:22:51 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-01-10 00:15:14 +0800

Seen: 14 times

Last updated: Jan 10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More