Windows 8 App Development – Follow Up

After the first two blog posts, let's 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 purposes, 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 the application to have 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, let's 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) <pp>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 explanation 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 do the 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 ideas, comments are welcome.The next post will present the HouseRental_Binding project and will focus on the bindings inside Windows 8 JavaScript and HTML5 applications.

Disclaimers

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 born of my imagination, the data does not present real estates and prices.