Xamarin Forms - Fazendo o Parser em arquivos JSON |
Neste tutorial veremos como fazer o parser em arquivos JSON usando o Xamarin Forms. |
Eu já tratei do acesso a arquivos usando a PCL Storage neste artigo aqui.
Hoje vou mostrar como fazer uma análise ou parser de arquivos JSON, acessando e exibindo as informações neles contidas.
Para este artigo eu vou obter o arquivo JSON da seguinte URL : https://jsonplaceholder.typicode.com/photos
Que tem a seguinte estrutura:
[
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
},
{
"albumId": 1,
"id": 2,
"title": "reprehenderit est deserunt velit ipsam",
"url": "https://via.placeholder.com/600/771796",
"thumbnailUrl": "https://via.placeholder.com/150/771796"
},
....
]
|
E vou salvar as informações em um arquivo chamado photos.json que vou copiar para a pasta Album do projeto Xamarin Forms.
Um detalhe importante é que você tem que alterar a propriedade Build Action deste arquivo json para Embedded resource.
A seguir temos que criar uma classe que representa e estrutura dos dados que desejamos acessar e exibir, e para isso eu vou usar o site : http://json2csharp.com/ .
Basta acessar o site, e digitar a url na caixa de texto, e clicar no botão Generate.
Você verá a classe gerada conforme mostra a figura acima. Copie o código gerado e crie um arquivo chamado Album.cs com o conteúdo desta classe em uma pasta Model no projeto.
public class Album
{
public int albumId { get; set; }
public int id { get; set; }
public string title { get; set; }
public string url { get; set; }
public string thumbnailUrl { get; set; }
}
|
Nosso objetivo é acessar e exibir o contéudo do arquivo em um controle ListView no Xamarin Forms.
Pois, vamos lá...
recursos usados:
Criando o projeto Xamarin Forms
Abra o VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_ParseJSON;
A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.
Clique no botão OK.
Pronto, nosso projeto já esta criado.
Após criar as pastas Model e Album e os arquivos Album.cs e photos.json, a estrutura do projeto deve ficar assim:
Vamos incluir agora a referência ao pacote Newtonsof.Json em nosso projeto.
No menu Tools, clique em Nuget Package Manager e a seguir em Manage Nuget Packages for Solution;
Digite : Newtonsof.Json para localizar o pacote e a seguir marque o pacote e instale-o em todos os projetos:
Criando a interface com o usuário no arquivo MainPage
Abra o arquivo MainPage.xaml e incluia o código abaixo que define um ListView para exibir os dados JSON:
<?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:local="clr-namespace:XF_ParseJson"
x:Class="XF_ParseJson.MainPage">
<ListView x:Name="lvAlbum"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <Image Source="{Binding thumbnailUrl}" Aspect="AspectFit" />
<StackLayout HorizontalOptions="StartAndExpand">
<Label Text="{Binding title}" TextColor="Black"/>
<Label Text="{Binding url}" TextColor="Gray"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
|
No código estamos usando um ItemTemplate e definindo um DataTemplate do tipo ViewCell, que é uma célula que pode ser adicionado no ListView ou TableView e que pode conter views definidas pelo usuário. (A renderização de uma ViewCell é feita de forma diferente nas plataformas iOS, Android e Windows Phone.)
exibindo o title, a url e a imagem dos dados JSON obtidos do arquivo photos.json.
No arquivo code-behind MainPage.xaml.cs inclua o código a seguir:
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Reflection;
using Xamarin.Forms;
using XF_ParseJson.Model;
namespace XF_ParseJson
{
public partial class MainPage : ContentPage
{
private ObservableCollection<Album> _album;
public MainPage()
{
InitializeComponent();
BindingContext = this;
var assembly = typeof(MainPage).GetTypeInfo().Assembly;
Stream stream = assembly.GetManifestResourceStream("XF_ParseJson.Album.photos.json");
using (var reader = new System.IO.StreamReader(stream))
{
var json = reader.ReadToEnd();
List<Album> albuns = JsonConvert.DeserializeObject<List<Album>>(json);
_album = new ObservableCollection<Album>(albuns);
lvAlbum.ItemsSource = _album;
}
}
}
}
|
Neste código acessamos o arquivo photos.json da pasta Album; a seguir deserializamos as informações para uma lista de objetos do tipo Album atribuindos à propriedade ItemsSource do ListView.
O método GetManifestResourceStream carrega o recurso (o Json) de manifesto especificado desse assembly.
Executando o projeto iremos obter o seguinte resultado:
Assim, conseguimos acessar o arquivo JSON e exibir os dados no Xamarin Forms.
Pegue o código do projeto compartilhado aqui : XF_ParseJson.zip
Ó Senhor,
Senhor nosso, quão admirável é o teu nome em toda a terra, pois puseste a tua
glória sobre os céus!
Salmos 8:1
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Referências:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
Super DVD C# - Recursos de aprendizagens e vídeo aulas para C#
Curso Fundamentos da Programação Orientada a Objetos com VB .NET
Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Criando sua primeira ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Anatomia da aplicação - Macoratti.net
NET - Apresentando o padrão Model-View-ViewModel - Macoratti.net
Xamarin Forms - MVVM - Macoratti.net
NET - O padrão MVVM (Model-View-ViewModel) revisitado - Macoratti
Xamarin Forms - MVVM - A interface ICommand - Macoratti.net
Padrão de Projeto - Aprendendo o padrão MVVM ... - Macoratti.net