UNIVERSIDAD ISRAEL

CIENCIAS DE LA INGENIERÍA

CARRERA DE ELECTRÓNICA

DESARROLLO DE APLICACIONES MÓVILES

SEMESTRE 2022 B

LABORATORIO S2

TEMA: Conversor de Medidas

PROFESOR: PhD (c). Luis Fernando Aguas Bucheli

QUITO, 2022
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

1. TEMA: Conversor de Medidas

2. OBJETIVOS:

• Adquirir los conceptos básicos relacionados con programación en móviles

• Reconocer las características de programación en móviles

3. OBJETIVOS DE DESARROLLO SOSTENIBLE:

Indicador 4.7: De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos
teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas
mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los derechos
humanos, la igualdad de género, la promoción de una cultura de paz y no violencia, la ciudadanía
mundial y la valoración de la diversidad cultural y la contribución de la cultura al desarrollo
sostenible

4. INTRODUCCION:

Xamarin.Forms es una característica de Xamarin , el popular marco de desarrollo móvil que

amplía la plataforma de desarrollo .NET con herramientas y bibliotecas para crear aplicaciones
móviles.

Xamarin.Forms es un marco multiplataforma de código abierto de Microsoft para crear

aplicaciones de iOS, Android y Windows con .NET a partir de una única base de código
compartida.

Utilice las páginas, los diseños y los controles integrados de Xamarin.Forms para crear y diseñar
aplicaciones móviles desde una sola API que es altamente extensible. Subclasifique cualquier
control para personalizar su comportamiento o defina sus propios controles, diseños, páginas y
celdas para que su aplicación sea perfecta.

Modelo-Vista-Modelo de vista (MVVM)

MVVM es un patrón de diseño que se utiliza para desacoplar la interfaz de usuario (vista), los
datos (modelo) y la lógica de la aplicación (ver modelo). Xamarin tiene compatibilidad integrada
con el patrón MVVM, incluido el enlace de datos, lo que facilita el seguimiento de este patrón

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

de diseño para que pueda crear un código de aplicación mejor probado y más fácil de extender
sin necesidad de cambios radicales.

Más información sobre MVVM con Xamarin

Interfaz de usuario declarativa o no

Cree interfaces de usuario de forma declarativa con XAML y compártalas en plataformas móviles
y de escritorio. Sin embargo, si XAML no es su taza de té, puede crear interfaces de usuario
igualmente potentes y de alto rendimiento usando C# en su lugar.

Explore la interfaz de usuario de creación con Xamarin.Forms

Acceda a las funciones de la plataforma nativa

Integre fácilmente las funciones de la interfaz de usuario nativa con las características
específicas de la plataforma, como el área segura de iOS, la elevación de Android y el modo de
selección de Windows ListView, tanto desde C# como desde XAML.

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Diseño de interfaz de usuario coherente

La API visual en Xamarin.Forms ayuda a ofrecer una apariencia de Material Design uniforme en
todas sus aplicaciones de iOS y Android. Visual incluye soporte incorporado para Material Design
y es completamente extensible.

ecosistema de componentes de interfaz de usuario

Sea productivo rápidamente con componentes de interfaz de usuario reutilizables de los
principales proveedores de componentes como Syncfusion , DevExpress , UX
Divers , GrapeCity , Telerik y otros.

5. DESARROLLO:

Inicie Visual Studio 2022 y, en la ventana de inicio, haga clic en Crear un nuevo proyecto para
crear un nuevo proyecto:

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Seleccionamos crear proyecto

En el nombre de proyecto escribe AppDivisasDAM, asegúrate de seleccionar una ruta corta

para la ubicación de tu solución y da clic en Crear

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Selecciona la plantilla Blank (proyecto vacío), selecciona las plataformas que deseas probar y
da clic en crear

Espera a que se genere la solución con los proyectos .NET Standard y el de cada plataforma.
Una vez finalizada la carga, da clic derecho en el proyecto .NET Standard AppDivisasDAM y
selecciona Add –> New Folder. El nombre de la nueva carpeta es Views.

Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Ahora da clic derecho en la carpeta Views, selecciona Add –> New Item:

Selecciona la categoría Xamarin.Forms (del lado izquierdo), luego elige Content Page en la lista
de elementos y coloca el nombre ConversorView:

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Eliminamos el código:

A continuación se muestra el código completo de esta página. Básicamente se está agregando

la interfaz de usuario, lo que se mostrará en la vista. Estos elementos son:
▪ Un Grid que organiza todos los controles
▪ Una etiqueta (Label) con el texto “Monto en Pesos“

Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

▪ Una caja de texto (Entry) llamada PesosEntry que permitirá al usuario ingresar una
cantidad
▪ Un botón (Button) con el texto Convertir; cuando el usuario lo presione, se calculará el
monto correspondiente en dólares
▪ Un botón (Button) con el texto Limpiar; cuando el usuario lo presione, se pondrá en
cadena vacía tanto la caja de texto como la etiqueta de resultado
▪ Una etiqueta (Label) con el texto “Monto en Dólares“
▪ Una etiqueta (Label) con el nombre DolaresLabel en la que se mostrará el resultado de
la conversión
<?xml ▪version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AppDivisasDAM.Views.ConversorView">
<ContentPage.Content>
<Grid Margin="15">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

<Label Grid.Row="0"
Grid.Column="0"
Margin="5"
Text="Monto en Pesos"
TextColor="Blue"
VerticalOptions="Center" />

<Entry Grid.Row="0"
Grid.Column="1"
Margin="5"
x:Name="PesosEntry"
Placeholder="0.00"
WidthRequest="100"

Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

HorizontalOptions="Start"
Keyboard="Numeric" />

<Button Grid.Row="1"
Grid.Column="0"
Margin="5"
x:Name="ConversorButton"
Text="Convertir"
TextColor="White"
BackgroundColor="DarkGreen"
WidthRequest="150"
HorizontalOptions="Center"
CornerRadius="10"
Clicked="ConversorButton_Clicked" />

<Button Grid.Row="1"
Grid.Column="1"
Margin="5"
x:Name="LimpiarButton"
Text="Limpar"
TextColor="White"
BackgroundColor="DarkGreen"
WidthRequest="150"
HorizontalOptions="Center"
CornerRadius="10"
Clicked="LimpiarButton_Clicked" />

<Label Grid.Row="2"
Grid.Column="0"
Margin="5"
FontAttributes="Bold"
Text="Monto en Dólares"
TextColor="Blue" />

<Label Grid.Row="2"
Grid.Column="1"
Margin="5"
FontAttributes="Bold"
x:Name="DolaresLabel"

Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

TextColor="Green" />
</Grid>

</ContentPage.Content>
</ContentPage>

Abre el archivo ConversorView.xaml.cs, que es el código de la página creada. En ella

implementaremos la funcionalidad para manejar los eventos, por ejemplo los clicks de los
botones Convertir y Limpiar. El código que agregaremos se muestra a continuación y
consiste en:
▪ La constante tasa con el valor 19.11 (corresponde al tipo de cambio de dólar a pesos).
▪ El método Limpiar que coloca la caja de texto PesosEntry y la etiqueta DolaresLabel en
cadena vacía.
▪ El manejador de evento ConversorButton_Clicked que convierte la cantidad
introducida por el usuario (en pesos) a dólares utilizando la constante definida. En este
código se verifica que la información ingresada sea un número valido; si es correcta, se
convierte la cantidad; en caso contrario, se llama al método Limpiar.
▪ El manejador de evento LimpiarButton_Clicked que llama al método Limpiar.
using ▪System;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace AppDivisasDAM.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]

Ciencias de la Ingeniería
Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

public partial class ConversorView : ContentPage

{
const double tasa = 19.11;

public ConversorView()
{
InitializeComponent();
}

void Limpiar()
{
PesosEntry.Text = string.Empty;
DolaresLabel.Text = string.Empty;
}

private async void ConversorButton_Clicked(object sender, EventArgs e)

{
double pesos = 0, dolares = 0;

if (double.TryParse(PesosEntry.Text, out pesos))

{
dolares = pesos / tasa;
DolaresLabel.Text = $"{dolares:N2}";
}
else
{
await DisplayAlert("Error", "Cantidad no válida", "OK");
Limpiar();
}
}

private void LimpiarButton_Clicked(object sender, EventArgs e)

{
Limpiar();
}
}
}

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

Solo queda modificar la clase App.xaml.cs. El cambio consiste en

establecer ConversorView como página de inicio de la aplicación cuando ésta sea ejecutada.
Esto se realiza creando una instancia de dicha vista y asigándola al elemento MainPage, tal como
se indica a continuación.
using Xamarin.Forms;

namespace AppDivisasDAM
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new Views.ConversorView();
}
}
}

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

¡Listo! Ahora solo resta probar la aplicación. Primero lo haremos en Android. En la lista de
proyectos selecciona AppDivisasDAM.Android tal como se muestra en la imagen.

Si el emulador o dispositivo ejecutan la aplicación, verás que se muestra la pantalla que

diseñaste. Ingresa una cantidad y verifica que se realiza la conversión correctamente.

Ciencias de la Ingeniería
 Universidad Israel
Ciencias de la Ingeniería
Carrera de Electrónica

6. BIBLIOGRAFIA:

Ciencias de la Ingeniería