Alinear a la derecha una columna en una tabla HTML

En el cliente tipo HTML de LightSwitch existe el control tipo tabla el cual nos permite mostrar un conjunto de datos. Si queremos alinear una columna de esta tabla a la derecha (por ejemplo al tratarse de un número), existe un pequeño truco para conseguirlo.

Cuando cambiamos la propiedad "Alineación del texto" a "Derecha" no funciona:

Para que funcione debemos cambiar también la propiedad "Posición de etiqueta" a "Oculto":

Visual Studio 2013 ya esta aquí!

Ya está disponible la nueva versión de Visual Studio 2013 para descargar. En esta nueva versión se han incluido muchos cambios que afecta al producto LightSwitch. El equipo de desarrollo se está centrando en el cliente HTML que nos permite crear aplicaciones visibles en cualquier navegador. Algunas de las mejoras son las siguientes:

• Nueva plantilla para crear aplicaciones de Office 365.
• Mejor soporte para trabajo en grupo, permitiendo abrir varios usuarios el mismo proyecto y trabajar en él.
• Soporte de proyectos SQL dentro del proyecto: con esto se pueden ejecutar scripts en la base de datos después del diseño para incluir datos o indices por ejemplo.
• Nuevo control tipo tabla: permite mostrar (no editar) los datos en forma de tabla y es 'responsive' con lo que se ajusta bien al tamaño de la pantalla en todos los dispositivos.
• Nuevo tipo de dato "DateTimeOffset": nos permite indicar fechas con la información del huso horario.
• Mejoras en el campo de tipo cuadro de lista.
• Nuevos campos "Creado por" y "Modificado por" en las tablas: esto nos permite una auditoria más fácil de los datos.
• Nuevo tipo de dato "Persona".
• Integración con Sharepoint y Lync

Como realizar una acción al cambiar el valor de un control con el cliente HTML

Con el nuevo cliente tipo HTML hay algunas cosas que podíamos hacer fácilmente con el cliente Silverlight que ahora no es posible a simple vista. Por ejemplo en el siguiente ejemplo quiero que al cambiar un valor en una caja de texto se realice una acción. Si vemos los eventos que se puede codificar vemos que solo tenemos el _posRender para poner algo de código.

 

Por suerte al ser HTML y disponer de jquery podemos usar todos los eventos que nos permite javascript con ayuda de jquery para detectar el cambio de un valor, para ello podríamos poner algo así:

myapp.DeejayMto.Facebook_postRender = function (element, contentItem) {
    // Write code here.    
    $(element).change(function () {
        alert(contentItem.value.toString());
    });
};

Y de esa forma mostrará un mensaje al cambiar el valor del control.

Nueva vista previa del cliente HTML disponible

Hace unos días se lanzó una actualización del cliente de HTML como parte de Visual Studio 2012 Update 2 CTP4 que mejora el soporte añadido para varios navegadores, clientes móviles y aplicaciones web de SharePoint 2013 con Visual Studio LightSwitch.

El nuevo cliente basado en HTML5 y JavaScript, es un complemento importante para nuestro cliente de escritorio basado en Silverlight que se enfoca en la creciente necesidad de construir aplicaciones orientadas al negocio que funcionen bien en los modernos dispositivos móviles. Visual Studio LightSwitch es la forma más fácil de crear una línea moderna de las aplicaciones de negocio para la empresa, y con soporte para HTML5 y el nuevo modelo de aplicaciones de SharePoint, ahora también construir aplicaciones de SharePoint 2013.

Si ya tenia instalada la versión anterior del cliente HTML debe desinstalarla primero siguiendo los pasos que encontrará aquí.

Hay que tener en cuenta que estas versiones HTML son todavía de prueba (preview) y debe utilizarse con prudencia hasta que salga la versión final.

3 Formas sencillas de crear una Caja Autocompletar

A continuación voy a enumerar unas formas sencillas (sin código  de como crear control del tipo Cuadro Autocompletar (Auto Complete Box). Existen tres formas:

1.- Mediante una clave externa.

Creamos una tabla donde indicamos un campo que es clave externa de otra tabla:

Al agregar el campo Pais de la tabla Cliente en una pantalla, LightSwitch automáticamente nos creará un control Autocompletar:

2.- Con una variable local o un campo de lista de opciones.

La otra manera de utilizar una cuadro de Autocompletar es definir una variable local o un campo con una lista de opciones.

• Creamos una variable local llamada Mes

• En la propiedad de la variable local hacemos clic en la lista de opciones

• Llenamos la lista con los datos, en mi ejemplo, los meses del año

• Automáticamente Microsoft LightSwitch hace que mi variable Mes sea de tipo Cuadro Autocompletar

También puede hacer esto en el diseño de la entidad o tabla proporcionando una lista de opciones para cualquier campo.

3.- La siguiente manera es muy útil y muchas veces no se utiliza porque hay que recordar que al crear una variable en la pantalla, ademas de los tipo comunes (Integer, String, etc.. ) también podemos crear variables que usan tablas.

• Agregamos un elemento de datos y seleccionamos "Propiedad local" y desde la lista desplegable, seleccionamos una tabla (Entity). En mi ejemplo, elegir una clasificación para el cliente.

• El nombre de la variable local es miPropiedad y su tipo es la tabla Clasificacion

• Automáticamente Microsoft LighSwitch crea una Caja Autocompletar para mi variable local al agregarla en la pantalla

Espero os haya sido útil estas aclaraciones para crear este tipo de control.

Instalación del cliente HTML Preview 2 para LightSwitch

Ya se encuentra disponible una versión de previa (Preview) del cliente HTML para Microsoft Visual Studio LightSwitch. Gracias a este cliente es posible generar además de aplicaciones en Silverlight aplicaciones enteramente HTML + Javascript que se pueden ejecutar en cualquier dispositivo con un simple navegador.

La idea del equipo de LightSwitch es hacer un modulo que se complemente con las opciones ya disponibles, por tanto el aspecto de la aplicación generada con este cliente HTML esta pensado para dispositivos móviles táctiles con tamaño muy variable. Para el uso en equipos de sobremesa lo mejor es seguir utilizando el cliente actual en Silverlight que permite aprovechar la potencia y tamaño  de estos dispositivos.

Como todavía es una versión Preview, es necesario seguir unos pasos para poder instalarla. Para empezar es necesario disponer de Visual Studio 2012 versión RTM (final). El método de instalación es a través de Microsoft Web Platform Installer, y está incluido dentro del paquete de herramientas de desarrollo para Microsoft Office que se puede descargar a través del siguiente enlace:

 Microsoft Office Developer Tools for Visual Studio 2012 - Preview 2

Una vez instalado, si tenemos nuestro Visual Studio 2012 en otro idioma que no sea el Ingles, nos aparecerá un error si intentamos crear un proyecto HTML de LightSwitch. Para solucionarlo debemos instalar el paquete de idioma en ingles del siguiente enlace:

Microsoft Visual Studio 2012 Language Pack

Una vez instalado, cambiamos el idioma del interfaz al idioma Ingles entrando en Herramientas -> Opciones -> Configuración internacional -> Idioma

Ahora ya podemos crear un proyecto HTML creando un nuevo proyecto y eligiendo el tipo "LightSwitch HTML Application" dentro de la plantillas de LightSwitch:

Una cosa que hay que tener en cuenta es que aunque una aplicación HTML de LightSwith usa entidades y pantallas igual que las aplicaciones de LightSwitch utilizadas hasta el momento, la estructura de la aplicación internamente es totalmente distinta por lo que ahora hay que habituarse a desarrollar aplicaciones con este nuevo tipo de entorno.

Cliente HTML para LightSwitch

El equipo de LightSwitch acaba de anunciar en una nota la próxima disponibilidad de un cliente para LightSwitch en HTML5. Esta es una noticia que estaba esperando impacientemente y me ha sorprendido algo aunque ya existían algunos rumores.

Con esta actualización, que estará disponible en las próximas semanas, las aplicaciones realizadas en LightSwitch podrán tener una parte cliente realizada en Silverlight como hasta ahora aprovechando todo su potencial visual y/o un cliente en HTML especialmente indicado para dispositivos móviles.

Este cliente HTML esta diseñado con HTML5 y CSS3 apoyándose en el conocido framework de JQuery Mobile, lo cual permite utilizar la gran cantidad de plugins que existen para él.

Según nos comenta el equipo de LightSwitch, el modulo de HTML vendrá con dos temas definidos por defecto (Dark y Light) en los cuales han estructurado detalladamente con comentarios las hojas de estilos para que puedan ser modificadas y adaptadas por los desarrolladores al gusto de cada uno.

Para ver más, pueden mirar en el blog del equipo de LightSwitch donde se indican más detalles (en inglés).

¿Que hay de nuevo sobre LightSwitch en Visual Studio 2012 RC?

Desde el pasado 31 de Mayo está disponible la nueva versión de Visual Studio 2012 Release Candidate (RC) que como ya hemos comentado trae LightSwitch incorporado. En esta nueva versión preliminar se han incorporado las siguientes mejoras que nos interesan:

Nuevo Shell y Theme por defecto.   En marzo pasado, se publicó una vista previa del Cosmopolitan LightSwitch Shell y Theme en la galería de VS para dar a las aplicaciones LightSwitch una aspecto más moderno y corporativo. Desde entonces se ha realizado diversas mejoras, arreglado errores  visuales y mejorado la legibilidad (por ejemplo, se han agregado líneas en los grid de datos). Este shell será el utilizado por defecto para nuevos proyectos.

Logotipo incluido en la pantalla de inicio de sesión. Se ha añadido el logotipo de la aplicación en la pantalla de inicio de sesión para aplicaciones que utilizan la autenticación de formularios. Se mostrará una vez que se implemente la aplicación.

Rendimiento.   Se ha mejorado el rendimiento de las operaciones de datos básicos, que a su vez mejora muchos escenarios de aplicación (carga de datos, ordenación, paginación, refresco de pantallas, etc.) También se ha mejorado la experiencia en tiempo de diseño - esto significa una carga más rápida de los proyectos, vinculados a las fuentes de datos, la creación de pantallas y tablas, y la construcción de proyectos (F5).

Simplificada la publicación en Azure. Se ha simplificado significativamente el flujo de trabajo requerido para publicar aplicaciones LightSwitch en Azure. Estas mejoras no están en el RC publicado, en su lugar, estará disponible como un add-on. Estén atentos para más información sobre esto próximamente.

Visual Studio 11 Beta disponible

El pasado día 29 de febrero, dentro de la conferencia de MVPs de Microsoft, se hizo pública entre otras cosas la nueva versión beta de Visual Studio. Ahora mismo tiene en nombre clave Visual Studio 11 pero posiblemente cuando salga al mercado sobre el verano (todavía no hay una fecha oficial) se llamará Visual Studio 2012.

Entre importantes mejoras que podemos encontrar en esta nueva versión está la inclusión de Lighswitch como un tipo de proyecto más al mismo nivel que el resto de tipos de aplicaciones disponibles hasta el momento y no como un producto adicional como esta hasta ahora. Esto demuestra el apoyo por parte de Microsoft del producto Lightswitch y de la tecnología Silverlight en general.

Para los que seguimos los detalles de esta herramienta desde hace tiempo no nos sorprende esta decisión y despeja las dudas sobre la continuidad del producto de ciertos programadores. Además en esta nueva versión se pueden ver grandes mejoras como el soporte para el acceso a datos mediante OData y la inclusión de nuevos tipos de datos.

La descarga de Visual Studio 11 Beta está disponible en la web de Microsoft y es completamente funcional:

http://www.microsoft.com/visualstudio/11/en-us/downloads

El aspecto rebosa el estilo Metro por todas partes:

La instalación de esta versión no afecta a la instalación previa de Visual Studio Lightswitch 2011 y los proyectos se convierten a la nueva versión sin muchos problemas. Aunque como es una beta solo se debe usar para probar ya que puede haber cambios en la versión definitiva.

Webcast MSDN: Casi “Zero Code” con LightSwitch en Azure

En este evento se puede ver todas las opciones de despliegue y personalización que nos permite LightSwitch. Asimismo, agrega bastante código en las aplicaciones generadas, y se puede ver cómo funciona el “corazón” de LightSwitch y como se sirve de un DSL para la generación de código de las aplicaciones.

Este vídeo  fue realizado el pasado junio cuando todavía no había aparecido la versión final del LightSwitch, sin embargo su contenido es totalmente aplicable a la versión actual. Ha sido realizado por Juan Luis Guerrero y Bruno Capuano, dos excelentes profesionales de Avanade y colaboradores de la comunidad de desarrolladores.

El enlace al vídeo para ver y/o descargar Casi “Zero Code” con LightSwitch en Azure.

Actualización de LightSwitch 2011

    El equipo LightSwitch ha lanzado una General Distribution Release (GDR) para resolver un problema encontrado al publicar en SQL Azure.

En algunos casos, los usuarios han informado del error "SQLServer version not supported" al publicar una base de datos en SQL Azure. Esto se debe a una actualización del servidor SQL Azure reciente que causó la incompatibilidad con versiones anteriores. La GDR permite a LightSwitch corregir este problema y está pensada para actualizaciones futuras de los servidores.

La GDR y las instrucciones para su instalación se pueden encontrar en el Centro de descarga

Error al compilar falta referencia a 'System.Xml'

    Me he entretenido en probar varias extensiones disponibles gratuitamente con nuevos temas para LightSwitch y al desinstalarlas para dejar el proyecto tal como estaba y compilarlo me a aparecido un error de compilación. Viendo el detalle pone lo siguiente: 

El tipo o el nombre del espacio de nombres 'Linq' no existe en el espacio de nombre 'System.Xml' (¿falta una referencia de ensamblado?)

    Para solucionar este problema primero hay que seleccionar el proyecto en el explorador de soluciones, después pulsamos en el icono 'Ver archivo' que es el que está en un cuadro rojo en la siguiente imagen:

y nos aparece un menú con dos opciones, elegimos la que pone "Ver archivo". De esta forma podemos ver todos los archivos que componen realmente el proyecto. Seleccionamos entonces dentro de la solución el proyecto con el nombre ClientGenerated 

y sobre la carpeta que pone referencias pulsamos el botón derecho del ratón para ver el menú contextual. En este menú elegimos la primera opción "Agregar referencia..." y nos aparece una pantalla donde debemos seleccionar la librería "System.Xml.Linq"

Volvemos a compilar y ya no veremos más el error. Desconozco la causa por el cual se elimina esta referencia pero con estos pasos se puede solucionar fácilmente. Para ver los archivos del proyecto como siempre debemos elegir en el menú 'Ver archivo' la opción  'Vista lógica'.

¿Que es LightSwitch?

    Microsoft Visual Studio LightSwitch es una potente herramienta de diseño rápido de aplicaciones (RAD) que acaba de salir su primera versión el 28 de Julio de este año con el nombre de LightSwitch 2011.

Con LightSwitch es posible generar aplicaciones cliente servidor de una manera bastante fácil y sin escribir nada de código, aunque para sacarle más partido hay es escribir algo en algunas ocasiones. Esto permite que esta herramienta se útil tanto  a usuarios sin apenas conocimientos de programación como ha programadores experimentados (como es mi caso) que desean una ayuda al generar aplicaciones con las tecnología más actual.

    Desde el día de su lanzamiento, Microsoft ha puesto ha disposición de los usuarios el producto completamente traducido en varios idiomas (incluido el español), vídeos y foros donde encontrar muchas respuestas a las dudas de cualquier persona interesada en aprender a utilizarlo aunque estos se encuentran en ingles. Es por ese motivo por el que he decidido iniciar este blog y poner todas aquellas cosas que vea interesantes sobre LightSwitch en español.

    Para empezar, si todavía no tienes instalado LightSwitch 2011, descargarte de la página oficial la versión de prueba de 30 días ampliable a 60 más con las que puedes utilizar el producto completo.