OnMind y sus Componentes Web

© 2015-2019 by César Arcila
This is still subject to change

OnMind tiene una serie de componentes web para apoyar el desarrollo en proyectos de modo ágil, toda vez que se logre su reutilización. Tales componentes deben ser implementados (invocados y codificados), motivo para requerir esta guía. Si bien se tiene una aplicación interna, podría pensarse en una herramienta mucho más sofisticada que posibilite un diseño visual con una interfaz de arrastrar y soltar dirigida a casi cualquier usuario y sin tener que escribir en un editor de texto, no obstante su uso es sencillo y dirigido a un equipo con nociones técnicas de modo que por lo pronto el tiempo invertido puede ser semejante o cualquier diferencia no sería lo suficientemente significativa, de hecho innecesaria para un programador avanzado, sobretodo si se aplica el método OnMind.

Ejemplo esencial

<new-component style={ state.use.setStyle(state.styles) }>
    <at-nav id="navBar" super={ this } stage={ state.stage } use={ state.use } if={ (!state.stage.isInserting) } />

    <at-new id="newBar" ref="tabularNew" super={ this } stage={ state.stage } use={ state.use } onsend={ onCreate } oncancel={ onCancel } okclass={ okClass } if={ (state.stage.isInserting) }>
        <care-subject-new ref="data" stage={ state.stage } use={ state.use } sidebar="newBar" />
    </at-new>

    <at-row-if id="rowBar" ref="tabularRow" super={ this } stage={ state.stage } use={ state.use } editif="true" removeif="true" linkif="true" linkicon="sitemap" if={ (state.stage.isShowing) }>
        <care-subject-row ref="data" stage={ state.stage } use={ state.use } />
    </at-row-if>

    <at-browse id="pane" super={ this } stage={ state.stage } use={ state.use }>
        <care-subject-list stage={ state.stage } use={ state.use } onrow={ onRow } onlinked={ onLinked } />
    </at-browse>

    <script>
        const AbstractApp = window.nub.AbstractApp  // Web Application Class
        const kit = window.kit.load()  // Library with OnMind Components
        const use = new AbstractApp()  // Library for OnMind Routines & Utilities
        const it = use.init(use)  // Private variable for Objet Data

        // => ... here comes others assignments with "it"
        it.stage = {}

        const to = {  // Target Object for Javascript Module
            components: kit,  // or { kit.Component }
            onBeforeMount() { it.use.onBeforeMount(it, this) },  // Riot event covered by OnMind
            onMounted() { it.use.onMounted(it, this) },  // Riot event covered by OnMind
            onUpdated() { it.use.onUpdated(it) },  // Riot event covered by OnMind
            started(res) {
                it.use.started(it, res, 'ask', 'box', 'SHEET', true)  // OnMind definition to start
            }
        }

        // *!!* First Thing To Do When Started
        to.first = () => {}

        export default to  // Export Javascript Module
    </script>
</new-component>

En sentido general, estas líneas crean un nuevo componente de modo funcional (con las diversas operaciones sobre datos), es decir, que se podría operar en tanto se prepare y despliegue en el entorno respectivo.

Componentes genéricos de bloques

Entendiendo que como contexto nos referimos a “apps” para gestionar datos, OnMind dispone una dinámica en pantallas comunes con modos internos sobre el bloque de información a ser usado, dando lugar a: consulta en bloque, filtro en lista, selección, modo de inserción, modo de edición y borrado.

Se comprende como componente de bloque o agrupador aquel que tiene un nivel de mayor incidencia y que puede contener elementos internos o sub-componentes. Por lo general su nombre inicia con el prefijo at, si bien en su versión genérica podrían citarse basicamente 7 (sin sus variaciones), en tanto se identifiquen se comprenden los rasgos generales y el motivo por el cual se posibilita una implementación ágil.

Los elementos internos o sub-componentes corresponderían a una implementación personalizada de un nuevo componente o un componente del sistema ya utilizado internamente. En cualquier caso, la dinámica con datos tiende a ser reutilizable salvo por personalizaciones dispendiosas.

at-browse

• at-browse: Estándar para bloque de hoja de datos

<at-browse id="pane" stage={ stage } use={ use }>
    ...
</at-browse>

• at-browse-if: Permite evaluar condiciones de modos y sus iconos

<at-browse-if id="pane" stage={ stage } use={ use } mode0if={ (condition1) } mode1if={ (condition2) } mode0icon="share alternate" mode1icon="table">
    ...
</at-browse-if>

• at-browse-to: Para fijar un encabezado (de solo lectura) iterando el detalle

<at-browse-to id="pane" stage={ stage } use={ use } detailuse="0">
    ...
</at-browse-to>

• at-browse-gap: Para incrustar de modo libre algún componente

<at-browse-gap id="pane" stage={ stage } use={ use }>
    ...
</at-browse-gap>

at-nav

<at-nav id="navBar" stage={ stage } use={ use } if={ (!stage.isInserting) } />

at-new

<at-new id="newBar" ref="tabularNew" stage={ stage } use={ use } onsend={ onCreate } oncancel={ onCancel } okclass={ okClass } if={ (stage.isInserting) }>
    ...
</at-new>

at-row

<at-row id="rowBar" ref="tabularRow" stage={ stage } use={ use } if={ (stage.isShowing) }>
    ...
</at-row>

at-raw

<at-raw id="rawBar" ref="tabularRaw" stage={ stage } use={ use } if={ (condition) }>
    ...
</at-raw>

at-sidebar-sum

<at-sidebar-sum id="menuBar" stage={ stage } use={ use } confirmif={ (condition) } if={ stage.isShowingMenu } />

at-upload

<at-upload id="rawBar" ref="tabularRaw" stage={ stage } use={ use } if={ (condition) }>
    ...
</at-upload>

Eventos o métodos personalizables

El listado métodos a continuación corresponden a aquellos personalizables, es decir, que su comportamiento se puede alterar y en algunas casos es preciso que sea necesario implementar su propia lógica (por ejemplo: first, defaults y references). Se muestra el código por defecto (en Javascript) que se ejecuta si no se ha modificado el método. Para implementarlos lo que se hace es evaluar cuales se requieren modificar, reemplazando entonces con código específico dentro de los corchetes {}.

Por lo general, estos métodos pueden tener parámetros como ref, row, value, bit, e o ninguno (()). ref corresponde al nombre interno del formulario (ej. tabularRow, tabularNew), row es el objeto de datos de una fila, value se refiere a una expresion o valor, bit se refiere a una expresión corta, y e como parametro de eventos (por ejemplo, al dar clic en un botón)

El metodo it.use.json() se puede usar como alternativa a fetch para obtener datos de la API de OnMind. Devuelve siempre JSON, incorpora cabeceras y token de conexion para OnMind. Básicamente se pasan 3 parámetros, siendo el tercero opcional, por ejemplo: it.use.json(uri, next, fail)

Eventos o métodos internos

A continuación se lista el código por defecto de los demás eventos internos cuyo comportamiento es generalmente el programado y sólo se sobreescriben si verdaderamente se necesita.

to.focus = (element)        => { it.use.onFocus(element) }
to.onNew       = (e)        => { if (e) e.preventDefault(); it.use.onNew(it) }
to.onBack      = (e)        => { if (e) e.preventDefault(); it.use.onBack(it) }
to.onFinder    = (e)        => { e.preventDefault(); it.use.onFinder(it) }
to.onEdit      = (e)        => { e.preventDefault(); it.use.onEdit(it) }
to.onRemove    = (e)        => { e.preventDefault(); it.use.onRemove(it) }
to.onHideProps = (e)        => { it.use.onHideProps(it) }
to.onCancel    = (e)        => { e.preventDefault(); it.use.onCancel(it) }
to.onUndo      = (e)        => { e.preventDefault(); it.use.onUndo(it) }
to.onCreate    = (e)        => { if (e) e.preventDefault(); it.use.onCreate(it) }
to.onAlter     = (e)        => { e.preventDefault(); it.use.onAlter(it) }
to.onPrint     = (e)        => { e.preventDefault(); it.use.onPrint(it) }
to.onSidebar   = (e)        => { e.preventDefault(); it.use.onSidebar(it) }
to.onEditLock  = (e)        => { e.preventDefault(); it.use.onEditLock(it) }
to.onChoice    = (e)        => { it.use.onChoice(it) }
to.onFind      = (e)        => { e.preventDefault(); it.use.onFind(it) }
to.onRow       = (e)        => { e.preventDefault(); it.use.onRow(it, e) }
to.onCard      = (e)        => { e.preventDefault(); it.use.onCard(it, e) }
to.onLinked    = (e)        => { if (e) e.preventDefault(); it.use.onLinked(it, e, null) }
to.onSubtotal  = (e)        => { e.preventDefault(); it.use.onSubtotal(it) }
to.onNext      = (e)        => { e.preventDefault(); it.use.onNext(it) }
to.onFilter    = (e)        => { e.preventDefault(); it.use.onFilter(it, e) }
to.getMatch    = (value)    => { it.use.getMatch(it, value) }
to.setBlank    = (row)      => { it.use.setBlank(it, row) }
to.setRecord   = (ref, row) => { it.use.setRecord(it, ref, row) }
to.getRecord   = (res)      => { it.use.getRecord(it, res) }
to.getData     = (res)      => { it.use.getData(it, res) }
to.fail        = (res)      => { it.use.fail(it, res) }
to.created     = (res)      => { it.use.created(it, res) }
to.changed     = (res)      => { it.use.changed(it, res) }
to.deleted     = (res)      => { it.use.deleted(it, res) }
to.getCookie   = ()         => { it.use.getCookie(it) }
to.saveCookie  = ()         => { it.use.saveCookie(it) }
to.clearCookie = ()         => { it.use.clearCookie(it) }
to.reload      = (e)        => { it.use.toReload(it, e, (res) => { it.use.whenReload(it, res) }) }
to.onExport    = (e)        => { it.use.onExport(e) }
to.onHelp      = (e)        => { e.preventDefault(); it.use.onHelp(it) }
to.onPhone     = (e)        => { e.preventDefault(); it.use.onPhone(it) }
to.asAmount    = (m)        => { return it.use.asAmount(m, true) }
to.drawNodes   = ()         => { it.use.drawNodes(it) }
to.renderNodes = (source)   => { it.use.renderNodes(it, source) }
to.onNode      = (d)        => { return null }