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();
}
}
Welcome to the world of programming. You still certainly have a bunch to learn, but it is very good that you are jumping into something new and taking that challenge!
Looking at your tabs code. The tabs and the content seems to be okay. When a tab is clicked, you hide all contents, then you find the one that matches the clicked tab, and you turn visibility on on that one.
If I however read this correctly, vender is the tab button at the top, and you put in (somehow) all the form content into this tab header with vender.add(fltCamposVenda);. I think that row should be `venderDiv.add(fltCamposVenda);.
Now tabs seem to switch content between venderDiv, entregarDiv, and financeiroDiv, but they are all three empty divs, so nothing changes on the screen when you switch their visibilities!
Can I offer you two pieces of advice?
1: Consider coding in English. Even if it is not your native tongue, getting help becomes a bunch easier, and you won't mix two languages like Venda and VerticalLayout.
2: Consider splitting your view into smaller classes. Now you have a view, a grid, a dialog, a tabsheet, multiple forms, and probably more, all mixed up in the same class. Any part of this can access all other parts and cause unexpected errors, and understanding the code becomes harder. E.g. instead of private Dialog dlgJanela = new Dialog();, you could do public class JanelaDialog extends Dialog { in JanelaDialog.java, and then instead initialize it with JanelaDialog dlgJanela = new JanelaDialog(). This way you have the grid view in one class and the dialog component in another, and the code becomes easier to manage.
Good luck :)
I need to put a grid in dialog but the grid is very small.
Grid<FermetureGagnanteTexte> fermetureGagnanteTexteGrid = new Grid<>(FermetureGagnanteTexte.class,false);
verticalLayout.add(fermetureGagnanteTexteGrid);
dialog.add(verticalLayout);`
dialog.open();
The grid is very small in the dialog.
Here is a solution for Vaadin 8 by using the Window Component.
By the description of your problem i assume that you did not set any size attributes with setWidth, setHeight or setSizefull. Even my code example is specific for Vaadin 8 it should also apply to the Dialog-component for Vaadin-Flow.
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Grid;
import com.vaadin.ui.UI;
import com.vaadin.ui.Window;
#SpringUI
public class TestUI extends UI {
#Override
protected void init(final VaadinRequest request) {
showGridInWindow();
}
private void showGridInWindow() {
final Window window = new Window("Window Caption");
final Grid<Object> grid = new Grid<>();
grid.addColumn(Object::toString).setCaption("Column 1");
grid.setSizeFull();
final List<Object> items = new ArrayList<>();
for (int i = 0; i < 50; i++) {
items.add(new String("String #" + i));
}
grid.setItems(items);
window.setContent(grid);
window.setWidth("600px");
window.setHeight("400px");
window.setModal(true);
window.setClosable(true);
getUI().addWindow(window);
}
}
If you are using Vaadin Flow, put the grid into a Div() instead of a VerticalLayout. Add the Div to the Dialog and set the Dialog's size. The Grid should fill the space and scroll.
Grid<FermetureGagnanteTexte> grid = new Grid<>(FermetureGagnanteTexte.class);
Dialog dialog = new Dialog();
Div div = new Div();
div.add(grid);
dialog.add(div);
dialog.setWidth("600px");
dialog.open();
S.
I'm developing a web application in Vaadin framework which has home page and few sub pages. What I want to achieve is to have fixed header and footer and in the center have content, that is being changed and fill all the space between header and footer. This is my MainUI class:
// HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Panel headerPanel = new Panel();
headerPanel.addStyleName("header");
final ActiveLink header = new ActiveLink(provider.getText(getLocale(), "application.title.name"), new ExternalResource(""));
header.addStyleName("header");
header.addListener((ActiveLink.LinkActivatedListener) (ActiveLink.LinkActivatedEvent event) -> {
getUI().getNavigator().navigateTo(Constant.View.MAIN);
});
headerPanel.setContent(header);
headerLayout.addComponent(headerPanel);
// FOOTER
final VerticalLayout footerLayout = new VerticalLayout(new Label("« FOOTER »"));
// CONTENT
final VerticalLayout contentLayout = new VerticalLayout();
final Panel contentPanel = new Panel(contentLayout);
contentPanel.addStyleName("content transparent no-border");
// MAIN = all together
final VerticalLayout mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout);
mainLayout.setSizeFull();
mainLayout.setExpandRatio(contentPanel, 1);
setContent(mainLayout);
// Register Views in navigator
navigator = new Navigator(this, contentPanel);
navigator.addView("", new MainView(provider));
navigator.addView(Constant.View.DICT_ADMIN, new DictAdminView(provider));
For changing the view in content I'm using Navigator like this in MainView class:
final ActiveLink link11 = new ActiveLink(provider.getText(getLocale(), "menu.links.dict.admin"), new ExternalResource(""));
link11.addStyleName("menulinks");
link11.addListener((LinkActivatedListener) (LinkActivatedEvent event1) -> {
getUI().getNavigator().navigateTo(Constant.View.DICT_ADMIN);
});
And finally this is my DictAdminView class:
public class DictAdminView extends GridLayout implements View {
private static final Logger LOGGER = LoggerFactory.getLogger(DictAdminView.class);
I18NProvider provider;
private final DictionaryDao dictionaryDao = new DictionaryDao();
private final TermDao termDao = new TermDao();
private final JPAContainer dictionaries = dictionaryDao.getContainer();
private final JPAContainer terms = termDao.getContainer();
public DictAdminView(I18NProvider provider) {
super(4, 6);
this.provider = provider;
}
#Override
public void enter(ViewChangeListener.ViewChangeEvent event) {
removeAllComponents();
this.addStyleName("dictAdminLayout");
this.setSizeFull();
this.setSpacing(true);
// Table with Dictionaries
Grid grid = new Grid(dictionaries);
grid.setId("dictList");
grid.setWidth("100%");
grid.setColumns(
grid.getColumns().get(1).getPropertyId(),
grid.getColumns().get(0).getPropertyId());
grid.getColumns().get(1).setWidth(80).setHeaderCaption("POS");
this.addComponent(grid, 0, 0, 0, 5);
dictionaries.sort(new Object[]{grid.getColumns().get(0).getPropertyId()}, new boolean[]{true});
// Table with Terms
Grid grid1 = new Grid(terms);
grid1.setId("termList");
grid1.setWidth("100%");
grid1.setColumns(
grid1.getColumns().get(5).getPropertyId(),
grid1.getColumns().get(0).getPropertyId());
this.addComponent(grid1, 1, 0, 3, 3);
terms.sort(new Object[]{grid1.getColumns().get(0).getPropertyId()}, new boolean[]{true});
terms.addContainerFilter(new IsNull("dictionaryId")); // show items w/o dict by default
this.addComponent(new Button("lol button"), 1, 5, 3, 5);
// Handle dictionary selection
grid.addSelectionListener(selectionEvent -> {
// Get selection from the selection model
Integer selectedDictionaryId = (Integer) ((SingleSelectionModel) grid.getSelectionModel()).getSelectedRow();
terms.removeAllContainerFilters();
if (selectedDictionaryId != null) {
terms.addContainerFilter(new Compare.Equal("dictionaryId.id", selectedDictionaryId));
Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.dictionary.selected"),
grid.getContainerDataSource().getItem(selectedDictionaryId).getItemProperty("name").toString());
}
else {
terms.addContainerFilter(new IsNull("dictionaryId")); // show items w/o dict by default
Utils.showInfoMessage(provider.getText(getLocale(), "msg.info.title.nothing.selected"), "");
}
});
}
}
My problem here is that I can't stretch the Grid to fill all space between header and footer. I've tried combination of setSizeFull() and setRowExtendRatio() but no success. Also I've tried to do it in CSS.
Is there a way how to stretch the grid either in Java or CSS?
Is the Navigator and changing View a good approach or is there a better way how to switch between content?
The solution is to use Vaadin add-on BorderLayout or built-in CustomLayout with own HTML and CSS.
I need to make a GUI interface (using BorderLayout) that looks like the image attached.(http://i.imgur.com/wRN4vlH.jpg)
the issue is that I am not allowed to restrict resizing and the buttons can not move to another row. I have the code working to display the proper image I dont know how to make it show the buttons without resizing and without the buttons moving. Any suggestions would be truly helpful
import java.awt.*;
import javax.swing.*;
class MyComponents extends JFrame{
MyComponents (String title){
JFrame frame = new JFrame(title);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
BorderLayout layout = new BorderLayout(2,3);
frame.setLayout(layout);
JPanel northPanel = new JPanel();
//JPanel westPanel = new JPanel();
JPanel centerPanel = new JPanel();
//JPanel eastPanel = new JPanel();
JTextField Text = new JTextField();
northPanel.add(new JLabel("Current Value:"));
northPanel.add(Text);
Text.setPreferredSize(new Dimension(50,24));
centerPanel.add(new JButton("+"));
centerPanel.add(new JButton("-"));
centerPanel.add(new JButton("Reset"));
centerPanel.add(new JButton("Quit"));
frame.add(northPanel, BorderLayout.NORTH);
frame.add(centerPanel, BorderLayout.CENTER);
frame.setVisible(true);
}
}
public class Homework7b {
public static void main (String [] args)
{
MyComponents Homework7b = new MyComponents("Part 02 Using getSource");
}
}
When i press a button it will display text, but how would i add style? such as position and color.
import flash.text.TextField;
var tf:TextField= new TextField();
convob.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
tf.text="hello world";
addChild(tf);
}
Something like this:
var format:TextFormat = new TextFormat();
format.color = 0x555555;
format.size = 18;
format.align = TextFormatAlign.CENTER;
format.bold = false;
tf.setTextFormat(format);
Check class reference for TextFormat: http://help.adobe.com/en_GB/FlashPlatform/reference/actionscript/3/flash/text/TextFormat.html