Friday, March 15, 2013

Simple Windows 8 apps using JavaScript and Web API


Hi friends,

Day by day  micro soft introduced new technologies. one of the new technologies is windows 8 apps. In this blog we discussed about
how to create Windows Store apps using JavaScript and Web API

Step 1

Let's create a new app named "Love Calculator". Here's how:
From the File menu select New Project. Further steps shown in bellow image


















In this project we choose blank template then click OK button we get a new project .
and we need to another one  Web API project . So we would create a new Web API project, those project are  displays it in the Solution Explorer.


























Step 2:Modify the Web API

Let's we open the Web API and  create a "LoveCal" class. This class contains simple algorithm to calculate a love percentage.


















Then we have to call the love algorithm  method in to "Values Controller"



















We finished the API related codes then we move to windows app project.


Step 3:Modify the Design page

 When we created our new project, Visual Studio created a default.html file for us.We run the app it displays the content of its start page.
Let's add some new content to our default.html file. Replace the existing contents then we add a new two text boxes one is male name text box another one is female name text box and we add a button that name is check your love.






















Step 4:Modify the JavaScript page

When we created our new project, Visual Studio created a /js/default.js  file for us.This file contains code for handling your app's life cycle, Let's we modify the default.js and add our own code.
We need to write one ajax method "loveCal()" to call Web API . Then we need to  register the event handler with the button. How to register an event handler? just we used addEventListener method it is do the  register an event handler. A good place to register the event handler is when our app is activated.
Fortunately, Visual Studio generated some code for us in our default.js file that handles our app's activation
the app.onactivated event handler. Let's take a look at this code.






















Step 4: Running the app 

We finished the coding sections.Let's we choose the running environment










and run the project finally we got a new Love calculator app.




















I Am a also newbie to Windows 8 apps weather anything wrong in my blog extremely sorry my dear friends

Thank you
Abiruban


No comments:

Post a Comment