Cree un formulario de contacto multiuso con Flex

En este tutorial crearemos un formulario de contacto personalizado creado por Flex. Implementaremos muchas de las fantásticas funciones integradas del marco de trabajo de Flex, como los métodos de validación, el cuadro de alerta y los componentes de campo de fecha para dar funcionalidad adicional a nuestro formulario de contacto. También estudiaremos el ajuste de las propiedades CSS para dar a nuestra aplicación un aspecto y estilo únicos..

Visión general

Vamos a crear un formulario de contacto en el constructor de Flex. La razón por la que estamos utilizando el generador de Flex sobre el propio Flash se debe a la funcionalidad incorporada en el marco de trabajo de Flex. Es de fácil acceso y habría necesitado bastante código para lograrlo en Flash. Vamos a ver los métodos de validación y la ventana de alerta disponibles en el marco de trabajo de Flex, así como muchos de los componentes que hacen que el uso de Flex sea un poco más especial..

Para aquellos de ustedes que aún no han descargado o usado Flex Builder, pueden obtener una versión de prueba desde aquí..
Si aún no lo ha utilizado, lo mejor es tratar de familiarizarse con el uso del generador de Flex y quizás probar primero algunos tutoriales más básicos..

Paso 1: Comencemos.

Primero vamos a crear un nuevo proyecto Flex seleccionando: archivo> nuevo> Proyecto Flex. Dale un nombre a tu proyecto; He elegido ContactForm. No necesitamos agregar bibliotecas adicionales, así que deje todo eso como predeterminado y simplemente haga clic en Finalizar.

El generador de Flex ahora creará su proyecto y una vez que se complete, debe tener la estructura básica de carpetas del proyecto Flex.

Paso 2: Agregar los componentes.

Ahora queremos editar nuestra clase mxml principal, ya que vamos a agregar muchos recursos a la aplicación. Por lo general, esto me resulta más fácil en el modo de diseño, por lo que si simplemente cambiamos nuestro espacio de trabajo, podemos comenzar a crear algunas imágenes.

En primer lugar vamos a agregar un componente del Panel a la etapa. Haz esto de aproximadamente 400 x 574 px ajustando los campos en el cuadro de diseño en la parte izquierda de la pantalla:

No vamos a preocuparnos demasiado por cómo se ve en este momento, ya que vamos a cambiar esto con CSS un poco más tarde. Solo nos estamos concentrando en llevar los componentes al escenario.
Ahora necesitamos agregar algunos componentes de entrada de texto al escenario; Una para cada uno: nombre, apellidos, correo electrónico y teléfono. Le he dado a cada caja de entrada un ancho de 210 píxeles y un valor de X de 130; luego se espacian uniformemente en el eje Y. Luego, debemos agregar un componente de Etiqueta a la izquierda de cada uno de estos para que el usuario sepa lo que esperamos que ingresen y moverlos todos para que se alineen bien junto a los cuadros de entrada de Texto..

Por último, tendremos que asignar a cada uno de nuestros cuadros de entrada de texto una identificación única para que puedan orientarse con ActionScript. Para hacer esto, ingresamos el ID en el cuadro de ID de la pestaña común en el panel de propiedades de Flex, para mis cuadros de entrada he elegido el nombre, el nombre, el correo electrónico y el teléfono.

Paso 3: Campos de fecha y cuadros combinados.

Ahora debemos agregar los componentes del campo de fecha a la aplicación arrastrando el componente del campo de fecha desde el panel de componentes a la etapa. Una vez para la fecha "de" y luego otra vez para la fecha de "a". Una vez más, necesitamos darles una ID única en el cuadro de identificación y he elegido a Fecha y Fecha de partida para la mía.

Luego hacemos lo mismo para el componente comboBox. Para el componente comboBox también necesitamos decirle de dónde obtendrá su información para dictar la lista desplegable que se produce cuando el usuario hace clic en el comboBox. Para hacer esto, en el cuadro del proveedor de datos para este componente en la pestaña común, ingresamos comboText. Lo que estamos haciendo aquí es decirle a Flex que, como el texto está encerrado entre corchetes, debería buscar una variable para proporcionar esta información. Más adelante vamos a hacer que esta variable sea vinculable al comboBox, de modo que el swf busque constantemente esta información para cualquier cambio..

Paso 4: Check Boxes y Radios.

Por último, agregaremos dos componentes de casilla de verificación y dos botones de opción, junto con etiquetas relevantes para mostrar la información necesaria al usuario. Para estas casillas de verificación y botones de radio, debemos agregar un oyente a través de ActionScript para verificar un cambio en su estado actual y desde el cual pasaremos los datos a la variable relevante que se guardará para el formulario php. Para hacer esto, podemos ingresar una función en el cuadro onClick en la pestaña común. Para el propósito de nuestra función, necesitamos pasarle un parámetro. En el caso de la casilla de verificación de desayuno en la casilla onClick, ingresaríamos el nombre de la función con el parámetro entre paréntesis, entre los que se incluyen: foodsAndCot (desayuno) y para la cena, sería: foodsAndCot (cena) etc. entrar en más detalles sobre esto un poco más tarde.

Paso 5. Toques finales

Por último, debemos agregar un área de texto y darle una identificación relevante para el cuadro de comentarios, junto con dos botones debajo de él; el reinicio y el botón de enviar. Para los botones también necesitamos ingresar una función de objetivo onClick, para el botón de reinicio se restablecerá () y para el botón de envío se enviará (), agradable y simple. Ahora, todo en el formulario se ha presentado de manera agradable y se han proporcionado los elementos relevantes y el ID para la referencia de ActionScript. Ahora avancemos a obtener el formulario para ver cómo queremos antes de pasar al código ActionScript..

Paso 6: CSS.

Las aplicaciones en Flex Builder tienen la ventaja adicional de poder cambiarse fácilmente con simples hojas de estilo CSS. Si hace clic con el botón derecho en la raíz de nuestro proyecto, puede tener la opción de ir a Nuevo> Archivo CSS. Esto creará una hoja de CSS para que podamos editar. Editar una hoja de estilo en Flex Builder es muy simple, incluso si no entiende realmente CSS, ya que la hoja de estilo es incluso editable en el modo de diseño. Para hacer esto con la hoja de estilo abierta en el generador de Flex, puede hacer clic en el modo de diseño. Esto abrirá el archivo CSS en el modo de diseño, que debería mostrar una pantalla en blanco, ya que la hoja de estilo no tiene nada configurado. Para agregar una configuración, haga clic en el botón en la parte superior de la pantalla que parece una pequeña pila de ladrillos con un signo más arriba. Esto abrirá un cuadro de diálogo que nos permitirá elegir un componente para agregar un nuevo estilo. Empecemos por el panel. Verás una vista previa de la configuración actual del panel..

A la izquierda de esto, en el panel de propiedades, se encuentran todos los campos que se pueden cambiar. Para este tutorial, he elegido eliminar las esquinas redondeadas predeterminadas y colorear el borde negro con una opacidad del 75%. El relleno cambié a gris oscuro y cambié el texto a gris claro en la fuente Myriad Pro. Si hace clic en la vista de categoría o en la vista Alfabética en la parte superior derecha del panel de propiedades, verá que hay muchas más cosas que se pueden cambiar para que no esté limitado a lo que está disponible en la vista Estándar. También puede cambiar totalmente el aspecto del componente vinculándolo a un swf o swc creado en flash o incluso a un png / jpg creado en fuegos artificiales, Photoshop o ilustrador, pero eso está fuera del alcance de este tutorial, ya que estamos Sólo se trata de la CSS aquí ahora.

Paso 7: CSS Extras

Solo necesitamos cambiar los componentes que vamos a utilizar en esta aplicación. Eso significa los componentes básicos que ya hemos agregado al escenario, a saber, los cuadros de entrada de Texto, las etiquetas, los campos de fecha, el comboBox y los botones. Los botones de opción y las casillas de verificación se basan en el componente del botón, por lo que no debemos preocuparnos por ellos, sin embargo, hay algunos componentes ocultos de los que debemos preocuparnos..

Cuando creamos las validaciones con ActionScript, también vamos a utilizar la ventana de alerta. Por lo tanto, necesitamos cambiar el CSS para esto, junto con el selector de fecha. El selector de fecha es el calendario desplegable que aparece cuando el usuario hace clic en el componente del campo de fecha. Sin embargo, para que Flex sepa que el campo de fecha está usando el CSS de nuestra hoja de estilo, necesitamos cambiar un valor en el CSS del campo de fecha. Si cambia la vista en el panel de propiedades a la vista de Categoría, verá un estilo llamado "dateChooserStyle", necesitamos cambiarlo a "contactStyle", que es el nombre de nuestra hoja de estilos. De otra manera, Flex solo usará el gris predeterminado para el componente de selección de fecha.

También debemos hacer esto para el comboBox, cuyo menú desplegable es en realidad un componente de lista. Nos vinculamos cambiando el CSS del componente de lista y el valor dropDownStyleName del comboBox al nombre de nuestra hoja de estilo. Ahora no voy a entrar en demasiados detalles sobre los detalles específicos de los estilos que elegí para mis componentes en el ejemplo de vista previa, excepto que elegí un esquema de color negro / gris y realicé todas mis esquinas con un fino Un borde negro de 1 píxel. Puede configurar el suyo como desee y para tener una idea de lo que se puede hacer, eche un vistazo a la hoja de estilo contactStyle.css también disponible en la fuente de este tutorial..

 / * Archivo CSS * / Panel controlBarStyleName: panelControlBar; titleStyleName: panelTitle; tamaño de fuente: 12; fontWeight: normal; fontFamily: "Arial"; color de borde: # 010101; borderAlpha: 0.75; BorderThicknessLeft: 10; roundedBottomCorners: false; cornerRadius: 0; borderThicknessRight: 10; color de fondo: # 5C5B5B; color: #DDDEDE; backgroundSize: auto;  DateField fontFamily: "Arial"; color de borde: # 1A1A1A; dateChooserStyleName: contactStyle;  TextArea backgroundColor: # 9B9A9A; color de borde: # 131313;  Barra de desplazamiento borderColor: # 3C3D3D; trackColors: # 363737, # 818383; fillAlphas: 1.0, 1.0, 1.0, 1.0; fillColors: # 9B9A9A, # 413E3E, # 9B9A9A, # 393838; cornerRadius: 0;  DateChooser backgroundColor: # 3B3939; headerColors: # 313132, # 313132; color: # E2E6E7; Espesor del borde: 1; color de borde: # 1A1A1A; cornerRadius: 0; fontFamily: "Arial"; tamaño de fuente: 12;  Botón cornerRadius: 0; color de borde: # 5B5C5C; fillAlphas: 1.0, 1.0; fillColors: # 9F9E9E, # 3F3E3E; color: # C3CACB; textRollOverColor: # B9BCBF; fontFamily: "Arial"; fontWeight: normal;  TextInput backgroundColor: # 9B9A9A; color de borde: # 1C1D1D; Espesor del borde: 1; borderStyle: sólido;  ComboBox fontFamily: "Arial"; fontWeight: normal; cornerRadius: 0; dropDownStyleName: contactStyle;  Lista backgroundColor: # 676565; borderColor: # 202020; fontFamily: "Arial"; color: #DBDDDE;  Label fontFamily: "Arial"; tamaño de fuente: 12;  Alerta borderColor: # 151515; color de fondo: # 939292; backgroundSize: auto;  .panelTitle fontFamily: "Arial";  @ font-face fontFamily: "Arial"; fontWeight: normal; fontStyle: normal; src: local ("Arial");  @ font-face fontFamily: "Arial"; fontWeight: normal; fontStyle: normal; src: local ("Arial"); 

Paso 8: Vincular el CSS a nuestra aplicación.

Ahora que hemos diseñado nuestra hoja de estilo, necesitamos decirle a nuestra aplicación que adopte este aspecto. Esto es muy simple y lo hacemos agregando este bit de código a nuestra clase mxml:

Ahora, si regresa a la vista de diseño y verifica la aplicación, siempre que todo se haya hecho correctamente, verá que todos los componentes han cambiado de acuerdo con la hoja de estilo CSS..

Paso 9: Vamos a obtener la codificación!

Bien, ahora que tenemos las cosas en la forma en que las queremos, es hora de agregar alguna funcionalidad a nuestro formulario de contacto y todo esto se hace con la magia de ActionScript. De vuelta al modo de origen, agreguemos un bloque de script a nuestra aplicación escribiendo:

Afortunadamente, con Flex no necesitamos agregar ninguna declaración de importación. Por defecto, los agrega para nosotros a medida que avanzamos, por lo que podemos comenzar por crear las variables relevantes. Necesitamos una variable para guardar la información de las casillas de verificación, una matriz a la que llamaremos comidas y luego otra variable para los botones de radio de la cuna. Como estos botones están etiquetados como sí o no, haremos que esta variable sea booleana para que devuelva verdadero o falso. También necesitamos crear una instancia de la clase Alert, para poder manipularla más adelante durante la función de envío. Finalmente, debemos agregar la variable que contendrá la información para nuestro comboBox como se definió anteriormente. A esto lo llamaremos comboText, será una matriz y, como se mencionó anteriormente, hacemos que esta variable sea vinculante agregando la palabra clave "bindable" antes de declarar la variable.

 privado var alertWindow: Alerta; comidas privadas var: Array = []; cuna de var privado: booleano = falso; [Bindable] private var comboText: Array = [label: "King size room", label: "Double room"];

Paso 10: pasar datos de radio y casilla de verificación.

Nuestra siguiente función pasará los datos de la radio y marcará las casillas en información utilizable. Al crear estos componentes, les dimos un escucha onClick y en esto pasamos un parámetro que, como se puede ver en la función en sí, era un "objeto". Durante esta función, verificamos qué es este objeto a través de una declaración "if" y, a través de eso, manipulamos nuestros datos. En este caso, tenemos una matriz para los requisitos de comida en la que insertamos información, o para la casilla de verificación tenemos un Boolean que está configurado en verdadero para la casilla de verificación Sí o falso para la casilla de verificación No.

 función privada mealsAndCot (objeto: objeto): void if (objeto == desayuno) meals.push ("desayuno,");  else if (object == dinner) meals.push ("dinner,");  else if (object == yesCot) cot = true;  else cot = false; 

Estos datos se pueden enviar a nuestro script php durante la función submitToPHP una vez que todo haya sido verificado por la función submit a continuación.

Paso 11: Validación.

Ahora es el momento de incorporar los métodos de validación incorporados desde el marco de trabajo de Flex, y lo hacemos de manera similar a la creación de nuevos componentes. En primer lugar, vamos a crear una instancia de mx: stringValidator para verificar y validar el nombre y el apellido. Para hacer esto para la comprobación de la validación del primer nombre, escribimos el siguiente texto, debajo del nodo de la aplicación fuera de las etiquetas mx: script:

Como puede ver, los parámetros necesarios para el validador son un id y una fuente que debe verificarse, en este caso el primer nombre. Hacemos lo mismo creando un validador para verificar el apellido. Para el correo electrónico y el número de teléfono, hacemos lo mismo, pero Flex tiene otros validadores, a saber, el validador de correo electrónico y el validador de números que se pueden usar muy bien para estos campos, por lo que la secuencia de comandos debajo de nuestra etiqueta de aplicación principal debería tener este aspecto:

Paso 12: La función de envío.

La principal característica de nuestra aplicación es la función de envío. Esto se llama cuando el usuario hace clic en el botón Enviar para enviar el texto y la información ingresados ​​a través del formulario de contacto..
Como en esta función vamos a revisar el texto ingresado y los campos necesarios, comenzamos creando instancias de ValidationResultEvent. En lugar de llamarlo aquí como un detector de eventos, vamos a decir que es igual al resultado de la verificación de validación llevada a cabo por el propio Validator. Por supuesto, creamos una de estas instancias para cada una de las verificaciones de validación y luego pasamos los resultados a las declaraciones "if" para crear el evento llevado a cabo según el resultado..

 función privada submit (): void var firstNameValidation: ValidationResultEvent = validFirstName.validate (); var surNameValidation: ValidationResultEvent = validSurName.validate (); var emailValidation: ValidationResultEvent = validEmail.validate (); var phoneValidation: ValidationResultEvent = validPhone.validate (); if (firstNameValidation.type == ValidationResultEvent.INVALID || surNameValidation.type == ValidationResultEvent.INVALID) Alert.show ("Debe ingresar un nombre válido");  else if (emailValidation.type == ValidationResultEvent.INVALID) Alert.show ("Introduzca una dirección de correo electrónico válida");  else if (phoneValidation.type == ValidationResultEvent.INVALID) Alert.show ("Ingrese un número de teléfono válido");  else if (comments.text == "") Alert.show ("Por favor ingrese un mensaje");  else submitToPHP (); .

Paso 13: El cuadro de alerta.

Como puede ver en la función, pasamos cada comprobación de validación a una declaración "if" y utilizamos el ValidationResultEvent INVALID en lugar de VALID para crear un cuadro de alerta llamando a la función Alert.show (). Si alguna vez ha programado con Javascript, estará al tanto de la ventana de alerta que puede usar para crear un cuadro emergente que alerta al usuario del navegador con un botón para hacer clic que generalmente dice "OK". Como todos ustedes son usuarios de varios navegadores web, estarán familiarizados con el cuadro de alerta. La clase de alerta en el marco de trabajo de Flex es exactamente la misma y es una buena funcionalidad que podemos usar simplemente llamando a la función Alert.show. Los parámetros necesarios para esto son simplemente la cadena que se muestra en el cuadro de alerta..

Por supuesto, si todos los datos de entrada se ingresan correctamente y no coinciden con ninguna de las condiciones, luego pasamos a la función submitToPHP.

Paso 14: Enviar los datos a PHP.

Ahora que se han verificado todos los datos ingresados, podemos pasar la información a un script PHP para enviarla al destinatario. El script PHP que estamos usando es un simple script de envío de correo que pasa toda la información recopilada en un mensaje de texto sin formato, pero no hay nada que le impida crear un mensaje html completo, usando la variable que se pasa aquí.

Para pasar esta información a nuestro script PHP, primero creamos una instancia de la clase URLVariable aquí denominada variables, en la que pasamos toda la información recopilada. Luego creamos una URLRequest en este caso llamada phpUrl, que está dirigida a la ubicación del script php. Luego pasamos la URLVariable a la URLRequest utilizando:

 phpUrl.data = variables;

Como puede ver, al pasar los datos de los cuadros de entrada y otros componentes en la aplicación, simplemente asignamos el texto en ese cuadro a la variable relevante correspondiente. Con la matriz de comidas, simplemente pasamos esto con el método toString () para crear una cadena a partir de la propia matriz. Luego creamos un URLLoader para enviar todos estos datos a la URL relevante y luego agregamos un oyente para escuchar la finalización de la transición o cualquier error en el envío para mostrar el mensaje relevante en el cuadro de alerta que aparecerá..

 función privada submitToPHP (): void var variables: URLVariables = new URLVariables (); var phpUrl: URLRequest = new URLRequest ("http://www.ultravisual.co.uk/Test/sendform.php"); phpUrl.method = URLRequestMethod.GET; phpUrl.data = variables; variables.firstname_text = firstName.text; variables.surname_text = surName.text; variables.email_text = email.text; variables.phone_text = telephone.text; variables.comment_text = comments.text; variables.room_text = comBo.text; variables.datefrom_text = fromDate.text; variables.dateto_text = toDate.text; variables.meals = meals.toString (); variables.cot = cot; var loader: URLLoader = new URLLoader (); loader.dataFormat = URLLoaderDataFormat.TEXT; loader.addEventListener (Event.COMPLETE, completeHandler); prueba loader.load (phpUrl); alertWindow = Alert.show ("Sending ...");  captura (error: Error) Alert.show ("Error al enviar el formulario."); 

Paso 15: Completa.

En la declaración de prueba durante la última función, puede ver que, en lugar de utilizar Alert.show (), hemos creado una instancia de la clase de alerta y la hemos utilizado para crear la ventana emergente. La razón de esto es que en la función completa necesitamos cerrar esta casilla para mostrar nuestro mensaje de éxito en la siguiente función. Si no creamos una instancia de la clase de alerta para esto, flash solo creará otra caja de alerta y la superpondrá sobre la última, en lugar de cerrar las existentes. Como puede ver, cerramos el cuadro de alerta existente usando:

 PopUpManager.removePopUp (alertWindow);

Luego podemos usar Alert.show () para mostrar un nuevo cuadro de alerta que esperará la interacción del usuario. Luego utilizamos la función de restablecimiento que se describe a continuación para restablecer el formulario de contacto a su estado original.

Paso 16: La función de reinicio.

Una vez que hemos creado nuestros botones, ahora tenemos dos funciones que se deben crear, es decir, restablecer y enviar. Esta función también se llama al finalizar la función sendToPHP. Restablecer básicamente restablecerá el formulario de contacto de nuevo a su estado base al borrar las casillas y cualquier texto. También se llamará una vez que se haya completado el formulario de contacto y se haya enviado la información al script PHP. La función de reinicio es muy simple:

 función privada resetForm (): void firstName.text = ""; surName.text = ""; comBo.selectedIndex = -1; telephone.text = ""; email.text = ""; comments.text = ""; fromDate.text = ""; toDate.text = ""; noCot.selected = false; yesCot.selected = false; desayuno.seleccionado = falso; cena.seleccionado = falso; 

Esto simplemente le indica al swf que el texto que se mostrará para cada uno de los campos de texto es igual a nada y que ninguno de los botones de opción o las casillas de verificación están seleccionados y, por lo tanto, se debe mostrar como tal..

Conclusión

Como puede ver, el uso de los métodos de validación y el cuadro de alerta en Flex es muy simple, así como el uso de la funcionalidad de muchos de los componentes. Para obtener más información sobre cualquiera de los componentes y métodos de Flex, se puede recopilar más información en las páginas de referencia de adobe para Flex. Gracias por seguirnos!