Reading JSON from Xamarin.Forms .xaml, and displaying them in ‘GORILLA PLAYER’

GORILLA PLAYER

GORILLA PLAYER: is a very powerful and fun app that helps developers see their .xaml files in action without compiling them.

http://gorillaplayer.com

 

And the following are the steps to make ‘GORILLA PLAYER’, display the xaml files with json sample data, without the need to compile your app>

 GORILLA PLAYER-multiple-devices-and-platforms
0. open or create your Xamarin.Forms Solution.
I will create a solution with the name of AppTestingJSONReadingData
 .
.
.
1. Add to your main portable project, a reference to: UXDivers.Artina.Player.Common.dll
“C:\Users\[Your windows user name]\Gorilla\Lib\UXDivers.Artina.Player.Common.dll”
mine is:
“C:\Users\safaf\Gorilla\Lib\UXDivers.Artina.Player.Common.dll”
.
.
.
2. Add nuget package “Newtonsoft.Json” in all your devices projects, and don’t add it to your Portable project, i mean add it to .Droid, .iOS
.
.
.
3. Add the file Name: “SampleData.json”, to your Xamarin.Forms project of the solution
-> use exactly the same name
.
.
.
4. For testing, we will use this data in the file:
-> notice that the object name, has the same name as the .xaml file, which is currently “Page1.xaml”
{
“Page1.xaml”: [
{
“Name “: “ali”,
“Age”: 55,
“Length”: 120,
“Photo”: “friend_thumbnail_27.jpg”
},
{
“Name “: “hassan”,
“Age”: 6,
“Length”: 157,
“Photo”: “friend_thumbnail_93.jpg”
},
{
“Name “: “muhammad”,
“Age”: 7,
“Length”: 170,
“Photo”: “friend_thumbnail_75.jpg”
}
]
}

if you want to show the pictures, you must include them in each device resources folders.
Use the SampleData.sln solution that came with GORILLA PLAYER, to see how they copied the images to both types of Devices

.
.
.
but we will continue without them:
.
.
.
5. Add a .xaml file, the default first .xaml file from VS, will be Page1.xaml
 GORILLA PLAYER-content-views

6. Delete the label, and insert the following test data:

 <ContentPage.Content>
<StackLayout Padding=”0,0,0,20″><Entry Text=”Test 1″ HorizontalTextAlignment=”Start” />
   <ListView ItemsSource=”{Binding .}” SeparatorVisibility=”None”>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”20″ />
<ColumnDefinition Width=”100″ />
<ColumnDefinition Width=”30″ />
<ColumnDefinition Width=”*” />
</Grid.ColumnDefinitions>
<Label Text=”{Binding Name}” VerticalOptions=”Center” Grid.Column=”1″ />
<Label Text=”{Binding Age}” VerticalOptions=”Center” Grid.Column=”2″/>
<Label Text=”{Binding Length}” VerticalOptions=”Center” Grid.Column=”3″/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView><Entry Text=”Test 2″ HorizontalTextAlignment=”Start” /></StackLayout>

 </ContentPage.Content>

 

 

.
.
.
7. run the “GORILLA PLAYER” in your device, and open the .xaml file that has the data in it.
.
.
.
and this is a video showing the above steps:

About Reader Man حسين ناجي الصفافير

حسين ناجي الصفافير Hussain Naji Al-Safafeer Info: https://readerman1.wordpress.com/aboutme
This entry was posted in Development and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s