...
Este control permite definir en el formulario un TextArea.
Navegación
Pre condiciones
Guía paso a paso
Paso 1.
En la pantalla actual seleccionar el tipo de control TextArea y presionar el botón New.
...
Paso 2.
En la ventana Pop Up se deben ingresar los datos que crearan el control.
...
General
FIeld. Nombre interno que se le asigna al control, Ejemplo: ID (NOTA: Este control debe llamarse igual que el campo que regresa el DataSet en SQL)
Description. Nombre que tendrá la columna y será visualizada por el usuario.
Comment. Puede ingresar un comentario adicional acerca del contro
Tooltip. Es la etiqueta que se mostrara al pasar el puntero del mouse sobre el control
...
Data Binding
DataSet. Debe seleccionar el DataSet que llenara la columna
Valor por Default: Indica cual será el valor por default que contendrá el campo.
...
Place Holder. Son los contenedores del Layout
Orden. Es el orden en el cual se debe mostrar el control en la página
Alignment: Indica en que alineación aparecerá el control dentro del formulario.
MaxLength Permite definir el número máximo de caracteres que aceptara el campo.
Ancho: Define el tamaño del ancho del campo.
Alto: Define el tamaño del alto del campo.
Clase Estilo Contenedor. Son las clases que permite modificar la posición del control, hacerlo más ancho, centrarlo, etc.
Clase Estilo Elemento: En caso de querer cambiar el % del ancho del control
Clase Estilo Descripción: Son las clases que permiten modificar el ancho de las columnas, alineación del texto, etc.
Tamaño Descripción: Permite cambiar el tamaño de letra del control
Color Descripción: Permite modificar el color de la letra del control
Tipo Descripción: Permite cambiar el tipo de la letra (Negrita, normal, etc.)
Alineación Descripción: Cambia la alineación de la descripción del control (Izquierda, Derecha, Justificada, etc.)
Ancho Descripción: Modifica el ancho de la descripción del control
...
Overview
On this lesson, we will analyze the “Text Area” control which is a feature that insert a text box field in the page for those situation where we need to complete a survey and provide extended length area for comments or explanations. Let’s review this easy and simple feature!
How to create a “Text Area” control?
Turn to the page where we are going to include this object. Under the “Controls” section, choose the “Text Area” option. Click on “New” button
...
A popup will be prompted to generate the control.
...
Once we completed the Object Name and Displayed Name fields, let’s continue working on “Data Binding” tab. In this example, we are not going to set any dataset object, this option will let us show the text field off the grid table.
Before saving the control, let’s review the properties on the Layout:
Field | Description |
|---|---|
Place Holder | These objects are the container sections in the page. We can choose different places. |
Max Length | We can define the max characters we want to set as limit in the field. |
Order | Place in the place regarding the other controls created in page. |
Width | The measurement or extent of the field from side to side |
Alignment | Position on the screen |
High | The vertical extent of the field |
Container Style | Classes to define the control’s position on the page. |
Item Style | Classes to modifiy the % of width control |
Description Style | Classes to define the control’s size on the page |
Font Size | Define the size of the font |
Font Color | Define the color of the font |
Font Weight | Define the weight of the font |
Alignment | Change the position of the description from the control. |
In this case, we will choose the max length and the order that we will place the new object in the page. Once we have all the required fields completed, click on “Submit” button to generate the control.
...
Control is created on the page.
...
Let’s click on “Preview” button to verify how it’s displayed in our page with the current design.
...
When the page loads, we can see the “Reason” field at the bottom page. In another lesson, we will learn hot we can store the data from the new field linking this control with another action using a “Save” button.
Recap
Like we promised, this control was easy and simple to create. This lesson help us to play on layout settings, an important part of the development that will bring a better design in our application development.