Ejemplo: Creación de un control de selección utilizando HTML personalizado

Este ejemplo muestra cómo se pueden utilizar scripts para vincular 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ñada código HTML personalizado a una vista de coach que define un control de selección 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 (load) con un script personalizado para enlazar el valor seleccionado del control de selección con el atributo del 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, deberá estar familiarizado con la interfaz de programación de aplicaciones (API) de la vista de coach y tendrá que haber creado los objetos 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. En este ejemplo puede utilizar el código siguiente para definir un control de selección:
```
<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 desencadenar 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 Nombre, escriba caseProperties (propiedades de caso).

En la página Comportamiento, configure el manejador de sucesos load con un script personalizado para correlacionar el valor seleccionado de HTML personalizado con el 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 Manejadores de sucesos, seleccione load y después 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, cree un servicio de usuario y luego haga lo siguiente:
1. En la pestaña Diagramas, añada un coach.
2. En la pestaña Variables, añada TSAPP_ValidateDocumentCaseProperties como variable de salida.
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 Guardar o Finalizar edición.
6. Ejecute el servicio de usuario. 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)