Moving towards having an own website and blog

Hello to Everybody who visited, visits my blog. I'm in the process of moving my blog to blogs.grelution.com.
Please check there for any update, new posts.

Thank you!

Windows 8 Apps - Create objects from json file

As I have been looking around in Windows Store and checking out what kind of apps exist I saw that there a lot of apps which have their content installed on the machine and are not loading it from the web. So even if you don't have internet access you can fully use the app. I though to write a blog post about loading a file in a Windows 8 app and creating objects from the data stored in the file. I will focus on json data, because it's the most commonly used format.

I will present a very simple project (it will not have any change in the UI), but I will try to present a structural guideline how the data and objects can be logically grouped in a Windows 8 WinJS app.

You can find the sample project on github.

Let's say we have our zoo, and some animals were transferred from another zoo. All the data about the animals is sent via a zoo.json file, which looks like this:

This is the most simple set of information about an animal, Name, Age and the hours passed since the last feeding - probably this is the most important one :)
This zoo.json file is which we would like to import. So, what I have done was, created a new WinJS application from the Blank Template:

Create a new Blank WinJS project

The next step was, that I added a new JavaScript file, called Animal.js.

In this js file I created the object creation and parsing logic. This is the main file which this blog is about. I started the whole process with declaring a self executing function (if you don't know what are those, here are the first second and third hints which Google gave back when searching for JavaScript self executing functions). I added the "use strict" line, see my previous blog posts why this should be used.

After that comes the interesting part. I said, I will create a new object, inside the namespace Zoo, and that object contains one property, Animal. The Animal is defined as a WinJS.Class using the WinJS.Class.define() method. As it can be seen in the code, this method takes 3 arguments, the first one is a function, this serves as the constructor for the class. The second and the third parameters are objects. The object defined as the second parameter defines the methods which the newly created Animal objects will have:

As you can see, Visual Studio 2012 offers a very good intellisense support for JavaScript code. In the constructor I assigned some members to this(so later I can access them). After the definition of the constructor, I defined the methods which will help me in maintaining data integrity and encapsulation for this javascript object. There are defined get and set methods for each property. The isHungry member is treated separately, this has some logic behind the scenes. I said, that if more than 4 hours passed since the last feeding the animal is hungry. All this "complex" logic is implemented inside the setHoursSinceLastFeed() method.
In the third parameter of the WinJS.Class.define() method I specified 2 static methods:


The buildAnimal function is a simple one. All it does is, checks the model/data passed in as parameter, creates a new Animal object, tries to set it's values from the model passed to the function and returns a bindable object with the help of WinJS.Binding.as() method.

The loadZoo function contains all the code which this blog post is created for. Here is the code:

The purpose of this function is, to load the file with the json data and create Animal type objects from it. First thing to notice, the function starts with the return statement, this is important and I'll get back to it. The function receives a URL to the file which contains the data. The line Windows.Storage.StorageFile.getFileFromApplicationUriAsync() accesses the file asynchronously. The method getFileFromApplicationUriAsync() returns a promise, which is chained with the then() method. The .then() method can have 3 parameters (more specifically functions). The first one should be the one which is called when the async operation is finished. The second function parameter stands in the role of an error handler. It is not mandatory to specify this parameter. If you have multiple .then() methods chained, if an error occurs this is escalated till in one of the then() methods an error handler is passed to.
Another scenario is when the invoke chain ends with a .done(), this can also have an error handler as second parameter. If for some reason the error handler function is not specified at all and an error occurs the Windows 8 app will crash (of course if no other error handling mechanism is added).
The third parameter of the then() method serves as a progress indicator, more on this in a future post.
The getFileFromApplicationUriAsync() returns a promise, the result (file object) of this promise is passed to the function inside the then() method. This object is then accessed and the method WinJS.Storage.FileIO.readTextAsync() reads all the text from the file. This method on it's own returns another promise, and the text read from the file is passed to the function specified for the onCompleted parameter of the then() method. This text is then parsed with the JSON.parse() method. This creates objects from the text passed to it, we can say, that "deserializes" the data. Afterwards a new array is built for results. For each item returned by the JSON.parse() method a new Animal object is created using the buildAnimal static method.

That was all the "science"! We know have a new, fully functional JavaScript class, which implements the factory design pattern and has the feature to load it's own datatype from files and build up it's own objects.

There remained 2 things to mention. The first is related to the URL passed to the loadZoo function. The URL has to be created with Windows.Foundation.Uri() method, see the code below:



The parameter given to the Windows.Foundation.Uri() method is a little strange. I will not go in-depth why this has to be written like this, in a future post I will try to present this also.  You can figure out that the last / from the ms-appx:///zoo.json points to the root of the local project and zoo.json is the name of the processed file. So if you search for ms-appx:// on the web you'll get a lot of details.

Remember the loadZoo method started with a return statement? That was done like that, because all the operations done were executed asynchronously, so I had to be able to chain my logic to the async operations and had to execute it after all the other async logic was executed. So, when the Zoo.Animal.loadZoo(url) finished it's execution in the done() method I write the processed data to the Visual Studio console and it looks like this:

You can do anything with these objects, bind them to controls on UI, serve for contracts (Search or Share) and so on.

Thanks for reading the post, hope you enjoyed it.

CodeProject

Windows 8 App Development - JavaScript (Data)Binding

This is my fourth blog post related to Windows 8 Application Development with HTML5, CSS3 and JavaScript. You can find the previous ones on my blog's main page.

Last time I presented the HouseRental project, which is a very simple one, you can check the code on GitHub. In this project all data is simply written inside the default.html file, the only JS(JavaScript) code existed was generated by Visual Studio 2012 RC from the blank project template.

This time I will take a step further and improve the HouseRental application. I will do two things:

1. Store the data in JavaScript objects.
2. Use data-binding to display data from JavaScript objects to HTML elements.

You can take a look at the source code at GitHub. I've named the project HouseRental_Binding.

For web developers it is not clear what are you referring to when are talking about bindings. Most of them work a lot with jQuery and the first thing which comes in their minds is the bind() method from jQuery API and clearly we are not referring to that when talking about Windows 8 App Development. So we should be more precise, I will stick with data-binding expression from now-on. I mentioned jQuery, but I am pretty sure from those who are reading this post right now, have heard about knockout.js. I had the opportunity to use it in real projects. Having a more solid desktop application development background and some WPF knowledge I had no problem applying the MVVM pattern. Who has not heard about the MVVM design pattern, do not panic, if you heard and know about MVC you'll understand MVVM in a blink of an eye.

I'm writing about MVVM because the Windows 8 Application Development embraces this design pattern. If you are not familiar with it, in a short period of time you'll understand it's benefits.

The CSS story...

I have not made any change to the design of the application. The default.css file was not modified, it's exactly the same as it was in the HouseRental project.

The HTML5 story...

To apply the data-bindigs the default.html file has to be changed. I deleted the hard coded data, and added attributes to the HTML tags, here is an example:

 <!-- HOUSE 1 -->
        <div id="topLeftContainer" class="gridLeft">
            <h2 data-win-bind="innerText: Data.city1"></h2>
            <div class="contentContainer">
                <img data-win-bind="src: Data.imageSource1" />
                <div class="price">
                    <h4 data-win-bind="innerText: Data.price1"></h4>
                </div>
            </div>
        </div>

The data-win-bind attribute is set to a key : value pair. The key is a property of the HTML element, the value is a property from the data source of the container. In this case this will cause to bind the value from data source property Data.city1 / Data.imageSource1 / Data.price1 to the innerText / src / innerText property of the HTML tag. There is some additional information related to  data-win-bind on MSDN.

The JavaScript story...

Most of the changes occur in the JS code. A new JS file was added in the js folder of the application, data.js. The content can be seen below:

 1. /// <reference path="//Microsoft.WinJS.0.6/js/base.js" /> 
 2. /// <reference path="//Microsoft.WinJS.0.6/js/ui.js" /> 
 3.
 4. (function () {
 5.    "use strict";
 6.
 7.    WinJS.Namespace.define("ViewModel.Data", {
 8.        price1: "",
 9.        price2: "",
10.        price3: "",
11.        price4: "",
12.
13.        imageSource1: "",
14.        imageSource2: "",
15.        imageSource3: "",
16.        imageSource4: "",
17.
18.        city1: "",
19.        city2: "",
20.        city3: "",
21.        city4: ""
22.    });
23.
24.    //init prices
25.    ViewModel.Data.price1 = "650.000 $";
26.    ViewModel.Data.price2 = "890.000 $";
27.    ViewModel.Data.price3 = "380.000 $";
28.    ViewModel.Data.price4 = "740.000 $";
29.
30.    //init image sources
31.    ViewModel.Data.imageSource1 = "/images/house1.jpg";
32.    ViewModel.Data.imageSource2 = "/images/house2.jpg";
33.    ViewModel.Data.imageSource3 = "/images/house3.jpg";
34.    ViewModel.Data.imageSource4 = "/images/house4.jpg";
35.
36.    //init the cities
37.    ViewModel.Data.city1 = "New York";
38.    ViewModel.Data.city2 = "Los Angeles";
39.    ViewModel.Data.city3 = "Boston";
40.    ViewModel.Data.city4 = "San Francisco";
41.
42. })();

The first two lines of  the file with the /// <reference ... />  cause the "import" of the two named files. These references are also used by the Visual Studio's IntelliSense. Who have ever worked with  the Cassette.Web project (it can be downloaded from NuGet package gallery) for those these kind of reference declarations are familiar (The idea behind the Cassette.Web project is, to include only the required .css and .js files into a webpage. It helps you build up assets and bundles which can be referenced afterwards from server side code in ASP.NET MVC projects.  This tool helps to create a cleaner and faster website).

After the references have been declared comes a self executing JavaScript function. I wrote about the "use strict" declaration in one of my previous blog post, so I will not detail this, you can read more about it on MSDN.

The line WinJS.Namespace.define("ViewModel.Data", { causes to define a new object (the second parameter of the define function) which will be assigned to the namespace written in the first parameter. In the current example this means, that after the 

WinJS.Namespace.define("ViewModel.Data", {

...

...

...

});

line of code is executed a new object will be available which can be accessed through the ViewModel.Data property as it can be seen in the init prices, init image sources and init the cities code region.

To view from a higher level, all I did in this data.js file was, to declare in the ViewModel.Data namespace a new object with 12 public properties initialized with empty strings. After the declaration I assign new values to the public properties.

So, the default.html file was changed to have bindings towards javascript objects, the javascript objects were created but these two have to be connected, otherwise it won't work. To connect the HTML bindings and the JS objects some changes has to be made in the default.js file.

The only thing changed is that a new function was added and this is invoked when the application is launched.

37. function init() {
38.        WinJS.Binding.processAll(document.body, ViewModel);
39.
40.    }

The init() function, invokes the processAll(...) method with 2 parameters, the first one refers to the HTML elements where the binding should occur, the second one is the object (dataContext) which stores the data. 

The  init() function is invoked in the handler of onactivated:

10. app.onactivated = function (args) {
11.        if (args.detail.kind === activation.ActivationKind.launch) {
12.            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
13.                // TODO: This application has been newly launched. Initialize
14.                // your application here.
15.
16.                init();
17.
18.            } else {
19.                // TODO: This application has been reactivated from suspension.
20.                // Restore application state here.
21.            }
22.            args.setPromise(WinJS.UI.processAll());
23.        }
24.    };

When the application is launched, the onactivated event occurs and the handler assigned to this event is invoked; the init() function is invoked also, this calls the processAll() method of Bindings namespace and this, together with the HTML attributes (data-win-bind) will resolve the binding between JS objects and HTML tags.

In the next posts I will present two way bindings, observable collections and templates.

CodeProject

Windows 8 App Development – Follow Up

After the first two blog posts, lets look at the basics of Windows 8 Application Development with JavaScript and HTML from a more technical point of view.

To summarize, for the development I am using Windows 8 Release Preview, with Visual Studio 2012 RC. All these are installed on a virtual machine(VM), using VirtualBox. The VM has 2 CPU cores assigned (from the existing 4) and 2 GB of memory. Due to the 5400 RPM hard drive which I have in my notebook, the VM does not have the speed of a rocket, but for learning purpose it is OK.

I created 2 Windows 8 Applications, in this post only one is presented. Here is a little overview of the projects along with their GitHub links:

• HouseRental (access to GitHub repository) – This application was created from a Blank Windows 8 app template. It only contains static/hard coded data and HTML5/CSS3 code. The only JavaScript (from now on JS) code that appears is the minimum, which is necessary for the Windows 8 app; this JS code is generated by the project template. 
  
  
• HouseRental_Binding (access to GitHub repository) – This Win 8 app is an improved version of the first HouseRental project. The concept of Binding is introduced and the data is stored in JS. The CSS structure was not modified at all, the HTML code has changed, the static data was removed from the main page and bindings were added.

The HouseRental project

The project is a very simple one, which creates the following app:

In this post I will present this application, it is a very simple one. I have never been a good designer, I don’t really have the talent for it, luckily there are very good designers in the world who can create astonishing designs for the applications depending on the customers need.

In my previous blog post I presented the business case for the project, here is a reminder; I am an estate agent who knows some programming and I definitively need a Windows 8 app to increase my market share with.

In the current situation I have 4 houses to sell, so I thought that I will create an application with a single page, which has 4 parts/regions and in each of the regions I put a picture of the house, the name of the city where this is, and the price of the house.

The CSS3 story…

As the idea of these series of blog posts was to present Windows 8 application development with JS and HTML5, there is no way to leave the CSS out of the list. Although the W3C is working from a long time ago on HTML5 and CSS3 drafts these are not finalized yet. Besides learning the development of Windows 8 apps, I am learning in parallel, the goodies of HTML5 and CSS3.

In CSS3 there will be support for grid layout. The problem is, that the specifications are not finished 100%. If you look at the W3C website you’ll see that the guys from Microsoft are working on the grid layout’s specs. I think this CSS3 feature will be an embraced one. This new layout will give possibility to create sophisticated designs without floating elements and JS code which helps the adoption of design in case of browser window resize or other cases. Microsoft did implement a temporary version, for supporting Windows 8 App development.

To use these style properties implemented by Microsoft the –ms prefix has to be added to each property. For example in CSS3 draft to use grid layout you would write:

#grid { 

     display: grid;

}

but for using the version implemented by Microsoft in their Windows 8 apps you should write:

#grid { 
     display: –ms-grid;

}

To use the grid layout you have to specify the number and size of the rows and columns of the grid. Besides these there has to be a possibility to specify which element goes to which cell from the grid; this is achieved using the style grid-row and grid-column properties. 

NOTE: As these CSS style elements are still drafts, Microsoft also added the –ms prefix to them, so instead of grid-row, there is –ms-grid-row, and instead of grid-column there is –ms-grid-row.

To create the 4 regions(city + picture + price) seen on the image above, I used the new grid layout feature from CSS3. In the default.css file I created a new style where the grid layout is defined as seen in the code below:

#mainContent {
    display: -ms-grid;
    -ms-grid-rows: 1fr 1fr;
    -ms-grid-columns: 60% 60%;
    height: 100%;
    overflow: scroll;
}

The display property is set to -ms-grid, this creates the grid layout, with the help of –ms-grid-rows I define 2 rows each having a height of one Fractional Value. With –ms-grid-columns I define 2 columns, each with a 60% width. This causes that the application has an overall width of 120% instead of 100%. This helps the app to fit in the use and feel of Windows 8 apps, a part of the content is visible, but another part of it overflows and the user can swipe to fully view it .

Afterwards I created 4 elements, one for each cell, these are called #topLeftContainer, #bottomLeftContainer, #topRightContainer and #bottomRightContainer; each of these 4 styles have the –ms-grid-row and ms-grid-column properties set.
There is one extra style, I have created it for displaying the price of the houses in a round cornered rectangle, to resolve this I used the following style:

.contentContainer {

    position:relative;

}
.contentContainer .price {
    background-color:#79a1be;
    border-radius:10px;
    bottom:12px;
    right:125px;
    position: absolute;
    padding:3px;
}

I highlighted the border-radius property. This is another one from CSS3 features.

The HTML5 story…

After building the styles and defining the grids, lets see the default.html file. The file starts with the DOCTYPE definition for HTML5.

In the head section of the file, the Windows 8 app default style file (ui-dark.css) is referenced along with the JS files needed from WinJS framework.

NOTE: The best part of Windows 8 App development is, that you can see the referenced source files. This means that you can open ui-dark.css or even the Microsoft.WinJS.1.0.RC/js/base.js file. You can access these by simply double clicking the Windows Library for JavaScript 1.0 RC from the project References (see the image below – red rectangle)

After the obligatory references, the default.css and default.js file are linked. I wrote about the    default.js file in the last blog post, I will not give further explanations because no changes were made to it.

In the body section of the page, a div element is defined( <div id="mainContent"> ), the grid styling is applied to this. Inside it, the 4 elements are defined for the 4 images, city names and   prices. All the data is hard coded inside the HTML, there is absolutely nothing created dynamically. Each of the 4 elements have a heading with the city name (the default styling of headings, paragraphs, images..etc are defined in the ui-dark.css and ui-light.css files). Besides the     heading another container element is added, this stores the image element and the heading    which displays the price.

There is a really great HTML5 tutorial on Channel9, it is presented by Bob Tabor from LearnVisualStudio. It is a great tutorial, also containing a lot of explanation for beginners; besides  the presentation of HTML5 Bob also tries to present the idea why HTML5 was created, why dothe HTML tags have semantic meanings, how it is optimal to format the content of a website so the information presented on it can be reused, scanned by software focusing on semantic computing.

The overall HTML code and design is very simple, I’ve done this with intention. I wanted to create a very simple app, which can be improved afterwards, which I can build on for further learning.You can check out the github repos which I linked in above, any idea, comment is welcomed.

The next post will present the HouseRental_Binding project and will focus on the bindings       inside Windows 8 JavaScript and HTML5 applications.

Disclaimer: 

1. The pictures used in the application were downloaded from the internet, by simply typing the work house in Microsoft’s search engine: BING, these images are in the first 100 results, I downloaded the 4 pictures which I liked the most. 

2. The data presented in the application is the born of my imagination, the data does not present real estates and prices.

CodeProject