ABSIS Cloud Galería de componentes estáticos

Para la entrada de texto estándard tendremos una etiqueta y un campo input. El estilo del input será el de input-medium

<div class="control-group">
  <label for="input01" class="control-label">Entrada texto</label>
  <div class="controls">
    <input type="text" id="input01" class="input-medium">
  </div>
</div> 

Para la entrada de una fecha tendremos una etiqueta y un campo input envuelto por un div y seguido por un icono.

El div tendrá los atributos data-date con el valor de la fecha y data-date-format con el formato. El funcionamiento del datePicker está condicionado que en el div se aplique la clase css datepicker. Adicionalmente le pondremos las clases input-append date para aplicarle el formato esperado.

El botón del datepicker se añadirá con <span class="add-on"><i class="icono-datepicker"></i></span>.

Es muy importante la inclusión de la librería JavaScript bootstrap-datepicker.js y de los estilos datepicker.css.

HERE
<div class="control-group">
  	<label for="data" class="control-label">Fecha</label>
  	<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
		<input type="text" class = "text date-dmy input-small" value="12-02-2012" />
		<span class="add-on"><i class="icono-datepicker"></i></span>
	</div>
</div>

...

<absiscloud:static type="style" source="absiscloud" path="components/bootstrap-datepiker-eternicode/1.0.0/css/datepicker.css"/>
<absiscloud:static type="script" source="absiscloud" path="components/bootstrap-datepiker-eternicode/1.0.0/js/bootstrap-datepicker.js"/>

Para aplicar correctamente la internacionalización sobre el componente Date-Picker, haremos primero el import del bootstrap-datepicker.js y después de los ficheros locale. Los ficheros locale disponibles estan ubicados dentro de la carpeta locale de js. Véase el ejemplo:

<absiscloud:static type="script" source="absiscloud" path="components/bootstrap-datepiker-eternicode/1.0.0/js/bootstrap-datepicker.js"/>
<absiscloud:static type="script" source="absiscloud" path="components/bootstrap-datepiker-eternicode/1.0.0/js/locales/bootstrap-datepicker.es.js"/>
<absiscloud:static type="script" source="absiscloud" path="components/bootstrap-datepiker-eternicode/1.0.0/js/locales/bootstrap-datepicker.ca.js"/>

Adicionalmente el componente permite marcar un listado de días con unos estilos propios. La forma de aplicar esto es muy simple, el componente ofrece dos atributos a rellenar:

• data-check-list: Lista de los días que queremos que aparezcan con unos estilos diferentes en el listado.
  El formato de estos días deberá coincidir con el valor del campo data-date-format separado por una (coma) ','.
• data-check-class: Opcional, es el nombre de la clase css que se posiciona por defecto como valor en la lista de días proporcionada en data-check-list.
  Por defecto la clase que se pondrá en los días indicados como checked será lkxaStandarCheckedDate (acompañada de old y new para los dias de meses anterior y siguiente que complementan los dias del mes actual en el calendario).
  Si el atributo tiene por valor una cadena bacía no se añadirá nunguna clase a los días indicados, el valor por defecto (y recomendado) aparece cuando el atributo no está presente en el tag.

Véase el siguiente ejemplo:

<div class="control-group">
	<label for="data" class="control-label">Fecha</label>
	<div 	class="input-append date datepicker" 
			data-date="12-02-2012" 
			data-date-format="dd-mm-yyyy" 
			data-check-list="12-02-2012, 01-03-2012, 30-01-2012, 10-02-2012, 01-02-2012,30-02-2012, 12-03-2012">
		<input type="text" class = "text date-dmy input-small" value="12-02-2012" />
		<span class="add-on"><i class="icono-datepicker"></i></span>
	</div>
</div>

Para una lista de selección tendremos una etiqueta y un campo select que contendrá el listado de opciones.

<div class="control-group">
  <label for="select01" class="control-label">Lista desplegable</label>
  <div class="controls">
    <select id="select01">
      <option>opcion</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</div>

Para una selección múltiple tendremos una etiqueta y un campo select con el parámetro multiple="multiple" que contendrá el listado de opciones.

<div class="control-group">
  <label for="multiSelect" class="control-label">Selección múltiple</label>
  <div class="controls">
    <select id="multiSelect" multiple="multiple">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</div>

Para una área de texto tendremos una etiqueta y un campo textarea con el estilo input-xlarge.

<div class="control-group">
  <label for="textarea" class="control-label">Área de texto</label>
  <div class="controls">
    <textarea rows="3" id="textarea" class="input-xlarge"></textarea>
  </div>
</div>

Para un elemento de formulario de subida de fichero tendremos una etiqueta y un campo input del tipo file. También se deberá añadir el atributo enctype="multipart/form-data" en el tag de definición del formulario.

<div class="control-group">
  <label for="fileupload" class="control-label">Subida de fichero</label>
  <div class="controls">
    <input id="fileupload" type="file"></input>
  </div>
</div>

Los botones deberán ir dentro de un div de estilo form-actions.

<div class="form-actions">
  <button class="btn" type="submit">Guardar</button>
  <button class="btn">Cancelar</button>
</div>

Para tener una entrada de texto obligatoria tendremos que añadir el estilo required al de control-group a una entrada de texto estándard. Esta estrategia también sirve para otro tipo de campos como, por ejemplo, el de fecha, una área de texto o un combo de selección.

<div class="control-group required">
  <label for="inputReq" class="control-label">Entrada obligatoria*:</label>
  <div class="controls">
    <input type="text" value="" id="inputReq" class="input-medium">
  </div>
</div>

Para la entrada de una contraseña, tendremos una etiqueta y un campo password. El estilo del input será el de input-small.

<div class="control-group">
  <label class="control-label" >Password:</label>
  <div class="controls" class="span10">
    <input type="password"  placeholder="Password" class="input-small">
  </div>
</div>

Para un campo inhabilitado, a parte del atributo disabled en el input, se deberá añadir el estilo disabled al de control-group.

<div class="control-group disabled">
  <label for="disabledInput" class="control-label">Entrada inhabilitada:</label>
  <div class="controls">
    <input type="text" id="disabledInput" value="inhabilitado" disabled="disabled"  class="input-medium">
  </div>
</div>

Para mostrar un error, se deberá añadir el estilo error al de control-group. Si se quiere añadir un mensaje aclaratorio, el texto deberá ser del estilo help-block.

<div class="control-group error">
  <label for="inputError" class="control-label">Entrada con error:</label>
  <div class="controls">
    <input type="text" id="inputError" class="input-medium">
    <span class="help-block">Corregir el error</span>
  </div>
</div>

Para mostrar un texto de ayuda añadiremos un campo div con la class block-hint justo después del campo input.

<div class="control-group error">
  <label for="inputError" class="control-label">Entrada con error:</label>
  <div class="controls">
    <input type="text" id="inputError" class="input-medium">
    <span class="block-hint">[texto de ayuda]</span>
  </div>
</div>

Para mostrar un texto de ayuda añadiremos un campo div con la class inline-hint justo después del campo input.

<div class="control-group error">
  <label for="inputError" class="control-label">Entrada con error:</label>
  <div class="controls">
    <input type="text" id="inputError" class="input-medium">
    <span class="inline-hint">[texto de ayuda]</span>
  </div>
</div>