Tutorial: Formularios Fw7

Framework 7 tiene su propio sistema de Grid, layout y encapsulamiento de los controles y los componentes, tanto en HTML como en Javascript, por esto, nosotros decidimos tener un estandar para crear los formularios y que todos sean lo más parecidos posibles, además de extender algunas funcionalidades de fw7 para nuestro sistema.

A continuación se describen los controles que se usan y cómo se deben declarar en el HTML.

Estructura base del formulario

Los formularios tienen una estructura básica que contiene una barra o navbar donde se pone el título, luego tiene un contenedor con un estilo de Card en el cuál vamos a agregar todo el contenido y los controles.

<div class="statusbar"></div>
<div class="view view-main ios-edges">
    <div class="page" data-name="home">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="title sliding">Título del formulario</div>
            </div>
        </div>
        <div class="page-content">
            <div class="container">
                <div class="wrapper-card">
                    <div class="card-content card-content-padding">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Sistema de Grid

Sistema de Grid Fw7

Fw7 utiliza un sistema de grid (rows, cols) basado en porcentaje y va de 0 a 100, lo que significa que podemos dividir los contenidos por columnas, en la generalidad de nuestros formularios usamos 2 columnas (50 - 50), para dispositivos móviles se usa el bloque completo (100).

<div class="row">
    <div class="large-50 medium-50 col-100">Columna 1</div>
    <div class="large-50 medium-50 col-100">Columna 2</div>
</div>

Campo abierto (input[type="text"])

Este contorl es muy simple de usar, siempre tiene la misma estructura, solo debe indicar el label y el id, estos campos son inputs normales que adminten cualquier tipo de evento e interacción normal desde javascript.

<div class="large-50 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">
                Nombre
            </div>
            <div class="item-input-wrap">
                <input type="text" id="t1" />
            </div>
        </div>
    </div>
</div>

Calendario (datepicker)

Datepicker fw7

Este contorl es similar al campo abierto, tiene unas clases que lo convierten en un objeto calendario de fw7

<div class="large-50 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">¿Desde que fecha aplica?</div>
            <div class="item-input-wrap">
                <i class="material-icons icon-right">date_range</i>
                <input type="text" id="tc1" class="calendario" />
            </div>
        </div>
    </div>
</div>

Para tener la inicialización es necesario agregar la funcionalidad desde Javascript, se debe enviar el id del campo calendario, este control tiene muchas funcionalidades para bloquear fechas, eventos, etc, que se pueden consultar en la documentación de framework 7 directamente.

var date_tc1 = app.calendar.create({ inputEl: '#tc1' });

Campos de seleccion única o radio (input[type="radio"])

La estructura de este control es más elaborada, se debe definir el label, se agrupan por name, también deben tener los ids para diferenciarlos.

<div class="large-50 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">Aprobar?</div>
            <p>
                <label class="radio">
                    <input type="radio" name="r1" id="r11" value="Si">
                    <i class="icon-radio"></i>
                </label>
                <label for="r11" class="label">Si</label>

                <label class="radio">
                    <input type="radio" name="r1" id="r12" value="No">
                    <i class="icon-radio"></i>
                </label>
                <label for="r12" class="label">No</label>

                <label class="radio">
                    <input type="radio" name="r1" id="r13" value="Corregir">
                    <i class="icon-radio"></i>
                </label>
                <label for="r13" class="label">Corregir</label>
            </p>
        </div>
    </div>
</div>

Campos de seleccion múltiple o checkbox (input[type="checkbox"])

La estructura de este control es muy similar a la del radio, se debe definir el label, se agrupan por name, también deben tener los ids para diferenciarlos.

<div class="large-50 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">Idiomas</div>
            <p class="formCheck" data-ck="c1">
                <label class="checkbox">
                    <input type="checkbox" name="c1" id="c11" value="Inglés">
                    <i class="icon-checkbox"></i>
                </label>
                <label for="c11" class="label">Inglés</label>

                <label class="checkbox">
                    <input type="checkbox" name="c1" id="c12" value="Francés">
                    <i class="icon-checkbox"></i>
                </label>
                <label for="c12" class="label">Francés</label>

                <label class="checkbox">
                    <input type="checkbox" name="c1" id="c13" value="Aleman">
                    <i class="icon-checkbox"></i>
                </label>
                <label for="c13" class="label">Aleman</label>
            </p>
        </div>
    </div>
</div>

Listas desplegables o combo (smartSelect)

SmartSelect fw7

Este control es una lista desplegable que se abre como una ventana modal y con una barra de búsqueda, tiene varias particularidades, la lista se carga normalmente en el control select y se tiene un campo oculto para guardar el texto, ya que en el select se conserva el valor, para saber más revisar la documentación.

<div class="large-100 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">Ciudad:</div>
            <div class="item-input-wrap">
                <a class="item-link smart-select smart-select-init" data-open-in="popup"
                    data-searchbar="true" data-searchbar-placeholder="Buscar">
                    <select id="s1" name="s1" class="ssVal" data-idt="ts1">
                        <option value="">Seleccione la Ciudad:</option>
                        <option value="01">Manizales</option>
                        <option value="02">Medellín</option>
                        <option value="03">Bogotá</option>
                        <option value="04">Cali</option>
                    </select>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title nb-hidden">Ciudad:</div>
                        </div>
                    </div>
                </a>
                <input type="hidden" id="ts1" />
            </div>
        </div>
    </div>
</div>

Sugerencia (autocomplete)

Autocomplete fw7

Este control es una sugerencia que se conecta con algún servicio interno o con datos locales para presentar búsquedas de contenido, es similar al smartSelect, pero se debe usar en conjuntos de datos muy extensos, este control tiene una configuración adicional en javascript, revisar la documentación.

<div class="large-50 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">Paises del mundo</div>
            <div class="item-input-wrap">
                <a class="item-link item-content" style="padding-left: 0;" href="#"
                    id="_t2">
                    <div class="item-inner oculto">
                        <div class="item-title">Paises del mundo</div>
                        <div class="item-after"></div>
                    </div>
                    <input type="text" id="t2" name="t2" readonly />
                </a>
            </div>
        </div>
    </div>
</div>

Adjuntar

Este control no es de framework 7, pero si lo usamos mucho en los formularios, se apoya en otras librerías internas, pero su declaración en HTML es bastante sencilla, un botón que se encarga de generar la interacción, la ruta de los archivos queda en una etiqueta ol, que será la fuente de datos, su configuración se basa en los data atributos.

El campo oculto se usa para la validación.

<div class="large-50 medium-50 col-100 list ">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label lbFile">Foto</div>
            <button class="button btnAdjuntar" type="button" id="btnf1" data-idf="f1"
                data-tipo-f="jpg,jpeg,png,bmp" data-num-files="3" data-kb="4000" 
                data-preview="fw7" data-remove-msg="fw7">
                <i class="material-icons">attach_file</i>
                Adjuntar documento
            </button>
            <ol id="f1" class="view-file ufiles"></ol>
            <input type="hidden" id="_tf1" />
        </div>
    </div>
</div>

Grid (Datatable)

Documentación de Grid fw7

Este control desde framework7 es simplemente visual, no tiene ningún tipo de funcionalidad, por eso se desarrolló un script propio, para saber más revisar la documentación.