Wednesday, 8 October 2014

Developing windows phone 8.x apps - Jumpstart

Hello everyone out there. This post is how to develop windows phone 8.x apps be it for Windows phone 8.0 or 8.1 the overall process is more or less similar. The post is divided into parts and it will clearly explain about all the steps that are required. In case of any problem encountered at any steps, mail me by clicking here.

Let's talk about some pre-requisites before getting into the developing part. To talk about the pre-requisites, you don't need to have a hi-fi programming knowledge. All you need is Microsoft Visual Studio 2012 or later and some interest of learning something new with a good knowledge of logical reasoning. Microsoft visual studio can be downloaded from msdn network by Microsoft. Note that you need to have a developer account for publishing your developed apps. For that the best way is to go via dreamspark. A bing or a google search might help you all.
For errors or problems faced or encountered during the installation of Visual studio, always feel free to comment here or drop a mail here.

Once you have downloaded Microsoft Visual Studio, open it by clicking on it.
Figure 1: Start screen of Microsoft Visual Studio 2013
  Once opened, under start menu, click on New Project.

Figure 2: Start page of  Visual Studio. Enter the name of your app here.

Once you click on New Project, a new dialog box will open. After opening, Expand: Visual c#--Store apps-- Windows phone apps. Then browse down to Blank app(Windows phone silverlight). Give a name of your app. Well for starters I used a simple hello world application. Now click on ok. 

UI part (xaml code)
Now, after you have clicked on ok, the page will open and the tab MainPage.xaml will open. Here in this page we will design the UI for our app. Now as far as this post is concerned, we will make a simple hello world application. The app will consist of a single page and will be made by incorporating a textbox, a textblock and a button. Each of these controls are available under the toolbox tab of your Visual Studio.
Figure 3: MainPage.xaml In this page, you have to add the UI elements.
In Figure 3, notice that some code is already present. The code is in xaml and it's the base code for your UI. On the extreme left side, notice that a Toolbox tab exists. Click on it to add the UI components. The UI components will include
1: A textBlock
2: A textBox
3: A button
Each of the components will have their own properties under the properties tab located on the bottom right corner of the screen as shown in figure 3. Add those components and edit them accordingly. Also notice that two TextBlocks already exists. According to Windows Phone design guidelines, the upper textblock will consists of the name of your app (in upper case) and the lower one will consists of the name of the page (in lower case). Edit them accordingly from xaml code. After editing and adding the components, you will get the screen somewhat similar to the figure 4.
Figure 4: Layout after the adding of components.
Now let's change the default texts and write them here in accordance to our wish.

Figure 5: Final layout.
Well we are not yet doe with the UI, The button acts as an event. When an user will click on the button, the text in the textbox will be displayed in the textblock. In order to achieve that, we need to create an event handler. To create an event handler, double click on Go and you will automatically be navigated to MainPage.xaml.cs page. In this page you will write the c# code for your app. Another task that you have to do in MainPage.xaml page is to assign names to the components. You can assign names by seleting the component and browsing to the properties tab.


Once you double click on Go you will automatically be navigated to MainPage.xaml.cs

Figure 6: MainPage.xaml.cs
Now under the method void Button_Click(object sender, RoutedEventArgs e), we will add the following code to make our app work.

String msg = ip.Text;
op.Text = msg;

A simple two line code is all what you need to run this app. In the above code, we are storing the text available in the textBox in a temporary string type variable named msg. Then we are storing/Displaying that string in the TextBlock. My naming for the textbox is ip and for the the textblock is op.
ip and op are objects and text is the property. The text property of the object is accessed by '.' (dot) operator.

Now your app is ready for testing

Once you developed an app, you need to test it. When you will be installing visual studio, an emulator is also installed. The emulator is a virtual device that runs on hyperv environment. Now in case of my PC, it doesn't supports hyperv. So I have deployed my apps on a Nokia Lumia 520. For selecting your method of deployment, see figure 7's highlighted area. You can access the emulator from the drop down menu that appears after clicking on the arrow on it. To deploy your app, press F5 and then the app will run. As already mentioned, I don't have hyperv so the scrrenshot of the working app is shown in figure 8.
Figure 7: Deploying Windows phone apps
For deploying your app in the device, your phone must be developer unlocked. 

Figure 8.1: Status before clicking on Go
Figure 8.2: Status after clicking on Go

Now as you have seen that in figure 8.1, the textblock shows the previous message. In Figure 8.2, the textblock shows the message written in the textbox. 

Developing Windows phone apps is not a herculean task. You must have an idea and some skills to jumpstart your developing. Now for publishing your apps, you need to have a developer account in Windows store. If you are a student, then dreamspark will help you alot. This post was only for begineers. Channel9 and MSDN provides sufficient tutorials for developing Windows phone apps.