COMPLEXO ESCOLAR

POLITÉCNICO GIRASSOL

MATERIAL DE APOIO
PARA
DESENVOLVIMENTO
MOBILE

AUTOR : PROF CEDRICK MANSONI COORDENAÇÃO DE INFORMÁTICA - 2023

CAPÍTULO - 01
❑O que é o dotnet MAUI;
❑Linguagens do MAUI;
❑Como instalar o dotnet MAUI;
❑Como criar um projecto MAUI;
❑Estrutura do projecto MAUI;
❑Controles do MAUI;
❑Páginas (Pages) de um app MAUI;
❑Navegação no dotnet MAUI
❑Layouts de um app MAUI;
❑Views de um app MAUI;
O que é o dotnet MAUI
MAUI (Multi-plataform App User Interface), é um framework
multiplataforma para criação de aplicativos móveis e
desktop nativos.

O MAUI nos permite desenvolver aplicativos que podem

ser executados nos sistemas android, ios, macOS,
Windows, etc. a partir de uma única base de código
compartilhada.

O MAUI, é um projecto de código aberto, e é a evolução

do Xamarin.Forms.
Linguagens do MAUI
O framework dotnet MAUI, suporta a linguagem de programação C#(CSharp) e a linguagem de
Marcação XAML.

C# é uma linguagem de programação orientada a objetos criada pela Microsoft, faz parte da
sua plataforma dotNet(.Net). A companhia baseou C# na linguagem C++ e Java;

XAML é uma linguagem baseada em XML que é uma alternativa ao código de programação
para instanciar e inicializar objetos e organizar esses objetos em hierarquias pai-filho.
Como instalar o MAUI
✓Baixe e instale o dotnet sdk;
✓Abra o terminal do sistema operativo;
✓Para instalar o maui digite o seguinte comando:
dotnet workload install maui
✓Espere até finalizar a instalação, e depois digite o comando seguinte para verificar se o maui foi instalado com
sucesso:
dotnet workload list
✓Verifique e instale os componentes ausentes com o utilitário de linha comando:
dotnet tool install –g.redth.net.maui.check
✓Agora digite o seguinte comando:
maui-check
Como criar um projeto MAUI
Para trabalharmos com MAUI, é necessário termos instalado o ambiente de desenvolvimento integrado (Visual Studio
2022), ou um editor de texto (Visual Studio Code).
OBS: Neste material, iremos trabalhar com o visual studio code, e o emulador Nox Player.

✓Crie uma pasta dentro de um directório qualquer(ambiente de trabalho, Documentos, etc.);

Neste exemplo vou criar a pasta na raíz da unidade F: (HD externo), e vou renomear como app.
Dica: Evite caminhos longos, e com espaços em branco.
Como criar um projeto MAUI
✓Abra esta pasta com o visual Studio Code;

✓Com o Visual Studio Code aberto, abra um novo terminal:

Como criar um projeto MAUI
✓Na parte inferior do Visual Studio Code vai abrir a seguinte janela;

✓Agora podemos digitar nela o seguinte comando:

dotnet new maui –f net6.0

Tipo de projecto Versão do sdk

Estrutura de um projeto MAUI
Estrutura de um projeto MAUI

A pasta Platforms (Plataforma) contém as configurações de cada

plataforma(sistema operacional).

Só iremos escrever nela se o nosso projecto necessitar de um

comportamento ou configuração específica de uma das
plataformas, caso contrário, não precisaremos mexer nela.
Estrutura de um projeto MAUI

A pasta Properties (Propriedades) contém arquivos json,

responsáveis pela configuração da nossa aplicação.
Estrutura de um projeto MAUI

A pasta Resources responsável pelos recursos da nossa

aplicação, como:
▪ Icone;
▪ Fonts;
▪ Images;
▪ Splash(Tela de carregamento da app);
▪ Styles (Configuração dos estilos)
Estrutura de um projeto MAUI

O arquivo app.csproj contém a versão do nosso app, configuração da

routa dos resources, etc.

App.sln este arquivo representa a solução do nosso projecto.

Estrutura de um projeto MAUI
Um novo aplicativo .NET MAUI contém três arquivos XAML e seus arquivos
code-behind associados.

App.xaml e app.xaml.cs são arquivos que contêm classes parciais, que

derivam da classe application e são utilizados para fazer a estilização do
projeto(Deixar o app com uma aparência personalizada).

AppShell.xaml e AppShell.xaml.cs também são arquivos que contêm

classes parciais, que definem um sistema de navegação mais perfomático
entre um determinado conjunto de páginas.

MainPage.xaml e MainPage.xaml.cs são arquivos com classes que definem

a interface do usuário de uma página.
Estrutura de um projeto MAUI

MauiProgram.cs arquivo aonde setamos

as injecções de dependências.
Controles do MAUI
A interface do usuário de um aplicativo .NET MAUI é construída de objetos que são mapeados para os controles
nativos de cada plataforma de destino.

Os principais grupos de controle usados para criar a interface do usuário de um aplicativo MAUI do .NET são
páginas, layouts e views. Uma página do .NET MAUI geralmente ocupa a tela inteira ou a janela.

A página geralmente contém um layout, que contém views e possivelmente outros layouts. Páginas, layouts e views
derivam da classe VisualElement.

OBS: Essa classe fornece uma variedade de propriedades, métodos e eventos que são úteis em classes
derivadas.
Páginas de app MAUI
Página de um app MAUI, é um container que contem conteúdos gráficos
visualizados na tela do nosso dispositivo.

Os aplicativos MAUI do .NET consistem em uma ou mais páginas. Uma página

geralmente ocupa toda a tela ou janela, e cada página normalmente contém
pelo menos um layout.

O .NET MAUI contém as seguintes páginas:

a) ContentPage;
b) FlyoutPage;
c) NavigationPage;
d) TabbedPage.
ContentPage (Página de conteúdo)
É um tipo de página que admite apenas uma única View, que geralmente é um
layout como Grid ou StackLayoute.
Para criar uma página de conteúdo (ContentPage) no cmd, digite o seguinte
comando:

dotnet new maui-page-xaml –n login

tipo de página nome da página

Por padrão a página será do tipo contentPage:

NavigationPage
Fornece uma experiência de navegação hierárquica em que você pode navegar por páginas,
para frente e para trás, conforme desejado. A NavigationPage fornece navegação como uma
pilha Page de objetos LIFO (last in, first out - último a entrar, primeiro a sair).
NavigationPage define as seguintes propriedades:
▪ BarBackground , do tipo Brush, especifica a tela de fundo da barra de navegação como
um Brush.
▪ BarBackgroundColor , do tipo Color , especifica a cor da tela de fundo da barra de
navegação.
▪ BackButtonTitle , do tipo string , representa o texto a ser usado para o botão Voltar. Isso é
uma propriedade anexada.
▪ BarTextColor , do tipo Color , especifica a cor do texto na barra de navegação.
▪ CurrentPage , do tipo Page, representa a página que está na parte superior da pilha de
navegação. Trata-se de uma propriedade somente leitura.
▪ HasNavigationBar , do tipo bool , representa se uma barra de navegação está presente no
NavigationPage. O valor padrão dessa propriedade é true . Isso é uma propriedade
anexada.
NavigationPage
▪ HasBackButton , do tipo bool , representa se a barra de navegação inclui um botão Voltar. O valor padrão
dessa propriedade é true . Isso é uma propriedade anexada.
▪ IconColor , do tipo Color , define a cor da tela de fundo do ícone na barra de navegação. Isso é uma
propriedade anexada.
▪ RootPage , do tipo Page, representa a página raiz da pilha de navegação. Trata-se de uma propriedade
somente leitura.
▪ TitleIconImageSource , do tipo ImageSource , define o ícone que representa o título
▪ na barra de navegação. Isso é uma propriedade anexada.
▪ TitleView , do tipo View, define a view que pode ser exibida na barra de navegação. Isso é uma propriedade
anexada.
NavigationPage
A classe NavigationPage também define três eventos:
▪ Pushed é gerado quando uma página é enviada por push para a pilha de navegação.
▪ Popped é gerado quando uma página é exibida da pilha de navegação.
▪ PoppedToRoot é gerado quando a última página não raiz é exibida da pilha de navegação.
Todos os três eventos recebem NavigationEventArgs objetos que definem uma propriedade somente Página de
leitura, que recupera a página que foi exibida da pilha de navegação ou a página recém-visível na pilha.
Uma NavigationPage normalmente é usado para navegar por uma pilha de objetos ContentPage. Quando uma
página navega para outra, a nova página é enviada por push na pilha e se torna a página ativa:
NavigationPage
Os métodos de navegação são expostos pela propriedade Navigation em qualquer tipo derivado de Page.
Esses métodos fornecem a capacidade de efetuar push de páginas para a pilha de navegação, de pop-up de
páginas da pilha e de manipular a pilha.

Um aplicativo estruturado em várias páginas sempre tem uma página raiz , que é a primeira página adicionada à
pilha de navegação. Isso é feito criando um objeto NavigationPage cujo argumento do construtor é a página raiz
do aplicativo e definindo o objeto resultante como o valor da propriedade App.MainPage :
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
}
NavigationPage
Uma página pode ser acessada chamando o método PushAsync na propriedade Navigation da página atual:
await Navigation.PushAsync(new DetailsPage());
Neste exemplo, o objeto DetailsPage é enviado por push para a pilha de navegação, em que ele se torna a página
ativa.

OBS: O método PushAsync tem uma substituição que inclui um argumento do tipo bool que especifica se uma
transição de página deve ser exibida durante a navegação. O método PushAsync não tem o argumento bool
habilita a transição de página por padrão

A página ativa pode ser exibida da pilha de navegação pressionando o botão Voltar em um dispositivo,
independentemente de ser um botão físico no dispositivo ou um botão na tela
NavigationPage
Para retornar programaticamente à página anterior, o método PopAsync deve ser chamado na propriedade
Navigation da página atual:
await Navigation.PopAsync();
Neste exemplo, a página atual é removida da pilha de navegação, com a nova página superior se tornando a
página ativa.
Além disso, a propriedade Navigation de cada página também expõe um método PopToRootAsync que remove
todas páginas, exceto a página raiz, da pilha de navegação, tornando a página raiz do aplicativo a página ativa.

O .NET MAUI dá suporte à navegação de página modal. Uma página modal incentiva os usuários a concluir uma
tarefa independente da qual não se pode sair via navegação até que essa tarefa seja concluída ou cancelada.
Uma página modal pode ser qualquer um dos tipos de página compatíveis com o .NET MAUI. Para exibir uma
página modal, o aplicativo deve efetuá-la por push na pilha modal, em que ela se tornará a página ativa:
NavigationPage

Para retornar à página anterior, o aplicativo deve exibir a página atual da pilha modal e a nova página superior se
torna a página ativa:
Neste exemplo, a página atual é removida da pilha de navegação, com a nova página superior se tornando a
página ativa.

Os métodos de navegação modal são expostos pela propriedade Navigation em quaisquer tipos derivados de
Page. Esses métodos fornecem a capacidade de enviar páginas por push para a pilha modal e páginas pop da
pilha modal.
NavigationPage
Uma página pode ser navegada como modal chamando o método PushModalAsync na propriedade Navigation
da página atual:
await Navigation.PushModalAsync(new DetailsPage());
Neste exemplo, o objeto DetailsPage é enviado por push para a pilha modal, em que se torna a página ativa.

A página ativa pode ser removida da pilha modal pressionando o botão Voltar em um dispositivo,
independentemente de ser um botão físico no dispositivo ou um botão na tela.
Para retornar programaticamente à página original, o método PopModalAsync deve ser chamado na propriedade
Navigation na página atual:
await Navigation.PopModalAsync();
Neste exemplo, a página atual é removida da pilha modal, e a nova página superior se torna a página ativa.
Navegação entre páginas