Ir al contenido principal

Xamarin.Forms - Crear Menú Hamburguesa

En este post elaboraremos un ejemplo práctico acerca del desplazamiento que se realiza después de autentificarse el ingreso a una aplicación móvil, es decir se implementará el menú principal para determinar las opciones de nuestra aplicación móvil.

Sin mayores detalles, como se describe en el titulo de este post se creará el  menú hamburguesa 🍔 (no me gusta ese nombre 😂), con relación a la aplicación móvil que se viene desarrollando. Como se menciono en los anteriores ejemplos prácticos, será diseñada y desarrollada en Xamarin.Forms con almacenamiento de datos en SQLite. 


Te puede interesar 👀 las anteriores 😃 secuencias:


Recordemos que todas las pruebas se viene realizando en un equipo móvil físico con Sistema Operativo Android, esto no restringe el uso de emuladores.

Requisitos:
Microsoft Visual Studio Community 2019.
Xamarin.Froms - XAML.
SQLite - Gestión de datos local.

Comencemos:
En el directorio Views del proyecto AppDIAbetes agregamos una nueva Pagina de Contenido:
Clic en agrear nuevo elemento desde el directorio Views, seleccionar la opción Página de Contenido, asignar nombre y clic en agregar.
En el directorio Models del proyecto AppDIAbetes agregamos una nueva Clase:
Clic en agrear nuevo elemento desde el directorio Models, seleccionar la opción Clase, asignar nombre y clic en agregar.
Recordemos que también se puede realizar haciendo uso de la creación de una Página de maestro y detalles, sin embargo esto al crearse adicionaran otras páginas y una clase que complementa para la implementación de la opción. Si desea puedes revisar en nuevo proyecto y adicionar al nuevo proyecto el elemento en mención.
Clic en agrear nuevo elemento desde el proyecto creado, seleccionar la opción
Página de maestro y detalles, asignar nombre y clic en agregar.
Archivos .xaml agregados y el .cs que corresponde a los atributos
Ahora bien, con los 2 nuevos componente (Pagina de Contenido y Clase) agregados en nuestro proyecto se iniciará con la elaboración y ejecución de la parte de diseño de interfaz.

Diseño de Interfaz:
Abrimos los archivos PageMain.xaml y PageMain.xaml.cs (no equivocarse con la MainPage.xaml ) y cambiamos el ContentPage por MasterDetailPage.

Es decir el PageMain.xaml debe quedar por ahora de la siguiente manera:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage 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="AppDIAbetes.Views.PageMain">
    <MasterDetailPage.Master>
        <ContentPage>
            <StackLayout>
                <Label Text="Welcome to Xamarin.Forms!"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand" />
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>

</MasterDetailPage>

Y el PageMain.xaml.cs debe quedar por ahora del siguiente modo:

    public partial class PageMain : MasterDetailPage
    {
        public PageMain()
        {
            InitializeComponent();
        }
    }

Con los cambios realizados, implementaremos las lista de opciones a mostrar en el PageMain.xaml, para la cual agregaremos un ContentPage e insertamos un Grid y su Grid.RowDefinitions, dos secciones con StackLayout, de las cuales uno determinará la cabecera del menu (donde estará el logo y fondo) y por ultimo la otra sección determinara la lista de opciones por intermedio de un ListView.

La propiedad ImageCell del ListView contendrá valor con valores de tipo Binding para la asignación a la entidad de datos:

<ImageCell TextColor="#3399ff" DetailColor="#AED6FF"
           Text="{Binding title}"
           Detail="{Binding detail}"
           ImageSource="{Binding image}">
</ImageCell>

El XAML completo del archivo PageMain.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage 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="AppDIAbetes.Views.PageMain">
    <MasterDetailPage.Master>
        <ContentPage Title="masterPage">
            <Grid BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Image Source="fondoDIAbetes.jpg" Aspect="AspectFill" WidthRequest="200" />
                    <StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
                        <Image Source="DIAbetes.gif"></Image>
                        <Label Text="Buen día Hadson" TextColor="Black" FontSize="Small" HorizontalTextAlignment="Center" />
                    </StackLayout>
                </Grid>
                <StackLayout Margin="0,0,0,0" Grid.Row="1" Spacing="0">
                    <ListView x:Name="listPageMain" ItemSelected="OnListItemSelected" BackgroundColor="White" SeparatorColor="Gray">
                        <ListView.ItemTemplate>
                            <DataTemplate>                               
                                <ImageCell TextColor="#3399ff" DetailColor="#AED6FF"
                                            Text="{Binding title}"
                                            Detail="{Binding detail}"
                                            ImageSource="{Binding image}">
                                </ImageCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Grid>           
        </ContentPage>
    </MasterDetailPage.Master>
</MasterDetailPage>

Luego agregaremos los siguiente atributos en la clase Option que fue creado inicialmente:

using Xamarin.Forms;

namespace AppDIAbetes.Models
{
    public class Option
    {
        public string title { get; set; }
        public string detail { get; set; }
        public ImageSource image { get; set; }
        public Page page { get; set; }
    }
}

Después de realizar el diseño de Interfaz y CodeBehind, nuestro Menú Hamburguesa quedara de la siguiente manera:


Desarrollo en el CodeBehind:
En CodeBehind del archivo PageMain.xaml.cs crearemos 2 métodos para logra el desplazamiento en el menú:

El método myPageMain es el encargado de listar y almacenar los datos de cada atributo de la entidad Options para alimentar a al ListView, y por ultimo el segundo método OnListItemSelected se encarga de seleccionar la página de acuerdo a los atributos de cada página carga en el ListView:

using AppDIAbetes.Views.Options;
using AppDIAbetes.Models;
using System.Collections.Generic;

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

namespace AppDIAbetes.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PageMain : MasterDetailPage
    {
        public PageMain()
        {
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);
            myPageMain();
        }

        public void myPageMain() {
            Detail = new NavigationPage(new PageHome());

            List<Option> options = new List<Option>
            {
                new Option{ page=new PageHome(),title="Inicio", detail="Inicio", image = "ic_ac_home.png" },
                new Option{ page=new PageControl(),title="Monitoreo y Control", detail="Programación de control", image = "ic_ac_control.png" },
                new Option{ page=new PageReport(),title="Mis Reportes", detail="Reportes seamanales", image = "ic_ac_report.png" },
                new Option{ page=new PageRegistry(),title="Ingreso Manual", detail="Ingresa tu monitoreo", image = "ic_ac_registry.png" },
                new Option{ page=new PageAbout(),title="Acerca de", detail="App DIAbetes", image = "ic_ac_about.png" },
                new Option{ page=null,title="Cerrar Sesión", detail="Abandonar App", image = "ic_ac_signoff.png" }
            };
            listPageMain.ItemsSource = options;
        }
        private async void OnListItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var option = e.SelectedItem as Option;
            if (option.page != null)
            {
                IsPresented = false;
                Detail = new NavigationPage(option.page);
            }
            else if (option.page == null || option.title == "Cerrar Sesión") {

                var result = await DisplayAlert("Confirmar", "Estas seguro de cerrar sesión", "SI", "NO");
                if (result)
                {
                    await Navigation.PushAsync(new MainPage());
                }
                else
                {
                    return;
                }
            }
        }
    }
}

Antes de implementar el método myPageMain se debe crear un sub directorio de nombre Options en el directorio Views y agregar las siguientes Paginas de Contenido:
👉 PageHome.xaml
👉 PageControl.xaml
👉 PageReport.xaml
👉 PageRegistry.xaml
👉 PageAbout.xaml

Así mismo, debe agregar las imágenes en sub directorio drawable que se encuentra en el directorio Resources del proyecto de AppDIAbetes.Android:


 Para finalizar comparto el vídeo 📹 acerca de lo desarrollado de acuerdo a la descripción de este post publicado, todas las pruebas fueron validados en plataforma 📱 para Android.
Nuevamente gratitud a Dios 😊y gracias a todos ustedes por la acogida de este nuevo post, éxitos y bendiciones 🙏 y un gran abrazo a todos ✌...!!!

Comentarios

Entradas más populares de este blog

Habilitar Usuario HR Oracle

Al realizar la primera instalación del Oracle, el usuario HR por defecto está bloqueado y por ende no podemos loguearnos como dicho usuario, lo que debe hacer son los siguiente pasos, aplicables para Linux o Windows.
1. Conectarse como usuario system o sysdba + contraseña haciendo uso del comando connect.
Usuario: system
Password: xxxx 


2. Hacer uso  del comando alter user hr account unlock desbloqueamos la cuenta.
alter user hr account unlock;

3. Escribimos el comando alter user HR identified by hr; con esto estamos diciendo que la contraseña será hr.

alter user HR identified by hr;

4. Ahora testeamos la conexión con el comando - conn hr/hr@xe. Si deseas después de conectarnos se puede realizar un select a la tabla employees del hr.


Resultado del select realizado
5. Con todos estos pasos realizados ya podemos logearnos desde cualquier IDE como el usuario hr  y la contraseña hr que definimos en el paso 3. 
Para finalizar nos loguearemos con el IDE Oracle SQL Developer.

Espero les sea de utilidad,…

Usuario SYS y SYSTEM - ORACLE

Usuario SYS y SYSTEM
Ambos usuario son creados de forma automática al crear la base de datos ORACLE y se otorga el rol de DBA.

SYS (password por defecto: CHANGE_ON_INSTALL).
SYSTEM (password por defecto: MANAGER).

Lo que se recomienda es cambiar el password de ambos usuarios por el tema de seguridad.

SYS:
Todas las tablas y vistas para el diccionario de datos de la base de datos están almacenados en el esquema SYS. Estas tablas y vistas son críticas para el funcionamiento de la base de datos ORACLE. Para mantener la integridad del diccionario de datos, las tablas del esquema SYS son manipulados solo por la base de datos. Nunca se debería modificar algo o crear tablas en el esquema del usuario SYS.

SYSTEM:
El usuario SYSTEM se utiliza para crear tablas y vistas adicionales que muestran información administrativa, tablas internas y vistas utilizado por varias opciones y herramientas de la base de datos ORACLE. No se recomienda utilizar el esquema SYSTEM para almacenar tablas de interés para usu…

Parámetro de entrada y salida – PL/SQL

Parámetro de entrada y salida – PL/SQL:
Los parámetros de entrada y salida no son los parámetros de inicialización de la base de datos ORACLE. Los parámetros de entra y salida son utilizados mayormente en implementaciones de funciones, procedimientos almacenados o bloques de código bajo el lenguaje del PL/SQL, se considera que ambos parámetros (entra y salida) puedan realizar operaciones en el mismo bloque PL/SQL, es decir, si enviamos un parámetro de entrada hará que cumpla cierta operación y retornara los valores de salida de dicha operación procesada de acuerdo al parámetro de ingresado. Es de acuerdo al caso que nos presenta en la implementación.
Algo importante al definir los parámetros, es saber y considerar cuántos tipos de parámetro existe si solo hablamos de entrada y salida, en realidad mi determinación seria 3 tipos:

Parámetros:

IN – entrada
OUT – salida
IN OUT – entrada salida

Parámetro IN – entrada:
El comportamiento común de estés tipos de parámetros es estar siempre pendiente d…