hefesoft

Aplicaciones de negocio con silverlight parte 2

En este post veremos como realizar una conexion a la base de datos usando Entity Framework ( En otros post veremos como manejar la base de datos usando otras tecnologias) lo primero que debemos hacer es crear una base de datos en una instancia de sql server.

Para este caso vamos a usar el tipico ejemplo que nos es enseñado en la universidad. La base de datos de colegio con estudiantes, materias etc…

Comenzamos por crear nuestra tabla de estudiantes

Creamos los campos especificamos la llave de la tablas y indicamos que la columna de codigo de estudiante sera de tipo identity

Guardamos la tabla e insertamos algunos datos de prueba

Ahora en nuestro proyecto que hemos creado en Visual Studio ( Por favor revisar la primera parte de esta serie ) vamos a gregar un diagrama de base de datos edmx

Para ello nos situamos sobre el proyecto web y damos click derecho sobre el:

Y seleccionamos como se ve en la imagen

Le damos un nombre al modelo en mi caso se llamara colegio.edmx y damos click en Add luego seleccionamos Generate from database, para que el diagrama sea generado desde una base de datos existente y damos click en siguiente en el siguiente paso vamos a crear la conexion con nuestra base de datos hacemos click en New Connection y veremos algo similar a esto:

Indicamos nuestra instancia de sql y la base de datos que queremos usar

Damos click en ok y luego el next y veremo algo similar a esto

Seleccionamos las tablas que deseamos agregar y damos click en finalizar

Ahora recompilamos la solucion, este paso debe hacerse cada vez que se agreguen tablas al edmx de lo contrario al agregar el domain service no nos mostrara las tablas

Despues de tener nuestro edmx ahora necesitamos exponer estos datos hacia el proyecto silverlight para ello vamos a usar los Domain Service, para ello damos click en el proyecto web con el boton derecho del mouse y agremamos un elemento del tipo domain service como se ve en la imagen

Le damos un nombre y damos click en add

A continuacion el domain service nos preguntara que tablas o que elementos del diagrama edmx queremos exponer hacia el proyecto silverlight, en este caso seleccionaros la tabla estudiantes y damos click en ok

Vemos como el DomainService nos crea el conocido CRUD ( Metodos para crear, insertar, actualizar y eliminar datos ) ahora el siguiente paso a realizar es recompilar toda la solucion.

Ahora vamos a trabajar en el proyecto silverlight para recobrar los datos que se exponen desde el servicio abrimos el formulario home que se encuentra en la carpeta views

Ahora agregamos las siguientes lineas de codigo para mostrar nuestros datos en una Grilla o en un Datagrid como se le conoce en silverlight, para ello es mejor arrastrarla desde el toolbox de esta forma nos evitamos problemas con los namespaces `s

Ahora el siguiente paso para este ejercisio es darle un nombre a nuestro DataGrid

Salvamos nuestro formulario y vamos al codigo de este formulario para ello damos abrimos el archivo Home.xaml.cs

Ahora dentro de este formulario vamos a llenar nuestro data grid para ello basta con 1 linea de codigo

Corremos el proyecto

Y veremos como resultado

Vemos como escibimos a lo mucho tres lineas de codigo y ya tenemos una grilla cargada. En proximos post`s estare explicando las otras operaciones del CRUD.

Pd: La forma para cargar las grillas esta pensada para las personas que vienen de web forms, en posteriores post les estaremos contando mas sobre el patron mvvm que es el que se recomienda para estos escenarios.

Silverlight

Aplicaciones de negocio con silverlight parte 2

January 23, 2011

1 Comment

Descargar archivos previamente guardados en una BD

En el post anterior vimos como subir un archivo a una bd de sql server en este post voy a explicar como descargar estos archivos,

El proceso es muy simple:

Tenemos una grilla en la cual se nos muestran los archivos que existen y tienen un link con un boton que dice descargar, en el evento de ese boton necesitaremos el siguiente codigo:

http://www.hefesoft.com/BlogMedia/Descargar.txt

Por favor disculpar los errores de ortografia 😦 en cuanto pueda los arreglo…. jejej

La idea basica mas o menos es

SaveFileDialog dlg = new SaveFileDialog();

con esta instruccion abrimos una ventana para que el usuario pueda guardar el archivo ( recuerden no poner puntos de interrupcion porque recibira una lina excepcion porque estos eventos solo pueden ser disparador por el usuario)

dlg.Filter = muestra los archivos filtrados por esta extencion

dlg.DefaultExt = la extencion en la cual se guardara el archivo

if (dlg.ShowDialog() == true) { try {

cuando el dialogo se cierre con archivos ….

byte[] fileBytes = a esta instruccion igualaremos el binary que tenemos en la bd

using (Stream fs = (Stream)dlg.OpenFile()) { fs.Write(fileBytes, 0, fileBytes.Length); fs.Close();
}

con estas dos ultimas instrucciones lo guardamos en disco duro.

Uncategorized

Archivos binarisados base de datos silverlight, Subiendo archivos silverlight, uploading files silverlight

January 9, 2011

Leave a comment

Subir archivos en silverlight con barra de progreso

En este post explicaremos como subir archivos en silverlight y guardarlos en una base de datos de sql server, la idea es sencilla por defecto los servicios que son expuestos por WCF Ria service tienen un limite de tamaño por lo que para subir archivos se necesita realizar modificaciones al interior del web config para aumentar el tamaño del bufer de datos. La idea de este post es realizarlo sin dicha modificación y ademas manejar una barra de progreso para visualizar la subida del archivo.

Primero creamos esta Estructura en sql server

Para este ejemplo se utilizara un modelo dbml de linq para ello debemos tener instalada la version de wcf silverlight toolkit

http://www.microsoft.com/downloads/en/confirmation.aspx?FamilyID=c4f02797-5f9e-4acf-a7dc-c5ded53960a6&displaylang=en

pâra poder exponer servicios desde un modelo dbml

Debemos agregar esta dll a nuestro proyecto web Microsoft.ServiceModel.DomainServices.LinqToSql, normalmente se encuentra en esta carpeta:

C:\Program Files (x86)\Microsoft SDKs\RIA Services\v1.0\Toolkit\Libraries\Server

ahora creamos nuestro diagrama dbm

Agregamos las tablas a nuestro dbml ( para los que nunca manejaron un dbml esto se hace abriendo el modelo, vamos a view-> server explorer -> Data Connection -> new Connection y agregamos la conexion y despues deberiamos ver algo como esto… )

arrastramos las tablas

Por favor tener en cuenta que la forma de acceder a este modelo es por medio del datacontext que señalo a continuacion:

Luego creamos nuestro servicio

Ahora en el servicio recién creado agregaremos el siguiente codigo

http://192.168.0.14/BlogMedia/Servicio.txt

Lo pongo en txt porque al pegarlo se ve realmente feo. Y tenemos algo similar a esto:

Luego en el proyecto silverlight en el formulario que vayamos a usar para subir archivos pegamos el siguiente codigo

http://192.168.0.14/BlogMedia/Silverlight.txt

Y queda algo asi, recuerden que hay que areglarle colores y estilos para que quede mas agradable

Adjunto el codigo.

http://www.hefesoft.com/BlogMedia/UploadFile.rar

Uncategorized

Subir archivos en silverlight con barra de progreso

January 9, 2011

Leave a comment

Dar formato de moneda a TextBox y Datagrid`s

Normalmente en una aplicacion es necesario formatear las cajas de texto con datos de moneda o de fecha para esto basta con una simple modificacion a nuestro Binding

Usamos la instruccion StringFormat=\{0:c\ para que quede formateado en moneda

En esta pagina encontraran una tabla con los diferentes formatos soportados

http://www.designersilverlight.com/2010/05/28/silverlight-4-binding-and-stringformat-in-xaml/

Silverlight, Uncategorized

Formatos de moneda en silverlight

January 9, 2011

Leave a comment

Exponer servicios web de una aplicacion wcf silverlight

Buenas, para un proyecto que estamos desarrollando actualmente necesitamos exponer los servios generados para ser consumidos desde un dispositivo movil, despues de revisar cierta documentacion disponible en internet

http://www.silverlightshow.net/items/WCF-RIA-Services-Part-10-Exposing-Domain-Services-To-Other-Clients.aspx

http://blogs.msdn.com/b/brada/archive/2010/03/29/silverlight-4-ria-services-ready-for-business-exposing-wcf-wsdl-services.aspx

De dolores de cabeza… y de muchas exepciones lo logramos y el cuento nos funciono de la siguiente manera para el que quiera replicarlo en un futuro…….

Cuando agregamos un servicio de ria service

El nos brinda la opción de exponerlo

Y aca lo bonito del asunto, en cuanto foro hemos leído se nos decia que debiamos agregar estas instrucciones a nuestro WebConfig

<system.serviceModel>

    <domainServices>

      <endpoints>

        <add name="OData"

             type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

        <add name="Soap"

             type="Microsoft.ServiceModel.DomainServices.Hosting.SoapXmlEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

      </endpoints>

    </domainServices>

y cuando lo agregábamos "suas" una bonita excepcion en nuestra aplicación


Y pues cuando logramos ver la excepción en todo su esplendor quedamos mas locos aun :P

Bueno la solucion resulto bastante sencilla en el web config solamente dejamos que expusiera el Odata

Ya despues de esto funciono bien ahora como hago para verlo desde otro proyecto? finalmente la finalidad era exponerlo no? pues buscando en internet también el cuento es maso menos los siguiente

Buscamos el servicio que queremos exponer

en mi caso:

y cambianos . por – ( puntos por guiones )

osea la llamada al servicio nos quedara algo como lo que sigue

http://localhost:12313/Services/Merchandising-Web-Services-Clientes-ClientesService.svc

Finalmente para agregarlo a otro proyecto como referencia web hacemos los siguiente

Luego le damos la siguiente ruta

http://localhost:12313/Services/Merchandising-Web-Services-Clientes-ClientesService.svc/Odata

!Por favor recuerden agregar el “/Odata” ! si no no funcionara

Y listo ya el siguiente paso es la implementacion de los métodos expuestos en el WCF ria service.

Silverlight

Exponer servicios web de una aplicacion wcf silverlight

January 6, 2011

Leave a comment

Base de datos para el manejo de usuarios de Silverlight usando Membership Provider

Por defecto wcf ria service maneja una base de datos para los usuarios, en este post vamos a explicar como hostear esta base de datos en una instancia de sql server.

Lo primero que debemos hacer es crear la base de datos en nuestra instancia de sql server

Luego buscamos al interior de la carpeta de windows

Y corremos el archivo ejecutable aspnet_regsql

Seleccionamos la base de datos

Siguiente y posteriormente en finalizar

Si revisamos nuestra instancia de sql encontraremos una base de datos con una estructura de Autenticación lista para ser usada

Ahora en la aplicación necesitamos realizar algunas modificación al Web config.

Es recomendable remover la conexion de LocalSqlServer ya que en ciertos escenarios como los de produccion el sistema buscara la base de datos en la ruta local del servidor dandonos problemas en entornos de produccion ( Dios si e sufrido con eso ) 😀 esa es la razon del primer remove despues agregamos la conexion diciendole donde deseamos apuntar hacia la base de datos que recién creamos. El paso siguiente es agregar las siguientes lineas en nuestro web config

Y ya en este momento ya tenemos conectado nuestro sistema de autenticacion a nuestro aplicativo si quieres realizar una pequena prueba a hacer lo siguiente:

Click en la solución web luego vas a project y a asp configuration

Se nos abre un servicio web

Con el sistema de autenticación conectado ya podemos registrar y manipular usuarios en nuestra aplicación silverlight.

Silverlight

Membership Silverlight, Silverlight

January 4, 2011

Leave a comment

Aplicaciones de negocio con silverlight parte 1

Buenas, la idea de este espacio es ayudar a las personas que estén iniciando con esta herramienta de los señores de Microsoft. Somos una empresa colombiana que desarrolla en esta herramienta y quiere brindar un espacio de ayuda a los desarrolladores que puedan tener inconvenientes bajo este entorno de desarrollo.

Por mi parte solo me queda decirles que en este momento el que les escribe es Jose Douglas Ramirez Espitia, Miembro del equipo de trabajo de Hefesoft, así que comencemos.

Lo primero que debemos tener instalado es el software de microsoft para ello necesitamos:

A modo de recomendacion personal les propongo instalar las versiones en ingles de todos estos productos ya que por mi experiencia profesional, salen primero las versiones de toolkit`s, runtimes y parches de Microsopas en Ingles que en español.

1. Visual Studio 2010

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=26bae65f-b0df-4081-ae6e-1d828993d4d0&displaylang=en

2. Silverlight Tools

http://65.55.21.250/downloads/en/details.aspx?FamilyID=B3DEB194-CA86-4FB6-A716-B67C2604A139

3. Silverlight Toolkit

http://silverlight.codeplex.com/

4. Microsoft Expression Blend

Visual Studio 2010 tiene un designer para la parte gráfica de nuestras aplicaciones de Silverlight y WPF, Pero si no eres una persona masoquista no querrás lidiar con el y utilizaras Blend ( De lo contrario a codificar en puro Xaml o para hacer un símil codificar en código html ) que nos brinda un buen designer para el manejo de la parte gráfica de nuestras aplicaciones, ademas si eres de los que tienen que trabajar con diseñadores gráficos esta herramienta te sera suprema mente útil 🙂

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=04438f30-cc6d-4e10-80a3-3b3dce129e88&displaylang=en

5. Wcf Ria Services

Esta herramienta es el objetivo principal de esta serie de post, Microsoft en mi humilde opinión realizo un excelente trabajo entregándonos un template que nos permite generar una arquitectura simple ( De fácil manejo ) con la cual podremos lograr aplicaciones de negocio de alta complejidad.

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=cd3191a1-def4-4caa-8120-1f0bbcf4bb05&displaylang=en

Al tener todas nuestras herramientas de desarrollo instaladas debemos ver algo similar a esta captura de pantalla en nuestro visual al ingresar por File->New Project

Si no ven en este momento instalados los mismos templates que están instalados en mi computador ( por favor que no panda el cunico citando al afamado chapulin colorado), en otro post cubriré como instalar estos templates lo importante es que este instalado el template de SilverlightBussinesApplication .Lo seleccionamos y damos click en ok y vemos que el sistema nos generara una solución que consta de dos proyectos uno web y otro silverlight

Corremos el aplicativo

Y veremos lo siguiente

Si hacemos click con el mouse en login veremos

Bueno hasta que vemos que sin haber escrito una linea de código hemos creado una aplicación en silverlight con un diseño bastante bonito, ademas que tenemos un sistema de registro de usuarios basado en el conocido Membership de Microsoft del cual hablaremos en posteriores post`s para la personalización de las bases de datos para autorización y autenticacion en aplicaciones silverlight.

Silverlight

Silverlight, Wcf Ria service español

January 3, 2011

Leave a comment

Responsive Design

Primero cambiamos el editor de visual studio a html 5, como se ve en la figura

luego creamos la estructura basica del html como se ve a continuación:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Menu Intelab</title>
</head>
<body>

</body>
</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Creamos dos secciones y un articulo como se ve en la imagen

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Menu Intelab</title>
</head>
<body>


<section>
    <section id="Menu_Items">    
        <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
    </section>
</section>

</body>
</html>

Seleccionamos una imagen para dar un mejor estilo al ejemplo, al correr la pagina tenemos algo como lo que se ve

en la imagen

Ahora repetiremos el articulo varias veces para tener mas elementos a mostrar

<section>
    <section id="Menu_Items">    
        <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
         <article>
            <img src="../Images/Correo.png" alt="Prueba de Responsive Design" height="118" width="244" />
            <p> Descripcion del elemento del menu</p>
        </article>
    </section>
</section>

Ahorrar arancamos agregando un archivo css en visual estudio

Damos un estilo basico

body 
{   
    color: White;
    font-family: Arial;
    font-size: 16px;    
}

y lo agregamos al header del documento

<link href="../Estilos/Estilo_Menu.css" rel="stylesheet" type="text/css" />

Ahora en el estilo vamos a decirle al html que queremos que nos muestre los elementos en bloque

body  {        color: White;     font-family: Arial;     font-size: 16px;     }
 
#Menu_Items
{     }
 
#Menu_Items article  {        display:inline-block;
}

y tendremos una pantalla como la que se ve a continuacion

y si hacemos resize al explorador vemos como se autoajusta

Uncategorized

August 11, 2012

Leave a comment

Instalando la plataforma

Prerequisitos

Framework 4.5

Acceso a un usuario con permiso a la bd y con permiso para correr scripts en la base de datos master

Primero abrimos la consola de manejo del Internet Information Service 7.5

Seleccionamos grupo de aplicaciones

Agregamos uno nuevo

Ahora cambiamos el usuario con el que se conectara este grupo de aplicaciones

vamos a configuracion avanzada

luego seleccionamos esta opcion

Damos click en examinar y selecionamos un usuario que tenga permisos en la base de datos para correr scripts en la tabla maestra y que pueda crear bases de datos, esto para instalar el sistema de autenticacion Membership de MIcrosoft (Mas informacion)

Y aceptamos

Vemos como este usuario tiene permiso en la bd

En este caso tiene todos los permisos, aunque funcionara tambien con privilegios menos elevados

Ahora corremos el instalador

Selecionamos el grupo de aplicaciones que creamos

Damos click en siguiente y cerrar

Buscamos el sitio que creamos en el IIS (Internet Information Service)

Vamos a configuracion de aplicaciones

Si deseamos crear nuestro usuario administrador en el primer inicio del portal

Cambiamos esta propiedad a True

En el primer inicio cambiamos esta propiedad a true

Para correr los scripts de autenticacion

Damos click en examinar en el iis y corremos el sitio

Si la maquina no tiene instalada silverlight 5 no podremos correr el asistente, si en el servidor no se encuentra instalado se debe correr desde otra maquina apuntando a este sitio

Habilitamos el storage para la aplicacion

Selecionamos el servidor al que deseamos conectaros

y validamos que podamos conectarnos dando click en test

Seleccionamos la base de datos que deseamos para manejar nuestra autenticacion de usuarios

Luego se nos piden los datos del usuario que sera el administrador del sistema

Llenamos los datos pulsamos en ok y queda finalizada la instalacion del portal.

Uncategorized

June 23, 2012

Leave a comment

Instalar servicio push

Corremos el instalador

se debe seleccionar framework 4.0 para este sitio. Damos click en siguiente y finalizar.

Vamos luego al internet information service, seleccionamos el sitio y seleccionamos vista de contenido

Seleccionamos este archivo, damos click derecho y examinar

Si vemos esta pantalla

se encuentra correctamente instalado.

Uncategorized

June 23, 2012

Leave a comment

Tips a tener en cuenta al programar en wind mill project

Tener fluid layout en los modulos desarrollados puede generar errores de measureoverride error. El host ya tiene esta caracteristica activada y animara todos los states de los modulos.

Uncategorized

June 19, 2012

Leave a comment

Nuevo modulo Wind Mill

Cambiar todos los namespace
Cambiar el name space del app.xaml
Posteriormente vincular todos los proyectos del ria service
Debe verse en el proyecto cliente del silverlight

Uncategorized

May 20, 2012

Leave a comment

Navegacion WindMill project

Seleccionamos el proyecto de navegacion

Es importante que la pagina que tengamos como principal este decorada con “InitialPage = true” y ademas que el nombre del xap generado coincida con el que se encuentra en la declaracion de la pagina “XapName = "WindMillNavegationTest.xap"”

Luego en el proyecto con el usuario administrador agregamos el modulo