====== wComboBox ====== wComboBox nos permite incluir en nuestras web un control Select de Materialize [[https://materializecss.com/select.html]]. Con el podemos darle al usuario la opción de seleccionar un item dentro de una lista de items que le ofrecemos. Los items los alimentamos mediante la propiedad aItems que puede ser utilizada de tres maneras. - con un array de elementos (cadenas y/o numeros) {"Elemento1","Elemento2","ElementoX"}, en este caso nos devuelve el elemento seleccionado ("ElementoX"). - con un array de parejas {Indice,Valor} ({ {cIndex1,cText1},{cIndex2,cText2},{cIndexX,cTextX} }), en este caso devuelve el cIndex del elemento seleccionado (cIndexX). En este caso cIndex con valor -1 serán utilizadas como Grupos y no se pueden seleccionar. - con un array de [[controles:wItemComboBox]], se utiliza para poder añadir imágenes y grupos a los ComboBox. Hay que recordar que el [[nefele:ocgi|CGI]] siempre nos devuelve cadenas, sean los Elementos y cIndex del tipo que sean. Si habilitamos la propiedad **lMultiple** nos permitirá seleccionar varias opciones de las presentadas en el combo, en ese caso el [[nefele:ocgi|CGI]] nos devolverá un array con los los elementos seleccionados. ===== Ejemplo de uso ===== {{url>https://samples.nefele.dev/wiki/wcombobox 100%,600px}} ==== Modo 1 ==== WITH OBJECT WComboBox():New(:WO) :cId := "mesvisita1" :aItems := {"Enero","Febrero","Marzo","Abril","Mayo","Junio",; "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"} :cText := "Seleccione el mes de visita" :cIcon := "event_available" :cTitle := "Modo 1: Mes de visita" :cHelp := "Este es el Mes que prefiere que le hagamos la visita periódica" :Create() END WITH LOCAL cSeleccion := oCGI:GetCgiValue("mesvisita1") ==== Modo 2 ==== WITH OBJECT WComboBox():New(:WO) :cId := "mesvisita2" :aItems := {{-1, "1er Trimestre"},{1,"Enero"},{2,"Febrero"},{3,"Marzo"},; {-1, "2o Trimestre"}, {4,"Abril"},{5,"Mayo"},{6,"Junio"},; {-1, "3er Trimestre"}, {7,"Julio"},{8,"Agosto"},{7,"Septiembre"},; {-1, "4o Trimestre"}, {10,"Octubre"},{11,"Noviembre"},{12,"Diciembre"}} :cText := "Seleccione el mes de visita" :cIcon := "event_available" :cTitle := "Modo 2: Mes de visita" :cHelp := "Este es el Mes que prefiere que le hagamos la visita periódica" :Create() END WITH LOCAL cSeleccion := oCGI:GetCgiValue("mesvisita2") ==== Modo 3 ==== WITH OBJECT WComboBox():New(:WO) :cId := "selimagen" :cText := "Seleccione una imagen" :cIcon := "camera" :cTitle := "Modo 3: Imagen para incluir en el documento" :cHelp := "Esta Imagen aparecerá en la parte superior del documento" // Creamos un separador WITH OBJECT :AddItem() :cIndex := "" :cText := "Paisajes" :lGroup := .T. END WITH // Utilizando directamente :AddItem :AddItem("L1","Lago 1",,"images\lago.jpeg") :AddItem("L2","Lago 2",,"images\sample-1.jpg") :AddItem(,"Entornos",.T.) WITH OBJECT :AddItem() :cIndex := "E1" :cText := "Oficina" :cImage := "images\office.jpg" END WITH :AddItem(,"Personas",.T.) WITH OBJECT :AddItem() :cIndex := "P1" :cText := "Yuna" :cImage := "images\yuna.jpg" END WITH :Create() END WITH LOCAL cSeleccion := oCGI:GetCgiValue("selimagen") ==== Modo 4 ==== WITH OBJECT WComboBox():New(:WO) :cId := "multiple" :aItems := {"Enero","Febrero","Marzo","Abril","Mayo","Junio",; "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"} :cText := "Meses" :cIcon := "event_available" :cTitle := "Modo 4: Selección Multiple de Mes" :cHelp := "Meses en los que se realizarán las visitas periódicas" :lMultiple := .T. :Create() END WITH LOCAL aSeleccion := oCGI:GetCgiArray("multiple") // Como es una selección múltiple de esta manera nos retorna siempre un array, // aunque solo se seleccione un elemento. LOCAL aSeleccion := oCGI:GetCgiValue("multiple") // Si lo pedimos así, cuando se seleccionen varios elementos nos devolverá un array // si es una selección simple nos devuelve una cadena. ===== Propiedades ===== ^Nombre ^Init ^Descripción ^Versión ^ |cText| | Texto que aparece cuando no hay nada seleccionado | 0.1| |cTitle| | Titulo encima del ComboBox | 0.1| |[[propiedades:cIcon]]| | Icono que aparecerá a la izquierda del control | 0.1| |aItems| | Elementos del ComboBox, se puede utilizar de 3 maneras | 0.1| |lMultiple| | Se permite la selección múltiple | 0.1| |cSelected| | cIndex seleccionado por defecto | 0.1| |[[propiedades:conclick|cOnChange]]| | Función del CGI a llamar cuando cambie la selección, si empieza por # llama a funcion JS | 0.1| |[[propiedades:aParams]]| | Parámetros extras a enviar cuando se llame a cOnChange | 0.1| |[[propiedades:cAjaxBevel]]| | [[controles:wBevel]] donde se incrusta el resultado de la llamada al Ajax | 0.1| |lAjaxWaitON| .T. | Incluye un indicador de actividad mientras se ejecuta la función [[tecnicas:Ajax]] | 0.1| |cAjaxText| | Mensaje a poner debajo del Reloj de Actividad | 0.1| |lReLoad| .F. | Cuando se envía por [[tecnicas:Ajax]] ha de activarse la Recarga para que materialize lo inicialice | 0.1| |lHtmlDefault| .F. | Fuerza a utilizar el Select por defecto de HTML y no el de Materialize, es útil para los navegadores IOS ya que el de Materialize no funciona aun correctamente. | 0.1| ===== Métodos ===== ^Nombre ^Retorna ^Descripción ^Versión ^ |AddItem(cIndex, cText, lGroup, cImage) | Nuevo Item |Añadir [[controles:wItemComboBox]] a aItems. | 0.1| ===== Hereda de... ===== ====== wControl ====== {{page>controles:wcontrol#propiedades}} {{page>controles:wcontrol#metodos}} ~~DISCUSSION|Comentarios wComboBox~~ /*{{tag>[nefele primeros-pasos]}}*/