Los botones constituyen uno de los recursos que más utilizamos en nuestras aplicaciones, no solo por las disímiles apariencias que les podemos dar, sino también por las funcionalidades que nos brindan mediante los atributos:

Para la creación de un botón se define un control PROP con atributo (type=“B”).


Atributo Descripción
title Texto que contendrá el botón
bgcolor Define el color del fondo del botón
forecolor Define el color del texto del botón
width Ancho del botón
height Altura del botón
lmargin Distancia a la que estará colocado el botón desde la izquierda. Esto es en el caso que queramos que sea diferente al que toma por defecto.
rmargin Distancia a la que estará colocado el botón desde la derecha. Esto es en el caso que queramos que sea diferente al que toma por defecto.
tmargin Distancia a la que estará colocado el botón desde encima. Esto es en el caso que queramos que sea diferente al que toma por defecto.
bmargin Distancia a la que estará colocado el botón desde abajo. Esto es en el caso que queramos que sea diferente al que toma por defecto.
newline Valor True o False, se utiliza para que esté a continuación del control anterior (False) o se posicione en una nueva línea. (True), salto de línea.
border-witdth Ancho del borde del botón.
border-corner-radius Se utiliza para redondear el contorno del botón.
onclick Con este atributo podremos definir que acción se ejecutará al presionar el botón.
visible Para definir si el botón estará visible o no, en muchas ocasiones es necesario usar botones ocultos para poder definir algunas acciones de la aplicación, y usar algunos botones simultáneamente, donde unos se verán y otros no, en dependencia de lo que queramos lograr.
disablevisible Atributo muy usado para ocultar o mostrar un botón, según una condición previa para esto.
lpadding Atributo que se usa para definir distancia dentro del botón con relación a un texto o imagen definida en el mismo.
labelwith Para dar longitud a la etiqueta del botón, o simplemente tomar valor 0, para que no exista.
locked Atributo para bloquear el botón según finalidad deseada.


Aquí hemos definido botones donde hemos utilizado varios atributos que definen color, forma, texto, acciones y utilizando además la llamada a una de las .css definidas en la aplicación para standarizar un diseño que usaremos frecuentemente. (class=“propBTInferiorPerfil”)

  <prop name="MAP_BT_NADA2" disablevisible="MAP_PROPMODIFY2=0" width="1p" bgcolor="#00000000" forecolor="#00000000" locked="true"/> 
  <prop name="MAP_BT_UNO2" disablevisible="MAP_PROPMODIFY2=1" title="Datos" onclick="javascript: irGrupo('1');colorBT(self,'1');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#84B819" forecolor="#FFFFFF" border-corner-radius="8"/> 
  <prop name="MAP_BT_DOS2" disablevisible="MAP_PROPMODIFY2=1" title="Medio pago" onclick="javascript:irGrupo('2');colorBT(self,'2');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#FFFFFF" forecolor="#84B819" lmargin="2%" newline="false" border-corner-radius="8"/>
  <prop name="MAP_BT_TRES2" disablevisible="MAP_PROPMODIFY2=1" title="Carnet delante" onclick="javascript:irGrupo('3');colorBT(self,'3');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#84B819" forecolor="#FFFFFF" lmargin="2%" newline="false" border-corner-radius="8"/>
  <prop name="MAP_BT_CUATRO2" disablevisible="MAP_PROPMODIFY2=1" title="Carnet detrás" onclick="javascript:irGrupo('4');colorBT(self,'4');" type="B" visible="1" class="propBTInferiorPerfil" bgcolor="#84B819" forecolor="#FFFFFF" lmargin="2%"  newline="false" border-corner-radius="8"/>
 

Este código genera los siguientes botones:


En este caso se han usado los siguientes atributos:

  • title: Texto del botón. (En este caso “Datos”,“Medio Pago”, “Carnet delante”, “Carnet detrás”)
  • bgcolor: Fondo de los botones en color verde (bgcolor=“#84B819”) y fondo de botón en color blanco (bgcolor=“#FFFFFF”)-De esta manera hemos podido dar apariencia de que uno de los botones está seleccionado, y los demás disponibles para poder ser seleccionados.
  • forecolor=“#FFFFFF”: Color del texto definido en title, en este caso color blanco.
  • lmargin=“2%”: Se ha usado para dar margen izquierdo al botón, con relación a otro elemento.
  • newline=“false”: En este caso se usa para que queden los botones posicionados uno a continuación de otro.
  • border-corner-radius=“8”: Se ha usado para redondear el borde de los botones, tal como se aprecia en la imagen previa.
  • disablevisible: En este ejemplo se ha usado para que se muestre el botón, según la condición de “MAP_PROPMODIFY2=0” o “MAP_PROPMODIFY2=1”
  • class=“propBTInferiorPerfil”: Atributo usado para dar el estilo al botón definido en la .css propBTInferiorPerfil, esto se hace para simplificar la declaración del diseño de los prop que son similares y aquí están contenidos los estilos de los botones similares que se usan muchas veces en una misma aplicación o en varias aplicaciones.
  • onclick: Usado para definir que acción se ejecutará al presionar el botón. En este caso se genera el siguiente evento: (“javascript:irGrupo('4');colorBT(self,'4'))


Podemos definir botones que contengan a su vez imagen, y pueden ser usados para ejecutar una acción al ser presionados o simplemente para definir una imagen en la aplicación.

Ejemplos:

Botón con imagen asociada (sin acción:)

 <prop name="BTIMGCOCHEGRID" visible="1" img="imagen-bateria.jpg" type="B" class="propBTGrid" title="##FLD_MAP_BATERIA##"  />
 <prop name="BTIMGKMGRID" visible="1" img="imagen-km.jpg" type="B" class="propBTGrid" title="##FLD_MAP_KM##" />

Este son los botones que se obtienen como resultado, al atributo img se le asigna la imagen a mostrar.

  • imagen-bateria.jpg -
  • imagen-km.jpg -


Botón con imagen asociada (con acción:)

    <prop name="MAP_BT_ARRANCAR" width="20%" height="75%" disablevisible="MAP_VERBOTONES=2" onclick="javascript:if (gpsActivo(self)==99) {conducir(self,'ON');}" labelwidth="0"  type="B" visible="1" class="propBTInferior colorBTInferior" fontsize="4" img="Icon-Arrancar.png" />    

Este es el botón que se obtienen como resultado, al atributo img se le asigna la imagen a mostrar y a su vez al atributo onclick se le ha definido un evento.

  • Icon-Arrancar.png -

Este es otro uso que se le puede dar a los botones, declarando el atributo height (altura) con tamaños pequeños, nos permite obtener como resultado una línea.

  <prop name="BTLINEA1" type="B" visible="1" width="88%" height="5p" bgcolor="#CCBB0000" locked="true" border-width="0"  /> 

Se obtiene entonces el siguiente resultado:

Muchas veces queremos lograr o cumplir con un diseño determinado que nos ha sido solicitado y la mejor forma es vincular un botón a otro elemento prop, como puede ser un type=“N” o type=“NC” ya que uno aporta la imagen y otro una funcionalidad específica que no está contenida en los prop type=“B”. Veremos un ejemplo de como combinar estos:

Ejemplo: Nos han solicitado cambiar de color una parte de la pantalla según esté seleccionado o no un control tipo check y para esto hemos programado lo siguiente:

<frame>
     <prop name="MAP_COLORFRAMECONDICIONES" type="B" width="100%" tmargin="2%" height="15%" bgcolor="#CCBB0000" locked="true" border-width="0"/>
     <frame name="frmMedatos5" newline="false" lmargin="-100%"  width="100%" tmargin="2%" height="15%" bgcolor="#00000000" align="center" >
          <prop name="MAP_CONDICIONESVALOR" type="NC" img-checked="imagen-perfil.png" img-unchecked="imagen-perfil-nocheck.png" visible="1" labelbox="false" label-wrap="true" title="He leído y acepto las condiciones de la cuenta." align="left|center" forecolor="#FFFFFF" fontsize="3" labelwidth="30" />
     </frame>
</frame>
 

Aquí hemos definido un frame que contiene un prop type=“NC” y fuera de este frame pero en el mismo frame externo, contiene un type=“B” (MAP_COLORFRAMECONDICIONES) que es el que nos permitirá cambiar color del frame que el usuario ha solicitado.
Ha sido necesario la creación de un botón oculto que nos devolverá el valor del Type=“NC” para lograr el color de la parte de la pantalla según petición del cliente, que en este caso lo hemos definido en un frame.
Esto ha sido necesario porque el type=“B” no nos permite modificar el color de un frame.

Este es el resultado cuando el control tipo NC no está seleccionado en la aplicación. y en este cambio de color que queremos lograr que cuando el control de type “NC”=1, osea que está seleccionado.

En este caso nos hemos apoyado en el un botón oculto (“MAP_COLORFRAMECONDICIONES”) que su función será devolvernos el valor del prop tipo=“NC” para colorear el frame del color correspondiente.

Ejemplo:

prop:B
{
	extends:prop;
	bgcolor-disabled:#C6CEC6;	/* Color de fondo cuando el botón está deshabilitado (locked ó disableedit) 	*/
	forecolor-disabled:#ADAA9C;	/* Color de la letra cuando el botón está deshabilitado (locked ó disableedit)	*/
 
	bgcolor-pressed:#000000;	/* Color de fondo cuando el usuario está pulsando el botón 	*/
	forecolor-pressed:#FFFFFF;	/* Color de la letra cuando el usuario está pulsando el botón	*/
}

En este caso se han definido atributos para cambiar el color de los prop type=“B” dando la apariencia de que el botón está presionado o disponible para ser presionado.