Vaadin指南-如何正确添加它们

大家下午好

我正在创建一个销售系统，直到现在看起来都是这样

它显示了我的网格，没有任何销售，因为我仍在实施该系统，我们还可以看到3个按钮（新建、更改、删除）的存在。到目前为止还不错

单击“新建”按钮时，会打开一个窗口

窗口如附件2所示打开时，我们有3个选项卡（销售、交付和财务）

每个选项卡必须有自己的表单，每个表单必须有自己的组件（组合框、文本字段、日期选择器等）

在这里我遇到了无数的问题，都是由于我缺乏编程经验造成的，毕竟我开始学习才几个月

我的第一个问题是：

对于当前代码，如果我单击三个选项卡中的任何一个，将显示具有相同组件的相同表单（见附件3和附件4）

我如何确保每个指南都有它的形式，每个形式都有它的组件

请参阅我的代码：

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();

    }
}

package br.com.fjsistemas.cadastros.view；
导入java.time.LocalDate；
导入java.util.HashMap；
导入java.util.List；
导入java.util.Locale；
导入java.util.Map；
导入javax.annotation.PostConstruct；
导入org.springframework.beans.factory.annotation.Autowired；
导入org.vaadin.textfieldformatter.CustomStringBlockFormatter；
导入com.vaadin.flow.component.component；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.button.ButtonVariant；
导入com.vaadin.flow.component.combobox.combobox；
导入com.vaadin.flow.component.datepicker.datepicker；
导入com.vaadin.flow.component.dialog.dialog；
导入com.vaadin.flow.component.formlayout.formlayout；
导入com.vaadin.flow.component.grid.grid；
导入com.vaadin.flow.component.grid.GridVariant；
导入com.vaadin.flow.component.html.Div；
导入com.vaadin.flow.component.html.Label；
导入com.vaadin.flow.component.orderedlayout.HorizontalLayout；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.component.tabs.Tab；
导入com.vaadin.flow.component.tabs.tabs；
导入com.vaadin.flow.component.textfield.NumberField；
导入com.vaadin.flow.component.textfield.textfield；
导入com.vaadin.flow.data.binder.binder；
导入com.vaadin.flow.data.binder.PropertyId；
导入com.vaadin.flow.data.renderer.NumberRenderer；
导入com.vaadin.flow.router.PageTitle；
导入com.vaadin.flow.router.Route；
导入br.com.fjsistemas.backend.Venda；
导入br.com.fjsistemas.main.MainView；
导入br.com.fjsistemas.service.VendaService；
@路线（value=“venda view”，layout=MainView.class）
@页面标题（“Lançamento de Vendas”）
公共类VendaView扩展了垂直布局{
私有静态最终长serialVersionUID=1L；
私有HorizontalLayout hltVenda=新HorizontalLayout（）；
grdVenda网格=新网格（Venda.class，false）；
私有HorizontalLayout hltBarraBotoes=新HorizontalLayout（）；
按钮btnNovo=新按钮（“Novo”）；
按钮btnAlterar=新按钮（“替代按钮”）；
按钮btnExcluir=新按钮（“排除”）；
私有对话框dlgJanela=新建对话框（）；
私有FormLayout fltCamposVenda=新FormLayout（）；
HorizontalLayout layoutGuiaVenda=新的HorizontalLayout（）；
HorizontalLayout布局guiavenda2=新的HorizontalLayout（）；
HorizontalLayout layoutGuiaVenda3=新的HorizontalLayout（）；
HorizontalLayout layoutGuiaVenda4=新的HorizontalLayout（）；
VerticalLayout LayoutSepar=新的VerticalLayout（）；
VerticalLayout LayoutSepar2=新的VerticalLayout（）；
VerticalLayout LayoutSepar3=新的VerticalLayout（）；
@属性ID（“数据”）
私有日期采集器txtDataVenda=新日期采集器（“数据采集器”）；
@不动产ID（“命名客户”）
私有文本字段txtNomeCliente=新文本字段（“Nome Cliente”）；
@地产ID（“telefone”）
私有文本字段txtTelefone=新文本字段（“Telefone”）；
@不动产ID（“celular”）
私有文本字段txtcellular=新文本字段（“Celular”）；
@不动产ID（“产品”）
私有组合框txtProdutos=新组合框（“Produtos”）；
@不动产ID（“量化数据”）
私有NumberField txtQuantidade=新NumberField（“Quantidade”）；
@地产ID（“unitario”）
私有文本字段txtValorUnitario=新文本字段（“Valor Unitario”）；
@不动产ID（“valorTotalVenda”）
private NumberField txtValorTotalItem=新的NumberField（“Valor总项目”）；
私有水平布局htldlgbarabotoes=新水平布局（）；
专用按钮btnSalvar=新按钮（“Salvar”）；
专用按钮btnFechar=新按钮（“Fechar”）；
私有按钮BTnadicionariem=新按钮（“Adicionar项”）；
@自动连线
供应商服务供应商服务；
私人名单；
私人文达文达；
活页夹binderVenda=新活页夹（Venda.class）；
公共文达维{
}
@施工后
公共void init（）{
configuraTela（）；
}
私有void configuraTela（）{
设置边距（假）；
设置填充（假）；
configuralTvenda（）；
配置fltbarabotoes（）；
配置Gjanela（）；
populardvenda（）；
配置活页夹（）；
添加（hltVenda、hltBarraBotoes）；
}
私有无效配置fltbarabotoes（）{
btnNovo.addThemeVariants（按钮变量LUMO_PRIMARY）；
btnNovo.addClickListener（e->{
novoClick（）；
});
btnAlterar.addThemeVariants（ButtonVariant.LUMO_PRIMARY）；
btnAlterar.addClickListener（e->{
alteraclick（）；
});
btnExcluir.addThemeVariants（ButtonVariant.LUMO_PRIMARY）；
btnExcluir.addClickListener（e->{
排除单击（）；
});
添加（btnNovo、btnAlterar、btnExcluir）；
}
私有void excluirClick（）{
if（venda！=null）{
listaVendas.remove（文达）；
vendaService.delete（venda）；
atualizaGrdVenda（）；
}
}
私有无效配置hltvenda（）{
赫特文达