WorkShop lab1 para windows

por | octubre 21, 2017

En este tutorial, creará una aplicación que convierte un número de teléfono alfanumérico (escrito por el usuario) en un número de teléfono numérico y muestra ese número al usuario. La aplicación final tiene este aspecto:

Captura de pantalla de la aplicación una vez completada

Requisitos

Para seguir este tutorial, necesitará lo siguiente:

  • Windows 7 o posterior.
  • Visual Studio 2015 Professional o posterior.

En este tutorial se presupone que está instalada la última versión de Xamarin.Android y que se está ejecutando en la plataforma que ha seleccionado. Para obtener una guía de instalación de Xamarin.Android, vea las guías Instalación de Xamarin.Android. Antes de empezar, descargue y descomprima el conjunto Iconos de aplicación y pantallas de inicio de Xamarin.

Configuración de los emuladores

Si está usando el emulador Android SDK de Google, le recomendamos que configure el emulador para usar la aceleración de hardware. Las instrucciones para configurar la aceleración de hardware están disponibles en Aceleración de hardware.

Si está usando el emulador de Android de Visual Studio, Hyper-V debe estar habilitado en su equipo. Para obtener más información sobre la configuración del emulador de Android de Visual Studio, vea Requisitos de sistema del emulador de Visual Studio para Android.

Tutorial

  1. Inicie Visual Studio. Para crear un proyecto, haga clic en Archivo > Nuevo > Proyecto.
  2. En el cuadro de diálogo Nuevo proyecto, haga clic en la plantilla Aplicación vacía (Android). Asigne al nuevo proyecto el nombre de Phoneword. Haga clic en Aceptar para crear el nuevo proyecto:

    El nuevo proyecto es Phoneword

  3. Después de que el nuevo proyecto se haya creado, expanda la carpeta Recursos y, después, la carpeta Diseño en el Explorador de soluciones. Haga doble clic en Main.axml para abrirlo en Android Designer. Este es el archivo de diseño para la pantalla de la aplicación:

    Abrir Main.axml

  4. En el Cuadro de herramientas (el área de la izquierda), escriba text en el campo de búsqueda y arrastre un widget de Texto (grande) a la superficie de diseño (el área del centro):

    Agregar un widget de texto grande

  5. Con el control de Texto (grande) seleccionado en la superficie de diseño, use el panel Propiedades para cambiar la propiedad text del widget de Texto (grande) a Enter a Phoneword: como se muestra aquí:

    Establecer las propiedades de texto grande

  6. Arrastre un widget de Texto sin formato del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto (grande):

    Agregar un widget de texto sin formato

  7. Con el widget de Texto sin formato seleccionado en la superficie de diseño, use el panel Propiedades para cambiar la propiedad id del widget de Texto sin formato a @+id/PhoneNumberText y cambiar la propiedad text a 1-855-XAMARIN:

    Establecer las propiedades de texto sin formato

  8. Arrastre un Botón del Cuadro de herramientas a la superficie de diseño y colóquelo debajo del widget de Texto sin formato:

    Arrastrar el botón Traducir al diseño

  9. Con el botón seleccionado en la superficie de diseño, use el panel Propiedades para cambiar la propiedad id del botón a @+id/TranslateButton y cambiar la propiedad text a Translate:

    Establecer las propiedades del botón Traducir

  10. Arrastre la vista de texto desde Cuadro de herramientas hasta la superficie de diseño y colóquela debajo del widget Botón. Establezca la propiedad id de la vista de texto en @+id/TranslatedPhoneWord y cambie el text por una cadena vacía:

    Establecer las propiedades en la vista de texto.

  11. Guarde su trabajo presionando CTRL+S.
  12. El siguiente paso consiste en agregar código para convertir números de teléfono de formato alfanumérico a numérico. Agregue un nuevo archivo al proyecto haciendo clic con el botón derecho en el proyecto Phoneword en el panel del Explorador de soluciones y seleccionando Agregar > Nuevo elemento…, como se muestra a continuación:

    Agregar nuevo elemento

  13. En el cuadro de diálogo Agregar nuevo elemento, seleccione Visual C# > Código y asigne al nuevo archivo de código el nombre PhoneTranslator.cs:

    Agregar PhoneTranslator.cs

  14. Esto crea una nueva clase de C# vacía. Inserte el código siguiente en este archivo:
    using System.Text;
    using System;
    namespace Core
    {
        public static class PhonewordTranslator
        {
            public static string ToNumber(string raw)
            {
                if (string.IsNullOrWhiteSpace(raw))
                    return "";
                else
                    raw = raw.ToUpperInvariant();
    
                var newNumber = new StringBuilder();
                foreach (var c in raw)
                {
                    if (" -0123456789".Contains(c))
                    {
                        newNumber.Append(c);
                    }
                    else 
                    {
                        var result = TranslateToNumber(c);
                        if (result != null)
                            newNumber.Append(result);
                    }
                    // otherwise we've skipped a non-numeric char
                }
                return newNumber.ToString();
            }
            static bool Contains (this string keyString, char c)
            {
                return keyString.IndexOf(c) >= 0;
            }
            static int? TranslateToNumber(char c)
            {
                if ("ABC".Contains(c))
                    return 2;
                else if ("DEF".Contains(c))
                    return 3;
                else if ("GHI".Contains(c))
                    return 4;
                else if ("JKL".Contains(c))
                    return 5;
                else if ("MNO".Contains(c))
                    return 6;
                else if ("PQRS".Contains(c))
                    return 7;
                else if ("TUV".Contains(c))
                    return 8;
                else if ("WXYZ".Contains(c))
                    return 9;
                return null;
            }
        }
    }

    Guarde los cambios en el archivo PhoneTranslator.cs haciendo clic en Archivo > Guardar (o presionando CTRL+S) y, después, cierre el archivo.

  15. El siguiente paso consiste en agregar código para conectar la interfaz de usuario al insertar código auxiliar en la clase MainActivity. Empiece con la conexión del botón Traducir. En la clase MainActivity, busque el método OnCreate. El siguiente paso consiste en agregar el código de botón dentro de OnCreate, debajo de las llamadas base.OnCreate(bundle) y SetContentView (Resource.Layout.Main). En primer lugar, modifique el código de plantilla para que el método OnCreate sea similar al siguiente:
    using System;
    using Android.App;
    using Android.Content;
    using Android.Widget;
    using Android.OS;
    
    namespace Phoneword
    {
        [Activity (Label = "Phone Word", MainLauncher = true)]
        public class MainActivity : Activity
        {
            protected override void OnCreate (Bundle bundle)
            {
                base.OnCreate (bundle);
    
                // Set our view from the "main" layout resource
                SetContentView (Resource.Layout.Main);
    
                // New code will go here
            }
        }
    }
  16. Obtenga una referencia de los controles que se han creado en el archivo de diseño con Android Designer. Agregue el código siguiente dentro del método OnCreate, después de la llamada a SetContentView:
    // Get our UI controls from the loaded layout
    EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
    TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneWord);
    Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);
  17. Agregue el código que responda a las pulsaciones del usuario del botón Traducir. Agregue el siguiente código al método OnCreate (después de las líneas que se han agregado en el paso anterior):
    // Add code to translate number
    string translatedNumber = string.Empty;
    
    translateButton.Click += (sender, e) =>
    {
        // Translate user’s alphanumeric phone number to numeric
        translatedNumber = PhonewordTranslator.ToNumber(phoneNumberText.Text);
        if (string.IsNullOrWhiteSpace(translatedNumber))
        {
            translatedPhoneWord.Text = string.Empty;
        }
        else
        {
            translatedPhoneWord.Text = translatedNumber;
        }
    };
  18. Guarde su trabajo seleccionando Archivo > Guardar todo (o presionando CTRL-MAYÚS-S) y compile la aplicación seleccionando Compilar > Recompilar solución (o presionando CTRL-MAYÚS-B).

    Si hay errores, repase los pasos anteriores y corrija cualquier error hasta que la aplicación se compile correctamente. Si obtiene un error de compilación como El recurso no existe en el contexto actual, compruebe que el nombre del espacio de nombres en MainActivity.cs coincida con el nombre del proyecto (Phoneword) y, después, recompile completamente la solución. Si sigue obteniendo errores de compilación, compruebe que ha instalado las últimas actualizaciones de Xamarin.Android.

  19. Ahora debe tener una aplicación que funciona –es el momento de agregar los toques finales. En MainActivity.cs, edite el Label para el MainActivityLabel es lo que Android muestra en la parte superior de la pantalla para que los usuarios conozcan el lugar en el que se encuentran en la aplicación. En la parte superior de la clase MainActivity, cambie Label por Phone Word como se muestra aquí:
    namespace Phoneword
    {
        [Activity (Label = "Phone Word", MainLauncher = true)]
        public class MainActivity : Activity
        {
            ...
        }
    }
  20. Ahora es el momento de establecer el icono de la aplicación. De forma predeterminada, Visual Studio proporcionará un icono predeterminado para el proyecto. Vamos a eliminar estos archivos de la solución y reemplazarlos por un icono diferente. Expanda la carpeta Recursos en Panel de solución. Observe que hay cinco carpetas que tienen el prefijo mipmap- y que cada una de estas carpetas contiene un archivo Icon.png:

    carpetas mipmap- y archivos Icon.png

    Es necesario eliminar del proyecto todos estos archivos de icono. Haga clic con el botón derecho en cada uno de los archivos Icon.png y haga clic en Eliminar en el menú contextual:

    Eliminar archivo Icon.png predeterminado

    Haga clic en el botón Eliminar en el cuadro de diálogo.

  21. Luego, descargue y descomprima el conjunto de iconos de aplicación de Xamarin. Este archivo ZIP contiene los iconos de la aplicación. Todos los iconos son idénticos visualmente, pero se representan correctamente con resoluciones diferentes en distintos dispositivos con distintas densidades de pantalla. El conjunto de archivos debe copiarse en el proyecto Xamarin.Android. En Visual Studio, en el Explorador de soluciones, haga clic con el botón derecho en la carpeta mipmap-hdpi y seleccione Agregar > Elementos existentes:

    Agregar archivos

  22. En el cuadro de diálogo de selección, vaya al directorio descomprimido de los iconos de aplicación de Xamarin y abra la carpeta mipmap-hdpi. Seleccione Icon.png y haga clic en Agregar.
  23. Repita estos pasos para cada una de las carpetas mipmap- hasta que el contenido de las carpetas de iconos de aplicación de Xamarin mipmap- se copie en las carpetas mipmap- equivalentes en el proyecto Phoneword.
  24. Después de copiar todos los iconos en el proyecto de Xamarin.Android, abra el cuadro de diálogo Opciones del proyecto haciendo clic con el botón derecho en el proyecto en Panel de solución. Haga clic en Compilar > Aplicación de Android y seleccione @mipmap/icon en el cuadro combinado Icono de aplicación:

    Establecer el icono del proyecto

  25. Por último, pruebe la aplicación ejecutándola en un dispositivo o emulador Android y traduciendo un Phoneword:

    Captura de pantalla de la aplicación una vez completada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *