| Ambos lados, revisión anterior
Revisión previa
Próxima revisión
|
Revisión previa
|
wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:4.-botones:start [2018/04/11 18:26]
ejetoro [Botones] |
wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:4.-botones:start [2021/06/08 13:12] (actual)
ary [Tabla] |
| {{indexmenu_n>4}} | {{indexmenu_n>1}} |
| ====== Botones ====== | |
| | ===== Type B Botón ==== |
| | \\ |
| | 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")**. |
| | \\ |
| | ==== Atributos para diseño de los botones ==== |
| \\ | \\ |
| Para la creación de botones, con lo que se podrán ejecutar acciones. El prop para definir un botón se realiza con el atributo **type="B"**. | |<-50% 75%->| |
| | ^ 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. | |
| |
| La creación de un botón, consta de dos partes: por un lado la propiedad que define sus atributos visuales, y por otro un nodo donde estarán todas y cada una de las acciones a realizar. | |
| |
| | ====Propiedad de tipo BOTON==== |
| \\ | \\ |
| | 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") |
| |
| Aquí se muestra el nodo **button**. Además de los atributos que deciden si es visible, el título a mostrar en pantalla o en que group se muestra, tenemos el atributo **method**, que es un atributo bastante importante, ya que es el lugar donde se realiza la llamada al nodo que ejecuta las acciones del botón. \\ | <code javascript> |
| | <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"/> |
| | </code> |
| |
| <code xml> | Este código genera los siguientes botones: |
| <prop name="BUTTON1" type="B" method="ExecuteNode (inicializar)" title="Iniciar Ruta" visible="1" toolbar="false" labelwidth="24" onchange="refresh255" lmargin="7"/> | |
| | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:botones1a.png?nolink&350|}} |
| |
| <!-- boton con imagen atributo img, width y height --> | \\ |
| <prop name="Buscar" type="B" title="Buscar" visible="1" method="ExecuteNode(buscar)" class="boton" labelwidth="1" img="search.png" width="50" height="50" /> | En este caso se han usado los siguientes atributos: |
| |
| <!-- Anteriormente existía el nodo button con las mismas funcionalidades del prop type="B" que ya está obsoleto | * title: Texto del botón. (En este caso "Datos","Medio Pago", "Carnet delante", "Carnet detrás") |
| y no se interpretan muchos de los estilos definidos con css y tampoco atributos nuevos. | * 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. |
| <button name="BUTTON1" method="ExecuteNode (inicializar)" caption="Iniciar Ruta" visible="1" toolbar="false" labelwidth="24"/> | * lmargin="2%": Se ha usado para dar margen izquierdo al botón, con relación a otro elemento. |
| </code> | * 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')) |
| | |
| | ====Propiedad de tipo BOTON con IMAGEN==== |
| | \\ |
| | 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:)=== |
| |
| El nodo **method name="[[wiki:2.-desarrollo-app:2.3.-entender_un_mapping:b.-controles_xone:202.06.-botones:ExecuteNode]]"**, es un nodo de sistema, y ya está DEPRECATED (obsoleto) en todos los Framework. Actualmente solo en el Framework de PC es obligatorio. Solo se pone una vez en la colección que tenga botones, y siempre es igual. | |
| |
| <code xml> | |
| <method name="ExecuteNode"> | <code javascript> |
| <param name="P1" type="T" value=""/> | <prop name="BTIMGCOCHEGRID" visible="1" img="imagen-bateria.jpg" type="B" class="propBTGrid" title="##FLD_MAP_BATERIA##" /> |
| </method> | <prop name="BTIMGKMGRID" visible="1" img="imagen-km.jpg" type="B" class="propBTGrid" title="##FLD_MAP_KM##" /> |
| </code> | </code> |
| |
| Y por último, el nodo en el que se pone el código que se va a ejecutar. El nombre es definido por el usuario, y como único requisito, es que el nombre del nodo tiene que llamarse igual (mayúsculas-minúsculas) que el nodo al que llama el nodo button en su atributo method. En el ejemplo, se muestran acciones realizadas en código Script, pero se podían haber puesto nodos **action**. | Este son los botones que se obtienen como resultado, al atributo **img** se le asigna la imagen a mostrar. |
| ====Ejemplo de Código==== | \\ |
| <code xml> | * imagen-bateria.jpg - {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:imagen-bateria.jpg?nolink&80|}} |
| <inicializar> | |
| <action name="runscript"> | |
| <script language="VBScript"> | |
| Dim vResult | |
| vResult =AppData.UserInterface.MsgBox ("Esta acción reiniciará toda la ruta. ¿Está seguro que desea ejecutarla?","Advertencia",1) | |
| If vResult =1 Then | |
| 'OJO, el update va a meter las operaciones en réplica, si no se desea, mirar el código definido en maintenance. | |
| appdata.executeSQL "UPDATE Gen_Rutas SET VISITADO=0 WHERE IDUSUARIO=" + CStr(This("IDUSUARIO")) | |
| vResult =AppData.UserInterface.MsgBox ("Ruta inicializada","Advertencia",0) | |
| End If | |
| </script> | |
| </action> | |
| </inicializar> | |
| |
| <prop name="MAP_BT_CITAS_MEDICAS" method="executenode(irgroup(8))" type="B" visible="1" width="120" height="95" labelwidth="1" newline="false" img=".\icons\tr.png" imgsel=".\icons\trsel.png" /> | * imagen-km.jpg - {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:imagen-km.jpg?nolink&80|}} |
| <prop name="MAP_BT_VIVIR_BIEN" method="executenode(irColl(VivirBien))" type="B" visible="1" width="120" height="95" labelwidth="1" img=".\icons\tr.png" imgsel=".\icons\trsel.png" /> | \\ |
| |
| <!-- Con este nos vamos a otra pestaña dentro de la misma colección --> | ===Botón con imagen asociada (con acción:)=== |
| <irgroup> | |
| <action name="runscript"> | |
| <param name="group" /> | |
| <script language="VBScript"> | |
| this("MAP_NGROUP") = group | |
| 'appdata.UserInterface.MsgBox this("MAP_GROUP"),"",0 | |
| AppData.UserInterface.ShowGroup group,"##ALPHA_IN##",500,"##ALPHA_OUT##",500 | |
| </script> | |
| </action> | |
| </irgroup> | |
| |
| <!-- Con este nos vamos a otra colección --> | <code javascript> |
| <irColl> | <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" /> |
| <action name="runscript"> | </code> |
| <param name="coll" /> | |
| <script language="VBScript"> | |
| 'ui.openmenu "coleccion",mascara,modo (0-listado, 1-Edicion) | |
| appData.userinterface.openmenu coll,26,1 | |
| </script> | |
| </action> | |
| </irColl> | |
| |
| <mensajes show-wait-dialog="false"> | 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. |
| <action name="runscript"> | \\ |
| <script language="VBScript"> | * Icon-Arrancar.png - {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:icon-arrancar.png?nolink&60|}} |
| 'MsgBox0,MsgBox1,MsgBox4,ShowToast,ShowNotification,Sonido | |
| Dim vResult | |
| Select Case this("MAP_TIPO_MENSAJE") | |
| Case "MsgBox0" | |
| ui.MsgBox "Mensaje Informativo solo con OK","Titulo Ventana",0 | |
| Case "MsgBox1" | |
| 'Si pulsa ACEPTAR vale 1 y si pulsa CANCELAR vale 2 | |
| vResult =ui.MsgBox ("Pregunta si ACEPTAR ó CANCELAR","Advertencia",1) | |
| ui.MsgBox "Ha pulsado el botón con valor: "+cstr(vResult),"Titulo Ventana",0 | |
| Case "MsgBox4" | |
| 'Si pulsa SI vale 6 y si pulsa NO vale 7 | |
| vResult =ui.MsgBox ("Pregunta SI ó NO","Advertencia",4) | |
| ui.MsgBox "Ha pulsado el botón con valor: "+cstr(vResult),"Titulo Ventana",0 | |
| Case "ShowToast" | |
| ui.showToast "Mensajito efímero que dura 3 segundos" | |
| Case "ShowNotification" | |
| ui.ShowNotification 1, "Título", "Esto es una notificación", "Aviso de recepción de datos" | |
| Case "Sonido" | |
| 'El sonido tiene que estar en la carpeta files del proyecto | |
| ui.PlaySoundAndVibrate "bultonoencontrado.wav",true,1 | |
| End Select | |
| </script> | |
| </action> | |
| </mensajes> | |
| |
| </code> | |
| ===== Atributos ===== | |
| |
| ==== method="ExecuteNode (nombre nodo)" ==== | ==== Propiedad de tipo Botón para definir líneas ==== |
| |
| Atributo que llama al nodo que ejecutará las instrucciones correspondientes. | |
| |
| A este método se le pueden pasar parámetros, de forma que varios botones puedan llamar a un mismo código con ligeras variaciones... | 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. |
| |
| <code xml> | <code javascript> |
| <prop type="B" ..... method="executeNode (sacamsg(Parametro1,Parametro2))" /> | <prop name="BTLINEA1" type="B" visible="1" width="88%" height="5p" bgcolor="#CCBB0000" locked="true" border-width="0" /> |
| <sacamsg> | |
| <action name="runscript"> | |
| <param name="parametro1" /> | |
| <param name="parametro2" /> | |
| <script language="VBScript"> | |
| if parametro1="loquesea" then | |
| ...... | |
| end if | |
| llamadaafuncion parametro1 parametro2 | |
| </script> | |
| </action> | |
| </sacamsg> | |
| </code> | </code> |
| ==== title="nombre" ==== | |
| |
| Nombre del botón. | Se obtiene entonces el siguiente resultado: |
| |
| ==== postonchange="refresh" ==== | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:linea_roja.png?nolink&200|}} |
| |
| El postonchange es un atributo que se especifica para que sea ejecutado cuando se vuelve al flujo normal de la aplicación después de un pushvalue, para que se ejecute algún nodo o para que se refresquen las propiedades por si alguna ha sido modificada durante el pushvalue. | ==== Uso del botón combinado con otro elemento tipo Prop ==== |
| |
| **Ejemplo de Código:** | 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: |
| <code xml> | |
| <prop name="Aceptar" type="B" title="Aceptar" onchange="Refresh" method="ExecuteNode(aceptar)" postonchange="ExecuteNode(postaceptar)" ... /> | |
| </code> | |
| |
| En el nodo <aceptar> se lanza un pushvalue y al volver del pushvalue se ejecutaría el postonchange="[[wiki:2.-desarrollo-app:2.3.-entender_un_mapping:b.-controles_xone:202.06.-botones:ExecuteNode]](postaceptar)" o bien hacer un postochange="refresh" para que refresque las propiedades si alguna hubiese cambiado su valor durante el pushvalue. | 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: |
| | <code javascript> |
| | <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> |
| | |
| | </code> |
| |
| Si se hace un pushvalue desde un before-edit el postonchange hay que ponerlo en el propio nodo. | 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. \\ |
| <code xml> | 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. \\ |
| <before-edit postonchange="refresh"> | 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. |
| </before-edit> | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:captura_nc.png?nolink&300|}} |
| | y en este cambio de color que queremos lograr que cuando el control de type "NC"=1, osea que está seleccionado. |
| | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-b-boton:capturanc1.png?nolink&300|}} |
| | |
| | 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. |
| | |
| | ==== Uso de los CSS específicos para prop type="B" ==== |
| | Ejemplo: |
| | <code css> |
| | 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 */ |
| | } |
| </code> | </code> |
| | |
| | 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. |