Ajuda com Vaadin

Bom dia a todos.

Conforme imagem acima estou criando um janela de vendas dentro de uma grid, a janela foi criada certinha, mas está com alguns problemas de comportamento, que eu não sei como fazer para obter tais comportamentos.

1º problema: Tenho 3 guias(vendas, entregas, financeiro) cada guia terá varios componentes diferentes (ComboBox, TextField, DatePicker…etc).

Na guia selecionada(na imagem vendas) tenho um DatePicker, tres TextFields, um ComboBox, um NumberField e mais dois Textfields

O primeiro problema é: se eu clicar sobre a guia Entregas por exemplo terei o seguinte resultado:

Veja que alterei a guia, mas os componentes estão iguais, isso não pode ocorrer, a guia entregas (que eu ainda nem comecei a fazer) terá outros componentes

,
o mesmo problema ocorre em financeiro

Vamos começar apenas com este problema, mas tem outros que irei postando conforme for resolvendo.

Como faço para que apenas a guia vendas, receba os componentes? Lembrando que as guias Entregas e Financeiro, eu nem comecei a fazer…então elas deveriam estar em branco creio eu.

Obg desde ja por sua atenção

Código completo atual

package br.com.fjsistemas.cadastros.view;

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

import javax.annotation.PostConstruct;

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

import com.vaadin.flow.component.Text;
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.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.Produto;
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();

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

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

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

	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::getNomeCliente).setHeader("Cliente:").setAutoWidth(true).setKey("nomeCliente");

		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");
		Tab entregar = new Tab("Entregas");
		Tab financeiro = new Tab("Financeiro");

		Tabs tabs = new Tabs();
		tabs.add(vender, entregar, financeiro);

		HorizontalLayout layoutGuiaVenda = new HorizontalLayout();
		VerticalLayout layoutSeparar = new VerticalLayout();
		HorizontalLayout layoutGuiaVenda2 = new HorizontalLayout();

		DatePicker dataVenda = new DatePicker("Data Venda");
		dataVenda.setWidth("50%");
		LocalDate now = LocalDate.now();
		dataVenda.setValue(now);
		TextField cliente = new TextField("Cliente");
		cliente.setWidth("50%");
		TextField telefone = new TextField("Telefone");
		telefone.setWidth("50%");
		TextField celular = new TextField("Celular");
		celular.setWidth("50%");

		ComboBox<Produto> produtos = new ComboBox<>("Produtos");
		produtos.setWidth("50%");
		NumberField quantidade = new NumberField("Quantidade");
		quantidade.setHasControls(true);
		quantidade.setWidth("50%");
		TextField valorUnitario = new TextField("Valor Unitário");
		valorUnitario.setWidth("50%");
		TextField valorTotal = new TextField("Valor Total");
		valorTotal.setWidth("50%");

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

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

		layoutGuiaVenda.add(dataVenda, cliente, telefone, celular);
		layoutGuiaVenda2.add(produtos, quantidade, valorUnitario, valorTotal);
		fltCamposVenda.add(layoutGuiaVenda, layoutSeparar, layoutGuiaVenda2);
		vender.add(fltCamposVenda);
		
		dlgJanela.add(tabs);

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

		btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
		btnFechar.getStyle().set("margin-top", "500px");
		btnFechar.addClickListener(e -> {
			dlgJanela.close();
		});
		
		btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
		btnAdicionarItem.getStyle().set("margin-top","500px");
		btnAdicionarItem.addClickListener(e -> {
			
		});
		
		Text valorTotalCompra = new Text("VALOR TOTAL DA COMPRA R$:");
		
		
		htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem);

		dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes, valorTotalCompra);
	}

	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.setNomeCliente(" ");
		dlgJanela.close();

	}
}

Código apenas da janela

private void configuraDlgJanela() {

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

		Tab vender = new Tab("Vendas");
		Tab entregar = new Tab("Entregas");
		Tab financeiro = new Tab("Financeiro");

		Tabs tabs = new Tabs();
		tabs.add(vender, entregar, financeiro);

		HorizontalLayout layoutGuiaVenda = new HorizontalLayout();
		VerticalLayout layoutSeparar = new VerticalLayout();
		HorizontalLayout layoutGuiaVenda2 = new HorizontalLayout();

		DatePicker dataVenda = new DatePicker("Data Venda");
		dataVenda.setWidth("50%");
		LocalDate now = LocalDate.now();
		dataVenda.setValue(now);
		TextField cliente = new TextField("Cliente");
		cliente.setWidth("50%");
		TextField telefone = new TextField("Telefone");
		telefone.setWidth("50%");
		TextField celular = new TextField("Celular");
		celular.setWidth("50%");

		ComboBox<Produto> produtos = new ComboBox<>("Produtos");
		produtos.setWidth("50%");
		NumberField quantidade = new NumberField("Quantidade");
		quantidade.setHasControls(true);
		quantidade.setWidth("50%");
		TextField valorUnitario = new TextField("Valor Unitário");
		valorUnitario.setWidth("50%");
		TextField valorTotal = new TextField("Valor Total");
		valorTotal.setWidth("50%");

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

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

		layoutGuiaVenda.add(dataVenda, cliente, telefone, celular);
		layoutGuiaVenda2.add(produtos, quantidade, valorUnitario, valorTotal);
		fltCamposVenda.add(layoutGuiaVenda, layoutSeparar, layoutGuiaVenda2);
		vender.add(fltCamposVenda);
		
		dlgJanela.add(tabs);

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

		btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
		btnFechar.getStyle().set("margin-top", "500px");
		btnFechar.addClickListener(e -> {
			dlgJanela.close();
		});
		
		btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
		btnAdicionarItem.getStyle().set("margin-top","500px");
		btnAdicionarItem.addClickListener(e -> {
			
		});
		
		Text valorTotalCompra = new Text("VALOR TOTAL DA COMPRA R$:");
		
		
		htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem);

		dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes, valorTotalCompra);
	}

tentei isso…mas não obtive sucesso

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

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

		HorizontalLayout layoutGuiaVenda = new HorizontalLayout();
		VerticalLayout layoutSeparar = new VerticalLayout();
		HorizontalLayout layoutGuiaVenda2 = new HorizontalLayout();

		DatePicker dataVenda = new DatePicker("Data Venda");
		dataVenda.setWidth("50%");
		LocalDate now = LocalDate.now();
		dataVenda.setValue(now);
		TextField cliente = new TextField("Cliente");
		cliente.setWidth("50%");
		TextField telefone = new TextField("Telefone");
		telefone.setWidth("50%");
		TextField celular = new TextField("Celular");
		celular.setWidth("50%");

		ComboBox<Produto> produtos = new ComboBox<>("Produtos");
		produtos.setWidth("50%");
		NumberField quantidade = new NumberField("Quantidade");
		quantidade.setHasControls(true);
		quantidade.setWidth("50%");
		TextField valorUnitario = new TextField("Valor Unitário");
		valorUnitario.setWidth("50%");
		TextField valorTotal = new TextField("Valor Total");
		valorTotal.setWidth("50%");

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

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

		layoutGuiaVenda.add(dataVenda, cliente, telefone, celular);
		layoutGuiaVenda2.add(produtos, quantidade, valorUnitario, valorTotal);
		fltCamposVenda.add(layoutGuiaVenda, layoutSeparar, layoutGuiaVenda2);
		vender.add(fltCamposVenda);
	
		
		dlgJanela.add(tabs, pages);

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

		btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
		btnFechar.getStyle().set("margin-top", "500px");
		btnFechar.addClickListener(e -> {
			dlgJanela.close();
		});
		
		btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
		btnAdicionarItem.getStyle().set("margin-top","500px");
		btnAdicionarItem.addClickListener(e -> {
			
		});
		
		Text valorTotalCompra = new Text("VALOR TOTAL DA COMPRA R$:");
		
		
		htlDlgBarraBotoes.add(btnSalvar, btnFechar, btnAdicionarItem);

		dlgJanela.add(fltCamposVenda, htlDlgBarraBotoes, valorTotalCompra);
	}

up

Cara, nunca vi tanta trabalheira pra fazer uma tela tao simples. Nao seria melhor investimento largar esse Vaadin?

rs…respeito sua opinião, mas estou disposto a estuda-lo a fundo…sou iniciante, sei que existem outras maneiras…mas quero fazer com Vaadin

se ainda assim vc puder e quiser ajudar…fico agradecido…obg!

up

up

up

up