Cómo: Agregar un control personalizado a una pantalla HTML para una aplicación LightSwitch
Puede agregar controles HTML personalizados a una pantalla en un cliente para una aplicación de LightSwitch. Con los controles personalizados, se puede mostrar o recopilar información de maneras que superan las capacidades de los controles HTML integrados para LightSwitch.
Hacer referencia a controles personalizados
Para usar un control personalizado en una pantalla, primero debe agregar una referencia de archivo al proyecto y, después, agregar una etiqueta de script al archivo default.htm.
Para hacer referencia a un control personalizado
En el Explorador de soluciones, abra el menú contextual de la carpeta Scripts, elija Agregar y, después, Elemento existente.
Elija el archivo JavaScript (.js) para el control personalizado y, a continuación, elija el botón Agregar.
Nota
Algunos controles personalizados requieren que también se haga referencia a archivos de compatibilidad adicionales.Consulte la documentación del control personalizado para ver todos los requisitos.
En la sección <script> del archivo default.htm del proyecto, agregue una etiqueta de script de forma similar al ejemplo siguiente, donde MyControl es el nombre del control personalizado:
<script type=”text/javascript” src=”Scripts/MyControl.js” charset=”utf-8”></script>
Agregar nuevos controles y reemplazar controles existentes
Puede agregar un nuevo control personalizado a una pantalla o reemplazar un control HTML existente en LightSwitch.
Para agregar un control personalizado a una pantalla
En el Árbol de contenido de pantalla, elija un grupo cualquiera.
En la lista Agregar elemento de diseño de la barra de herramientas del Diseñador de pantallas, elija Control personalizado.
Aparece el cuadro de diálogo Agregar control personalizado.
En el cuadro de texto Especificar los datos del nuevo control personalizado, escriba el elemento o la colección que se va a enlazar al control.
Por ejemplo, escriba Customers.selectedItem.PostalCode para enlazar al código postal de un cliente, o bien Customers.selectedItem para enlazar al registro completo del cliente.
Agregue código que enlace los datos a una propiedad específica del control.
Para obtener más información, vea el apartado sobre cómo enlazar datos a una propiedad del control personalizado, más adelante en este tema.
Para reemplazar un control existente con un control personalizado
En Árbol de contenido de pantalla, elija el control que desea reemplazar.
En la ventana Propiedades, abra la lista Tipo de control y elija Control personalizado.
Agregue código que enlace los datos a una propiedad específica del control.
Para obtener más información, vea el apartado sobre cómo enlazar datos a una propiedad del control personalizado, más adelante en este tema.
Enlazar datos a una propiedad del control personalizado
Puede enlazar los datos especificados en el cuadro de diálogo Agregar control personalizado a una propiedad concreta del control personalizado.
Para enlazar datos a una propiedad del control personalizado
En Árbol de contenido de pantalla, elija el control personalizado.
En la ventana Propiedades, elija el hipervínculo Editar código de representación.
En el editor de código, agregue código similar al del ejemplo siguiente para el método de representación:
createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);Este código representa el control en tiempo de ejecución. Reemplace MyControl por el nombre del control y cambie los parámetros max-height y max-width según sea necesario.
Agregue código para cualquier función adicional que el control requiera. Consulte la documentación del control personalizado para ver todos los requisitos.