Si abrimos el menú desplegable de los 3 puntos en la parte superior derecha del entorno de trabajo y seleccionamos la opción de Modelos nos permitirá editar las vistas de la aplicación.





Nos aparecerá la pantalla principal de la edición de modelos:




Encontramos la zona de visualización o zona central de la ventana, y la zona de edición, situada a la derecha de la misma.


En la zona de visualización tenemos el espacio donde se verán los elementos que se estén editando. Si seleccionamos un elemento podremos editar sus propiedades y estilo en el panel derecho de edición. En la captura de abajo hemos añadido una sección y dentro de la sección un campo de texto que ha sido seleccionado. 


En la zona de visualización se trabaja sobre el área de fondo gris, permitiendo, así, que el aspecto de diseño sea lo más fiel al aspecto final.





En la zona de edición disponemos de un espacio compuesto de distintas secciones en forma de desplegable que se encargarán del proceso de edición de los elementos.


Tenemos las siguientes opciones:





  1. Desplegable de selección de modelo: permite elegir el componente que se quiere editar. Se mostrarán tanto los modelos estándar con el símbolo de la rueda dentada o engranaje, y los personalizados con un icono de lápiz. En verde se destaca el modelo que actualmente está activo y en uso en la TPV.


  2. Datos del modelo: Encontramos toda la información referente al modelo.
    • Activado / Desactivado: indica si el modelo está o no activo.
    • Tipo: indica el tipo del modelo. Puede ser de entorno o una ventana de petición de datos.
    • Descripción: la descripción del modelo. Será el nombre que se vea en la lista desplegable de modelos, tanto para seleccionar el modelo a la hora de editarlo, como para seleccionarlo para ser mostrado por un subproceso.
    • Descripción extendida: descripción larga del modelo. Únicamente visible en esta ventana.
    • Origen de datos: indica la tabla o vista donde obtendrá la información el modelo.
    • Filtro: indica el filtro que se usa sobre el origen de datos.


  3. Esquema del modelo: Encontramos una representación en forma de árbol de la estructura del modelo.
    En la captura de abajo podemos ver que el modelo está compuesto de un frame principal que contiene una sección y un input de texto. Si pulsamos sobre un elemento se resaltará en la pantalla de visualización izquierda. También podemos pulsar en el icono de la papelera para eliminar el elemento.

  4. Componentes: en este desplegable encontramos una serie de componentes que podremos añadir. Hay que tener en cuenta que las opciones que aparecerán habilitadas se basan en el elemento que tengamos seleccionado de la ventana de visualización izquierda. Esto es, si hemos seleccionado una sección como en la captura de abajo no podremos añadir un frame ya que no es posible añadir componentes "padre" en los componentes "hijos". Tampoco sería posible añadir ningún componente si, por ejemplo, tenemos seleccionado un componente de último nivel, esto es: inputs, labels, selector de fechas etc. Veremos posteriormente cada uno de los componentes que se pueden añadir. Para navegar por componentes una vez llamado el modelo desde el TPV, se hará mediante el tabulador, además, desde la versión 4.4.2300 hotfix 24 también se puede navegar de un componente a otro pulsando la tecla intro.
    • Frame: únicamente puede haber un frame en cada modelo.
      • Frame flotante: añade un marco modal  que actuará de contenedor principal del modelo. Desde la versión 4.4.2400.92 el frame flotante da la capacidad de permitir mover la ventana pinchando en la cabecera y arrastrando la ventana. Sólo aplicable a las nuevas personalizaciones.
      • Frame: añade un marco incrustado  que actuará de contenedor principal del modelo. 
    • Sección: un modelo debe tener, al menos, una sección.
      • Sección: una sección es un espacio dentro de un frame que contiene componentes dentro de él. Es necesaria para poder añadir componentes. Una sección puede contener, a su vez, otras secciones dentro.
    • Componente: los componentes deben estar dentro de una sección. Una misma sección puede contener varios componentes y componentes web.
      • Input: campo de texto.
      • Ahora menú: menú estándar o personalizado.
      • Título: añade un título.
      • Label: añade una etiqueta.
      • Párrafo: añade un cuadro de texto.
      • Selector de caja: añade un componente de checkbox.
      • Grid: añade un componente de tipo tabla, igual a los utilizados en los buscadores de la TPV para visualizar la información.
      • Desplegable con filtro: añade un desplegable de selección de objetos donde puede asignarse un origen de datos y un filtro. Este filtro debe ser con formato SQL, por ejemplo IdFamila ='0'.
      • Iframe: añade un marco donde pueden ser incrustadas otras páginas html externas a la TPV.
      • Imagen: añade un componente para cargar imágenes.
      • Switch: añade un componente de tipo switch para alternar entre dos estados.
      • Componente programado: añade un marco donde se pueden colocar componentes programados en el apartado "Componentes" del menú desplegable en la parte superior derecha.
      • Textarea: añade un campo de texto multilínea para almacenar en base de datos textos largos con saltos de línea. Incluido en la versión 4.4.2400.92
      • SimpleGrid: Incluido en la versión 5.0.0.4, añade un componente de tipo tabla, similar al Grid, pero con funcionalidad reducida a cambio de un mejor rendimiento en su uso mientras el número de registros no sea demasiado elevado. El número de registros que se consideran "elevados" dependerá de las capacidades de cada equipo, pero normalmente son aproximadamente 1000 registros. No es recomendable su uso si se acerca y/o sobrepasa el límite, ya que se cargan todos los registros obtenidos aunque no sean visibles, y al cargar demasiados registros, causa una bajada de velocidad de carga que podría llegar a empeorar el rendimiento en comparación con el uso del componente Grid. Usar este componente implica que no se podrán utilizar las siguientes funcionalidades del Grid:
        1. Impresión desde menús de grid
        2. Redimensión de columnas
        3. Paginación
        4. Filtrado de columna
        5. Recarga manual
        6. Edición de línea
        7. Exportación a pdf y excel
    • Componente web: los componentes web deben estar dentro de una sección. Una misma sección puede contener varios componentes y componentes web . 
      • Barra de herramientas: añade la barra de herramientas de ahora tpv, es decir, la cabecera de la TPV que contiene el logo, la fecha y hora, el botón Salir etc.
      • Lista Tickets: añade el componente de lista de tickets de ahora tpv
      • Buscador simple: añade el componente de búsqueda de artículos.
      • Desglose ticket: añade la pantalla del desglose de ticket.
      • Buscador de familias: añade el componente de búsqueda por familias.
      • Inserción línea de ticket: añade el componente de introducción de línea del ticket.

  5. Diseño: aquí se puede dar formato a cada uno de los componentes añadidos. Está dividido en dos secciones: distribución y tamaño y fuente
    • Distribución: las opciones variarán según el elemento seleccionado. El frame y la sección o secciones del modelo tendrán unas opciones y los componentes otras.
      • Visualización: flexible, en bloque o ninguna. Si se selecciona bloque o ninguna, únicamente se mostrará la opción Desbordamiento.
      • Dirección: horizontal o vertical. Indica si los componentes se van a añadir uno al lado de otro o debajo. 
      • Cobertura: en línea o multilínea. Indica si los componentes se pueden mostrar en más de una línea. 
      • Justificado: hace referencia a la alineación horizontal.
      • Alineación: hace referencia a la alineación vertical. 
      • Desbordamiento: determina qué pasa cuando un componente no cabe en el espacio destinado.
    • Tamaño y fuente: en algunas propiedades hay que indicar la unidad de medida: píxeles, % (sobre el tamaño de su contenedor), em, vports y cm. 
      • Ancho y Alto:  tamaño del componente. 
      • Min Ancho y Min Alto:  aunque no necesite tanto tamaño, siempre tendrá, al menos, el indicado aquí.
      • Max Ancho y  Max Alto: no sobrepasará estos valores, aunque sea necesario.
      • Fuente e Índice Z:  tamaño de la fuente y el orden cuando de superpone con otro componente. 
      • Alineación de texto: izquierda, centrado, derecha y justificado.
      • Formato de fuente: negrita, cursiva, subrayado y tachado.
      • Fuente y Fondo:  hace referencia a los colores. Se pueden seleccionar de una caja de colores o indicar el valor en hexadecimal, RGBA o HSLA.
      • Margen:  indica el margen del componente. 
      • Borde:  si tiene borde, su tamaño, estilo y color.
      • Radio: si se van a redondear las esquinas. 
      • Relleno: hace referencia al relleno por todos los lados del elemento. 


  6. Parametría: al seleccionar un elemento y desplegar el apartado de parametría veremos una serie de opciones de configuración del elemento. Las opciones aparecen en función del elemento que vayamos a editar. Por ejemplo, continuando con la captura del input de arriba, vemos que aparecen las siguientes opciones:
    • Id: campo identificador del elemento no modificable.
    • Requerido: indica si el elemento será obligatorio que contenga valor.
    • Solo lectura: indica si el elemento será o no editable. En el caso de los combos el efecto en la TPV será la presentación automática del combo como un campo de tipo texto, facilitando la lectura del mismo al eliminar
    • Enfocable: indica si se podrá acceder al elemento mediante pulsaciones de tabulador o intro. Esta propiedad está disponible desde la versión 4.4.2300 hotfix 24 y únicamente para componentes de tipo Ahora menú.
    • Descripción: indica la descripción del elemento, esta descripción se utiliza para identificar visualmente al componente en otros aspectos de la edición, como por ejemplo, en la sección de "Esquema del modelo".
    • Nombre: indica el nombre del elemento que llegará a la base de datos, por ejemplo, en el formulario de alta de cliente si queremos que este input represente el "IdCliente" será en el name donde se tendrá que poner "IdCliente".
    • Valor: valor del elemento. Puede ser estático: "00001" o asignar una variable con el signo arroba (@) delante. Continuando con el ejemplo del IdCliente anterior, si en valor indicamos "@IdCliente" obviará el campo name y utilizará el valor con la variable @IdCliente como campo enlazado de los datos de Ahora TPV para la información de la base de datos. También se puede asignar variables de objetos de la aplicación con el formato "@nombreObjeto.NombrePropiedad". Un ejemplo podría ser acceder a la propiedad IdCaja del objeto "Caja". Esto lo haríamos indicando el siguiente valor: "@Caja.IdCaja".
    • Label: Texto de la etiqueta del elemento.
    • Tipo: Tipo de dato del elemento. (Texto, Número, Cantidad, Descuento, Precio, Teléfono, Email, Código postal, DNI, URL o contraseña). 


Por último en la parte inferior derecha del editor encontramos tres botones: Guardar, Eliminar y Clonar.

  • El botón Guardar guardará el modelo actual en la base de datos.
  • El botón Eliminar solo aparece cuando estemos editando modelos personalizados ya guardados y eliminará el modelo en cuestión.
  • El botón Clonar permite crear un modelo totalmente idéntico al actual pero sin estar vinculado al modelo original estándar. Esta utilidad es especialmente útil para partir de un modelo existente a la hora de crear modelos personalizados independientes, ahorrando el trabajo de partir de una pantalla en blanco.


< TPV - Editor de subprocesos