Ejemplo: crear un control Seleccionar utilizando un HTML personalizado

Este ejemplo muestra cómo puede utilizar scripts para enlazar valores seleccionados en un control HTML Personalizado con los datos de negocio de una vista de coach.

Descripción general de las tareas en este ejemplo:

Añadir un código HTML personalizado a una vista de coach que define un control "Seleccionar" para elegir un tipo de cuenta, como por ejemplo Corriente o Ahorros.
Añada objetos de negocio a una vista de coach.
Configure un manejador de sucesos (cargar) con un script personalizado para enlazar el valor seleccionado del control Seleccionar con el atributo de objeto de negocio de tipo complejo.

Como resultado, creará una lista de selección de Tipo de cuenta que puede ser reutilizada o ampliada y luego utilizada en varios coaches.

Antes de comenzar, debe haberse familiarizado con la interfaz de programación de aplicaciones (API) de la vista de coach y debe haber creado los objetos de negocio Datos de negocio (consulte Tabla 2).

Añadir código HTML personalizado a una vista de coach:
1. En un kit de herramientas o aplicación de proceso, cree una nueva vista de coach denominada getAccountTypes.
2. En la pestaña Diseño, de la paleta situada bajo Avanzado, arrastre el elemento HTML personalizado sobre el lienzo.
3. En las propiedades debajo de HTML, seleccione la opción Texto y a continuación proporcione el código HTML personalizado. Para este ejemplo, puede utilizar el siguiente código para definir un control "Seleccionar":
```
<select name="AccountType" size="1">
  <option value="Savings">Savings Account</option>
  <option value="Current">Current Account</option>
</select>
```
4. En la pestaña Visión general, seleccione Puede activar un suceso límite.
Añada objetos de negocio a una vista de coach.
1. En la pestaña Variables, pulse el signo más (+) junto a Datos de negocio
2. Para el Tipo de variable, seleccione el objeto de negocio TSAPP_ValidateDocumentCaseProperties.
3. En el campo Name, escriba caseProperties (consulte Tabla 2).

Configure el manejador de sucesos load con un script personalizado para correlacionar el valor seleccionado de HTML personalizado al atributo de datos de negocio.

Registre el módulo y alias del botón Dojo que la vista de coach cargará dinámicamente.
1. En la pestaña Comportamiento, seleccione Dependencias AMD.
2. Pulse Añadir y especifique la información siguiente:
  - En la columna ID de módulo, escriba dojo/_base/connect. De esta forma, se declara una dependencia del módulo que proporciona el manejo de sucesos para los nodos DOM y la funcionalidad relacionada.
  - En la columna Alias, escriba connect. Este es el alias utilizado en el código para hacer referencia al módulo connect.
  Consejo: En este ejemplo se utiliza un módulo AMD que se incluye en la infraestructura. Si los módulos ADM aún no están incluidos, consulte Adición de módulos AMD personalizados para obtener información sobre cómo añadir y a continuación acceder a estos módulos.

En la pestaña Comportamiento debajo de Manejadores de sucesos, seleccione cargar y luego proporcione un script personalizado. Para este ejemplo, puede utilizar el siguiente script:

var selectElement =
this.context.element.getElementsByTagName("select")[0];

var onChangeHandle = connect.connect(selectElement, "onchange", this, function(newValue){
if(this.context.binding){
var tempBinding = this.context.binding.get("value");
tempBinding.set("TSAPP_AccountType", newValue.target.value);
}
});

Tabla 1. Notas acerca del script
Elemento	Descripción
(`este == el objeto de vista`)	El suceso de carga tiene el contexto de datos de carga útil, así como el del objeto de datos de negocio asociado (se añade en el paso 2).
`connect.connect(selectElement, "onchange"`	La variable `onChangeHandle` en el script tiene el nuevo valor seleccionado en el control Seleccionar. Se llama al suceso `onChange` del control de HTML personalizado mediante `connect.connect`. Consejo: `connect.connect(selectElement, "onchange"` se deriva del alias de la entrada `dojo/_base/connect` en las dependencias de AMD. Por lo tanto, el script debe modificarse como corresponda en función del nombre de alias. Por ejemplo, si `myConnect` es el nombre de alias, el script se vería como `myConnect.connect(selectElement, "onchange"`.
`this.context.binding.get("value").set("TSAPP_AccountType", newValue.target.value);`	El nuevo valor seleccionado en el control Seleccionar está enlazado con el atributo específico de los datos de negocio (TSAPP_AccountType).

Para probar el trabajo utilizando un servicio humano, cree un servicio humano de herencia y, a continuación, haga lo siguiente:
1. En la pestaña Diagramas, añada un coach.
2. En la pestaña Variables, añada TSAPP_ValidateDocumentCaseProperties como tipos de variable de entrada, salida y privada.
3. En la pestaña Coaches, seleccione el coach, arrastre la vista de coach getAccountTypes al lienzo y, a continuación, seleccione la variable privada TSAPP_ValidateDocumentCaseProperties como enlace.
4. En la pestaña Diagramas, complete la conexión del coach.
5. Pulse Ejecutar servicio. Se abrirá un navegador y se mostrará la lista de selección.

Referencia

Tabla 2. Objetos de negocio de ejemplo
Elemento de biblioteca	Nombre de ejemplo
Objetos de negocio	TSAPP_ValidateDocumentCaseProperties Parámetros: TSAPP_Zipcode (Serie) TSAPP_Age (Serie) TSAPP_AccountStatus (Serie) TSAPP_CustomerType (Serie) TSAPP_Name (Serie) TSAPP_City (Serie) TSAPP_AccountType (Serie) En la vista de coach, el tipo de variable TSAPP_ValidateDocumentCaseProperties está enlazada con caseProperites.