© 2015-2020 by César Arcila
This is still subject to change
Para soportar una base de elementos vinculados a los componentes Web y las especificaciones de visualizacion de OnMind, se implementan alrededor de 80 etiquetas, elementos o controles de datos propios, si bien, se hace uso de estilos gracias a librerías gratuitas de terceros, simpatizando con el proyecto Fomantic-UI y librerías Javascript como RiotJS, entre otras.
En lo referente a controles para la interfaz gráfica de OnMind y con el objetivo de proporcionar una mejor integración, OnMind incorpora sus propios componentes web construidos usando principalmente la librería RiotJS.
| Componente | Descripción |
|---|---|
tab-label |
Etiqueta para campos de datos |
tab-text |
Control de entrada asociada a fuente de datos. Como variación se tiene tab-text-icon y tab-text-area. Este último para textos de multiples líneas |
tab-dropdown |
Control de selección con lista asociada a fuente de datos o la API, simplemente una URL del estándar |
tab-choice-list |
Variación de tab-dropdown para listas asignadas directamente, las cuales consisten en cadenas separadas por coma |
tab-choice-abc |
Opciones de selección A-B-C (x3). Siendo el defecto 3 opciones, como variación se puede indicar para A-B-C-D (x4) o para A-B-C-D-E (x5), incluso para A-B (x2) |
tab-checkbox |
Caja de chequeo |
tab-switch |
Control de intercambio, alternativa a la caja de chequeo |
tab-password |
Control de entrada para claves |
tab-quantity |
Control de entrada para cantidades |
tab-money |
Control de entrada para dinero |
tab-calendar |
Control de entrada con calendario. Como variación se tiene tab-birthday |
tab-time |
Control de entrada para horas |
tab-search |
Variación de tab-dropdown, siendo un control de entrada que permite ingresar el texto o filtro de una lista. Se asocia a fuente de datos o la API, simplemente una URL del estándar |
tab-linkage |
Ventana o diálogo para vincular listas de valores o datos con mayor volumen que utilizan criterio de búsqueda y la API, simplemente una URL del estándar. Como variación se tiene tab-linkage-find |
tab-view |
Variación del control de entrada solo para efectos de visualización (sólo lectura). Como variación se tiene tab-view-icon, tab-view-area, tab-view-check |
tab-value |
Control para valores asignados directamente, es decir, que no requieren ninguna fuente de datos |
En caso de requerir componentes o controles adicionales para la interfaz, frecuentemente se puede remitir al uso de estilos del proyecto Fomantic-UI, principalmente se suman 16 que se relacionan en la tabla de abajo. Entre las excepciones se tiene lists, dialog y table-tweak, así como componentes específicos que tienen su implementación por parte de OnMind.
| Componente | Descripción |
|---|---|
lists |
Menú para listas simples |
dialog o modal |
Caja de diálogo. Según corresponda se aplican las variaciones dialog-confirm, dialog-info, dialog-text, dialog-view, dialog-export |
table-tweak |
Aplica formato para cuadrícula de datos con ordenamiento y opción de exportar |
buttons |
Se remite a Fomantic-UI |
forms |
Se remite a Fomantic-UI |
popover o dropdown |
Se remite a Fomantic-UI |
tooltip |
Se remite a Fomantic-UI |
container |
Se remite a Fomantic-UI |
navbar |
Se remite a Fomantic-UI |
icons |
Se remite a Fomantic-UI |
tabs |
Se remite a Fomantic-UI |
accordion |
Se remite a Fomantic-UI |
card |
Se remite a Fomantic-UI |
loader |
Se remite a Fomantic-UI |
progress |
Se remite a Fomantic-UI |
alert |
Se remite a Fomantic-UI |
chips, badge o label |
Se remite a Fomantic-UI |
panel, sidebar o offcanvas |
Se remite a Fomantic-UI |
snack o notification |
Se remite a Fomantic-UI |
| Componente | Descripción |
|---|---|
as-raw |
Utilitario como subcomponente para el procesamiento de HTML incrustado bajo un elemento span, por ejemplo para  , otros caracteres o etiquetas html |
as-button |
Boton. Como variación se tiene as-button-icon |
as-calendar |
Calendario |
as-upload |
Componente para subir un archivo arrastrando y soltando |
as-tree |
Arbol para lo relacionado con asuntos y categorías |
note-lines |
Componente para entradas de notas en múltiples líneas delimitadas (hasta 100 caracteres por línea). Alternativa a md-note |
tab-country |
Control para selección de país |
tab-phone |
Control de entrada para numero telefónico |
tab-level |
Control para selección de nivel |
tab-schema |
Control para codigos gerárquicos o de esquema (2 dígitos por nivel). Se vincula con tab-level |
tab-serie |
Control de entrada para código numérico en serie |
to-top |
Botón para desplazarse hacia la parte superior del formulario o página |
as-video |
Video. Actualmente referencia de video subido a Youtube |
as-audio |
Audio (podcast) |
as-image |
Imagen |
as-embed |
Elemento empotrado (Ej. genially url) |
| Componente | Descripción |
|---|---|
as-article |
Artículo o texto. Puede incorporar otros componentes tales como: as-button, as-video, as-image, as-subscribe |
as-index |
Indice de contenido |
as-subscribe |
Formulario simple de envío de datos de suscripción a lista. Orientado para usar con artículos de texto de modo incrustado |
as-order |
Formulario simple para registrar ordenes asociadas a pagos (de productos, servicios o eCommerce) |
as-title |
Cabecera de título para formularios |
as-bar-new-cancel |
Botones para confirmar nuevo registro o cancelar |
as-bar-row-edit |
Botones para fila o registro a modo de barra. Como variación se tiene as-bar-row-edit-if |
as-div-new |
Divisor entre botones y formulario para nuevo registro |
as-div-row |
Divisor entre botones y formulario para manejo de registro |
as-sheet-top |
Subcomponente para filtro de lista o tabla que puede acompañar al componente table-tweak. Como variación se tiene as-sheet-top-if |
as-schema |
Componente para captura de formularios basados en esquema gerárquico |
as-tabular |
Componente para formulario de campos de texto de modo columnar o tabular, es decir, como formato de tabla |
as-paperclip |
Tabla o lista de archivos anexos |
menu-browse |
Dialogo con menu hojeable del sistema |
menu-icons |
Menú del sistema basado en iconos |
menu-list |
Menú o lista del sistema |
md-note |
Componente editor usando Markdown. Utiliza a su vez los subcomponentes md-input y md-viewer |
md-open |
Dialogo de abrir archivo de texto para editor usando Markdown |
index-abc |
Letras de opcion del abecedario para filtrar seǵun inicial. Se usa basicamente como subcomponente de finder |
fit-check-list |
Lista de selección de chequeo, usada principalmente en formulario de busqueda o en finder |
finder |
Componente para busqueda o filtro en bloque. Como variación se tiene finder-source |
find-status |
Componente para mostrar espera y estado de resultado de una consulta |
text-page |
Componente visor o lector de textos o artículos, por ejemplo, para blog sencillo escrito con convención Markdown |
calculator |
Calculadora |
identity-list |
Listado de identidades (personas u organizaciones) |
identity-card |
Tarjetas para identidades (personas u organizaciones) |
entrant-list |
Listado para usuarios, roles o similares |
entrant-card |
Tarjetas para usuarios, roles o similares |
charge-list |
Listado de cargos |
store-list |
Listado de movimientos de almacén |
setting-card |
Tarjetas para datos de configuración |
thing-card |
Tarjetas para cosas |
month-card |
Tarjetas por mes |
summary-top |
Encabezado de documento |
summary-list |
Listado de documentos |
summary-order |
Listado de ordenes |
summary-bank |
Listado de movimientos en entidades financieras |
.
Internamente y de modo independiente, es decir, importándose el componente respectivo (import Form... from '../views/bit/form-...riot'), se tienen también los siguientes formularios:
| Componente | Descripción |
|---|---|
form-login |
Formulario de Acceso |
form-signup |
Formulario de Registro |
form-forgot |
Formulario de Olvido de Contraseña |
form-checkin |
Formulario de Confirmación de Ingreso |
form-checkout |
Formulario de Pago |
form-card |
Formulario de Ingreso de Tarjeta de Crédito |
form-email |
Formulario de Registro Esencial de Email |
form-touch |
Formulario de Contacto |
form-dummy |
Formulario de Demostración de algunos componentes |
send-epayco |
Boton para pagos con pasarela ePayco-Davivienda |
fixed-yield |
Componente para calculadora de renta fija |
content-tree |
Listado de directorios y archivos Markdown con estructura en arbol |
A nivel de proyecto de código, Fomantic-UI se actualiza apartir del archivo package.json aumentando la versión (Ej. "fomantic-ui": "2.9.2") y ejecutando:
npm update
Fomantic-UI se basa a su vez en Semantic-UI. Si se desea reinstalar Fomantic-UI, puede considerarse realizar lo siguiente:
mv semantic semantic.old
mv semantic.json semantic.old.json
npm i fomantic-ui
cd node_modules/fomantic-ui
npx gulp install
cd ../..
Se pueden eliminar luego los archivos antiguos así:
rm -rf semantic.old&rm semantic.old.json
Posteriormente se pueden ajustar los archivos de configuración respectivos. Por ejemplo, en semantic/src/themes/default/globals/site.variables establecer la variable @fontSize: 15px;. Y revisar en semantic/src/theme.config variables cuyo valor se quiera dejar con estilo material, por ejemplo para: button, label, list, loader, placeholder, segment, menu, table, card
Con la carpeta de semantic actualizada, en la raíz de nuestro proyecto, procedemos a ejecutar lo siguiente:
cd semantic
npx gulp build
cd ..
gulp build
Mientras la segunda línea corresponde a Fomantic-UI, la última a los componentes de OnMind.