Month: May 2013

Windows Store Apps Using HTML5 – UI Virtualization (Part 4 of 4)

Check out Part 4 of 4 in my blog series for Magenic featuring Windows Store Apps Using HTML5 – UI Virualization (Part 4 of 4). In this article, I introduce UI Virtualization using asynchronous data template functions. The performance of Windows Store Apps is important to consider, especially when handling large collections of data. When displaying the collection, performance can be degraded. In part three, the first steps were taken to alleviate the performance problems that can arise under heavy data usage. Part four will describe further performance improvements using UI virtualization.

Asynchronous data template functions enable substantial user experiences by keeping an app responsive and informative. This article’s implementation of UI virtualization relies on these concepts of asynchronous data template functions. The following sections will describe the main components of the implementation along with the differences from simple asynchronous data template functions. The first to be examined is the markup.

Read more here:

https://magenic.com/thinking/windows-store-apps-using-html5-asynchronous-data-template-functions-part-3-of-4

Windows Store Apps Using HTML5 – Asynchronous Data Template Functions (Part 3 of 4)

Check out Part 3 of 4 in my blog series for Magenic featuring Windows Store App Using HTML5 – Asynchronous Data Template Functions. In this article, I introduce asynchronous data template functions. The nature of Windows Store apps is asynchronous. To follow along with this asynchronous nature (as Windows Store app developers should), this article will detail asynchronous template functions.

Asynchronous template functions provide enhanced usability by allowing a user to interact with the app during information retrieval while keeping the user aware of incoming information. This is essential in providing the user with an optimal experience.

Read more here:

https://magenic.com/thinking/windows-store-apps-using-html5-asynchronous-data-template-functions-part-3-of-4

Rudimentary Way to Make a WinRT Component Object Bindable in WinJS

When projecting a WinRT Component object to WinJS, I kept running into an exception saying that the WinRT object could not be extended. This post will briefly describe how I got around this issue.

There are a few things known that helped come to this solution:

  • I didn’t need to worry about differences between one-way/two-way binding. All I had to do was present the object onto the screen.
  • Average JavaScript objects are bindable with WinJS
  • JavaScript objects are essentially associative arrays
  • If a member does not exist when referenced in an assignment operation, it is first created, then assigned.
  • I can essentially “clone” objects by iteratively copying members using array syntax.

This last item is exactly what I did! Let me elaborate: It is simple. At this point, we can’t bind to WinRT Objects therefore we need to make them bindable ourselves. The code snippet below shows this. 

function _makeBindable(obj) {
  var o = new Object();
  for (m in obj) {
    o[m] = obj[m];
  }
  return o;
}
var winrtObj = Projection.getWinRTObject();
// cannot bind winrtObj
var bindableWinRTObj = _makeBindable(winrtObj);
// use bindableWinRTObj for data-binding scenarios

Lets look at _makeBindable in a little more detail.

First, the function takes an object as a parameter. This object is the WinRT object that is causing issues. Then, a local variable is created assigned to a new Object.

The next part is very important – iterating over the members of the WinRT object. Using a for-in loop, cloning an object is quite easy. In this case, “m” represents the current member name as a string. Since JavaScript objects are essentially associative arrays, “m” can be used to access the current WinRT object’s member using array syntax. The member name is also used to assign to the local variable that was previously created. This effectively copied the current member from the WinRT object to the local variable.

Once all of the members are copied, the local variable is returned for use in data-binding scenarios.

Windows Store Apps Using HTML5 – Basic Data Template Functions (2 of 4)

Check out Part 2 of 4 in my blog series for Magenic featuring Windows Store App Using HTML5 – Basic Nested Data Templates. In this article, I introduce data template functions. The potential of data template functions easily stretches beyond added scalability. They give the developer complete control over the presentation of each data object. By taking template functions into account when designing Windows Store Apps, the app will have the potential of a very powerful data presentation layer.

Read more here:

https://magenic.com/thinking/windows-store-apps-using-html5-basic-data-template-functions

Debugging JavaScript with Web Inspector

Debugging JavaScript can be a nightmare… Unless of course, you know how to effectively use Web Inspector.

Below is a video from Tom Dale (co-author of the JavaScript MVC Framework Ember.js (http://emberjs.com/). He first details debugging JavaScript using Web Inspector.

Windows Store Apps Using HTML5 – Basic Nested Data Templates (Part 1 of 4)

Check out Part 1 of 4 in my blog series for Magenic featuring Windows Store App Using HTML5 – Basic Nested Data Templates. In this article, I introduce nested data templates where data templates have data templates! Like basic templates, there are four necessary components when working with nested templates: Template, Data Source, Binding, and Render Target. Building off basic templates, nested templates provide further flexibility by adding more levels of control over the presentation of data. Using the methods described will allow the potential for indefinite levels of nesting. This greatly increases the flexibility of data presentation. Please note that this article will only go as far as a single nested template.

Read more here:

https://magenic.com/thinking/windows-store-apps-using-html5-basic-nested-data-templates-part-1-of-4