Introduction
This is my first article so I hope everyone will excuse my poor grammar and jejune writing experience. I look forward to everyone's support.
The article is about an app that target for Windows 8 OS(Desktop & Metro style app) which is currently in my App-factory and will be available on the store soon. The Windows 8 apps (Desktop & Metro style) must be extraordinary, entertain people/users while they are dealing with and provide the maximum features of the W8 platform. The ability to use Touch in addition to keyboard and mouse will be a crucial attribute for this generation's apps. So we must target for this awesome platform while writing our app.
The app I am making is an app for everyone on the go (in your pocket, briefcase ... wherever you want). In this cloud technology generation, people are moving all around world with/without intention and there each step creates an concurrent chance for confusion. So we should be alert with our every step. It will be good to have an app that behaves as your personal assistant. Here my app (PocketWorld) that takes role of your best friend in your favorite Ultra-book/W8 Device, all you need is an internet connection.
The main feature of the app is it can easily transform with Windows desktop and metro style ,because of its reliable design.I am targeting both the metro and desktop users by providing this extra ordinary app. And i am sure everyone will like its design and working.
You will not get lost in huge city or large crowd, because the app will tether itself to your needs and also make sure you have fun while you're out and about. The app utilizes GPS(If there is no GPS feature, user location will be captured using IP for desktop devices) and and also makes use of device sensors to help you.
Nowadays our partners may not fully understand our needs and moods. But this app will be your best partner. By making use of GPS, it will direct you to attractive places (lakes, cafes, pubs, hotels, transport, tour, rent-a-car, etc.) with features like: routes, weather, footprint etc. It will even alert you to take your rain coat by using the advanced weather forecast. It is a simple but great helper for our busy lives.
My app's slogan is "Live life king size" The cool touch and crazy sensor mechanism of the Ultra-book will allow my application to be loved by everyone.
Background
On a lonely trip, I got lost somewhere and people near by me were talking in a foreign language. They didn't understand me or my language. Sometimes people with different cultures must interact with each other, but with difficulty. I wanted to ask them many things about where I was, but suddenly I forgot everything because I was tense. I escaped from that place after few hours struggle.
On the way to home, I was thinking about a solution that would avoid this problem in future. Finally, I designed this app idea in a Metro style app, (along with some Metro life style stuff) under one umbrella. The foot-print feature will record your travel history at certain intervals (using a tricky algorithm) without eating too much battery life. It can share with your friends through Facebook. You can also enable/disable these settings on the app. It will help you to find the way back to your origin or help your friends/family if something bad happens to you. Just shake the app to see places you don't want to miss while you're on the go. All the reviews for these places and cool galleries will be just a touch away. The app notifies you of friends around you to call so you can meet them on your travels, with their faces visible and flying on the app's map.
The app also provides the weather forecast of certain places you are going to visit and plans your travel using the nearest transportation (railway, airport, bus, taxi etc.)
Using the Code
The code is on the way to app store. I don't know how much of the code should be described here. I am just taking a small part of the app to help illustrate it. The most important thing we need to deal with in the Metro/Ultra-book app is that we must deal with the several view modes (e.g.: landscape, portrait, snap view, etc.) In the snap view we need to handle the transition of the data by presenting the data between list and gridview in order to present a better UI view for our app tiles and list. This can be handled using VisualStateManager.
For example, if you create a new WinRT solution using the Grid or Split
Application Template you'll get all the code you need to create a layout-aware page that shows a different view in snap view. If you start
your project using the blank project template, you need to focus a
bit more work to get it working.
First you need to change the page to be a layout-aware page.
LayoutAwarePage is a class provided by the template and is in the Common
folder. (Update: In Visual Studio 2012 RC
LayoutAwarePage is no longer in the common folder for a blank page
project. You need to copy the file from the Grid or Split Application
template. The new version also depends on SuspensionManager, which is also in the
common folder of those project templates.)
In BlankPage.xaml.cs change:
public sealed partial class BlankPage : Page
to
public sealed partial class BlankPage : LayoutAwarePage
In BlankPage.xaml you need to change a few things: The main page tag now needs to be a LayoutAwarePage so change it from this:
<Page
x:Class="Application1.BlankPage"
xmlns="<a href="http: xmlns:x="<a href="http: xmlns:local="using:Application1"
xmlns:d="<a href="http: xmlns:mc="<a href="http: mc:Ignorable="d">
to
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="Application1.BlankPage"
xmlns="<a href="http: xmlns:x="<a href="http: xmlns:local="using:Application1"
xmlns:common="using:Application1.Common"
xmlns:d="<a href="http: xmlns:mc="<a href="http: mc:Ignorable="d">
Your page is now a layout-aware page, so all you need to do is add a
visual state manager that will control how things look in each different
view. You may choose to show or hide different elements based on the
view, or just change some sizes. Either way you must include all the elements
you want in the page, and set the size you want them to be in the
standard view. You hide them only if you only want them to be visible in the
snap view. Here is a simple example of a visual state manager:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<VisualState x:Name="FullScreenPortrait"/>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyListScroller" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGridScroller" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
In this example I have a list view which is initially hidden for snap
view and a grid view for my full screen view which I hide for the snap
view.
I hope you now understand the snap-view settings. Now we can move it to features like API call, and WebResponse parse stuff. The most important thing that my app deals with is GPS. The app makes use of the GPS of the device to get the user current location using the BingMap SDK.
Geolocator geoLocator = new Geolocator();
geoLocator.PositionChanged += geoLocator_PositionChanged;
In the position the changed event takes the GPS position data to make use of the app.
void geoLocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
if (null != geoLocator)
try
{
Utility.CurrentPosition = args.Position;
}
catch (Exception)
{
Utility.ShowMessage("No GPS signal or some timeout occured...").ShowAsync();
}
}Here Utility.CurrentPosition is the static variable type GeoLocator.
Remember to set this position to deal with all app related features.
In order to get forecast details in the app, we create a class like below:
public class WeatherInfoCurrent
{
public string observation_time { get; set; }
public string temp_C { get; set; }
public string temp_F { get; set; }
public string icon { get; set; }
public string condition { get; set; }
public string advice { get; set; }
}In order to get the weather details about any place, there is a web API call. Here is the syntax to make a web API call using HttpClient of the System.Net.Http namespace.
Here is the example to call the API, as well as parsing the API response to user defined class:
HttpClient http = new System.Net.Http.HttpClient();
HttpResponseMessage response = await
http.GetAsync("YourPrivateApiUrl=" +
Utility.CurrentPosition.Coordinate.Latitude.ToString() + "," +
Utility.CurrentPosition.Coordinate.Longitude.ToString() +
"&format=xml&num_of_days=2");
XElement XmlWeather = XElement.Parse(await response.Content.ReadAsStringAsync());
listBoxcntrl.ItemsSource = from weather in XmlWeather.Descendants("current_condition")
select new WeatherInfoCurrent
{
observation_time = weather.Element("observation_time").Value,
temp_C = weather.Element("temp_C").Value,
temp_F = weather.Element("temp_F").Value,
icon = weather.Element("weatherIconUrl").Value,
condition = weather.Element("weatherDesc").Value
};Here is the list box style which will be presented on the user level.
<ListBox Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxc">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="99" >
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Height="100" Width="100" Source="{Binding Path=icon}"></Image>
<TextBlock
Text="{Binding Path=observation_time}" Foreground="Orange"
Grid.Column="1" Margin="10,10,10,60"></TextBlock>
<TextBlock Grid.Column="1" Margin="10,40,300,30" Text="C: "></TextBlock>
<TextBlock Text="{Binding Path=temp_C}" Grid.Column="1" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" Margin="150,40,160,30" Text="F: "></TextBlock>
<TextBlock Text="{Binding Path=temp_F}" Grid.Column="1" Margin="215,40,90,30"></TextBlock>
<TextBlock Text="{Binding Path=condition}" Grid.Column="1" Margin="10,75,10,0"></TextBlock>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It will help you to handle the WebRequest and Response in our control to present the data in a very cool to users. I've implemented nice styles to present it in a Metro style look.
This is just a simple code snippet, but I hope I can present a detailed article about this with lots of improvisation in my grammar, code and presentation. This is merely for the App Innovation contest.
Thanks to Code-project for giving a such wonderful chance to write a little bit about my app. I am sure everyone will like my app and it will be a hit on the market.
Points of Interest
Coding in Windows 8 Both (Desktop & Metro style) from a Java background I had fun and I made it with the help of Google & forums. It was enjoyable to parse the XML/JSON present in the Metro look, but after running my app packages in my friend's Ultra-book, it was even more cool and we have played around with it. But it behaved badly in snap-view. After one hour of research we rectified the problem, so now my app will face any view mode challenge.
Windows 8 Apps Rockz..
History
This is just the beginning. More is coming with a lot more information so keep waiting and please support me.
Your comments are my teacher, so please comment about his article and help me to rectify any problems that you find here. Thank you so much!
