Desarrollo de una app hibrida movil con Ionic 2 y Visual Studio


Ionic es un popular framework front-end JavaScript para desarrollar aplicaciones móviles multiplataforma usando Apache Cordova . El Marco Iónico da a las aplicaciones Cordova una apariencia nativa y ajusta automáticamente esa apariencia a través de las plataformas. Puede utilizar Visual Studio 2017 y Visual Studio Tools para Apache Cordova (TACO) para crear y depurar fácilmente aplicaciones multiplataforma Ionic.

En este artículo, vermos como configurar un entorno de desarrollo de Visual Studio 2017 para Ionic 2 y crear una versión Ionic 2 de la aplicación Weather que se muestra a continuación:

Aplicación de Tiempo Acabado

Requisitos

Para administrar, codificar, ejecutar y depurar aplicaciones Ionic 2 utilizando Visual Studio, debe instalar lo siguiente:

  • Visual Studio 2017
  • Herramientas de Visual Studio para Apache Cordova
  • Plantillas de Visual Studio Ionic 2
  • Dependencias de plantillas Ionic 2 (descritas a continuación)

Instalación de las plantillas de Ionic 2

  1. Si aún no lo ha hecho, instale Visual Studio 2017 y TACO.Bajo las portadas, las aplicaciones de Ionic son aplicaciones de Apache Cordova, necesitará un entorno de desarrollo de Cordova funcional antes de poder desarrollar aplicaciones usando Ionic.Compruebe que puede crear y ejecutar la aplicación predeterminada Cordova Blank . En Visual Studio, abra el menú Archivo , seleccione Nuevo y, a continuación, Proyecto . En el cuadro de diálogo del nuevo proyecto, expanda la sección de plantillas de JavaScript , seleccione Aplicaciones móviles y , a continuación, elija la plantilla de aplicación en blanco (Apache Cordova) . Dé al nuevo proyecto un Nombre y Ubicación y luego haga clic en el botón Aceptar . Presione F5 para crear y ejecutar el nuevo proyecto utilizando la nueva opción Simular en explorador . El navegador Chrome debe abrir y mostrar el contenido de la aplicación.
  2. Instale la plantilla de Ionic en Visual Studio seleccionando el menú Herramientas , luego Extensiones y actualizaciones …. En el cuadro de diálogo Extensiones y actualizaciones, seleccione Online . En el cuadro de búsqueda situado en la esquina superior derecha del cuadro de diálogo, escriba Ionic 2 . Seleccione la opción Ionic 2 Templates en la lista. Haga clic en el botón Descargar para iniciar la instalación.              De Como Obtener las Plantillas jónico                                 Los archivos de plantilla se descargarán, a continuación, Visual Studio iniciará automáticamente el proceso de instalación. Cuando se le solicite, haga clic en el botón Instalar para comenzar la instalación.                     Instalación de las Plantillas de Ionic
Nota:Las plantillas Ionic no pueden aparecer en Visual Studio hasta que se reinicie. Cierre y vuelva a abrir Visual Studio antes de continuar.

Creación de un proyecto Ionic en Visual Studio

  1. Crear un nuevo proyecto Ionic. Abra el menú Archivo , seleccione Nuevo y luego Proyecto . En el cuadro de diálogo del nuevo proyecto, expanda la sección de plantillas de TypeScript y, a continuación, seleccione Apache Cordova Apps . Ionic ofrece tres estilos de aplicación por defecto (otras plantillas están disponibles en línea): Blank , Sidemenu y Tabs ; Esto es un proyecto simple, así que selecciona la plantilla en blanco .Asigne al nuevo proyecto un nombre y una ubicación y, a continuación, haga clic en el botón Aceptar . Esta aplicación se convertirá más tarde en nuestro proyecto de aplicación meteorológica, por lo que probablemente debería llamarla aplicación meteorológica o aplicación meteorológica Ionic 2 para guardar el trabajo más tarde.Cuadro de Diálogo Nuevo Proyecto
  2. Compruebe el archivo Readme del nuevo proyecto de Ionic para cualquier herramienta adicional que se debe instalar para utilizar la plantilla.Nodo de dependencias                                                           En el momento de escribir este post, solo necesitará instalar la extensión NPM Task Runner .Los requisitos pueden cambiar a medida que se realizan actualizaciones a las plantillas. Para instalar las extensiones necesarias, abra el menú Herramientasy seleccione Extensiones y actualizaciones . Utilice la búsqueda para localizar e instalar las extensiones requeridas.
  3. Ionic es un marco pesado, que requiere una gran cantidad de herramientas y bibliotecas para operar. Una vez que Visual Studio crea el nuevo proyecto, inicia un proceso para descargar e instalar los componentes necesarios mediante Node Package Manager (npm). Espere unos minutos mientras se instalan los paquetes ncm de Ionic.
    Nota :Este proceso tomará varios minutos dependiendo del sistema y las velocidades de conexión a Internet.

    Para comprobar el progreso, abra el Explorador de soluciones y busque el nodo Dependencias . Debería ver Restaurar … si no lo hace, expanda el nodo Dependencias en el Administrador de soluciones y, a continuación, haga clic con el botón derecho en la carpeta npm y seleccione Restaurar paquetes .

    Nodo de dependencias del Explorador de soluciones

    Puede supervisar el proceso de instalación del paquete a través de la ventana de resultados de Visual Studio. Abra el menú Ver , luego seleccione Salida o utilice el método abreviado de teclado Ctrl-W + O :

    Corredor de tareas

  4. En este punto, usted tiene un proyecto de aplicación Ionic completo listo para funcionar. Para probar y depurar la aplicación en Visual Studio, seleccione una plataforma de destino en la Barra de herramientas estándar, seleccione un dispositivo de destino y pres F5 para ejecutar la aplicación en el destino seleccionado. El desarrollo de aplicaciones iOS requiere alguna configuración adicional                                                                                Aplicación JONICA Que se ejecuta en Android

Creación de la aplicación de tiempo

Ahora, vamos a hacer algo con esta aplicación que creaste. Usted tomará el proyecto de aplicación en blanco y lo convertirá en la aplicación de tiempo mostrada anteriormente. En las siguientes secciones, comenzará agregando una página de Condiciones actuales , luego conectará en un cuadro de búsqueda y, finalmente, agregará un área para mostrar los datos de pronóstico . Empecemos.

La aplicación utiliza el servicio gratuito OpenWeatherMap para recuperar las condiciones meteorológicas de una ubicación. Antes de poder utilizar el servicio, debe configurar una cuenta y solicitar una clave de API para su API Condiciones actuales.Apunte su navegador a OpenWeatherMap y configure una cuenta. Una vez que tenga un inicio de sesión válido, vaya a la página API del servicio y suscríbase al servicio de datos Tiempo actual y, a continuación, genere una clave de API.

Nota :Anote la clave de la API como lo necesitará más adelante en el código TypeScript de la aplicación.

Configuración del proyecto de aplicación

  1. Comience configurando algunas opciones de configuración para la aplicación.En Visual Studio Solution Explorer, haga doble clic en el archivo config.xmldel proyecto. Visual Studio abrirá un editor personalizado como el que se muestra en la siguiente figura:Modificación del archivo Config.xml de la Aplicación                          Como mínimo, establezca los valores de nombre de pantalla y nombre de paquete del proyecto; Puede que también desee actualizar los campos AutorDescripción .
  2. De forma predeterminada, la aplicación muestra datos meteorológicos basados ​​en la ubicación actual del dispositivo, por lo que necesitaremos utilizar el complemento Cordova Geolocation para añadir esta capacidad a nuestra aplicación. Puede utilizar las capacidades de geolocalización incorporadas del navegador, pero Cordova y Ionic proporcionan capacidades especiales que hacen que el uso de la geolocalización en una aplicación de Ionic sea un poco más fácil.Cambie a la pestaña Plugins del editor y seleccione el complemento Geolocation en la lista. Haga clic en el botón Agregar para agregar el complemento al proyecto.Añadiendo el plugin de Geolocalización de Córdova                 Presione la tecla Ctrl + S del teclado para guardar sus cambios, luego cierre el archivo del editor.
  3. Abra el archivo src\index.html del proyecto y cambie el título de la aplicación. Esto no es un paso obligatorio, pero si más tarde prueba la aplicación en el navegador, el título de la aplicación será correcto.
    <title>Weather App Ionic</title>

Generación de un proveedor de tiempo

Ahora, vamos a empezar a trabajar en el código de la aplicación. Por convención, las aplicaciones iónicas segregan fuentes de datos de otros tipos de código de aplicación utilizando un tipo de componente Proveedores especial. Dado que los datos meteorológicos provienen de una fuente externa y no queremos que el código de la aplicación llame directamente al servicio, haremos un proveedor de tiempo y pondremos allí todo el código de acceso a la aplicación.

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta src del proyecto y seleccione Agregar -> Nueva carpeta . Asigne un nombre a los providers carpetas y presione la tecla Intro . Esto crea una carpeta para todos los proveedores que usará la aplicación (solo tendremos una, pero muchas aplicaciones de Ionic tendrán varias).
  2. Haga clic con el botón derecho en la nueva carpeta de providers y seleccione Agregar -> Nuevo elemento . En el cuadro de diálogo que aparece, seleccione Ionic 2 Provider y, en el campo Name , escriba Weather.De Como para contactar el Proveedor de Servicios meteorológicos                                   La CLI de Ionic creará el proveedor en src\providers\Weather.ts
  3. Ahora que usted tiene el proveedor de Weather , usted tiene que decir Ionic sobre él. Abra el archivo src\app\app.module.ts del proyecto y agregue la línea siguiente a la sección de importaciones en la parte superior del archivo:
    import { WeatherProvider } from '../providers/weather';
  4. A continuación, agregue una referencia al proveedor de clima en la matriz de providers del archivo:
    providers: [WeatherProvider, {provide: ErrorHandler, useClass: IonicErrorHandler}]

    Guarde los cambios antes de continuar.

Codificación del proveedor de tiempo

En esta sección, agregaremos código al Proveedor de tiempo para conectarse con la API meteorológica externa y entregar datos a la aplicación.

  1. Abra el archivo src\providers\Weather.ts recién creado y modifique la importación @angular/http en la parte superior del archivo para que se vea como sigue:
    import { Http, Response } from [email protected]/http';

    El componente HTTP se carga por defecto en cualquier proveedor, lo que está haciendo aquí es añadir el componente de respuesta que usaremos en el código del proveedor más adelante.

  2. Aún en la parte superior del archivo, agregue una importación que cargue el módulo toPromise :
    import 'rxjs/add/operator/toPromise';

    Cuando haya terminado, la sección de importaciones en la parte superior del archivo se verá así:

    import { Injectable } from [email protected]/core'; import { Http, Response } from [email protected]/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise';
  3. En la parte superior de la clase Weather , agregue las siguientes declaraciones de variables:
    private weatherEndpoint = 'http://api.openweathermap.org/data/2.5/'; private weatherKey = '';

    weatherKey variable weatherKey con la clave API que obtuvo anteriormente del servicio meteorológico.

  4. Después del constructor de la clase de weather , agregue el código siguiente:
    getCurrent(loc: any): Promise<any> { let url: string = this.makeDataURL(loc, 'weather'); return this.http.get(url) .toPromise() .then(this.extractData) .catch(this.handleError); } private makeDataURL(loc: any, command: string): string { //Build a weather service URL using the command string and //location data that we have. let uri = this.weatherEndpoint + command; //Do we have a location? if (loc.long) { //then use the 'grographical coordinates' version of the API uri += '?lat=' + loc.lat + '&lon=' + loc.long; } else { //Otherwise, use the zip code uri += '?zip=' + loc.zip; } //Configure output for imperial (English) measurements uri += '&units=imperial'; //Use the following instead for metric //uri += '&units=metric'; //Append the API Key to the end of the URI uri += '&APPID=' + this.weatherKey; //Return the value return uri; } //'Borrowed' from //https://angular.io/docs/ts/latest/guide/server-communication.html private extractData(res: Response) { //Convert the response to JSON format let body = res.json(); //Return the data (or nothing) return body || {}; } //'Borrowed' from //https://angular.io/docs/ts/latest/guide/server-communication.html private handleError(res: Response | any) { console.error('Entering handleError'); console.dir(res); return Promise.reject(res.message || res); }

    Al iniciar, la aplicación pasa la ubicación actual (longitud y latitud) a la función getCurrent . Al buscar una ubicación utilizando un código postal de Estados Unidos, se pasa el código postal en su lugar. getCurrent llama a la API apropiada para obtener los datos meteorológicos actuales, pero usa makeDataURL para dar formato a la URL de la solicitud correctamente dependiendo de si tiene una ubicación o un valor de código postal.

    La función extractData formatea los datos devueltos por la llamada API como JSON. Este código podría ser fácilmente incluido directamente en el método getCurrent , pero como verás más adelante, este código se utiliza más de una vez por la aplicación, por lo que tenía sentido para mover una función separada.

Crear la página Condiciones actuales

  1. Abra el archivo src\pages\home\home.html y reemplace el contenido del archivo por lo siguiente:
    <ion-header> <ion-toolbar> <ion-buttons right> <button ion-button (click)="refreshPage()"> <ion-icon name="refresh"></ion-icon> </button> </ion-buttons> <ion-title> Weather App (Ionic 2) </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-list no-lines> <!--show this if there are no items in the list--> <ion-item [hidden]="c_items.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <!--Display the current conditions data we have --> <ion-item *ngFor="let c_item of c_items"> <p><strong>{{c_item.name}}:</strong> {{c_item.value}}</p> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Visual Studio Tools for Apache Cordova</ion-title> </ion-toolbar> </ion-footer>

    Lo que se ve en el archivo es referencias a componentes iónicos, así como algunos códigos Angulares también. Este marcado es un subconjunto del HTML de la página, el resto se encuentra en los archivos src\index.html y src\app\app.html . En la puesta en marcha, el marco iónico reemplaza el contenido de la etiqueta <ion-app></ion-app> del archivo src\index.htmlarchivo src\app\app.html <ion-nav [root]="rootPage"></ion-nav>continuación, pasa contenido HTML dentro y fuera de esa etiqueta como el usuario utiliza la aplicación. En este caso, cuando la aplicación se inicia, el contenido de la página src\pages\home\home.html se analiza y procesa.

    El encabezado contiene una barra de herramientas que muestra el título de la aplicación y un botón de actualización que el usuario puede tocar para actualizar los datos meteorológicos que se muestran en la página.

    La etiqueta de ion-content define la parte del contenido que comprende el contenido dinámico de la página. En este ejemplo, muestra una <ion-list>de elementos; Básicamente un listview. En este caso, procesa el contenido de la matriz c_items como una lista usando una directiva Angular: *ngFor="let c_item of c_items" que se *ngFor="let c_item of c_items"través de cada elemento de la matriz. A medida que el código loops, asigna cada elemento de la matriz a c_item , entonces el código de plantilla que sigue muestra las propiedades de name y value del objeto c_item . Verá cómo la matriz c_items se rellenará pronto.

  2. Abra el archivo src\pages\home\home.ts del proyecto. En la parte superior del archivo, añada las importaciones para el complemento Geolocalización y el proveedor de clima:
    import { Geolocation, Keyboard } from 'ionic-native'; import { WeatherProvider } from '../../providers/weather';
  3. También en la parte superior del archivo, modifique la importación ionic-angular por lo que se ve así:
    import { AlertController, LoadingController, NavController, Platform } from 'ionic-angular';

    Esto carga algunos componentes adicionales usados ​​por el código de la página:

    • AlertController gestiona la visualización de diálogos de alerta.
    • LoadingController gestiona la visualización de una hiladora de carga.
    • NavController gestiona la navegación entre las páginas.
    • Platform proporciona utilidades relacionadas con la plataforma.
  4. Dentro de la clase HomePage , agregue las siguientes declaraciones de variables:
    degreeStr: string = ' degrees (F)'; //an empty object (for now) to store our location data passed to the API currentLoc: any = {}; //current weather items array c_items: Array<any> = [];
  5. Agregue los siguientes parámetros al constructor de clase HomePage :
    public alertController: AlertController, public loadingCtrl: LoadingController, public platform: Platform, public weather: WeatherProvider,

    Cuando haya terminado, debería verse así:

    constructor( public alertController: AlertController, public loadingCtrl: LoadingController, public nav: NavController, public platform: Platform, public weather: WeatherProvider ) { }
  6. Reemplace la función openLink en el cuerpo de la clase HomePage con lo siguiente (la función openLink es parte de la plantilla en blanco iónica y no es utilizada por la aplicación Weather):
    ionViewDidLoad() { //Once the main view loads //and after the platform is ready... this.platform.ready().then(() => { //Setup a resume event listener document.addEventListener('resume', () => { //Get the local weather when the app resumes this.getLocalWeather(); }); //Populate the form with the current location data this.getLocalWeather(); }); } refreshPage() { this.showCurrent(); } getLocalWeather() { let locOptions = { 'maximumAge': 3000, 'timeout': 5000, 'enableHighAccuracy': true }; Geolocation.getCurrentPosition(locOptions).then(pos => { //Store our location object for later use this.currentLoc = { 'lat': pos.coords.latitude, 'long': pos.coords.longitude }; //and ask for the weather for the current location this.showCurrent(); }).catch(e => { console.error('Unable to determine current location'); if (e) { console.log('%s: %s', e.code, e.message); console.dir(e); } }) } showCurrent() { //clear out the previous array contents this.c_items = []; //Create the loading indicator let loader = this.loadingCtrl.create({ content: "Retrieving current conditions..." }); //Show the loading indicator loader.present(); this.weather.getCurrent(this.currentLoc).then( data => { //Hide the loading indicator loader.dismiss(); //Now, populate the array with data from the weather service if (data) { //We have data, so lets do something with it this.c_items = this.formatWeatherData(data); } else { //This really should never happen console.error('Error retrieving weather data: Data object is empty'); } }, error => { //Hide the loading indicator loader.dismiss(); console.error('Error retrieving weather data'); console.dir(error); this.showAlert(error); } ); } private formatWeatherData(data): any { //create a blank array to hold our results let tmpArray = []; //Add the weather data values to the array if (data.name) { //Location name will only be available for current conditions tmpArray.push({ 'name': 'Location', 'value': data.name }); } tmpArray.push({ 'name': 'Temperature', 'value': data.main.temp + this.degreeStr }); tmpArray.push({ 'name': 'Low', 'value': data.main.temp_min + this.degreeStr }); tmpArray.push({ 'name': 'High', 'value': data.main.temp_max + this.degreeStr }); tmpArray.push({ 'name': 'Humidity', 'value': data.main.humidity + '%' }); tmpArray.push({ 'name': 'Pressure', 'value': data.main.pressure + ' hPa' }); tmpArray.push({ 'name': 'Wind', 'value': data.wind.speed + ' mph' }); //Do we have visibility data? if (data.visibility) { tmpArray.push({ 'name': 'Visibility', 'value': data.visibility + ' meters' }); } //do we have sunrise/sunset data? if (data.sys.sunrise) { var sunriseDate = new Date(data.sys.sunrise * 1000); tmpArray.push({ 'name': 'Sunrise', 'value': sunriseDate.toLocaleTimeString() }); } if (data.sys.sunset) { var sunsetDate = new Date(data.sys.sunset * 1000); tmpArray.push({ 'name': 'Sunset', 'value': sunsetDate.toLocaleTimeString() }); } //Do we have a coordinates object? only if we passed it in on startup if (data.coord) { //Then grab long and lat tmpArray.push({ 'name': 'Latitude', 'value': data.coord.lat }); tmpArray.push({ 'name': 'Longitude', 'value': data.coord.lon }); } //Return the new array to the calling function return tmpArray; } showAlert(message: string) { let alert = this.alertController.create({ title: 'Error', subTitle: 'Source: Weather Service', message: message, buttons: [{ text: 'Sorry' }] }); alert.present(); }

    Hay un montón de código allí; Tomar unos minutos y estudiarlo. Esto es lo que hace:

    • ionViewDidLoad : ionViewDidLoad un evento que se ionViewDidLoad cuando la página finaliza la carga. En este caso, la función llama a la función getLocalWeather para iniciar el proceso de obtención de datos meteorológicos para la ubicación actual del dispositivo. Utiliza las capacidades del componente Platform para asegurarse de que no hace nada hasta que es seguro que el contenedor de aplicación nativo y el marco Ionic han finalizado la inicialización.
    • refreshPage : se ejecuta cuando el usuario de la aplicación hace clic en el botón Actualizar de la barra de herramientas. Aquí, actualiza los datos meteorológicos actuales en la página. Esta función obtiene más responsabilidades más adelante.
    • getLocalWeather – Determina la ubicación actual del dispositivo (usando el complemento Cordova Geolocation), luego llama a showCurrent para obtener los datos meteorológicos actuales.
    • showCurrent – Muestra el indicador de carga y luego llama al proveedor de tiempo para obtener datos meteorológicos para la ubicación especificada (ya sea una geolocalización o, posteriormente, un código postal).
    • formatWeatherData – Los resultados que obtiene la aplicación de la API meteorológica dependen de si la aplicación solicita las condiciones actuales o la previsión. No estamos pidiendo datos de pronóstico (todavía) pero, pero más tarde. Esta función construye un objeto de datos meteorológicos a partir de los resultados y tiene un código especial que construye el objeto apropiado en función de si se trata de condiciones actuales o de un pronóstico.
    • showAlert : muestra un cuadro de diálogo de error si se rompe algo.

Ejecute la aplicación en el navegador, un emulador, un simulador o un dispositivo físico conectado al ordenador. Si ejecuta la aplicación en el navegador, utilizando las capacidades de Cordova Simulate de Visual Studio 2017, puede ajustar las coordenadas del dispositivo simulado mediante el panel Geolocation;  Cuando se cargue la aplicación, se le solicitará que autorice el acceso de la aplicación a la ubicación actual del dispositivo, como se muestra a continuación:

Autorización de Geolocalización de Android

Cuando permite el acceso (no toque negar , ya que no podrá hacer mucho con la aplicación si lo hace), debería ver los datos meteorológicos actuales de la ubicación actual como se muestra en la siguiente figura:

Aplicación del tiempo: las Condiciones Actuales del tiempo

No es la aplicación completa de interfaz de usuario, pero al menos se pueden ver los resultados del tiempo. En la siguiente sección, agregamos el cuadro de búsqueda de código postal para que pueda obtener datos meteorológicos para una ubicación específica.

Nota :Si obtienes una pantalla en blanco cuando se inicia la aplicación, asegúrate de haber agregado el complemento Corolle Geolocation al proyecto.

Es útil disponer de datos meteorológicos para la ubicación actual, pero ¿qué pasa si viajas a algún lugar y quieres saber cómo será el tiempo cuando llegues? En esta sección, agregará un cuadro de búsqueda que los usuarios pueden utilizar para obtener datos meteorológicos para un código postal específico de los Estados Unidos.

Nota:El uso del código postal como criterio de búsqueda no funcionará fuera de los Estados Unidos; Si desea utilizar el nombre de la ciudad en su lugar, puede realizar pequeños ajustes a la llamada API del clima para cambiar la forma en que busca la API. Echa un vistazo a los documentos de la API para obtener más información.
  1. Abra el archivo src\pages\home\home.html del proyecto. Dentro del comienzo de la sección <ion-content> , justo antes de la etiqueta <ion-list> , añada la siguiente marca:
     <form (ngSubmit)="setZipCode()"> <ion-item> <ion-label>Type your zip code:</ion-label> <ion-input type="text" [(ngModel)]="searchInput" name="ZipCode"></ion-input> </ion-item> <button ion-button icon-left block> <ion-icon name="search"></ion-icon> Find Weather </button> </form>

    Esto agrega el campo de búsqueda en la parte superior de la página y dirige que la función setZipCode se ejecute cuando el usuario hace clic en el botón Buscar tiempo . La referencia a ngModel indica a Ionic (en realidad Angular) que asigna el valor en el campo de búsqueda a la variable searchInput la aplicación que verá en un segundo.

  2. Abra el archivo src\pages\home\home.ts del proyecto y agregue la siguiente declaración de variable a la parte superior de la clase HomePage (antes del constructor ):
    //Mapped to the search field searchInput: string = '';

    Esto define la variable que se rellenará automáticamente con cualquier cadena que el usuario agregue al campo de búsqueda.

  3. Finalmente, aún en el archivo src\pages\home\home.ts del proyecto, agregue la siguiente función a la clase HomePage :
    setZipCode() { //whenever the user enters a zip code, replace the current location //with the entered value, then show current weather for the selected //location. //Hide the keyboard if it's open, just in case Keyboard.close(); //Populate the currentLoc variable with the city name this.currentLoc = { 'zip': this.searchInput }; //Clear the Zip Code input field this.searchInput = ''; //get the weather for the specified city this.showCurrent(); }

    Esta función responde al usuario pulsando el botón Buscar tiempo y crea un objeto de ubicación y luego llama a la función showCurrent para recuperar los datos meteorológicos del código postal especificado. El código Keyboard.close() utiliza el complemento Ionic Keyboard para ocultar el teclado antes de iniciar la búsqueda. Si el código no lo hace, es posible que el teclado permanezca abierto, bloqueando parte de la página, a medida que la página se actualiza con los nuevos datos meteorológicos.

Cuando ejecute la aplicación, debería ver un campo de búsqueda en la parte superior de la página. Introduzca un código postal de los Estados Unidos y toque el botón para obtener datos meteorológicos para la ubicación especificada.

Aplicación del tiempo: las Condiciones Actuales del tiempo

Agregar una página de previsión meteorológica

La API de tiempo que la aplicación utiliza tiene una API para recuperar datos de pronóstico, así que permite mostrarlo también en la aplicación. Puede agregar otra página a la aplicación, a continuación, utilice un menú u otro método de navegación para cambiar entre vistas, pero el campo de búsqueda complica ese enfoque. En su lugar, utilizaremos un componente de segmento ionic  para dividir la página existente en dos partes: una para las condiciones actuales y otra para el pronóstico.

  1. Comience por actualizar el proveedor de clima para apoyar la obtención del pronóstico del servicio meteorológico. Abra el archivo src\providers\weather.ts del proyecto y agregue el código siguiente a la clase Weather .
    getForecast(loc: any): Promise<any> { let url: string = this.makeDataURL(loc, 'forecast'); return this.http.get(url) .toPromise() .then(this.extractData) .catch(this.handleError); }

    Para obtener el pronóstico, todo lo que el proveedor tiene que hacer es reemplazar el weather con la forecast en la URL de la API, de lo contrario el código es exactamente el mismo.

  2. A continuación, abra el archivo src\pages\home\home.html del proyecto.Eliminar la implementación actual <ion-list> :
    <ion-list no-lines> <!--show this if there are no items in the list--> <ion-item [hidden]="c_items.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <!--Display the current conditions data we have --> <ion-item *ngFor="let c_item of c_items"> <p><strong>{{c_item.name}}:</strong> {{c_item.value}}</p> </ion-item> </ion-list>

    Y reemplácelas por las siguientes:

    <ion-segment [(ngModel)]="displayMode"> <ion-segment-button value="current" (ionSelect)="showCurrent()"> Current </ion-segment-button> <ion-segment-button value="forecast" (ionSelect)="showForecast()"> Forecast </ion-segment-button> </ion-segment>

    0″>Weather data is not available

    {{c_item.name}}: {{c_item.value}}

    {{ f_items.length ? ‘Tap an item to view the forecast for the selected period.’: ‘Forecast data is not available at this time.’ }} {{item.period}}

     

    Esto agrega un segmento a la página usando el componente <ion-segment>y define dos segmentos: current y forecast . El atributo <div> con el [ngSwitch]="displayMode" intercambia en componentes separados <ion-list> basados ​​en el valor asignado a la variable displayMode la página.

  3. Ahora vamos a añadir el código TypeScript que hacen que todo esto funcione. Abra el archivo src\pages\home\home.ts del proyecto y agregue las siguientes declaraciones de variables a la parte superior de la clase HomePage.
    //This is used to set the Ionic Segment to the first segment currentMode: string = 'current'; // used to control which segment is displayed displayMode: string = this.currentMode; //holds forecast data, a separate row for each period f_items: Array<any> = []; //array of day strings used when displaying forecast data days: Array<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  4. Cuando la página se cargue, queremos que la aplicación muestre las condiciones actuales de forma predeterminada, por lo que agregue el siguiente código a la función onViewDidLoad :
    //Switch to the Current segment this.displayMode = this.currentMode

    Esto establece this.displayMode a current . Agregue el código al oyente de sucesos de resume , el código resultante debería tener este aspecto:

    document.addEventListener('resume', () => { //Get the local weather when the app resumes //Switch to the Current segment this.displayMode = this.currentMode //then update it with local weather conditions this.getLocalWeather(); });
  5. Ahora que la página muestra dos segmentos, la función refreshPagenecesita saber qué parte de la página debe actualizarse. Reemplace la función actual refreshPage con el código siguiente:
    refreshPage() { //Which page are we looking at now? if (this.displayMode === this.currentMode) { this.showCurrent(); } else { this.showForecast(); } }
  6. La función setZipCode carga por defecto a las condiciones actuales de carga cuando se introduce un código postal, por lo que debe cambiar a la pestaña Actual antes de obtener resultados. Agregue las siguientes líneas a la función antes de la llamada a this.showCurrent() :
    //Switch to the 'current' tab this.displayMode = this.currentMode;

    La función completa debería tener este aspecto:

    setZipCode() { //whenever the user enters a zip code, replace the current location //with the entered value, then show current weather for the selected //location. //Hide the keyboard if it's open, just in case Keyboard.close(); //Populate the currentLoc variable with the city name this.currentLoc = { 'zip': this.searchInput }; //Clear the Zip Code input field this.searchInput = ''; //Switch to the 'current' tab this.displayMode = this.currentMode; //get the weather for the specified city this.showCurrent(); }
  7. Por último, agregue la función showForecast a la clase HomePage :
    showForecast() { //clear out the previous array contents this.f_items = []; //Create the loading indicator let loader = this.loadingCtrl.create({ content: "Retrieving forecast..." }); //Show the loading indicator loader.present(); this.weather.getForecast(this.currentLoc).then( data => { //Hide the loading indicator loader.dismiss(); //Now, populate the array with data from the weather service //Do we have some data? if (data) { //Then lets build the results array we need //Process each forecast period in the array for (let period of data.list) { //Create a 'record' consisting of a time period's results let weatherValues: any = this.formatWeatherData(period); //Append this, along with the time period information, into the forecast //items array. //Get the forecast date as a date object let d = new Date(period.dt_txt); //Determe the day of the week let day = this.days[d.getDay()]; //And the time let tm = d.toLocaleTimeString(); //Create a new object in the results array for this period this.f_items.push({ 'period': day + ' at ' + tm, 'values': weatherValues }); } } else { //This really should never happen console.error('Error displaying weather data: Data object is empty'); } }, error => { //Hide the loading indicator loader.dismiss(); console.error("Error retrieving weather data"); console.dir(error); this.showAlert(error); } ); }

    Esta función obtiene los datos de pronóstico, luego los formatea para mostrarlo en dos páginas. En primer lugar, se construye una serie de períodos de tiempo que representan los diferentes períodos de pronóstico. Luego, para cada período, agrega un objeto que contiene los datos de pronóstico para ese período. El segmento de pronóstico de la página muestra la lista de períodos de pronóstico y, al pulsar en una entrada, la aplicación eventualmente (verá cómo en la siguiente sección) abre una página separada para mostrar los detalles.

En este punto, si ejecuta la aplicación, debería ver lo siguiente:

Aplicación de Tiempo Acabado

Toque la pestaña de pronóstico y verá la lista de períodos de previsión que se muestra en la siguiente figura:

Aplicación de Tiempo Acabado

Cuando pulsa en un elemento de pronóstico, no pasa nada (por ahora); Que es porque necesitamos una página para mostrar los datos, y no ha agregado uno todavía.

Cómo añadir una página de detalles del tiempo

  1. Para agregar una nueva página a la aplicación, en el Explorador de soluciones, haga clic con el botón secundario en la carpeta src\pages , seleccione Agregar -> Nuevo elemento …. En la lista de opciones que aparece, seleccione Ionic 2 Page , dale un nombre de WeatherDetail y WeatherDetail clic en el botón Add .Una Página para contactar a la Aplicación                                                                 Visual Studio creará una nueva carpeta denominada WeatherDetail en src\pages\ y la rellenará con los archivos de origen de la nueva página: weather-detail.ts , weather-detail.html y weather-detail.scss .Explorador de soluciones con La Página WeatherDetail
  2. Como cuando agregó un proveedor de la aplicación, cuando se agrega una página, es necesario actualizar la configuración de la aplicación para utilizarlo. Abra el proyecto de src\app\app.module.tsarchivo y agregue la siguiente importinstrucción al principio del archivo:
    import { WeatherDetailPage } from '../pages/weatherdetail/weatherdetail';
  3. A continuación, agregue una referencia al WeatherDetailPagecomponente al declarationsentryComponentsmatrices como se muestra a continuación:
    @NgModule({ declarations: [ MyApp, HomePage, WeatherDetailPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, WeatherDetailPage ], providers: [Weather, { provide: ErrorHandler, useClass: IonicErrorHandler }] }) export class AppModule { }
  4. Abrir el proyecto de src\pages\weatherdetail\weatherdetail.htmly reemplazar su contenido con el siguiente marcado:
    <ion-header> <ion-navbar> <ion-title>Forecast</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <!--show this if there are no items in the list--> <ion-item [hidden]="forecast.values.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <ion-item [hidden]="forecast.values.length < 1"> Period: {{forecast.period}} </ion-item> <ion-item *ngFor="let item of forecast.values"> <p><strong>{{item.name}}:</strong> {{item.value}}</p> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Visual Studio Tools for Apache Cordova</ion-title> </ion-toolbar> </ion-footer>

    Esto crea una página que muestra el elemento de predicción seleccionado como una lista de namevaluelos valores.

  5. Abra el proyecto de src\pages\weatherdetail\weatherdetail.tsarchivo y reemplazar su contenido con el siguiente código:
    import { Component } from [email protected]/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-weather-detail', templateUrl: 'weatherdetail.html' }) export class WeatherDetailPage { forecast: any; constructor(public navCtrl: NavController, public navParams: NavParams) { //Pull the selected forecast off of navParams this.forecast = this.navParams.get('forecast'); } ionViewDidLoad() { console.log('Weather Detail page loaded'); } }

    Observe que no hay ningún código real en la página, que se debe a la plantilla HTML se encarga de hacer que el Ionic de datos y se encarga de la página de navegación automáticamente. Los tres cambios importantes son:

    • La adición de un NavParamscomponente a la página, que es responsable de transmitir datos entre páginas.
    • La adición de una forecastvariable:
      forecast: any;

      Esta variable es el almacenamiento para el objeto de previsión pasa a la página cuando se abre. Contiene los datos correspondientes al período de predicción actual. La página HTML referencias esta variable como la fuente de los datos que hace que en la página.

    • La adición de una sola línea de código al constructor:
      this.forecast = this.navParams.get('forecast');

      Esto asigna el local de this.forecastobjeto para los datos pasados en el forecastobjeto envía a través del NavParamscomponente

  6. Ahora tenemos que decirle al forecastsegmento de la forma de abrir la página de detalles de pronóstico cuando el usuario pulsa sobre un elemento de la lista. Abrir el proyecto de src\pages\home\home.tsy agregue la siguiente importinstrucción al principio del archivo:
    import { WeatherDetailPage } from '../weatherdetail/weatherdetail';
  7. Todavía en src\pages\home\home.ts, agregue la viewForecastfunción para la clase:
    viewForecast(item) { //When the user selects one of the Forecast periods, //open up the details page for the selected period. this.nav.push(WeatherDetailPage, { 'forecast': item }); }

    HTML de la página ya tiene una referencia a esta función:

    <button detail-push ion-item *ngFor="let item of f_items" (click)="viewForecast(item)"> <ion-icon name="time" item-left></ion-icon> {{item.period}} </button>

Al ejecutar la aplicación ahora, usted debería ser capaz de abrir la previsión de un toque en uno de los períodos de predicción de la lista:

Aplicación página del tiempo Pronóstico

La navegación de la página es manejada por  Ionic y angular, estos  se encargan de añadir la flecha hacia atrás en la esquina izquierda de la barra de herramientas y el cierre de la página cuando se ha intervenido.

¡Eso es! Usted ha completado la Aplicación.

 

Fuente ;https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/get-started-with-ionic2

 

 

 

Anuncios

Método genérico para desbloquear una tableta o smartphone


El procedimiento para aplicar el root a nuestro terminal tradicionalmente  ha sido muy complejo pues  varia  sustancialmente  en un lado muy alto del fabricante, modelo,version de android as como del Kernel de compilación del núcleo del so. tal y como demuestran esos largos y engorrosos tutoriales que podemos encontrar en los foros de XDA-Developers o incluso en youtube.

Afortunadamente   todo esto ha cambiado  gracias a una singular aplicación  llamada KingRoot   que no  nos debe despistar  que tenga origen chino  pues en la version actual están también traducida al  ingles  y al español

KingRoot es una manera excelente de hacerle root a nuestro terminal Android. Ahora bien, ‘rootear’ un terminal siempre es un proceso delicado que debemos hacer con el máximo cuidado y sobre todo  siendo conscientes de los riesgos que puede entrañar pues nos damos permisos de root a nosotros mismos,  probablemente también lo estemos haciendo  a   posibles  intrusos  haceidno mas sencillo que nos puedan atacar con malware  a nuestro terminal.

Esta app  ha simplificado muchísimo el  proceso gracias pues como vamos a ver , lo único que debemos hacer es instalarla  en el  propio terminal desde su portal oficial  (https://kingroot.net/root-installation-via-android-apk/) y pulsar sobre el botón azul y esperar. Tras unos pocos segundos la aplicación terminará de trabajar y listo, ya teóricamente deberíamos disponer en  nuestro terminal privilegios de root.

Un aspecto a destacar que esta app es util  siempre y cuando tengamos un sistema operativo comprendido entre Android 4.2.2 y Android 5.1.

Es importante también tener en cuenta que KingRoot NO funciona en todos los terminales pero si en una gran mayoría   por lo  que merece  la pena intentarlo . En los Moto G o incluso con  muchos modelos de LG  ,en  por ejemplo, a veces según modelos puede  dar problemas; aunque con otros mas vendidos como la gama  Nexus, por ejemplo, casi siempre funciona a la perfección.

Brevemente estos son los  pasos:

  • Para  empezar lo mas sencillo es si tenemos un ordenador instalarlo  en nuestro equipo windows desde el siguinte link
  • Una vez  descargado lo instalaremos  ejecutando KingRootSetup_v3.xxx.exe
  • Ya instalado   lo lanzaremos desde el acceso directo recién creado de KingRoot
  • En seguida nos pedirá que conectemos  un cable usb a nuestro terminal
  • En el terminal habilitaremos la depuración por usb  en ajustes->herramientas para programadores ( casi al final de los ajuetes)
  • En cuanto establezca conexión con el  terminal empezara a intentar obtener el root a la par que se instala en el propio terminal
  • Tras unos minutos debería de decirnos si se ha efectuado correctamente el rooteo
  • Podemos comprobar si esta realizado volviendo a lanzar o con la app  gratuita Root Checker que podemos descargar desde el Google Play

 

kingrootfin.PNG
En el caso de que no dispongamos de PC otra opción es descargar la app desde el site oficial https://kingroot.net/root-installation-via-android-apk/ 
Aceptaremos lo permisos  e instalaremos la app .
En la primera ejecución  ya mostrara la opción de obtener root por lo que bastaría pulsar sobre el botón azul y esperar. Tras unos pocos segundos la aplicación terminará de trabajar y listo, y ya teóricamente deberíamos disponer en  nuestro terminal privilegios de root.

Un aspecto a destacar que esta app  no es la misma  que al version que se instala desde el pc, por lo que si con esta no consigue el root no lo dude :pruebe también desde el pc según los pasos anteriormente comentados

 

En resumen pues la utilidad china Kingroot  ofrece un proceso simple y totalmente automatizado compatible con un gran número de dispositivos, con el aliciente de que tras su última actualización a la versión 4.0 es capaz de rootear incluso teniendo Android Lollipop.

 

LINKS DE DESCARGA:
► KingRoot: http://kingroot.uptodown.com/android
► Root Checker: https://play.google.com/store/apps/details?id=com.joeykrim.rootcheck&hl=es

 

Soporte multilenguaje en Android Studio


Android se ejecutará en muchos dispositivos en muchas regiones. Para llegar a la mayoría de los usuarios, su aplicación debe manejar texto, archivos de audio, números, moneda y gráficos de manera apropiada a los locales donde se utilizará su aplicación.

 

En realidad al escribir una app ya se debe tener un conocimiento práctico de Java y estar familiarizado con la carga de recursos de Android, la declaración de elementos de la interfaz de usuario en XML, consideraciones de desarrollo como el ciclo de vida de la actividad y los principios generales de internacionalización y localización.

Es una buena práctica usar el marco de recursos de Android para separar los aspectos localizados de su aplicación tanto como sea posible de la funcionalidad básica de Java:

  • Puede poner la mayor parte o la totalidad del contenido de la interfaz de usuario de su aplicación en archivos de recursos, tal como se describe en este documento y en Proporcionar recursos .
  • El comportamiento de la interfaz de usuario, por otra parte, es impulsado por su código Java. Por ejemplo, si los usuarios introducen datos que deben formatearse o clasificarse de forma diferente dependiendo de la configuración regional, utilizarían Java para manejar los datos mediante programación. Este documento no cubre cómo localizar su código Java

Siempre es una buena práctica extraer strings de IU del código de tu app y conservarlas en un archivo externo. Android facilita esta tarea con un directorio de recursos en cada proyecto del sistema operativo.

Si creo su proyecto con herramientas del Android SDK (lea Cómo crear un proyecto en Android), las herramientas crean un directorio res/ en el nivel superior del proyecto. El directorio res/ contiene subdirectorios para varios tipos de recursos. También hay algunos archivos predeterminados, como res/values/strings.xml, que contiene los valores de tu string.

Agregar los valores de string para cada configuración regional en el archivo correspondiente.

En tiempo de ejecución, el sistema Android usa un conjunto correspondiente de recursos de string basado en la configuración regional actual del dispositivo del usuario.

Por ejemplo, a continuación se indican algunos archivos diferentes de recursos de strings para distintos idiomas.

Inglés (configuración regional predeterminada), /values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>

    <string name="title">My Application
    <string name="hello_world">Hello World!

Español, /values-es/strings.xml:

<?xml version="1.0" encoding="utf-8"?>

    <string name="title">Mi Aplicación
    <string name="hello_world">Hola Mundo!

Nota: Puede usar un calificador de configuración regional (o cualquier calificador de configuración) en cualquier tipo de recurso, como lo harías si deseas proporcionar versiones localizadas del elemento de diseño de tu mapa de bits. Para más información, consulta Localización.

Usar los recursos de string

Puede hacer referencia a sus recursos de string en el código fuente y en otros archivos XML usando el nombre del recurso definido por el atributo namedel elemento .

En su código fuente, puede hacer referencia a un recurso de string con la sintaxis R.string.. Existen diferentes métodos disponibles que aceptan un recurso de string de esta manera.

Por ejemplo:

// Get a string resource from your app's Resources String hello = getResources().getString(R.string.hello_world); // Or supply a string resource to a method that requires a string TextView textView = new TextView(this); textView.setText(R.string.hello_world);

En otros archivos XML, puedes hacer referencia a un recurso de string con la sintaxis @string/ siempre que el atributo XML acepte un valor de string.

Por ejemplo:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />
Paso 1:

Crear un nuevo proyecto Hello World.

Paso 2:
Abrir el archivo main_activity.xml y personalice el texto como desee.

Utilice la pestaña Diseño y cree una nueva traducción haciendo clic en el botón globo.

Paso 3:

Ahora Android Studio genera un nuevo archivo xml en esta ruta de acceso: res / values / strings.

Resultados.

Por qué los recursos predeterminados son importantes

Siempre que la aplicación se ejecute en una configuración regional para la que no haya proporcionado texto específico de la configuración regional, Android cargará las cadenas res/values/strings.xml de res/values/strings.xml . Si este archivo predeterminado está ausente o si falta una cadena que su aplicación necesita, su aplicación no se ejecutará y mostrará un error. El ejemplo siguiente ilustra lo que puede suceder cuando el archivo de texto predeterminado está incompleto.

Ejemplo:

El código Java de una aplicación se refiere a sólo dos cadenas, text_a y text_b . Esta aplicación incluye un archivo de recursos localizados ( res/values-en/strings.xml ) que define text_a y text_b en inglés. Esta aplicación también incluye un archivo de recursos predeterminado ( res/values/strings.xml ) que incluye una definición para text_a , pero no para text_b :

Cuando esta aplicación se inicia en un dispositivo con la configuración regional en inglés, la aplicación puede ejecutarse sin ningún problema, porque res/values-en/strings.xml contiene ambas cadenas de texto res/values-en/strings.xml .
Sin embargo, el usuario verá un mensaje de error y un botón de cierre de la fuerza cuando esta aplicación se inicia en un dispositivo establecido en un idioma que no sea el inglés. La aplicación no se cargará.
Para evitar esta situación, asegúrese de que existe un archivo res/values/strings.xml y que define cada cadena res/values/strings.xml . La situación se aplica a todos los tipos de recursos, no sólo a las cadenas: Debe crear un conjunto de archivos de recursos predeterminados que contengan todos los recursos que su aplicación requiere: diseños, dibujos, animaciones, etc. Recursos .

 

 

Android de Como ENCUENTRA el recurso de coincidencia Óptima

Cuando  solicita  un recurso para el cual sea proporciona Alternativas, Android selecciona qué recurso alternativo ,como utilizar en Tiempo de ejecucion, según la configuración del dispositivo real. Para demostrar como Android selecciona un recurso alternativo, suponga que cadauino de los siguientes elementos de diseño contienen versiones diferentes de las mismas imágenes:

dibujable /
dibujable-es /
dibujable-fr-RCA /
dibujable-en-puerto /
dibujable-en-NoTouch-12key /
dibujable-puerto-LDPI /
dibujable-puerto-NoTouch-12key /

Y suponga que la configuracion del dispositivo es la siguiente:

Configuracion regional = en-GB
Orientación de la Pantalla = port
densidad de píxeles de la Pantalla = hdpi
tipo de pantalla táctil = notouch
director Método de entrada de texto =12key

Al comparar la configuracion del Dispositivo con los Recursos Alternativos Disponibles, Android Selecciona Elementos de Diseño de drawable-en-port.

Para Decidir Qué Recursos Como utilizar, El Sistema se basa en la siguiente lógica:

Figura 2: Diagrama de Flujo de la forma en la cual sea ENCUENTRA Android el recurso de coincidencia Óptima.

  1. Eliminar os Archivos de recursos que se contradicen con la configuración del Dispositivo.El Directorio drawable-fr-rCA/se elimina porque se contradice con la configuración regional en-GB.
    dibujable /
    dibujable-es /
    dibujable-fr-RCA /
    dibujable-en-puerto /
    dibujable-en-NoTouch-12key /
    dibujable-puerto-LDPI /
    dibujable-puerto-NoTouch-12key /
    

    Excepción: La densidad de píxeles de la Pantalla es el unico calificador Que No se Elimina DEBIDO A una contradicción. AUNQUE la densidad de la Pantalla del Dispositivo es IPAP, drawable-port-ldpi/no se Elimina Porque TODAS LAS densidades de Pantalla se consideran Como una coincidencia En Este punto.

  2. Elegir el (Próximo) calificador de alcalde precedencia de la Lista ( tabla 2 ). (Comenzar con MCC y continuar en forma descendente).
  3. ¿Alguno de los Directorios de recursos INCLUYE Este calificador?
    • La Respuesta Si es que no, volver al paso 2 y examinar · el siguiente calificador. (In the example, La Respuesta es “no” Hasta Que se Alcanza el calificador de idioma).
    • Si La Respuesta es sí, continuar con el paso 4.
  4. ELIMINAR los Directorios de recursos Que No INCLUYEN Este calificador. En the example, El Sistema Elimina Todos Los Que No Directorios INCLUYEN UN calificador de idioma:
dibujable /
dibujable-es /
dibujable-en-puerto /
dibujable-en-NoTouch-12key /
dibujable-puerto-LDPI / 
dibujable-puerto-NoTouch-12key /

Excepción: Si el calificador en cuestión f es la densidad de píxeles de la Pantalla, Android slecciona la opción que más coincida con la densidad de la Pantalla del Dispositivo. En general, Aandroid reduce  su preferecica a  una imagen original, en la directiva más grande antes que ampliar una imagen mas pequeña que las originales.

  1. Volver y repetir los Pasos 2, 3 y 4 Hasta Que Quede solitario Directorio de la ONU. En el ejemplo, la Orientación de la Pantalla Es El Próximo calificador para el cual sea existen coincidencias. Por lo del tanto, se eliminan los Recursos Que No se especifican Una Orientación de Pantalla:
    dibujable-es /
    dibujable-en-puerto /
    dibujable-en-NoTouch-12key /
    

    El Directorio Que Queda es drawable-en-port.

Si bien este procedimiento se ejecuta párrafo cada recurso: solicitado, el  Sistema Optimiza algunos adj: Aún más: aspectos. Un example of this Optimización Es Que Una Vez Que se conoce la configuration del Dispositivo, El Sistema podria ELIMINAR los Recursos Alternativos Que Nunca coinciden. EJEMPLO Por, si el idioma de configuration es inglés ( “en”), los Directorios de recursos Que Tienen ONU calificador de idioma establecido en Otro idioma ¿Que hay mar ingles Nunca de INCLUYEN en el conjunto de recursos comprobados (sin embargo, la ONU Directorio de Recursos pecado el calificador de idioma sí se includes).

Cuando Se seleccionan Recursos SEGÚN los calificadores del Tamaño de la Pantalla, El Sistema utilizará los Recursos Diseñados Para Una Pantalla Más Pequeña Que la Pantalla SI real sin EXISTEN Recursos Que coincidan mejor (por Ejemplo, Una Pantalla de Tamaño Grande utilizará Recursos De Una Pantalla de Tamaño normal de Si es Necesario). Sin embargo, si Los Únicos Recursos Disponibles Presentan ONU Tamaño superiores al de la Pantalla real, El Sistema sin los Usara y tu application fallará si ningún Otro recurso que coincidiera con la configuration del Dispositivo (POR EJEMPLO, SI Todos Los Recursos de Diseño estan etiquetados con el calificador xlarge, Pero el Dispositivo es Una Pantalla de Tamaño normal).

Nota: La precedencia del calificador (en la tabla 2 ) es mas Importante Que la Cantidad de calificadores que coinciden exactamente con el Dispositivo. Por Ejemplo, en el paso 4 mencionado anteriormente, la última Opción de la Lista INCLUYE tres calificadores que coinciden exactamente con el Dispositivo (orientation, tipo de pantalla táctil y Método de entrada), MIENTRAS Que drawable-enTiene Un solitario PARÁMETRO Que coinciden (idioma). Sin embargo, el idioma Tiene alcalde precedencia Que ESTOS Otros calificadores, por lo del tanto, drawable-port-notouch-12keyse Elimina.