Vaadin guides - how to add them correctly

Question

Vaadin guides - how to add them correctly

Good afternoon everybody.

I am creating a sales system that looks like this until now.

It shows my grid without any sales, as I am still implementing the system, we can also see the existence of 3 buttons (New, Change, Delete). So far so good.

When I click on the New button, a window opens

With the window open as shown in annex 2, we have 3 tabs (Sales, Delivery and Financial).

Each tab must have its own form and each form must have its own components (ComboBox, TextField, DatePicker ... etc)

From here I have countless problems, all caused by my lack of experience in programming, after all it's only a few months since I started learning.

My first problem:

With the current code, if I click on any of the three tabs, the same form, with the same components are displayed (see annex 3 and annex 4).

How do I ensure that each guide has its form and each form has its components?

See my code:

package br.com.fjsistemas.cadastros.view;

import java.time.LocalDate;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;

import javax.annotation.PostConstruct;

import org.springframework.beans.factory.annotation.Autowired;
import org.vaadin.textfieldformatter.CustomStringBlockFormatter;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.textfield.NumberField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.PropertyId;
import com.vaadin.flow.data.renderer.NumberRenderer;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

import br.com.fjsistemas.backend.Venda;
import br.com.fjsistemas.main.MainView;
import br.com.fjsistemas.service.VendaService;

@Route(value = "venda-view", layout = MainView.class)
@PageTitle("Lançamento de Vendas")
public class VendaView extends VerticalLayout {

    private static final long serialVersionUID = 1L;

    private HorizontalLayout hltVenda = new HorizontalLayout();
    Grid<Venda> grdVenda = new Grid<>(Venda.class, false);

    private HorizontalLayout hltBarraBotoes = new HorizontalLayout();
    Button btnNovo = new Button("Novo");
    Button btnAlterar = new Button("Alterar");
    Button btnExcluir = new Button("Excluir");

    private Dialog dlgJanela = new Dialog();

    private FormLayout fltCamposVenda = new FormLayout();

    HorizontalLayout layoutGuiaVenda = new HorizontalLayout();
    HorizontalLayout layoutGuiaVenda2 = new HorizontalLayout();
    HorizontalLayout layoutGuiaVenda3 = new HorizontalLayout();
    HorizontalLayout layoutGuiaVenda4 = new HorizontalLayout();
    VerticalLayout layoutSeparar = new VerticalLayout();
    VerticalLayout layoutSeparar2 = new VerticalLayout();
    VerticalLayout layoutSeparar3 = new VerticalLayout();

    @PropertyId("data")
    private DatePicker txtDataVenda = new DatePicker("Data Venda");

    @PropertyId("nomeCliente")
    private TextField txtNomeCliente = new TextField("Nome Cliente");

    @PropertyId("telefone")
    private TextField txtTelefone = new TextField("Telefone");

    @PropertyId("celular")
    private TextField txtCelular = new TextField("Celular");

    @PropertyId("produtos")
    private ComboBox<String> txtProdutos = new ComboBox<>("Produtos");

    @PropertyId("quantidade")
    private NumberField txtQuantidade = new NumberField("Quantidade");

    @PropertyId("unitario")
    private TextField txtValorUnitario = new TextField("Valor Unitário");

    @PropertyId("valorTotalVenda")
    private NumberField txtValorTotalItem = new NumberField("Valor Total Item");

    private HorizontalLayout htlDlgBarraBotoes = new HorizontalLayout();
    private Button btnSalvar = new Button("Salvar");
    private Button btnFechar = new Button("Fechar");
    private Button btnAdicionarItem = new Button("Adicionar Item");

    @Autowired
    VendaService vendaService;

    private List<Venda> listaVendas;
    private Venda venda;

    Binder<Venda> binderVenda = new Binder<>(Venda.class);

    public VendaView() {

    }

    @PostConstruct
    public void init() {
        configuraTela();

    }

    private void configuraTela() {

        setMargin(false);
        setPadding(false);

        configuraHltVenda();
        configuraFltBarraBotoes();
        configuraDlgJanela();
        populaGrdVenda();
        configuraBinder();

        add(hltVenda, hltBarraBotoes);
    }

    private void configuraFltBarraBotoes() {

        btnNovo.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnNovo.addClickListener(e -> {
            novoClick();
        });

        btnAlterar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnAlterar.addClickListener(e -> {
            alterarClick();
        });

        btnExcluir.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnExcluir.addClickListener(e -> {
            excluirClick();
        });

        hltBarraBotoes.add(btnNovo, btnAlterar, btnExcluir);
    }

    private void excluirClick() {

        if (venda != null) {
            listaVendas.remove(venda);
            vendaService.delete(venda);
            atualizaGrdVenda();
        }
    }

    private void configuraHltVenda() {
        hltVenda.setWidthFull();
        configuraGrdVenda();
        hltVenda.add(grdVenda);
    }

    private void configuraGrdVenda() {
        grdVenda.setHeight("820px");
        grdVenda.setWidthFull();

        grdVenda.addColumn(Venda::getId).setHeader("ID:").setAutoWidth(true);

        grdVenda.addColumn(Venda::getDataVenda).setHeader("Data Venda:").setAutoWidth(true).setKey("dataVenda");

        grdVenda.addColumn(Venda::getCliente).setHeader("Cliente:").setAutoWidth(true).setKey("cliente");

        grdVenda.addColumn(new NumberRenderer<>(Venda::getValorTotalVenda, "R$ %(,.2f", Locale.getDefault(), "R$ 0.00"))
                .setHeader("Valor Total:").setAutoWidth(true).setKey("valorTotalVenda");

        grdVenda.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_COLUMN_BORDERS);

        grdVenda.getColumns().forEach(col -> col.setAutoWidth(true).setSortable(true).setResizable(true));

        grdVenda.addItemClickListener(e -> {
            venda = e.getItem();
        });

    }

    private void configuraDlgJanela() {

        dlgJanela.setHeight("800px");
        dlgJanela.setWidth("860px");

        Tab vender = new Tab("Vendas");
        Div venderDiv = new Div();
        Tab entregar = new Tab("Entregas");
        Div entregarDiv = new Div();
        entregarDiv.setVisible(false);
        Tab financeiro = new Tab("Financeiro");
        Div financeiroDiv = new Div();
        financeiroDiv.setVisible(false);

        LocalDate now = LocalDate.now();
        txtDataVenda.setValue(now);
        
        txtNomeCliente.setWidth("380px");

        new CustomStringBlockFormatter.Builder().blocks(0, 2, 4, 4).delimiters("(", ")", "-").numeric().build()
                .extend(txtTelefone);

        new CustomStringBlockFormatter.Builder().blocks(0, 2, 5, 4).delimiters("(", ")", "-").numeric().build()
                .extend(txtCelular);

        txtQuantidade.setHasControls(true);

        Label valorTotalCompra = new Label("VALOR TOTAL DA COMPRA R$:");
        valorTotalCompra.getStyle().set("margin-top", "112px");

        TextField campoValorTotal = new TextField("Valor Total da Compra");
        campoValorTotal.getStyle().set("margin-top", "100px");

        layoutGuiaVenda.add(txtDataVenda);
        layoutGuiaVenda2.add(txtNomeCliente, txtTelefone, txtCelular);
        layoutGuiaVenda3.add(txtProdutos, txtQuantidade, txtValorUnitario, txtValorTotalItem);
        layoutGuiaVenda4.add(valorTotalCompra, campoValorTotal);
        fltCamposVenda.add(layoutGuiaVenda, layoutSeparar, layoutGuiaVenda2, layoutSeparar2, layoutGuiaVenda3,
                layoutSeparar3, layoutGuiaVenda4);
        
        vender.add(fltCamposVenda);

        Map<Tab, Component> tabsToPages = new HashMap<>();
        tabsToPages.put(vender, venderDiv);
        tabsToPages.put(entregar, entregarDiv);
        tabsToPages.put(financeiro, financeiroDiv);
        Tabs tabs = new Tabs(vender, entregar, financeiro);
        Div pages = new Div(venderDiv, entregarDiv, financeiroDiv);

        tabs.addSelectedChangeListener(event -> {
            tabsToPages.values().forEach(page -> page.setVisible(false));
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
        });

        dlgJanela.add(tabs, pages);

        btnSalvar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnSalvar.getStyle().set("margin-top", "180px");
        btnSalvar.getStyle().set("margin-left", "0px");
        btnSalvar.addClickListener(e -> {
            salvarClick();
        });

        btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnFechar.getStyle().set("margin-top", "180px");
        btnFechar.addClickListener(e -> {
            dlgJanela.close();
        });

        btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnAdicionarItem.getStyle().set("margin-top", "180px");
        btnAdicionarItem.addClickListener(e -> {

        });

        htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem);

        dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes);
    }

    private void salvarClick() {

        venda = binderVenda.getBean();

        boolean adicionarLista = venda.getId() == null ? true : false;

        vendaService.create(venda);

        if (adicionarLista) {
            listaVendas.add(venda);
        }
        atualizaGrdVenda();
        novaVenda();
        txtNomeCliente.focus();

        binderVenda.setBean(venda);

        if (adicionarLista) {
            dlgJanela.close();
        }
    }

    private void populaGrdVenda() {

        listaVendas = vendaService.read();
        atualizaGrdVenda();
    }

    private void atualizaGrdVenda() {
        grdVenda.setItems(listaVendas);
    }

    private void configuraBinder() {

        binderVenda.bindInstanceFields(this);

    }

    private void novoClick() {

        novaVenda();
        binderVenda.setBean(venda);

        dlgJanela.open();
        txtNomeCliente.focus();
    }

    private void alterarClick() {

        if (venda != null) {
            binderVenda.setBean(venda);

            dlgJanela.open();

        }
    }

    private void novaVenda() {
        venda = new Venda();
        venda.setCliente(" ");
        dlgJanela.close();

    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jen*_*son 5

欢迎来到编程世界。你当然还有很多东西要学，但是你能跳入新事物并接受挑战是非常好的！

查看您的标签代码。标签和内容似乎没问题。单击选项卡时，您会隐藏所有内容，然后找到与单击的选项卡匹配的内容，然后打开该选项卡的可见性。

但是，如果我读vender对了，顶部是选项卡按钮，并且您（以某种方式）将所有表单内容放入此选项卡标题中，并带有vender.add(fltCamposVenda);. 我认为该行应该是`venderDiv.add(fltCamposVenda);。

现在选项卡似乎在venderDiv、entregarDiv和之间切换内容financeiroDiv，但它们都是三个空的 div，因此当您切换它们的可见性时，屏幕上没有任何变化！

我可以给你两条建议吗？

1：考虑用英语编码。即使它不是您的母语，获得帮助也会变得更容易，而且您不会混合使用 Venda 和 VerticalLayout 这样的两种语言。

2：考虑将您的视图分成更小的类。现在您有一个视图、一个网格、一个对话框、一个标签页、多个表单，可能还有更多，所有这些都混合在同一个类中。这其中的任何部分都可以访问所有其他部分并导致意外错误，并且理解代码变得更加困难。例如private Dialog dlgJanela = new Dialog();，您可以使用public class JanelaDialog extends Dialog {inJanelaDialog.java代替，然后用初始化它JanelaDialog dlgJanela = new JanelaDialog()。通过这种方式，您可以在一个类中拥有网格视图，在另一个类中拥有对话框组件，并且代码变得更易于管理。

祝你好运：）

归档时间：	4 年，8 月前
查看次数：	128 次
最近记录：	4 年，8 月前