Buttons not centered on a grid

24 views
Skip to first unread message

Rubén V

unread,
Jan 15, 2021, 11:29:06 PM1/15/21
to CodenameOne Discussions
Hi,

As the image shows and included 6 buttons inside a container "Container (new GridLayout (3, 2))". Buttons are created by a single method:
private Button creaBoton(String texto, boolean activa) { String uiid = activa ? "Dialog" : "Dialog"; Button btBoton = new Button(texto, uiid); btBoton.getStyle().setAlignment(Component.CENTER); btBoton.setTextPosition(Component.BOTTOM); btBoton.setEnabled(activa); return btBoton; }



I created my own UIID, but for testing purposes I am using the UIID "Dialog" that comes with the theme you select. In other words: all buttons should show the same design and as the image shows it is not. It is important to mention that with the buttons I am implementing the Badge api (I proved removing them and I got the same problem). below the rest of my code:

public FormaAccion(Form fmRetorno, Visita vTa) { super(new BorderLayout()); formaVisita = FormaVisita.getInstancia(fmRetorno); singleton = Singleton.getInstancia(); uSr = UsuarioService.getUsuario(); idioma = new Idioma(Preferences.get("idioma", ESPANOL)); this.setTitle(Preferences.get("nombreEmpresa", "no encontrado")); this.getToolbar().setBackCommand("", e -> retorno(fmRetorno)); Orden1 o = new Orden1(); o.visitaId.set(vTa.visitaId.get()); ArrayList aOrden = consultaTablas(o, ORDEN1); seleccionOrdenesPorVisita(aOrden, vTa.visitaId.get()); Accion a = new Accion(); a.id.set(Long.parseLong(vTa.visitaId.get().toString() + vTa.tipoVisita.get().toString())); a.visitaId.set(vTa.visitaId.get()); ArrayList aAccion = consultaTablas(a, ACCION); Orden1 oRd = seleccionOrdenesPorTipo(aOrden, VISITA_VENTA); Orden1 cTz = seleccionOrdenesPorTipo(aOrden, VISITA_COTIZAR); Accion aFt = seleccionAccionPorTipo(aAccion, VISITA_FOTO); Accion aRu = seleccionAccionPorTipo(aAccion, VISITA_REUBICAR); Accion cBr = seleccionAccionPorTipo(aAccion, VISITA_COBRO); Accion aGr = seleccionAccionPorTipo(aAccion, VISITA_AGENDAR); Label lbCliente = new Label(vTa.nombreCliente.get(), "MultiLine1"); Label lbCodigoCliente = new Label(vTa.codigoCliente.get(), "MultiLine2"); Label lbDescripcion = new Label(vTa.descripcion.get(), "MultiLine4"); SpanLabel lbDireccion = new SpanLabel(vTa.direccion.get(), "MultiLine3"); lbDireccion.setTextBlockAlign(Component.CENTER); Style s = UIManager.getInstance().getComponentStyle("Label"); Button btCobro = creaBoton(idioma.getCobro(), activaBoton(vTa.accion.get(), Integer.toString(VISITA_COBRO))); FontImage.setMaterialIcon(btCobro, FontImage.MATERIAL_PAYMENT, 10); FloatingActionButton badgeCobro = FloatingActionButton.createBadge(""); Button btAgendar = creaBoton(idioma.getAgendar(), activaBoton(vTa.accion.get(), Integer.toString(VISITA_AGENDAR))); FontImage.setMaterialIcon(btAgendar, FontImage.MATERIAL_PERM_CONTACT_CALENDAR, 10); FloatingActionButton badgeAgendar = FloatingActionButton.createBadge(""); Button btCotizar = creaBoton(idioma.getCotizar(), activaBoton(vTa.accion.get(), Integer.toString(VISITA_COTIZAR))); FontImage.setMaterialIcon(btCotizar, FontImage.MATERIAL_SHOPPING_BASKET, 10); FloatingActionButton badgeCotizar = FloatingActionButton.createBadge(""); Button btOrden = creaBoton(idioma.getOrden(), activaBoton(vTa.accion.get(), Integer.toString(VISITA_VENTA))); FontImage.setMaterialIcon(btOrden, FontImage.MATERIAL_HOME_WORK, 10); FloatingActionButton badgeOrden = FloatingActionButton.createBadge(""); Button btFoto = creaBoton(idioma.getFoto(), activaBoton(vTa.accion.get(), Integer.toString(VISITA_FOTO))); FontImage.setMaterialIcon(btFoto, FontImage.MATERIAL_CAMERA_ALT, 10); FloatingActionButton badgeFoto = FloatingActionButton.createBadge(""); Button btReubicar = creaBoton(idioma.getReubicar(), activaBoton(vTa.accion.get(), Integer.toString(VISITA_REUBICAR))); FontImage.setMaterialIcon(btReubicar, FontImage.MATERIAL_PERSON_PIN, 10); FloatingActionButton badgeReubicar = FloatingActionButton.createBadge(""); Container cnContacto = containerContacto(idioma, s, vTa); Container cnTitulo = new Container(new BoxLayout(BoxLayout.Y_AXIS)).add(lbCliente).add(lbCodigoCliente).add(lbDescripcion).add(lbDireccion).add(new Label(" ")).add(cnContacto).add(separador()); Container cnBotones = new Container(new GridLayout(3, 2)) .add(new Container(new BorderLayout()).add(BorderLayout.CENTER, badgeCobro.bindFabToContainer(btCobro, Component.LEFT, Component.TOP))) .add(new Container(new BorderLayout()).add(BorderLayout.CENTER, badgeAgendar.bindFabToContainer(btAgendar, Component.LEFT, Component.TOP))) .add(new Container(new BorderLayout()).add(BorderLayout.CENTER, badgeCotizar.bindFabToContainer(btCotizar, Component.LEFT, Component.TOP))) .add(new Container(new BorderLayout()).add(BorderLayout.CENTER, badgeOrden.bindFabToContainer(btOrden, Component.LEFT, Component.TOP))) .add(new Container(new BorderLayout()).add(BorderLayout.CENTER, badgeFoto.bindFabToContainer(btFoto, Component.LEFT, Component.TOP))) .add(new Container(new BorderLayout()).add(BorderLayout.CENTER, badgeReubicar.bindFabToContainer(btReubicar, Component.LEFT, Component.TOP)));
Container cnMarco = new Container(new BorderLayout()).add(BorderLayout.NORTH, cnTitulo).add(BorderLayout.CENTER, cnBotones); singleton.actualizaEstado(cBr.estado.get(), badgeCobro); singleton.actualizaEstado(aGr.estado.get(), badgeAgendar); singleton.actualizaEstado(cTz.estado.get(), badgeCotizar); singleton.actualizaEstado(oRd.estado.get(), badgeOrden); singleton.actualizaEstado(aFt.estado.get(), badgeFoto); singleton.actualizaEstado(aRu.estado.get(), badgeReubicar); singleton.setBadgeAgendar(badgeAgendar); singleton.setBadgeCobro(badgeCobro); singleton.setBadgeCotizar(badgeCotizar); singleton.setBadgeFoto(badgeFoto); singleton.setBadgeOrden(badgeOrden); singleton.setBadgeReubicar(badgeReubicar); btFoto.addActionListener((e) -> { new FormaAcciones(this, vTa, aFt).show(); }); btAgendar.addActionListener((e) -> { new FormaAcciones(this, vTa, aGr).show(); }); btCobro.addActionListener((e) -> { new FormaAcciones(this, vTa, cBr).show(); }); btReubicar.addActionListener((e) -> { new FormaAcciones(this, vTa, aRu).show(); }); btOrden.addActionListener((e) -> { new FormaOrden(this, vTa, oRd).show(); }); btCotizar.addActionListener((e) -> { new FormaOrden(this, vTa, cTz).show(); }); Button btCerrar = new Button(idioma.getMensaje38(), FontImage.createMaterial(FontImage.MATERIAL_VERIFIED_USER, UIManager.getInstance().getComponentStyle("Title"), 10)); btCerrar.addActionListener((e) -> { vTa.estado.set(COMPLETADO); vTa.fechaFuenteFin.set(System.currentTimeMillis()); vTa.tipoVisita.set(VISITA_FIN); vTa.modoPendiente.set(MODO_CAMBIO); procesaRegistro(vTa, MODO_CAMBIO); actualizaVisitaAsincrona(vTa, vTa.fechaFuenteFin.get()); Control em = new Control(); em.usuario.set(uSr.usuario.get()); ArrayList aEvento = consultaTablas(em, CONTROL); em = (Control) aEvento.get(0); adicionMarcacion(EVENTO_VISITA, EVENTO_FIN, 0, vTa.visitaId.get(), em.numeroControlMarcacion.get()); formaVisita.cambiaEstadoItemVisita(vTa.estado.get()); muestraVisitas(formaVisita.getContenedorVisitas()); fmRetorno.showBack(); }); Style sMarco = cnMarco.getUnselectedStyle(); sMarco.setBgTransparency(255); sMarco.setBgColor(0xeeeeee); sMarco.setMarginUnit(Style.UNIT_TYPE_DIPS); sMarco.setPaddingUnit(Style.UNIT_TYPE_DIPS); sMarco.setMargin(4, 3, 3, 3); sMarco.setPadding(2, 2, 2, 2); this.add(BorderLayout.CENTER, cnMarco); this.add(BorderLayout.SOUTH, btCerrar); this.setTransitionInAnimator(CommonTransitions.createFade(500)); } private Button creaBoton(String texto, boolean activa) { String uiid = activa ? "Dialog" : "Dialog"; Button btBoton = new Button(texto, uiid); btBoton.getStyle().setAlignment(Component.CENTER); btBoton.setTextPosition(Component.BOTTOM); btBoton.setEnabled(activa); return btBoton; } private boolean activaBoton(String accion, String tipo) { if (tipo.indexOf(accion) == -1) { return false; } return true; } private ArrayList seleccionOrdenesPorVisita(ArrayList aOrden1, Long id) { ArrayList lresp = new ArrayList(); for (Object r : aOrden1) { Orden1 o = (Orden1) r; if (o.visitaId.get().equals(id)) { lresp.add(o); } } return lresp; } private Orden1 seleccionOrdenesPorTipo(ArrayList aOrden1, int tipo) { for (Object r : aOrden1) { Orden1 o = (Orden1) r; if (o.tipo.get().equals(tipo)) { return o; } } Orden1 o1 = new Orden1(); o1.tipo.set(tipo); return o1; } private Accion seleccionAccionPorTipo(ArrayList aAccion, int tipo) { for (Object r : aAccion) { Accion o = (Accion) r; if (o.tipo.get().equals(tipo)) { return o; } } Accion o1 = new Accion(); o1.tipo.set(tipo); return o1; } public void retorno(Form r) { super.showBack(); //To change body of generated methods, choose Tools | Templates. muestraVisitas(formaVisita.getContenedorVisitas());; r.showBack(); } }

Shai Almog

unread,
Jan 16, 2021, 1:41:26 AM1/16/21
to CodenameOne Discussions
Hi,
Try getAllStyles() instead of getStyle(). Never use getStyle() for these sort of things.

Rubén V

unread,
Jan 16, 2021, 9:22:35 AM1/16/21
to CodenameOne Discussions
Hi,

Thank you mr. Shai. The new image shows the buttons centered, but I don't understand why not all the images are shown with the same UIID.


My method:
private Button creaBoton(String texto, boolean activa) { String uiid = activa ? "Dialog" : "Dialog"; Button btBoton = new Button(texto); btBoton.setUIID(uiid); btBoton.getAllStyles().setAlignment(Component.CENTER); btBoton.setTextPosition(Component.BOTTOM); btBoton.setEnabled(activa); return btBoton; }

Shai Almog

unread,
Jan 16, 2021, 9:40:34 PM1/16/21
to CodenameOne Discussions
They are all shown with the same UIID.
The UIID has 4 standard states. The first is selected and the others are unselected. getStyle() returns the current UIID which can change dynamically.
Reply all
Reply to author
Forward
0 new messages