28.4.12

Artículo: novedades en Windows Phone SDK 7.1.1

En el blog de MSDN España han publicado un interesante artículo donde cuentan todo lo nuevo que trae la actualización del SDK de Windows Phone a la versión 7.1.1.

Os recomiendo leerlo.

Acceder al artículo "Novedades de la nueva versión de Windows Phone SDK 7.1.1".

27.4.12

Explicación oficial de los problemas en App Hub

Últimamente ha habido algunos problemas con la página de App Hub. En el blog de MSDN España han traducido un articulo del equipo de desarrollo de Windows Phone 7 donde explican el motivo de estos fallos.



Podéis leerlo en el siguiente enlace:

Acceder al artículo "Adaptándonos al rápido crecimiento del Marketplace y preparándonos para el futuro".

25.4.12

Tutorial Android parte 20: Controles de formulario en Android – Edit Text

Hoy vamos a ver cómo poner un control EditText en Android.

Este control funciona como un control cuadro de texto permitiendo al usuario introducir un texto (su nombre, edad, apellidos…).



Vamos a crear una aplicación para ver cómo añadir este control a una aplicación en Android.


Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloEditText
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, EditText!
Package name: com.example.helloedittext
Create Activity: HelloEditText
- Hacer click en Finish.

Agregar el siguiente código en el res/layout/main.xml:



Agregamos las siguientes librerías a HelloEditText.java:

import android.view.KeyEvent;
import android.view.View.OnKeyListener;
import android.view.View;
import android.widget.EditText;

Después agregamos el siguiente código al evento OnCreate de HelloEditText.java:



El código lo que hace es capturar el control EditText y le asigna un manejador KeyListener para escuchar las pulsaciones de tecla en el EditText. Cuando se termina de introducir texto en el EditText, aparece una notificación con el texto del EditText.

Lanzamos este código seleccionando el menú Run -> opción Run.



Si pulsamos en el EditText nos aparecerá el panel de escritura y podremos insertar caracteres.



Al finalizar de escribir aparecerá el mensaje con el texto que se escribió en el EditText.


Muy sencillo y útil.

El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 20.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina – Toledo -Spain).

24.4.12

[Video] Matthias Shapiro - experience developing for Windows Phone 7



Matthias Shapiro, Jefe de desarrollo de Shop Savvy, cuenta su experiencia construyendo y portando aplicaciones a Windows Phone 7.

22.4.12

Tutorial Android parte 19: ScrollView en Android

Vamos a ver otra cosa más del desarrollo de aplicaciones para Android. Hoy toca algo muy útil y muy sencillo. El scroll vertical.
En alguna ocasión nos va a pasar que tenemos una serie de contenidos en una actividad y se alargan hasta salirse por la parte inferior de la actividad.



En estos casos querremos incorporar en nuestra actividad un scroll vertical para que el usuario puede pulsar y subir y bajar por el contenido para ver la información que se queda fuera.

Para hacer esto hay que utilizar la etiqueta ScrollView.

En este tutorial vamos a crear una aplicación con una lista de elementos muy larga que meteremos dentro de un control ScrollView para que el usuario pueda pinchar en la pantalla del dispositivo y arrastrar arriba y abajo.



Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloScrollView
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, ScrollView!
Package name: com.example.helloscrollview
Create Activity: HelloScrollView

- Hacer click en Finish.

Agregar el siguiente código en el res/layout/main.xml:



Las etiquetas ScrollView indican que todo lo que está incluido en su interior se podrá desplazar mediante scroll vertical.

Si lanzamos este código (Run -> Run), veremos cómo funciona el scroll vertical (una barra vertical que indica la posición respecto a la altura total de la página.






El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 19.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina – Toledo -Spain).

[Video] Chaotic Moon experience developing for Windows Phone 7



Whurley es CTO de Chaotic Moon y cuenta en este video su experiencia construyendo aplicaciones para Windows Phone 7.

21.4.12

[Video] Experience developing for Windows Phone 7



Minh Tran es cofundador e ingeniero en TranCreative en este video cuenta su experiencia construyendo y portando aplicaciones a Windows Phone 7.

20.4.12

Crea un Tower Defense para Windows Phone 7 con ScriptTD

En el siguiente tutorial que he encontrado en Channel 9 nos enseñan cómo crear nuetro propio Tower Defense a partir de un proyecto open source para Windows Phone 7.

Acceder al tutorial "ScriptTD: Tower Defense Made Easy".





19.4.12

Tutorial Android parte 18: Controles de formulario en Android - Custom Button

Vamos a seguir traduciendo los artículos del blog del sitio de desarrolladores de Android. El código fuente de este ejemplo lo podéis encontrar en el siguiente enlace:

http://developer.android.com/resources/tutorials/views/hello-formstuff.html

Vamos a ir viendo poco a poco los controles típicos que se utilizan en formularios (botones, radiobuttons, etc).

En este tutorial vamos a aprender a crear un botón que tienen una imagen en lugar de texto. Usaremos el widget Button y 3 imágenes diferentes.



Android_pressed.png



Android_focussed.png



Android_normal.png



Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloCustomButton
Build target: (El que queráis, yo en este caso he marcado...) Android 1.6
Application name: Hello,CustomButton!
Package name: com.example.hellocustombutton
Create Activity: HelloCustomButton

- Hacer click en Finish.

Agregar las tres imágenes a la carpeta res/drawable (con opción del menú contextual Import -> File System).

Creamos el fichero android_button.xml en res/drawable y agregamos el siguiente código:



Este fichero sirve para indicar qué imagen se debe mostrar cuando el botón esté en estado normal, tenga el foco o esté pulsado. Es importante colocar las imágenes en este orden para que se asignen correctamente las imágenes al botón.

Añadimos en res/layout/main.xml el control de nuestro Custom Button:



Se indica que la información de la imagen de fondo del botón se cogerá del fichero xml que acabamos de definir. Además al pulsar el botón se llamará a un método que definiremos a continuación añadiendo el siguiente código a la clase HelloCustomButton.java:



El código que se ejecutará al pulsar en el botón mostrará un mensaje por pantalla informando que se ha pulsado el botón.

Nota: Si probáis este tutorial en la versión 1.5 de Android no encontrará el código del onClick del botón. Por eso lo estamos probando con la versión 1.6. El motivo de esto lo encontré en este foro:

http://stackoverflow.com/questions/8135870/onclick-event-in-1-5

Y ese motivo es que el atributo android:onClick solo funciona desde la versión 1.6.

Pues ya está el código. Lanzamos la aplicación desde el menú Run -> opción Run:



Al dejar pulsado el botón aparece:



Muy sencillo.

El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 18.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina - Toledo - Spain).

18.4.12

Fichero Xml Nivel 2 para XNArkanoid

Ya vamos pillando más cosas sobre cómo hacer contenidos para XNArkanoid.

Os paso un nivel que hemos hecho para este juego:

Nivel 2 XNArkanoid.

17.4.12

Evento Windows 8 Tour y Camp para desarrolladores

Os paso la noticia de estos eventos sobre Windows 8 para desarrolladores.



Acceder a Windows 8 Tour y Camp para desarrolladores.

Tutorial Android parte 17: TimePicker en Android

Vamos a seguir traduciendo los artículos del blog del sitio de desarrolladores de Android. El código fuente de este ejemplo lo podéis encontrar en el siguiente enlace:

http://developer.android.com/resources/tutorials/views/hello-timepicker.html

En este tutorial vamos a aprender a utilizar el control TimePicker. Este control sirve para que el usuario seleccione una hora de una forma más intuitiva y sencilla.



Tras seleccionar la hora, ésta se almacenará en un TextView.



Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloTimePicker
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, TimePicker!
Package name: com.example.hellotimepicker
Create Activity: HelloTimePicker

- Hacer click en Finish.

Abrimos el fichero res/layout/main.xml e insertamos el siguiente código:



El TextView será el que almacenará el valor de la hora seleccionada. El botón será el que lanzará el TimePicker cuando se pulse.

Agregamos todas las librerías que vamos a necesitar en la clase principal HelloTimePicker.java:

import android.widget.Button;
import android.widget.TextView;
import java.util.Calendar;
import android.view.View;
import android.app.TimePickerDialog;
import android.widget.TimePicker;
import android.app.Dialog;

Para poder agregar ahora las siguientes variables a la misma clase:

private TextView mTimeDisplay;
private Button mPickTime;
private int mHour;
private int mMinute;
static final int TIME_DIALOG_ID = 0;

Ahora vamos a modificar el código OnCreate de la siguiente forma:



En el método OnCreate, hacemos que la variable mTimeDisplay haga referencia al TextView donde se mostrará la hora. Y la variable mPickTime haga referencia al botón que se pulsará para lanzar el TimePicker. También indicamos que al pulsarse se llamará a showDialog() pasándole un identificador para identificar el TimePicker que se quiere utilizar. Y por último se lee la hora actual y se guarda en las variables mHour y mMinute para mostrarlas en el método updateDisplay() en el TextView.

Ahora vamos a añadir el código del método updateDisplay() que básicamente lee los valores de la hora almacenados en nHour y mMinute y los guarda en el TextView en formato hh:mm.

El método pad lo único que hace es poner un cero por la izquierda si la hora o los minutos son menores de 10.



A continuación, agregamos a la clase un TimePickerDialog.OnTimeSetListener que se llamará cuando el usuario seleccione la hora en el TiemPickerDialog. Al hacerlo, se actualizarán los valores de las variables mHour y mMinute con el valor seleccionado por el usuario y se llamará a updateDisplay() para que se actualice el valor del TextView.



Y a continuación, definimos lo que se hará cuando se llame a showDialog agregando el método onCreateDialog. Cuando se llame a showDialog y se pase el identificador de nuestro TimePicker, se abrirá un nuevo TimePickerDialog al que se le pasará el objeto mTimeSetListerner que acabamos de crear, la variable mHour y mMinute. El último parámetro (false) es para indicar si el formato es de 24 horas o no (cuenta solo hasta 12).



Pues ya está el código. Lanzamos la aplicación desde el menú Run -> opción Run:



Si pulsamos el botón nos permitirá saber la hora:



Al pulsar en Set se actualiza el TextView.




El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 17.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina - Toledo - Spain).

16.4.12

Aprender Windows Phone 7 (parte 55): Actualizando XNArkanoid

Tras descargaros la última versión de XNArkanoid del sitio web, aparecen varios errores.

Hay que hacer lo siguiente para que funcione:
- Quitar las librerías de XNA y volverlas a añadir con la versión actual (4.0).



- En el archivo de manifiesto hay que quitar el atributo PlaceHolderString ya que se dejó de usar en el Windows Phone Abril CTP refresh.



Con estos cambios, ya podréis compilar el proyecto y ejecutarlo.



Estamos viendo el tema de control de código fuente y cómo actualizar la última versión del código de XNArkanoid. Dadnos un poco de tiempo y traas enterarnos de cómo va, lo subiremos a la web en codeplex.


Tutorial desarrollado por Grupo Libre y Extremo. Talavera de la Reina (Toledo) Spain.

11.4.12

Ayuda de Google Play para desarrolladores

Nevagando por Internet he encontrado esta página en Google con la ayuda y tutoriales para iniciarse como desarrollador en Android Store (ahora Google Play).

http://support.google.com/googleplay/android-developer/?hl=es

Para los miembros del grupo que me preguntásteis cómo inscribiros en Google Play, os dejo el enlace directo a esa información:

Artículo "Cómo inscribirse en Google Play".

10.4.12

Tutorial Android parte 16: Pantalla información técnica en Android

En este tutorial vamos a aprender a hacer una pantalla con la información técnica de soporte de la aplicación. Esta pantalla la conoceréis como la típica pántalla About en la que los usuarios pueden encontrar la información técnica de la aplicación, la forma de contactar con el equipo de soporte y otros datos que se consideren oportunos.



La pantalla que vamos a crear es muy básica. Podéis utilizarla tal cual para vuestras aplicaciones o personalizarla como gustéis para mostrar más información o darle un diseño similar al resto de vuestra aplicación.

La información que debería contener una pantalla de información técnica de soporte es una pantalla (que normalmente cuelga de la página principal de la aplicación) sería:
- el nombre de la aplicación,
- la versión de la aplicación,
- la información para contactar con soporte de la aplicación (email, teléfono, lista de correo, twitter…)

De forma opcional, puede aparecer también:
- el sitio web de la aplicación,
- los nombres de los desarrolladores,
- nombre de la empresa desarrolladora,
- información de copyright.
- en algunas aplicaciones he visto poner en esta pantalla la funcionalidad de enviar comentarios/opiniones al equipo de desarrollo de la aplicación.
- etc.

Vamos a hacer una aplicación que tendrá una página principal con un botón About que navegará a la pantalla de información técnica de soporte.


Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloAboutPage
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, About Page!
Package name: com.example.helloaboutpage
Create Activity: HelloAboutPage

- Hacer click en Finish.

Abrimos el fichero res/layout/main.xml e insertamos el siguiente código:



Este código mostrará la pantalla principal de la aplicación, donde aparecerá el título de la aplicación Debajo aparecerían varios botones para cada una de las funcionalidades de la aplicación y un botón About para acceder a la información técnica de soporte.

A continuación, vamos a añadir una nueva actividad y vamos a hacer que cuando se pulse en el botón About, se redirija a esta segunda actividad (la página About).

Como tenéis todos los pasos sobre cómo hacer esto en otro de los artículos que pusimos en el blog:

http://libreyextremo.blogspot.com.es/2011/11/tutorial-android-parte-10-cambiando-de.html

Voy a mostrar el código directamente para que veáis como quedaría.

HelloAboutPage.java



VentanaAbout.java



About_layout.xml



Pues solo queda ver como ha quedado. Podéis ejecutar la aplicación en el menú Run -> opción Run:





Fácil, sencillo y divertido.

Podéis copiar y reutilizar el código para hacer más rápido vuestras aplicaciones.
También se puede mejorar permitiendo al usuario enviar un correo desde esta página, poniendo logotipo de la empresa, etc…


El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 16.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).

Aprender Windows Phone 7 (parte 54): Windows Phone Toolkit – HubTile

Vamos a ver otro de los controles que trae el Silverlight for Windows Phone Toolkit. Para recordar, este Toolkit en un paquete que contiene un montón de controles nuevos para utilizarlos en nuestras aplicaciones Windows Phone 7 que nos ahorran tener que desarrollarlos y probarlos nosotros. Y además son gratuítas.

En este tutorial vamos a aprender a manejar el control HubTile.



Este control te permite añadir tiles animadas dentro de tu aplicación (no en el Live Tile de tu aplicación) y utilizarlas para mostrar información.

Para los que no sepáis que es un Tile. Nos referimos a esos iconos que aparecen en la pantalla principal de Windows Phone 7.



El control HubTile te permite personalizar el tile cambiando la imagen que incorpora, el titulo, el mensaje y las notificaciones.

Si todavía no os habéis instalado este paquete tenéis este tutorial que hemos creado en este blog sobre cómo hacerlo paso a paso:

http://libreyextremo.blogspot.com/2011/11/aprender-windows-phone-7-parte-29-como.html


Creando la aplicación

Abrimos Visual Studio y creamos un nuevo proyecto, para ello hay que pulsar en el menú "File" -> opción "New Project".

En la nueva ventana he seleccionado las opciones "Visual C#" -> "Silverlight for Windows Phone" -> "Windows Phone Application". Los demás datos son:



Name = HubTileExample
Location = (la que queráis, yo lo puse en...) C:\A_warterrain_A\Ejemplos WP7\HubTileExample\
SolutionName = HubTileExample

A continuación se pide la versión de la aplicación. Seleccionamos Windows Phone 7.1 y damos a Ok.



Vamos a agregar la librería del Windows Phone Toolkit a nuestro proyecto. La librería se encuentra en el directorio bin dentro de la carpeta donde se descargó el paquete que será:

Para Sistemas Operativos de 64 bit:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

Para Sistemas Operativos de 32 bit:
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

En mi caso la dll se encontraba en la ruta:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\Bin\ Microsoft.Phone.Controls.Toolkit.dll

Para agregar esta librería, hay que pulsar con el botón derecho en el elemento "References" de nuestro proyecto en el Explorador de Soluciones y seleccionar la opción "Add reference".



Tras buscar en la ruta la librería y agregarla aparecerá entre las referencias del proyecto:



A continuación, cuando en una página de la aplicación queramos utilizar los controles del toolkit, primero habrá que agregar el espacio de nombres del toolkit. Para ello en el archivo xaml de la página deberá agregarse la etiqueta xmlns:toolkit a la etiqueta phone:


Vamos a agregar una imagen para mostrarla en el tile. El nombre de la imagen será "ApplicationTileNew.png". Para ello pulsamos con el botón derecho en el proyecto y seleccionamos "Add" -> "Existing Item...":



Después hay que ir a las propiedades de la imagen agregada y poner su propiedad Build Action el valor "Content".

Para insertar el control HubTile, primero vamos a añadir en el código XAML nuestro control HubTile:



Veamos lo que hace el código XAML:
- Source: indica la imagen que aparecerá en el control HubTile.
- Title: es el título que aparecerá en el control.
- Message: es un mensaje adicional.
- Background: color de fondo del control Hub.

Si lanzamos la aplicación seleccionando "Debug" -> "Start Debugging" veremos lo siguiente:



También aparece el título pasado un momento:



Y un poco después aparecerá tanto el título como el mensaje:



Como véis es muy fácil de usar y puede mejorar mucho la experiencia de usuario de vuestra aplicación.


Modificando el control HubTile

Ya hemos visto el modo básico de utilizar un Control HubTile. Ahora vamos a ver cómo modificarlo.

Lo que quiero hacer es añadir un botón y que al pulsarlo, cambie el control Hub mostrando otro titulo, otro mensaje, otra imagen y teniendo otro color de fondo.

Muy sencillo.

He añadido un botón que hará el cambio. Cuando se pulse el botón se ejecutará un método buttonChangeHubTile_Click que modificará el título, el mensaje, el background y la imagen. Para ello ejecutaremos el código:

this.hubTile.Message = "Nuevos correos";
this.hubTile.Title = "Mi bandeja";
this.hubTile.Background = new SolidColorBrush(Colors.Blue);
this.hubTile.Source = new BitmapImage(new Uri("ApplicationIconChange.png", UriKind.RelativeOrAbsolute));

La imagen ApplicationIconChange.png que agregaremos (de igual forma que hicimos antes) es la siguiente:



Lanzamos la aplicación seleccionado "Debug" -> "Start Debugging".

Cuando pulsamos en el botón, se cambia el HubTile:





Muy sencillo.

Os dejo de ejercicio que metáis un evento Tap en el control HubTile. Y que cuando el usuario pulse en el HubTile, se abra una ventana con más información.


Os dejo el código fuente de estos este ejemplo:

Código fuente tutorial 54 aprender Windows Phone.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).