Muestra las diferencias entre dos versiones de la página.
Próxima revisión | Revisión previa | ||
controles:wform [25/02/2020 17:14] pedro creado |
controles:wform [26/03/2022 12:17] (actual) pedro [Ejemplo de uso] |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== wForm ====== | ====== wForm ====== | ||
- | El control wForm es el contenedor estándar para el tratamiento de formularios, equivale a <form></form> de [[https://www.w3schools.com/html/html_forms.asp|HTML]]. | + | El control wForm es el contenedor estándar para el tratamiento de formularios, equivale a <form> de [[https://www.w3schools.com/html/html_forms.asp|HTML]]. |
Puede contener cualquier control de edición de datos, para una vez realizado el submit enviar el valor de todos los controles a nuestro CGI para poder tratarlos. | Puede contener cualquier control de edición de datos, para una vez realizado el submit enviar el valor de todos los controles a nuestro CGI para poder tratarlos. | ||
- | Para realizar en envió (submit) sera necesario añadir un [[controles:wButton]] con la propiedad lSubmit a .T., solo puede existir un botón submit en cada formulario, tambien podemos asegnarle la funcionalidad submit a un [[controles:wEdit]] que este en el formulario. | + | Para realizar en envió (submit) sera necesario añadir un [[controles:wButton]] con la propiedad **lSubmit** a .T., solo puede existir un botón submit en cada formulario, también podemos asignarle la funcionalidad submit a un [[controles:wEdit]] que este en el formulario. |
- | Normalmente en los formularios HTML cuando en un campo de texto pulsamos [Intro] se ejecuta el submit de dicho formulario. En Néfele, al pulsar [Intro] pasamos el foco al siguiente control, excepto que dicho [[controles:wEdit]] tenga su propiedad lSubmit a .T., asignándola directamente o utilizando el metodo :SetSubmit(), en ese caso se ejecutaría el submit del formulario. | + | Normalmente en los formularios HTML cuando en un campo de texto pulsamos **[Intro]** se ejecuta el submit de dicho formulario. En Néfele, al pulsar **[Intro]** pasamos el foco al siguiente control, excepto que dicho [[controles:wEdit]] tenga su propiedad **lSubmit** a .T., asignándola directamente o utilizando el método **:SetSubmit()**, en ese caso se ejecutaría el submit del formulario al pulsar **[Intro]** en dicho control. |
- | El Submit enviara al CGI un parámetro por cada control, siempre que tengan algún valor, por ejemplo los [[controles:wCheck]] si están a False no se envía ningún parámetro, por eso es muy practico utilizar le metodo GetCGIValue con el parametro | + | El ultimo control de un Formulario provoca el submit al pulsar [Intro] tenga o no la propiedad lSubmit. |
+ | El Submit enviara al CGI un parámetro por cada control, siempre que tengan algún valor, por ejemplo los [[controles:wCheckBox]] si están a False no se envía ningún parámetro, por eso es muy practico utilizar le método [[ocgi:GetCGIValue|oCGI:GetCGIValue]] con el parámetro **xdefault** con el valor que nos debe retornar en caso de que no venga. | ||
+ | Los controles que permitan múltiples valores, retornaran un array por lo que es más apropiado tratarlos con [[ocgi:GetCGIArray|oCGI:GetCGIArray]]. | ||
+ | En HTML los controles que estén **disabled**, por defecto no se envían en el submit, tengan o no valor. En Néfele si tiene valor se tratan como al resto de controles. | ||
+ | |||
+ | Por defecto se le asigna el foco al primer control del Formulario que permita edición, si queremos que sea otro deberemos indicarlo en la propiedad **lAutoFocus** de dicho control, y habilitar la propiedad **lNoAutoFocus** del Formulario. | ||
+ | |||
+ | Cuando en el formulario se utilicen controles que necesiten enviar algo más que texto, sera necesario habilitar la propiedad **lFormData** del formulario, si los controles que lo necesitan son de Néfele no sera necesario hacerlo ya que ellos mismo lo asignaran si es necesario. | ||
<nodisp> your text here </nodisp> | <nodisp> your text here </nodisp> | ||
===== Ejemplo de uso ===== | ===== Ejemplo de uso ===== | ||
- | {{url>https://samples.nefele.dev/wform 100%,280px}} | + | {{url>https://samples.nefele.dev/wiki/wform 100%,320px}} |
<Code:xailer linenums:1> | <Code:xailer linenums:1> | ||
- | WITH OBJECT WSwitch():New(:WO) | + | WITH OBJECT WBevel():New(:WO) |
- | :cId := "switch" | + | :cTitle := "Introduzca Usuario y Contraseña" |
- | :cTextOn := "Activado" | + | :cTitleAlign := xc_Center |
- | :cTextOff := "Desactivado" | + | WITH OBJECT WForm():New(:WO) |
- | :cTitle := "Puede bascular el valor de este switch" | + | :cFunction := "visparam" |
- | :cChecked := "Lo has Activado" | + | :aParams := {{"control","cadena de control"}} |
+ | WITH OBJECT WEdit():New(:WO) | ||
+ | :cId := "usuario" | ||
+ | :cHint := "Usuario" | ||
+ | :cIcon := "person" | ||
+ | :SetRequired() | ||
+ | :Create() | ||
+ | END WITH | ||
+ | WITH OBJECT WEdit():New(:WO) | ||
+ | :cId := "password" | ||
+ | :cHint := "Password" | ||
+ | :cIcon := "vpn_key" | ||
+ | :SetPassword() | ||
+ | :SetRequired() | ||
+ | :Create() | ||
+ | END WITH | ||
+ | WITH OBJECT WButton():New(:WO) | ||
+ | :lSubmit := .T. | ||
+ | :cText := "Enviar" | ||
+ | :Create() | ||
+ | END WITH | ||
+ | :Create() | ||
+ | END WITH | ||
:Create() | :Create() | ||
END WITH | END WITH | ||
</Code> | </Code> | ||
+ | |||
+ | ===== Control de reenvió de formularios ===== | ||
+ | Para evitar que el usuario provoque el reenvío del formulario, porque de más de una vez al summit o porque de al botón atrás del navegador, hemos de habilitar la propiedad **lUniqueId** de forma que cada wForm se generará con un identificador único por cada llamada que se realice al CGI. | ||
+ | |||
+ | Luego en el Método de nuestro CGI que ha de procesar el summit del formulario, controlaremos la validez del identificador del wForm, para lo que utilizaremos la función [[funciones:nfl_ChkFormUID]] que nos retornara **.T.** o **.F.** dependiendo de si el identificador es valido o no. | ||
---- | ---- | ||
Línea 33: | Línea 67: | ||
^Nombre ^Init ^Descripción ^Versión ^ | ^Nombre ^Init ^Descripción ^Versión ^ | ||
- | |cClassId | swt | | 0.1| | + | |cClassId | frm | | 0.1| |
- | |cTitle | | Texto en pequeño que aparece sobre el Check | 0.1| | + | |cFunction | | Función del CGI que sera llamada al hacer Submit del formulario | 0.1| |
- | |cTextOn | | Texto en para el estado On (a la derecha) | 0.1| | + | |[[propiedades:aParams]] | {} | aParams que se añadirán al submit aparte del los input visibles | 0.1| |
- | |cTitle | | Texto en para el estado Off (a la izquierda) | 0.1| | + | |lAutoComplete | .t. | Habilita o no el Autocompletado de los campos por el Navegador | 0.1| |
- | |[[nefele:constantes#alineaciones|cAlign]] | xc_NoAlign | Alineación| 0.1| | + | |cMethod | POST | Método de envió de los datos del formulario (POST o GET) | 0.1| |
- | |lChecked | .F. | Estado inicial del Switch| 0.1| | + | |lFormData | .f. | Habilita el envió de ficheros adjuntos | 0.1| |
- | |cClrTitle | black | Color del título según [[https://materializecss.com/color.html#palette|Materialize]]| 0.1| | + | |cFormAction | | URL a la que se envían los datos del formulario, si es vació se envían al mismo CGI | 0.1| |
- | |cChecked | true | Valor que devuelve cuando esta seleccionado, solo en formularios con Submit, si se pide su Value por [[propiedades:aParams]] nos devuelve siempre este valor, este o no Checkeado| 0.1| | + | |lNoValidate | .f. | Evita que se validen los campos del formulario | 0.1| |
- | |[[propiedades:aWidth]] | {11,,,} |Valores de Width apropiados para checkbox| 0.1| | + | |lNoAutoFocus | .f. | Deshabilita la asignación automática del Foco al primer control editable | 0.1| |
- | |[[propiedades:aOffset]] | {1,,,} |Valores de Offset apropiados para checkbox| 0.1| | + | |lUniqueId | .f. | Genera un código único para la llamada actual a este formulario para evitar la rellamada | 0.4| |
===== Hereda de... ===== | ===== Hereda de... ===== | ||
Línea 50: | Línea 85: | ||
{{page>controles:wcontrol#metodos}} | {{page>controles:wcontrol#metodos}} | ||
- | ~~DISCUSSION|Comentario wSwitch~~ | + | ~~DISCUSSION|Comentario wForm~~ |
/*{{tag>[nefele primeros-pasos]}}*/ | /*{{tag>[nefele primeros-pasos]}}*/ |