BRIDGE - Gestión de ClientPOS
Acerca de este manual
El presente manual tiene por finalidad la capacitación de los usuarios que deseen gestionar las imágenes y recursos del pos para la personalización del punto de venta de un cliente.
Brinda la información necesaria, con el nivel suficiente de detalle para que el usuario pueda entender la arquitectura del ClientPos, así como también su custamización y actualización.
¿Qué es el ClientPOS?
El archivo ClientPos.Zip, es un archivo de customización que mantiene el look & feel de cada cliente.
Al momento de instalar el BPos (producto base) se genera la estructura de directorios que contendrá las imágenes y recursos para la correcta visualización del POS.
Estas imágenes y recursos pueden ser customizadas y adaptadas para que el POS se visualice con los colores e imágenes de la marca, así como también, de ser necesario, el ocultamiento de botones que no sean utilizados por el cliente.
Cuando se realiza algún desarrollo nuevo o un fix, el mismo se hace sobre el producto. Al momento de realizar una actualización sobre la versión de producto que opera en el cliente debe considerarse la actualización del archivo ClientPos.Zip, para que al momento de que el cliente realice la actualización en el punto de venta no le superponga el archivo del producto base y quede con la tipografía, colores y logos correspondientes al cliente.
Los procesos de actualización de productos, en este caso de BPOS son gestionados desde DIRECTOR, Donde desde la versión Multiempresa 2.0 de DIRECTOR se incluye la gestión de los archivos ClientPOS de cada cliente.
Para mas información sobre el proceso de actualización de BPOS y la gestión de archivos ClientPOS.zip puede consultarse el documento:
DIRECTOR Multiempresas - Manual de usuario 2.0 - SMB,
sección 10.2 Administración de ClientPOS
Arquitectura
Archivo clientPOS.zip: Este archivo contiene imágenes y recursos para un cliente en particular. Si no existe el archivo se instalarán las imágenes y recursos predeterminados del producto base.
Nombre del Archivo: debe ser clientPOS.zip (es importante que el archivo se comprima directamente en formato zip, no basta con cambiar la extensión de un .rar)
Estructura del ClientPOS: Dentro del archivo debe informarse la ruta exacta del archivo a Modificar/Agregar: Ej: "\bridge\app\config\vouchers\templates\sales"
Para este ejemplo se crea la siguiente estructura de carpetas:
Una vez creada las carpetas se debe guardar el o los archivos como muestra la siguiente imagen:
Actualizados los archivos a modificar en el punto de venta, se debe guardar en formato .zip
Al avanzar con la instalación, se debe colocar la ubicación del archivo .zip para que el instalador lo tome y reemplace luego los archivos en las carpetas de instalación. Esta ubicación se gestiona desde DIRECTOR. Ver:
Modificación de archivos de imágenes del POS: El archivo "ClientPOS.zip" debe contener en su interior la siguiente estructura: "bridge\app\config\views\themes\synthesis" + "\archivo a modificar"
Se puede modificar o agregar cualquier archivo, para eso se debe especificar la ruta correspondiente y el nombre del archivo.
QUÉ CARPETA CORRESPONDE A CADA PANTALLA
Se accede por bridge\app\config\views\themes
- Si es para la otra pantalla (no cuadrada), las carpetas están en \bridge\app\config\views\themes\synthesis
- Si es para la pantalla cuadrada, las carpetas están en \bridge\app\config\views\themes\synthesis-square
Estructura de Directorios y Relación Pantalla/Carpeta
Cada directorio contendrá los archivos .fxml, archivos de estilos (.css), e imágenes que aplican a cada sección del pos.
ClientPOS - IMÁGENES
Cambio de imagen Background y logos de la marca
Para el cambio de la imagen de fondo y logo de la marca, en el clientPos.zip deberá de reemplazarse los siguientes archivos en el directorio ...\bridge\app\config\views\themes\synthesis:
- background.png
- background-dark.png
- brand-logo.png
- sts-logo-full.png
Deberá tenerse en cuenta las dimensiones de las imágenes a reemplazar, a fin de que la estética y ubicación en el POS de las imágenes no se vean afectadas.
Ejemplo:
Al iniciar el pos, su pantalla de carga es la siguiente:
Con fondo negro y el logo de producto base.
La pantalla de logIn y el menú principal son los siguientes (producto base):
Luego de reemplazados los archivos background.png, background-dark.png, brand-logo.png, sts-logo-full.png por los de la marca la pantalla de carga, logIn y menú principal se verán de la siguiente forma:
Archivos de Imágenes en 'general.css'
Archivos de Imágenes en 'loader.css'
Los archivos .png gestionados por el archivo loader.css (login) son:
- background.png
El procesamiento para el cambio o actualización de las imágenes (.png) gestionados por todos los .css es el mismo que el descripto mas arriba para el cambio del logo e imagen de fondo.
ClientPOS - ESTILOS
Los archivos CSS tiene la finalidad de definir estilos personalizados para una aplicación, incluyendo atributos visuales como fuente, color, tamaño, márgenes, rellenos, bordes y otros efectos visuales. Los cambios que se realicen en estos archivos modificaran la visual general del POS, asimismo, cada sección podrá contener un archivo .css y .fxml que aplique solamente a la sección que se desea modificar y no a todo el estilo en general, es decir si dos reglas tienen la misma especificidad, la última regla cargada o definida será la que se aplique.
El archivo .css involucrado en la visualización general del POS son:
Archivo general.css
En este apartado realizaremos un breve resumen de las reglas definidas en este archivo.
Pantalla de inicio y LogIn
En este apartado realizaremos un breve resumen de las reglas definidas en los archivos loader.css y loader.fxml.
Archivo loader.css
El archivo loader.css contiene reglas de estilo específicas para elementos que están involucrados en la pantalla de login del POS. (Si general.css también tiene reglas para .errorText, estas podrían ser sobrescritas por las de loader.css o viceversa, dependiendo del orden en que se carguen las hojas de estilo).
Archivo loader.fxml
El archivo loader.fxml define la estructura y los componentes de la interfaz de usuario para la pantalla de login del Pos. El orden de las hojas de estilo en el FXML define la prioridad de aplicación de los estilos, con loader.css aplicándose después de general.css.
Interacción con general.css y loader.css
1 .root:
El AnchorPane tiene la clase root, lo que significa que se aplicarán las reglas de estilo de .root de ambas hojas de estilo (general.css y loader.css). La imagen de fondo (background.png) definida en loader.css se aplicará al AnchorPane.
2 .progress-bar .track y .progress-bar .bar:
El ProgressBar utilizará las reglas de estilo definidas en loader.css para la pista y la barra interna, dándoles un fondo negro y un color de barra específico.
3 .errorText:
El VBox y el Label dentro de él usarán la clase errorText que define una fuente en negrita y un color de texto rojo en loader.css. Esta clase asegura que los mensajes de error se muestren claramente.
4 .sts-logo-full:
El ImageView que tiene la clase sts-logo-full aplicará los estilos correspondientes de general.css, como la imagen y el posible efecto de sombra si está definido.
ClientPOS - Layout Desing
Introducción a la Configuración de ClientPOS - Diseño de Layout
En esta sección, se describen los pasos necesarios para ajustar las propiedades de los elementos en ClientPOS a través de archivos .properties. Este enfoque permite realizar cambios en la interfaz de usuario sin modificar directamente los archivos .fxml, lo que facilita la personalización y mantenimiento del diseño.
Propiedades para ajustar cambios en ClientPOS
Para realizar modificaciones en ClientPOS, es necesario seguir estos pasos:
Identificación del archivo .fxml: Primero, localice el archivo
.fxmlque contiene la definición del componente que desea modificar.Creación del archivo .properties: Cree un archivo
.propertiescon el mismo nombre que el archivo.fxmly colóquelo en el mismo directorio. Este archivo contendrá las nuevas propiedades que se aplicarán al componente.
Ejemplo de cambio de nombre de un botón
Pasos para cambiar el texto de un botón en el archivo selection.fxml.:
1.Buscar el campo en el archivo .fxml: Encuentre la definición del botón dentro del archivo .fxml. Por ejemplo:
Dentro de este archivo, encontramos la definición para el botón "VENTAS" que se muestra en el MENÚ PRINCIPAL
... <Button id="SalesOperation" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#onSalesOperation" prefHeight="100.0" prefWidth="258.0" text="VENTA" textAlignment="CENTER" wrapText="true" /> ...
2.Validar el ID del campo: Asegúrese de que el campo tenga un identificador único (id), como id="SalesOperation".
El id de este botón es id="SalesOperation" y el texto a mostrar esta definido en text="VENTA"
Cree o edite el archivo .properties correspondiente (selection.properties en este caso) y añadir la línea:
# Archivo de propiedades para ajustes en ClientPOS # Cambios en nombres de botones y etiquetas del MENÚ PRINCIPAL id.SalesOperation.text.string = SALES
Luego de guardados los cambios, y reiniciado el pos, el menú principal mostrara el nuevo texto para el botón de ventas.
Este procedimiento permite cambiar el texto mostrado en el botón de "VENTA" a "SALES" sin necesidad de editar el archivo .fxml directamente.
Ejemplo de cambio tamaño de un botón
- Buscar en el 'archivo.fxml' el campo a modificar :
{{ <Button id="finishOperationButton" text="BUSCAR"/> }}
- Validar que tenga id el campo que queremos cambiar el nombre(ej : id="finishOperationButton")
- Modificar en archivo.properties : id.finishOperationButton.prefWidth.double = 100.0
Ejemplo:
- Nombre del archivo .fxml = findItems.fxml
Dentro de este archivo, encontramos la definición para el botón "BUSCAR" que se muestra en la pantalla de Búsqueda de Artículos
... <Button id="finishOperationButton" fx:id="finishOperationButton" defaultButton="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onFindItems" prefHeight="68.0" prefWidth="160.0" text="BUSCAR" /> ...
El id de este botón es id="finishOperationButton" y el texto a mostrar esta definido en text="BUSCAR"
Se genera el archivo findItems.properties con el siguiente formato:
# Archivo de propiedades para ajustes en ClientPOS # Cambios en nombres de botones y etiquetas de BUSQUEDA DE ARTICULOS id.finishOperationButton.prefWidth.double = 100.0
Luego de guardados los cambios, y reiniciado el pos, el botón de Buscar se mostrara mas pequeño en la pantalla de búsqueda de artículos.
Ejemplo para agregar o quitar clases .CSS
- Para modificar la lista de clases se debe agregar una entrada con la propiedad "styleClass" y luego "add" o "remove"
- Ejemplo: para agregar una clase CSS, agregar: fxid.customerButton.styleClass.add=hide
- Ejemplo: para quitar una clase CSS, agregar: fxid.customerButton.styleClass.remove=hide
Siguiendo el ejemplo anterior, donde se cambio el tamaño del botón "BUSCAR", para que la visualización del botón sea correcta, deberá de modificarse la fuente de la leyenda BUSCAR en el botón.
Para ello agregaremos en el .properties una nueva línea para agregar una clase al CSS que gestiona las fuentes de los botones, en este caso, "general.css"
# Archivo de propiedades para ajustes en ClientPOS # Cambios en nombres de botones y etiquetas de BUSQUEDA DE ARTICULOS id.finishOperationButton.prefWidth.double = 100.0 #Cambiar tamaño de fuente al botón BUSCAR en BUSQUEDA DE ARTICULOS fxid.finishOperationButton.styleClass.add=hide
Hecho esto, deberá agregarse una nueva regla en el archivo general.css para que el cambio de fuente solo aplique al botón "BUSCAR"
...
/* Nueva regla CSS para el botón BUSCAR */
#finishOperationButton {
-fx-font-size: 10px; /* Ajusta el tamaño de la fuente botón BUSCAR en Buscar Articulo */
}
...
Luego de guardados los cambios, y reiniciado el pos, la leyenda del botón BUSCAR se mostrara mas pequeño en la pantalla de búsqueda de artículos.
Ejemplo para ocultar un botón
- Buscar en el 'archivo.fxml'el campo a modificar :
<Button id="catalogToggleButton" /> - Validar que tenga id el campo que queremos cambiar el nombre(ej : id="catalogToggleButton")
- Modificar la visibilidad del botón en el archivo.properties: id.catalogToggleButton.visible.boolean=false
- Agregar para que no ocupe lugar el boton: id.catalogToggleButton.managed.boolean=false
Ejemplo:
- Nombre del archivo .fxml = sales.fxml
Dentro de este archivo, encontramos la definición para el botón "VENTA POR CATALOGO" que se muestra en la pantalla de Venta
...
<ToggleButton fx:id="catalogToggleButton" contentDisplay="TOP" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onDepartments" prefHeight="70.0" prefWidth="70.0" textAlignment="CENTER">
<styleClass>
<String fx:value="button" />
<String fx:value="department-sales" />
</styleClass>
<HBox.margin>
<Insets bottom="2.0" left="1.0" right="1.0" top="2.0" />
</HBox.margin>
</ToggleButton>
...
El id de este botón es id="catalogToggleButton"
Se genera el archivo sales.properties con el siguiente formato:
# Archivo de propiedades para ajustes en ClientPOS # Cambios en nombres de botones y etiquetas de Pantalla de VENTA #ocultar botón Venta por Catálogo id.catalogToggleButton.visible.boolean=false #Ajuste para que no ocupe lugar el botón id.catalogToggleButton.managed.boolean=false
Luego de guardados los cambios, y reiniciado el pos, el botón de venta por catálogo no se mostrará en la pantalla de venta.
Ejemplo para modificar la ubicación dentro de una grilla (gridPane)
Para modificar el posicionamiento de elementos dentro de un GridPane, se debe agregar al .properties "gridPane" y luego una de las siguientes opciones: "rowIndex", "columnIndex", "rowSpan", "columnSpan".
- Ejemplo: para cambiar la columna: id.quantity-button.gridPane.columnIndex=4
- Ejemplo: para cambiar la cantidad de columnas que ocupa: id.search-box-text.gridPane.columnSpan=4
Ejemplo:
- Nombre del archivo .fxml = newCustomer.fxml
Dentro de este archivo, encontramos la definición para la sección de DATOS PERSONALES en el alta de clientes (tanto cliente Persona o cliente empresa)
<children> <Label text="* DATOS OBLIGATORIOS" GridPane.columnSpan="2147483647" GridPane.rowIndex="5" /> <Label text="NÚMERO DE INGRESOS BRUTOS" wrapText="true" /> <Label fx:id="txtJurisdiction" text="JURISDICCIONES" GridPane.rowIndex="2" /> <ValidableTextField fx:id="txtIibbTaxNumber" GridPane.columnIndex="1" /> <ComboBox fx:id="cboIibbTaxCondition" prefHeight="57.0" prefWidth="360.0" GridPane.columnIndex="3" /> <ValidableTextField fx:id="txtIibbIssueDate" GridPane.columnIndex="1" GridPane.rowIndex="1" /> <ValidableTextField fx:id="txtIibbExpirationDate" GridPane.columnIndex="3" GridPane.rowIndex="1" /> <Label text="FECHA DE EXPEDICIÓN" wrapText="true" GridPane.rowIndex="1" /> <Label text="FECHA DE VENCIMIENTO" wrapText="true" GridPane.columnIndex="2" GridPane.rowIndex="1" /> <Label layoutX="15.0" layoutY="27.0" text="CONDICIÓN DE INGRESOS BRUTOS" wrapText="true" GridPane.columnIndex="2" /> <ListView fx:id="jurisdictionsList" prefHeight="200.0" prefWidth="200.0" GridPane.columnSpan="2147483647" GridPane.rowIndex="3" GridPane.rowSpan="2" /> </children>
Para los siguientes Id se modifican las opciones "columnIndex" y "rowIndex"
- habeasDataCheckBox
- habeasDataText
- cboHabeasDataChannels
- txtHabeasDataChannels
- txtExternalCode
- txt1ExternalCode
Se genera el archivo newCustomer.properties con el siguiente formato:
# Archivo de propiedades para ajustes en ClientPOS # Cambios en Ubicación dentro de la tabla #ACEPTA id.habeasDataCheckBox.gridPane.columnIndex=4 id.habeasDataCheckBox.gridPane.rowIndex=4 id.habeasDataText.gridPane.rowIndex=4 #CANAL AUTORIZACION id.cboHabeasDataChannels.gridPane.columnIndex=5 id.cboHabeasDataChannels.gridPane.rowIndex=4 id.txtHabeasDataChannels.gridPane.columnIndex=6 id.txtHabeasDataChannels.gridPane.rowIndex=4 #ID SOPORTE id.txtExternalCode.gridPane.rowIndex=2 id.txtExternalCode.gridPane.columnIndex=2 id.txt1ExternalCode.gridPane.rowIndex=2
Luego de guardados los cambios, y reiniciado el pos, la pantalla de Datos personales mostrara otra disposición de los componentes en la tabla.
También editaremos, para el alta de Cliente empresa la solapa de "Ingresos Brutos"
<children>
<Label text="* DATOS OBLIGATORIOS" GridPane.columnSpan="2147483647" GridPane.rowIndex="5" />
<Label text="NÚMERO DE INGRESOS BRUTOS" wrapText="true" />
<Label fx:id="txtJurisdiction" text="JURISDICCIONES" GridPane.rowIndex="2" />
<ValidableTextField fx:id="txtIibbTaxNumber" GridPane.columnIndex="1" />
<ComboBox fx:id="cboIibbTaxCondition" prefHeight="57.0" prefWidth="360.0" GridPane.columnIndex="3" />
<ValidableTextField fx:id="txtIibbIssueDate" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<ValidableTextField fx:id="txtIibbExpirationDate" GridPane.columnIndex="3" GridPane.rowIndex="1" />
<Label text="FECHA DE EXPEDICIÓN" wrapText="true" GridPane.rowIndex="1" />
<Label text="FECHA DE VENCIMIENTO" wrapText="true" GridPane.columnIndex="2" GridPane.rowIndex="1" />
<Label layoutX="15.0" layoutY="27.0" text="CONDICIÓN DE INGRESOS BRUTOS" wrapText="true" GridPane.columnIndex="2" />
<ListView fx:id="jurisdictionsList" prefHeight="200.0" prefWidth="200.0" GridPane.columnSpan="2147483647" GridPane.rowIndex="3" GridPane.rowSpan="2" />
</children>
Para los siguientes Id se modifican las opciones "columnSpan", "rowSpan" y "rowIndex"
- txtJurisdiction
- jurisdictionsList
En el archivo newCustomer.properties agregaremos la siguiente definición para la sección Jurisdicciones
#JURISDICCIONES id.txtJurisdiction.gridPane.rowIndex=4 id.txtJurisdiction.gridPane.columnSpan=2 id.jurisdictionsList.gridPane.columnSpan=2 id.jurisdictionsList.gridPane.rowIndex=5 id.jurisdictionsList.gridPane.rowSpan=4
Luego de guardados los cambios y reiniciado el pos, la pantalla de Ingresos Brutos para el cliente Empresa mostrara una disposición distinta para "Jurisdicciones" en la tabla.
Ejemplo para Cambio de Nombre de un Botón, modificar las propiedades de columnas y filas de manera independiente:
- El elemento que se debe referenciar es el GridPane
- El tercer parámetro en la línea debe ser gridPane.**
- El cuarto parámetro es una combinación de 3 partes:
- Las primeras 3 letras pueden ser "col" o "row" para hacer referencia a una columna o fila respectivamente
- A continuación, sigue un número entero, que referencia al número de fila o columna, comenzando desde cero
- Luego viene el nombre del campo que se quiere modificar. Por ahora solo soporta los campos de tipo double
#JURISDICCIONES id.txtJurisdiction.gridPane.rowIndex=4 id.txtJurisdiction.gridPane.columnSpan=2 id.jurisdictionsList.gridPane.columnSpan=2 id.jurisdictionsList.gridPane.rowIndex=5 id.jurisdictionsList.gridPane.rowSpan=4
En la sección columnConstraints (o rowConstraints) puede haber tantos tags ColumnConstraints (o RowConstraints) como columnas (o filas), los cuales están en orden.
Para realizar un cambio en esas constraints, se puede realizar de la siguiente manera:
id.grilla.gridPane.col0prefWidth=80.0
Ejemplo:
- Nombre del archivo .fxml = findItems.fxml
Dentro de este archivo, encontramos la definición para la ubicación de la HORA informada en la pantalla de Buscar Artículos
<GridPane id="findCustomerTable" layoutX="10.0" layoutY="10.0" AnchorPane.bottomAnchor="4.0" AnchorPane.rightAnchor="20.0">
<children>
<Label text="V" GridPane.columnIndex="9" />
<HBox fx:id="operatorBox" alignment="CENTER" GridPane.columnSpan="10" GridPane.rowIndex="2">
<children>
<Label alignment="CENTER" text="OPERADOR: " />
<Label id="userLabel" fx:id="userLabel" alignment="CENTER" text="MATEO GÓMEZ" wrapText="true" GridPane.rowIndex="2" />
</children>
<GridPane.margin>
<Insets />
</GridPane.margin>
</HBox>
<Clock format="dd/MM/yyyy" styleClass="clock-month" uppercase="true" GridPane.rowIndex="1" />
<Clock format="HH:mm" styleClass="clock-time" GridPane.columnIndex="2" GridPane.rowIndex="1" />
<Label id="terminal-label" fx:id="terminalLabel" text="10" wrapText="true" GridPane.columnIndex="6" GridPane.rowIndex="1" />
<MonitorVbox fx:id="statusMonitor" GridPane.columnIndex="8" GridPane.rowIndex="1" />
<Button fx:id="sessionButton" alignment="CENTER" contentDisplay="TOP" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onCloseSession" prefHeight="70.0" prefWidth="70.0" styleClass="close-session-button" textAlignment="CENTER" wrapText="true" GridPane.columnIndex="12" GridPane.rowSpan="2147483647" />
<Button fx:id="lockSessionButton" alignment="CENTER" contentDisplay="TOP" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onSpecialLogoff" prefHeight="70.0" prefWidth="70.0" styleClass="lock-session-button" textAlignment="CENTER" visible="false" wrapText="true" GridPane.columnIndex="12" GridPane.rowSpan="2147483647" />
<Label text="●" GridPane.columnIndex="1" GridPane.rowSpan="2" />
<Label layoutX="110.0" layoutY="16.0" text="●" GridPane.columnIndex="3" GridPane.rowSpan="2" />
<Label layoutX="310.0" layoutY="16.0" text="●" GridPane.columnIndex="7" GridPane.rowSpan="2" />
<Label text="FECHA" />
<Label text="HORA" GridPane.columnIndex="2" />
<Label text="T" GridPane.columnIndex="6" />
<Label text="E" GridPane.columnIndex="8" />
<Label layoutX="193.0" layoutY="19.0" text="●" GridPane.columnIndex="5" GridPane.rowSpan="2" />
<Label text="T" GridPane.columnIndex="4" />
<Label id="store-label" fx:id="storeLabel" text="01" GridPane.columnIndex="4" GridPane.rowIndex="1" />
<Label fx:id="versionLabel" alignment="BASELINE_RIGHT" GridPane.columnIndex="9" GridPane.rowIndex="1" />
<Button id="keyboard-button" fx:id="keyboardButton" alignment="CENTER" contentDisplay="TOP" layoutX="396.0" layoutY="10.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onKeyboard" prefHeight="70.0" prefWidth="70.0" textAlignment="CENTER" wrapText="true" GridPane.columnIndex="13" GridPane.rowIndex="1" />
<Label visible="false" managed="false" text="●" GridPane.columnIndex="10" GridPane.rowSpan="2" />
<Button visible="false" managed="false" fx:id="orderPendingButton" id="order-pending" onAction="#onShowPendingOrders" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="70.0" prefWidth="70.0" styleClass="icon-order-notification,order-notification-button" GridPane.columnIndex="11" GridPane.rowIndex="1" />
<Label visible="false" managed="false" fx:id="pendingOrdersQty" text="0" GridPane.columnIndex="11" />
</children>
<columnConstraints>
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="80.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="10.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="60.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="10.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="50.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="-Infinity" prefWidth="10.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="50.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="10.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="50.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="54.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="10.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="74.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="74.0" />
<ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="74.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="23.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="23.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="23.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
Para el siguiente Id del "GridPane"se modifican las opciones "prefWidth":
- findCustomerTable
En el archivo findItems.properties agregaremos la siguiente definición para el id findCustomerTable
#cambia las propiedades de columnas y filas de manera independiente - HORA id.findCustomerTable.gridPane.col2prefWidth=150.0
Luego de guardados los cambios y reiniciado el po, la pantalla de Buscar Artículos mostrará la Hora en pantalla con más espacio a ambos lados.
Ejemplo para cambiar ubicación de elementos dentro de un panel (anchorPane)
Para cambiar el espacio desde el borde del panel hasta los lados de un determinado elemento (dentro de un AnchorPane), se pueden utilizar las opciones "bottomAnchor", "leftAnchor", "rightAnchor", "topAnchor".
Ejemplo:
<AnchorPane ...> <children> <GridPane id="gridInterno" AnchorPane.leftAnchor="80.0" ...>
En este caso, se puede modificar el espacio lateral izquierda del GridPane con respecto al panel padre AnchorPane con la siguiente línea:
id.gridInterno.leftAnchor.double=80.0
Ejemplo:
- Nombre del archivo .fxml = selection.fxml
Dentro de este archivo, encontramos la definición para la ubicación de los botones dentro del panel del Menú Principal:
....
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="1024.0" prefHeight="768.0" prefWidth="1360.0" styleClass="root" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox layoutX="292.0" layoutY="10.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="1000.0" AnchorPane.topAnchor="150.0">
<children>
<Label id="training-mode-label" fx:id="trainingModeLabel" text="MODO ENTRENAMIENTO" textAlignment="RIGHT" visible="false" wrapText="true" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
</children>
</VBox>
<Pane maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" prefHeight="78.0" prefWidth="1360.0" styleClass="lower-bar" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
<GridPane id="selectionPane" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<FlowPane fx:id="noSaleFlowPane" hgap="10.0" styleClass="button-box" vgap="10.0" visible="false" GridPane.columnIndex="0" GridPane.rowIndex="2">
<children>
<Button id="TenderLoan" fx:id="tenderLoanButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#onTenderLoan" prefHeight="120.0" prefWidth="258.0" text="DOTACIÓN" textAlignment="CENTER" />
....
Para el siguiente Id se modifican las opciones "bottomAnchor", "leftAnchor", "rightAnchor" y "topAnchor"
- selectionPane
En el archivo selection.properties agregaremos las siguientes definiciones para el id "selectionPane"
#CAMBIAR UBICACIÓN DE ELEMENTOS DENTRO DE UN PANEL (AnchorPane) id.selectionPane.bottomAnchor.double=80.0 id.selectionPane.leftAnchor.double=80.0 id.selectionPane.rightAnchor.double=80.0 id.selectionPane.topAnchor.double=80.0
Luego de guardados los cambios y reiniciado el pos la pantalla Menú Principal mostrara una disposición distinta de los botones de selección en la tabla.
Ejemplo para cambiar Padding (y otros) en varios tipos de paneles
Esta sección describe como cambiar propiedades como padding u otros que requieren objeto tipo Insets, como se ve en el siguiente ejemplo:
<HBox fx:id="hbox1" ...> <padding> <Insets top="2.0" right="0" bottom="2.0" left="0 /> </padding>
La propiedad padding se debe informar como cualquier otra, pero con tipo de campo insets.
Este tipo de propiedad tiene la particularidad de que necesita cuatro valores que deben ser especificados si o si.
Los cuatros valores deben estar ordenados en sentido horario partiendo de top, separados con coma y utilizando punto como separador decimal.
Como alternativa se puede colocar un solo número, el cual se aplicará a los 4 campos.
fxid.hbox1.padding.insets=2.0,0,2.0,0
Ejemplo:
- Nombre del archivo .fxml = pagos.fxml
Dentro de este archivo, encontramos la definición para la ubicación de los botones de pago en la pantalla de pagos
....
<HBox fx:id="buttonBox" alignment="BOTTOM_LEFT" spacing="5.0" styleClass="button-bar" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0">
<children>
<Button id="cash" fx:id="button_cash" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="cash" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="credit-card" fx:id="button_cards" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="credit-card" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="checks" fx:id="button_checks" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="checks" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="credit" fx:id="button_credit" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="credit" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="mgc" fx:id="monederoGiftCardButton" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="gift-card" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="credit-note" fx:id="button_NCC" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="credit-note" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="coupon" fx:id="button_coupon" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="coupon" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="wallet" fx:id="button_wallet" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="wallet" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button id="transfer" fx:id="button_transfer" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#showBox" prefHeight="70.0" prefWidth="70.0" styleClass="transfer" textAlignment="CENTER" wrapText="true">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button fx:id="button_reportIzipay" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" layoutX="30.0" layoutY="12.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onIzipayReport" prefHeight="70.0" prefWidth="70.0" styleClass="izip" textAlignment="CENTER" wrapText="true">
<tooltip>
<Tooltip text="Reporte detallado" />
</tooltip>
</Button>
<Button fx:id="button_client" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" layoutX="30.0" layoutY="12.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onFindCustomers" prefHeight="70.0" prefWidth="70.0" styleClass="find-customers-button" textAlignment="CENTER" wrapText="true" />
<Button fx:id="button_client_fiscal" visible="false" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" layoutX="30.0" layoutY="12.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onEditCustomersFiscalData" prefHeight="70.0" prefWidth="70.0" styleClass="edit-fiscal-data-customers-button" textAlignment="CENTER" wrapText="true" />
<Button fx:id="paymentIntentionButton" alignment="CENTER" contentDisplay="TOP" focusTraversable="false" layoutX="30.0" layoutY="12.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#onPaymentIntention" prefHeight="70.0" prefWidth="70.0" styleClass="payment-intention-button" textAlignment="CENTER" wrapText="true" />
</children>
<padding>
<Insets bottom="2.0" left="20.0" top="2.0" />
</padding>
</HBox>
....
Para el siguiente Id se modifican las opciones de "padding" para el siguiente Id de HBox:
- buttonBox
En el archivo pagos.properties agregaremos las siguientes definiciones para el id "buttonBox"
#CAMBIAR PADDING EN VARIOS TIPOS DE PANELES - pagos fxid.buttonBox.padding.insets=15.0,15.0,180.0,0
Luego de guardados los cambios y reiniciado el pos, los botones de la pantalla de pagos se visualizarán de la siguiente forma:
ClientPOS - Gestión de archivos .VCL
En esta sección explicaremos cómo gestionar los archivos .vcl que organizan la información a imprimir en los comprobantes fiscales y no fiscales. Estos archivos son fundamentales para la personalización y correcta emisión de los documentos legales necesarios en las transacciones de venta y no venta (se trate de un comprobante físico o por medio de los emuladores configurados para el pos).
La estructura de directorios donde se gestionan los documentos comienza en la siguiente ruta:
\bridge\app\config\vouchers
En este directorio, encontrará dos subdirectorios (default y templates) y el archivo clave velocimacros.vm.
A continuación, proporcionaremos una visión detallada de cómo se utilizan estos elementos para configurar y gestionar los comprobantes.
Directorio 'default'
Este directorio contiene los detalles y estructuras de los comprobantes fiscales y no fiscales que el producto mostrará por defecto, es decir, cuando no este personalizado en base a los requerimientos de un cliente en particular. Así como también, las definiciones para la emisión de comprobantes cuando el pos opera en "modo entrenamiento".
Dentro del directorio 'default' encontraremos la siguiente estructura de directorios:
Directorio '\bridge\app\config\vouchers\default\templates"
Dentro del directorio templates, se encuentran los siguientes archivos y directorio:
default.vcl
trainingMode.vcl
header.vcl
sts_logo.jpg
Es la imagen a mostrar cuando se emita un comprobante en modo entrenamiento (se trate de un comprobante físico o por medio de los emuladores configurados para el pos)
El nombre del archivo .jpg de este directorio deberá ser siempre sts_logo.jpg para que sea tomado correctamente.
Imagen por default:
Dimensiones por default:
- 560 x 200
Directorio 'layaway'
Directorio 'templates'
velocimacros.vm
El archivo velocimacros.vm es una biblioteca de macros de Velocity que proporciona funcionalidades comunes para el formateo y manipulación de datos en los comprobantes fiscales y no fiscales. Son herramientas que facilitan la personalización y formateo de los comprobantes emitidos por el POS, garantizando que la información se presenta de manera clara y coherente.
A continuación, se describen las macros definidas en este archivo y su propósito:
Ejemplo para cambiar el Logo a imprimir en el comprobante de venta.
Podrá realizarse la personalización de los comprobantes emitidos en el punto de ventas, por ejemplo, para el cambio del logo que se muestra al momento de emitir un comprobante de ventas.
Para ello, en el directorio \bridge\app\config\vouchers\templates encontraremos la imagen que el POS trae por defecto, bajo el nombre sts_logo.jpg.
Teniendo la imagen de la marca del cliente en formato .jpg, le cambiaremos el nombre, colocando el mismo nombre que trae el logo del producto base (sts.logo.jpg) y reemplazaremos en el directorio \bridge\app\config\vouchers\templates el archivo existente con el mismo nombre.
Luego podremos reiniciar el pos, y al momento de cerrar una venta podremos observar el nuevo logo del cliente en el comprobante de ventas.
