• Consuming that REST WebAPI from Windows 8 HTML5

    by  • 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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    Then we apply the fonts to our result div using yet more CSS magic.

    image

    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.

    image

    You can joyously download the source here: https://github.com/brianhprince/StringReverserControlPanel.git

    About

    Brian H. Prince is the Chief Technical Cloud Evangelist for Microsoft, based in the US. He gets super excited whenever he talks about technology, especially cloud computing, patterns, and practices. His job is to help customers strategically leverage technology, and help them bring their architecture to a super level. In a past life Brian was a part of super startups, super marketing firms, and super consulting firms. Much of his super architecture background includes building super scalable applications, application integration, and award winning web applications. All of them were super. Further, he is a co-founder of the non-profit organization CodeMash (www.codemash.org). He speaks at various international technology conferences. He only wishes his job didn’t require him to say ‘super’ so much. Brian is the co-author of “Azure in Action”, published by Manning Press. Brian holds a Bachelor of Arts degree in Computer Science and Physics from Capital University, Columbus, Ohio. He is also a zealous gamer. For example, he is a huge fan of Fallout 3, Portal, and pretty much every other game he plays.