Última actualización: 15 de marzo de 2014

Resumen

Durante algunos de los eventos que he venido realizando una de las preguntas comunes es como crear una aplicación web transaccional rápido y que sea soportada por múltiples dispositivos, para este tipo de escenarios tenemos Visual Studio LightSwitch el cual nos permite crear aplicaciones de una manera rápida y con múltiples alternativas de publicación ya sea en OnPremise o Cloud, pero a su vez no muy utilizada, es por eso que este pequeño post tiene como objetivo presentar como empezar a trabajar con LightSwitch.

Pre-Requisitos

¿Qué es Visual Studio LightSwitch?

En versiones anteriores tenían que descargar e instalar de manera independiente, ahora parte de Visual Studio está diseñado para simplificar el desarrollo de aplicaciones y servicios centrados en datos empresariales, y que pueden funcionar en una variedad de dispositivos. Con LightSwitch usted puede:

Crear aplicaciones Office ( Office 2013 SP1, Office 365), desktop y HTML 5 (iOS 5/6, Windows RT, Windows Phone 8, Android 4)
Consumir y agregar múltiples orígenes de información como bases de datos, sharepoint, OData y SAP
Eliminar tiempos en escritura de código y centrarse en lo que debe hacer su aplicación
Publicación flexible On-Premise (IIS, SQL Server, SharePoint 2013), Cloud (Windows Azure, SQL Azure, Office 365).
Su arquitectura se basa en mejores prácticas y tecnologías.

Creando una aplicación de Visual Studio LightSwitch 2013

Para esta publicación iniciaremos creando una aplicación HTML 5 que nos permita registrar información básica de un proyecto y sus actividades. Esta publicación además será gestionada con Visual Studio Online, por lo que todo lo que generemos se irá publicando en source control para utilización en futuras publicaciones.

1. Creación del proyecto en Visual Studio

Para crear este tipo de proyecto lo hacemos de la misma manera que cualquier otro tipo de proyecto en Visual Studio File -> New -> Project, y seleccionamos la plantilla de proyecto LightSwitch HTML Application.

Nombre del Proyecto y solución: ProjectInfoTool

Habilitamos la casilla de Add to source control

Seleccionamos Team Foundation Version Control.

Seleccionamos la carpeta donde deseamos almacenar la solución.

2. Estructura del proyecto

En versiones anteriores de LightSwitch cuando se creaba un proyecto lo que inicialmente veíamos era la vista lógica de la solución la cual nos mostraba básicamente las pantallas, tablas y consultas que creábamos y si queríamos modificar el código, Nugets, CSS o imágenes debíamos cambiarnos a la vista de archivos, en la versión 2013 todo el contenido del proyecto se muestra en una única vista en el Solution Explorer.

Proyecto raíz: es donde podemos modificar las propiedades de nuestra aplicación tales como métodos de autenticación, extensiones y SharePoint.
Proyecto cliente: Contiene las pantallas, scripts y contenido del cliente que estamos creando.

Proyecto servidor: Contiene los orígenes de datos, código del lado del servidor, servicios svc; cualquier personalización del lado de la capa de servicios debe ser realizada en este proyecto.

3. Trabajando con orígenes de datos

Para trabajar con orígenes de datos nosotros podemos tener los dos siguientes escenarios:

Nota: En LightSwitch las tablas son a su vez entidades.

El origen de datos ya existe: para lo hacemos clic derecho sobre Data Sources y seleccionamos Add Data Source, donde podremos seleccionar cualquiera de los orígenes de datos disponibles.
No existe el origen de datos: Lo contrario al escenario anterior no tenemos el origen de datos (como es este el caso) seleccionamos Add Table.

3.1 Creación de las entidades

Nota: Por defecto LightSwitch habilita las propiedades de creado/modificado. El nombre de la entidad va en singular.

Nombre de la Entidad: Project

Nombre Propiedad	Tipo de Dato	Requerido
Name	String (50)	Si
Description	String (255)	Si
StartDate	Date	Si
EndDate	Date	Si

Nombre de la Entidad: Activity

Nombre Propiedad	Tipo de Dato	Requerido
Name	String (50)	Si
Description	String (255)	Si
StartDate	Date	Si
EndDate	Date	Si
AsignedTo	Person	Si
Status	Short Integer	Si

La propiedad Status tiene la particularidad de que podemos pre-definir los posibles valor de elección, para lo cual seleccionamos Status, luego vamos a propiedades damos un clic en Choise List y en la ventana ingresamos los posibles valores.

¿Cómo defino el valor por defecto de la propiedad Status?

En el siguiente artículo se revisa cómo configurar valores por defecto.

3.2. Relacionando Entidades

En este paso crearemos la relación de 1:M entre Proyecto y actividades. Seguimos los siguientes pasos:

4. Trabajando con pantallas

A continuación crearemos las pantallas relacionadas a nuestras dos tablas creadas anteriormente, para lo cual en la parte inferior del diseñador nos cambiamos de Server a HTMLClient. Recordemos que nuestra aplicación es Proyectos el punto de entrada voy a darle doble clic a la entidad Project para ponerla en primer plano y luego dar un clic en screen.

En la ventana de Add New Screen, seleccionamos Common Screen Set, seleccionamos Projects, marcamos la casilla Activities para que su conjunto de datos también sea incluído en la pantalla de detalle del proyecto; con esta plantilla de pantalla lo que se creará será una carpeta que contenga la colección de las 3 siguientes pantallas relacionadas a proyectos sin necesidad de crear una a una manualmente ahorrándonos tiempo, y luego ingresar solo a personalizar. Ahora que ya sabemos qué hace esta primera plantilla de pantalla, revisemos las siguientes:

Browse Data Screen: muestra una lista de elementos.

View Details Screen: muestra el detalle del elemento seleccionado.

Add/Edit Details Screen: permite agregar o editar el detalle del elemento seleccionado.

Hago lo mismo para la entidad actividad.

Veamos cómo está el proyecto cliente:

5. Guardar el proyecto

Guardamos los cambios realizados, nos vamos a nivel de solución y seleccionamos Check-In, luego vinculamos con los elementos de trabajo y protegemos el código.

[Code] Creación de una aplicación HTML5 con LightSwitch