Caffeinated Geek

Honestly! The dog ate the tax return...
posts - 2 , comments - 0 , trackbacks - 0

Friday, September 28, 2012

Windows Store now open to ALL developers

A little late, but it should be announced here too...

Today’s an especially great day to be a developer. We’re very excited to announce the last significant milestone in the rollout of the Windows Store before the general availability of Windows 8 on October 26. The Store is now open for app submissions from all developers – individuals and companies – in our supported markets, and we’ve added 82 more app submission markets! Now, developers from 120 markets can publish Windows Store apps. Ted Dworkin, Partner Program Manager for the Store, authored this post.



About two weeks ago the Windows Store was opened and with the upcoming general availability of Windows 8 in October, it seems that it was good timing.

In addition to the store being opened, Microsoft also announced that the MSDN, BizSpark and DreamSpark will get a 1-year Windows Store developer account.

That's a different tact than what we saw for the Windows Phone 7, where we didn't get that subscription included.

We're already seeing new apps showing up faster and faster, so with the addition of 86 more markets we're only going to see more apps than ever available.

Since i'm now back on a Windows 8 platform (was out for about a month) I'm going to start blogging more content around the Windows 8 developer experience.

Next stop for me...get my hands on a Windows 8 surface device as quickly as possible :)

Keep coding!


Posted On Friday, September 28, 2012 6:56 AM | Comments (0) |

Wednesday, August 22, 2012

Windows 8–Getting started with ListView binding

Most of the tutorials and quickstart articles on binding data to a list on the interweb at the moment, shows how to bind the data from a static array of data.
I assume that this does have some actual benefits, however to be honest, if I'm using static data already, why bind it? Anyways, that’s neither here nor there..

   1:  var someData = [     
   2:          { someKey: "key1", someTitle: "title1", somethingElse: "somethingElse1"},     
   3:          { someKey: "key2", someTitle: "title2", somethingElse: "somethingElse2"},     
   4:          { someKey: "key3", someTitle: "title3", somethingElse: "somethingElse4"},     
   5:          { someKey: "key4", someTitle: "title4", somethingElse: "somethingElse5"},     
   6:          { someKey: "key5", someTitle: "title5", somethingElse: "somethingElse6"}
   7:  ];

What i want to show quickly is how to retrieve data from an external source (I'll use Scott Guthrie's blog as an example here and consume the RSS feed, the principle is the same for pretty much any other type of structured data) and bind it to a list.

First the setup..

Create a new project

We’re all set, lets get cracking and start up Visual Studio 2012 RC. As a side note, I’ve grown really fond of VS2012 to be honest. It’s fast and functional where I need it to be.

So, CTRL+SHIFT+N…(that’s the short cut for a new project btw).

Scroll down and expand the “JavaScript” templates and select “Windows Store” – yes, i know, it’s no longer called Metro…Select a blank application…


Give it a name, location and solution name…I’m such a separatist so I’ve gotten into the habit of storing my projects in a SkyDrive synched folder…why? well because I hate loosing work when a HD dies and/or I forget its there and deletes it.


CTRL+F5..lets just see if it’ll run to start with. Good to go after that.

Setup the binding controls

First things first, lets look at our template. Open up the default.html file and lets take a look at it’s meagre contents…

Nothing interesting in there for now, except for the added javascript and stylesheet references.

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8" />
   5:      <title>ListViewBinding</title>
   7:      <!-- WinJS references -->
   8:      <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
   9:      <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
  10:      <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
  12:      <!-- ListViewBinding references -->
  13:      <link href="/css/default.css" rel="stylesheet" />
  14:      <script src="/js/default.js"></script>
  15:  </head>
  16:  <body>
  17:      <p>Content goes here</p>
  18:  </body>
  19:  </html>

Leave those there as they’ll help building your Metro…ahem…“Windows Store” application.

Remove the <p>Content goes here</p> paragraph and include the following..

   1:     <!-- Binding template -->
   2:       <div data-win-control="WinJS.Binding.Template">        
   3:          <div>
   4:              <h4 data-win-bind="textContent: title"></h4>                     
   5:          </div>
   6:      </div>

That's our template for each item we display in the list. The key is the choice of control...WinJS.Binding.Template.

Next step for us is to create the ListView…here the choice of control will be the WinJS.UI.ListView which is shown below.

   1:      <!-- Binding Control -->
   2:      <section aria-label="Main content" role="main">
   3:          <div id="articlelist" data-win-control="WinJS.UI.ListView"></div>
   4:      </section>

We now have the two most important aspects ready – the Binding Template and the UI ListView control. All’s very simple so far.

As mentioned earlier, the static list binding scenarios are pretty useless, except for giving you some good data to start with. What we’ll do here is to grab information from a RSS feed (very common and quite easily done) – this could of course be anything.

Get the data

So, create a new JavaScript file – call it FeedData.js – CTRL+SHIFT+A (shortcut for add new item).

Here’s where the meat of the work is done.

   1:  (function () {
   2:      "use strict";
   4:      var feed = "";
   6:      function GetArticleList() {
   7:          WinJS.xhr({ url: feed }).then(function (rss) {
   8:              var items = rss.responseXML.querySelectorAll("item");
  10:              for (var i = 0; i < items.length; i++) {
  11:                  var article = {};
  12:                  article.title = items[i].querySelector("title").textContent;
  14:                  articleList.push({ title: article.title });
  15:              }
  16:          })
  17:      }; 
  19:      var articleList = new WinJS.Binding.List();
  20:      var listItems = { ItemList: articleList };
  22:      WinJS.Namespace.define("ArticleData", {
  23:          Items: articleList,
  24:          ArticleList: GetArticleList,        
  25:      });
  27:  })();

The areas to take note of here are the feed variable that’s declared – this contains the target URL for Scott Guthrie’s RSS feed.

Secondly, the GetArticletList() function. We’re using WinJS.xhr to extract the RSS feed and simply extract the content from the XML in the feed itself, then push that content into the articleList.

The important aspects here is the “title” property which we are assigning.

   1:  articleList.push({ title: article.title });

this is the same “title” property that we’re specifying in our Binding Template.

   1:  <div>
   2:       <h4 data-win-bind="textContent: title"></h4>                     
   3:  </div>

Bind the data

Finally, we need to bind the data. This is done in two steps – assign the item datasource to the ListView and include a few lines of JavaScript in the default.js file.

Here’s how we assign the datasource to the ListView. Go back into the default.html file and locate the WinJS.UI.ListView control and add the following to it.

   1:  data-win-options="{ itemDataSource: ArticleData.Items.dataSource, selectionMode: 'none'}"

This specifies the datasource as ArticleData.Items.dataSource and that’s the WinJS.Binding.List we defined in the FeedData.js file.

Now open up the default.js and add the following JavaScript…

   1:  (function () {
   2:      "use strict";
   4:      WinJS.UI.Pages.define("/default.html", {
   5:          initialiseLayout: function (listView, viewState) {
   6:              ArticleData.ArticleList();
   7:              listView.layout = new WinJS.UI.GridLayout();
   9:          },
  10:          itemInvoked: function (args) {
  12:          },
  13:          ready: function (element, options) {
  14:              var listview = element.querySelector(".articlelist").winControl;
  15:              listview.itemTemplate = element.querySelector(".articletemplate");
  17:              this.initialiseLayout(listview, null);
  18:              WinJS.UI.processAll();
  19:          }
  20:      });
  22:  })();

Do remember to always call processAll() after all your binding is done…

That’s it…Fairly simple really

Posted On Wednesday, August 22, 2012 1:03 AM | Comments (0) |

Powered by: