Consuming that REST WebAPI from Windows 8 HTML5
by Brian H. Prince • June 29, 2012 • USCloud, Windows Azure
I have started working with Windows 8 apps a little bit, and it has been a lot of fun. Of course you can write the apps in XAML (of which I know little), C++ (I worked a lot in C++ years and years ago and hate the OOP model as it’s flawed in my opinion), and HTML5.
Since I know HTML5 the most at the moment I thought I would throw something together that consumed the REST service I deployed to Windows Azure Web Sites.
To get started, open up Visual Studio 2012, create a new project using the JavaScript…Windows Metro Style…Blank App. Of course give it a name to it feels wanted.
This will give a mostly empty project to start from. I always use JQuery when using JavaScript, and Windows 8 is no exception.
JQuery is the ketchup that makes JavaScript taste good.
Go ahead and download it, copy it to the JS folder, and then add a script tag to your default.html page.
Next, since we are writing a String Reversing application, we need a way for the user to enter the string they want reversed, a button, and place to put the results. This is the whole <body> of the page.
Notice I am using the new <button> tag instead of ‘ye old <input> tag. It’s just more modern.
Now we have to wire up the button to call the REST service I deployed, and then display that to the user. To do this we want to create a function that responds to a click on the button. This function will call the server using a Promise (think of it as a service call with asynchronous-ity built in), and the write it to the resultString div.
The $(document).ready(function () line executes this startup function once the app/page is completely loaded.
The next line, $(“#btnReverse”).click(function() is setting up an anonymous function, tied to the click event of the button. This function won’t fire on startup, it is just here so that it can be wired up to the event handler during startup.
Then we build out our serviceURL, where our REST service can be found. I have hardcoded the root of the URL here, and I append to it the string to be reversed. This makes the complete REST call.
Now we use WinJS.xhr to make the REST call. We tell it the service URL we want to call, and the type of response we want back (JSON in this case). Since this will execute asynchronously, we need to give it a function to call when it is completed. This we are also providing inline (you can see it declared on the .done line).
This done function will build the string to show to the user (it strips out the quotes of the JSON response for example).
Reversing with Style
You could run it right now, but that wouldn’t be any fun. So I found a cool font at http://www.fontsquirrel.com/. The font comes in a kit with some sample HTML to show you how to use it, and the CSS you need to add it to your project. I picked the Cabin Sketch font. I created a folder called “fonts’”, dumped the important parts of the font kit in there, and then added some style.
First we need to setup the fonts so they can be used.
Then we apply the fonts to our result div using yet more CSS magic.
We assign the font using the font-family attribute, and then set the size to stupid big. I also set the div to take the width of the screen, and to center it’s contents.
That is all you need to build this simple string reverse client for our string reverser service. Feel free to start a company with this and retire to a private island in the Pacific.
Here is a screen shot of what we built.
You can joyously download the source here: https://github.com/brianhprince/StringReverserControlPanel.git
