[Tips] Documento para migrar tu App de Windows 8 de Consumer Preview a Release Preview (o RTM)

Hola, quería compartir este tip, quizás ya muchos lo saben, pero me ha sacado mucho de apuros, ya que tengo que migrar una app que la hice con CP a RTM, y hay un montón de características que por lo menos en mi caso, cambiaron. Me estaba rompiendo la cabeza por que estoy contra el tiempo y me encontré con este documento:

image

Lo puedes descargar desde acá:
http://go.microsoft.com/fwlink/?LinkId=251943

En mi caso, entre varias cosas me sucedía que los recursos estáticos ya no estaban o ya no se llamaban como en la versión CP

image

Entonces a buscar en este documento, y te indica de inmediato por cual nombre de recurso debes remplazar el ítem que ya no existe (Current Value por el New Value)

image

Y estamos ok, bueno, igual un par de horas, pero al menos tenemos una guía Sonrisa

@chalalo

[Tutorial] Comenzado con MVVM y Knockout.js – Parte 5: Conectar el ViewModel, con el Model mediante ASP.NET WebMatrix & Razor

Hola!, continuamos con la serie de tutoriales, este en realidad es una anexo del tutorial anterior, en donde conectabamos el ViewModel con el Modelo con ASP.NET Web API, la cual provee una gran facilidad para manejar las peticiones a las acciones con parámetros con notación JSON. Pero, ¿qué pasa con WebMatrix y Razor? como se hace para recibir JSON? Se puede trabajar con Clases?, este post intenta responder estas preguntas.

PD: Si quieres revisar los otros post de esta serie, revisa:

Parte 4
http://geeks.ms/blogs/gperez/archive/2012/09/12/tutorial-comenzado-con-mvvm-y-knockout-js-parte-4-conectar-el-viewmodel-con-el-model-mediante-asp-net-webapi-y-propiedades-condicionales.aspx

Parte 3
http://geeks.ms/blogs/gperez/archive/2012/09/06/tutorial-comenzado-con-mvvm-y-knockout-js-parte-3-agregar-y-remover-de-arreglos-observables.aspx

Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx

Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx

Volvamos a lo nuestro, el ViewModel y su funcionamiento será el mismo que puedes ver en la Parte 4, solo que ahora nos vamos a conectar a una ASP.NET Web Page, veamos la estructura del proyecto en WebMatrix:

image

Página test.cshtml

@{

    var reader = new StreamReader(Request.InputStream);

    var json = reader.ReadToEnd();

    var respuesta =WSTest.guardaPersona(json);

    Response.Write(respuesta);

  

}

Puedes notar que se va leer todo el contenido de lo enviado hacia esta página con el Request.InputStream, a diferencia de ASP.NET Web API, en donde podemos recibir directamente un objeto. Luego se lee todo el Stream y lo paso como parámetro a la función guardaPersona de la página WSTest.cshtml, recuerda que debe estar en la carpeta App_Code para que las funciones que esta contenga sean visibles a las demás páginas.

Página WSTest.cshtml
@functions {
 
  public static string guardaPersona(String obj) {
        var p = Json.Decode(obj);
        Persona persona = new Persona();
        persona = Json.Decode<Persona>(obj);
        return "Se Registro: " + persona.nombre +" con " 
+ persona.telefonos.Count + " Telefonos "
;
   }
 
    public class Persona {
        public string nombre {get; set; }
        public string apellidos {get; set; }
        public int edad {get; set; }
        public ICollection<Telefono> telefonos {get; set; }
    }
 
    public class Telefono{
        public string numero{get; set; }
        public string tieneAcargo{get; set; }
        public string Acargo{get; set; }
    }
 
}

La función guardaPersona obtiene el parámetro de tipo String, que si vemos que lo que contiene verás:

image

Las clases con las mismas con las que trabajamos anteriormente, así que instanciamos un objeto Persona y utilizamos el helper Json.Decode con el tipo <Persona> y le pasamos como parámetro el argumento de la función, que corresponde al String que contiene el formato json de lo enviado por Knockout.js. Ahora el objeto persona ya está contiene los datos enviados desde el cliente y estamos listos para guardar el objeto. En mi caso solo devuelvo un string para demostrar que ya podemos utilizar el objeto instanciado.

image

El ViewModel Solo cambia en la llamada, ahora no es una acción de ASP.NET Web API, es una página por lo que el modelo queda de la siguiente manera:

    var PersonaViewModel = {
                nombre: ko.observable("Juan Pablo"),
                apellidos: ko.observable("Pérez Nuñez"),
                edad: ko.observable(1),
                telefonos: ko.observableArray([new telefono(234234), new telefono(565345)]),
                addTelefono: function () {
                    this.telefonos.push(new telefono(document.getElementById("tx_telefono").value));
                    alert("Cantidad de Telefonos:" + this.telefonos().length);
                },
                grabar: function () {
                    alert("Preparado para Guardar...");
                    $.ajax({
                        url: "test.cshtml",
                        type: "POST",
                        data: ko.toJSON(this),
                        contentType: "application/json",
                        success: function (result) { alert(result) }
                    });
 
                }
            };

Como vez, casi no hay cambios y funciona muy bien Sonrisa.Si quieres descargar el ejemplo:

Descarga la parte 5 del Tutorial

Saludos!

@chalalo

[Tutorial] Comenzado con MVVM y Knockout.js – Parte 4: Conectar el ViewModel, con el Model mediante ASP.NET WebAPI y propiedades condicionales.

Hola, seguimos con nuestro proceso de aprendizaje sobre Knockout.js, esta vez veremos la posibilidad de condicionar ciertas propiedades del DOM según el valor del atributo del ViewModel y finalmente, enviaremos nuestro viewmodel serializado en json a un servicio REST de ASP.NET WEB API.

Te dejo el link de los tutoriales anteriores:

Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx

Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx

Parte 3
http://geeks.ms/blogs/gperez/archive/2012/09/06/tutorial-comenzado-con-mvvm-y-knockout-js-parte-3-agregar-y-remover-de-arreglos-observables.aspx

Desarrollo en el Cliente

Veamos el primer comportamiento deseado, en donde tenemos podemos asignar la persona que esta a cargo de un teléfono (quizas no tiene mucho sentido, pero es para efectos de ejemplo), como vez, al momento de presionar el check mostramos una caja de texto en donde podemos ingresar el nombre del encargado.

mvvm4

Veamos primero cual es el código HTML asociado a la lista de telefonos, puedes ver que el input type=”checkbox” tiene asociado una nueva propiedad del viewmodel que se llama tieneAcargo que es boolean, la misma propiedad se une al atributo visible del input text, de manera que lo que sucede en ese momento es:

  1. Se hace presiona sobre el check
  2. El check esta unido a una propiedad del viewmodel, por lo que por del binding bidireccional el viewmodel cambia el valor de la propiedad
  3. Nuevamente por el binding bidireccional la propiedad visible del input text obtiene el valor del viewmodel y se setea visible o invisible según el caso.

<ul data-bind=”foreach: telefonos”>
  <li>
    <span data-bind=”text: numero”></span>
    <button data-bind=”click: borrar” >Borrar</button>
    <input type=”checkbox” data-bind=”checked: tieneAcargo”/>Tiene A Cargo
    <input type=”text” data-bind=”value:Acargo, visible:tieneAcargo” />
  </li>
</ul>

Lo anterior se soporta en algunos cambios que hice el viewmodel, en la “clase” telefono, puedes ver que hay dos atributos observables, el tieneAcargo que es boolean y el Acargo, que contendrá la información escrita dentro de los input text.

<script type=”text/javascript”>

            function telefono(numero) {

                return {

                    numero: ko.observable(numero),

                    tieneAcargo: ko.observable(false),

                    Acargo: ko.observable(),

                    borrar: function () {

                        PersonaViewModel.telefonos.remove(this);

                    }

 

                };

            }

 

var PersonaViewModel = {

    nombre: ko.observable(“Juan Pablo”),

    apellidos: ko.observable(“Pérez Nuñez”),

    edad: ko.observable(1),

    telefonos: ko.observableArray([new telefono(234234),

                                   new telefono(565345)]),

         addTelefono: function () {

         this.telefonos.push(new telefono(document.getElementById
                                                 (
“tx_telefono”
).value));

        alert(“Cantidad de Telefonos:” + this.telefonos().length);

    },

    grabar: function () {

          alert(“Preparado para Guardar…”);

          $.ajax({

             url: “http://localhost:11590/Api/Default1”,

             type: “POST”,

             data: ko.toJSON(this),

             contentType: “application/json”,

             success: function (result) { alert(result) }

           });

 

           }

      };

 

   PersonaViewModel.nombreCompleto = ko.dependentObservable(function () {

          return this.nombre() + ” “ + this.apellidos();

      }, PersonaViewModel)

   ko.applyBindings(PersonaViewModel);

</script>     

El siguiente paso es enviar nuestro viewModel a ASP.NET Web API, para esto vamos a utilizar Jquery, notar que dentro del mismo modelo está la función de grabar, lo que garantiza que el concepto de que el viewmodel es responsable por sus propias acciones se mantenga.

Veamos un poco más la función de Ajax, como ya mencioné, estoy utilizando jquery, luego hago referencia a la url en donde esta el servicio que aceptará peticiones por POST. Luego el type POST que indicará cual acción se ejecutara del API Controller, luego ocupo la función  toJSON, recuerda que enconding nativo a json solo lo soportan las últimas versiones de los navegadores, y Knockout da soporte desde IE6, de todas formas, es muy útil este método de Knockout, luego recibimos y procesamos el mensaje de resultado de la acción.

Para llamar a la función grabar utilizamos un botón html simple:

<button data-bind=”click:grabar”>Guardar</button>

Desarrollo ASP.NET WEB API

No voy en entrar en detalle de como crear un proyecto con ASP.NET WEB API, si necesitas más información te recomiendo que leas los artículos anteriores:

Voy a mostrar el controlador y el modelo asociado. El modelo tiene las mismas características que nuestro viewmodel:

public class Persona
    {
        public string nombre { get; set; }
        public string apellidos { get; set; }
        public int edad { get; set; }
        public ICollection<Telefono> telefonos { get; set; }
    }

 

  public   class Telefono

    {

        public string numero { get; set; }

        public string tieneAcargo { get; set; }

        public string Acargo { get; set; } 

 

    }

Luego el controlador que contiene la acción:

public class Default1Controller : ApiController
{
// POST api/default1
  public String Post([FromBody] Persona persona)
  {

    String mensaje = string.Format(“Guardado {0} {1} telefonos:{2}”,
          persona.nombre, persona.apellidos, persona.telefonos.Count);

    return mensaje;

  }

Cuando se presiona el botón guardar veremos que se llama a nuestra acción con los parametros serializados con JSON:

image

 

Luego envío la respuesta al cliente, que consiste en un mensaje para este ejemplo, que me indica que todo esta ok. Ahora bien, luego se puede guardar en una BD, etc et.

image

Y Listo!, Te dejo el código por si quieres descargar este ejemplo:

https://dl.dropbox.com/u/1303802/Demo1MVVM.zip

Saludos!
@chalalo

[Tutorial] Comenzado con MVVM y Knockout.js – Parte 3: Agregar y remover elementos de Arreglos Observables.

Hola que tal? continuamos con este tutorial, esta vez con un pequeño ejemplo sobre las como agregar y remover objetos desde una colección observable, además veremos el como bindear atributos del DOM, como por ejemplo, el atributo Enable del botón para solo aceptar hasta 5  teléfonos.

Si no has visto los tutoriales anteriores, te aconsejo que los visites antes de seguir:

Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx

Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx

En la siguiente animación podrás ver el comportamiento que vamos a logra. Lo nuevo en este ejemplo , como mencionábamos es:

  1. Agregar un input type=”number” para ingresar un nuevo teléfono a la colección
  2. Posibilidad de borrar estos teléfonos del ViewModel
  3. Mostrar la cantidad de teléfonos ingresados
  4. Inhabilitar el botón agregar cuando lleguemos a la cantidad de 5 teléfonos.

Ejemplo MVVM2

Veamos entonces el código que hace posible este funcionamiento. Primero que nada , en “clase” teléfono agregé un metodo que remueve de la colección de teléfonos del ViewModel a el objeto. Luego como puedes ver en el ViewModel hacemos un método addTelefono,que agregar un objeto teléfono obteniendo del valor desde el input tx_telefono, además y solo por un tema de demostración, envío una alerta con la cantidad de elementos de la colección

<script type=”text/javascript”>

            function telefono(numero) {

                return {

                    numero: ko.observable(numero),

                    borrar: function() {

                        PersonaViewModel.telefonos.remove(this);

                    }

                };

            }

 

 

var PersonaViewModel = {

      nombre: ko.observable(“Juan Pablo”),

      apellidos: ko.observable(“Pérez Nuñez”),

      edad: ko.observable(1),

      telefonos: ko.observableArray([new telefono(234234), 
                                     new telefono(565345
)]),

      addTelefono: function() {

      this.telefonos.push(
            
new telefono(document.getElementById(“tx_telefono”).value
));

             alert(“Cantidad de Telefonos:” + this.telefonos().length);

            }

       };

 

      PersonaViewModel.nombreCompleto = ko.dependentObservable(function() {

          return this.nombre() + ” “ + this.apellidos();

       }, PersonaViewModel)

 

     ko.applyBindings(PersonaViewModel);

</script>     

Veamos el código html que da soporte al comportamiento:

<label for=”tx_telefono”>Telefono</label>
<input type=”number” id=”tx_telefono” />

<button data-bind=”click: addTelefono, enable: telefonos().length<5″>Agregar</button> Maximo 5 telefonos!


<h4>Telefonos (<span data-bind=”text: telefonos().length” ></span>)</h4>
<ul data-bind=”foreach: telefonos”>
   <li>
     <span data-bind=”text: numero”></span>
     <button data-bind=”click: borrar” >Borrar</button>
    </li>
</ul>

Podemos ver que el botón para agregar nuevos teléfonos tiene dos binding de comportamientos, 1 que liga el click con el método addTelefono, otro binding con el atributo enable, en el cual podemos utilizar directamente una condición sobre el ViewModel, en este caso, mientras sean menor a 5 (4 elementos) el largo de la colección el botón permanecerá activo, obviamente esto se logra ya que la condición va a retornar verdadero o falso y se asignará al atributo enable.

Para borrar, se hace algo muy parecido, se hace el binding con la función borrar simplemente, recordemos que estamos bajo el contexto de cada elemento de la colección de teléfonos mediante el foreach, por lo que al presionar borrar se entiende que estamos llamando a la función con el argumento que contiene propio objeto en cuestión, por eso es que podemos hacer remove(this).

Y por último, que ya se me olvidaba, creamos un span en donde al igual que el mensaje, muestro la cantidad de teléfonos que se han ingresado, haciendo binding de la propiedad text.

Como ves, bastante interesante este nuevo esquema, voy a seguir posteando tutoriales y luego unirlo con ASP.NET WEB API.

Por último te dejo el link de descarga:
https://dl.dropbox.com/u/1303802/MVVM1.zip

Saludos!
@chalalo