This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Fixed Layout App Project
Next up is the Fixed Layout App. The suggested use for this template is when we want to create a game. This app enables us to explicitly write to our code with specific widths and heights in mind. Then Windows scales the app up or down, as needed, based on the device it is on. This is especially beneficial when writing games that use the HTML5 canvas element.
We can generate this project the same way we did the Blank App project, except that we need to select the Fixed Layout App, of course. We can call the project FixedLayoutApp. The number of files and their locations are identical; the only difference is the actual content of the default.html and default.css files. The default.js file is the same as it was in the Blank App.
Besides simply referencing the Windows Library for JavaScript (WinJS), as the Blank App project template did, this template actually utilizes the library. We discuss the Windows Runtime (WinRT) and WinJS in detail during Hour 3. For now, we just touch on the pieces we need to see how these project templates function.
Inside the default.html file, we see the following content inside the body element:
<divdata-win-control="WinJS.UI.ViewBox"><divclass="fixedlayout"><p>Content goes here</p></div></div>
In the first line, the Windows Store JavaScript apps reference WinRT components by accessing them through WinJS. Windows Store apps all run on WinRT components. Microsoft provides some of these components, but as developers, we can create our own Windows Runtime components. Because we are using JavaScript, we rely on the JavaScript projection of the Windows Runtime that Microsoft provides. Through this projection, we are able to access the large number of WinRT APIs. In addition, we have access to the Windows Library for JavaScript (WinJS). WinJS adds features and controls beyond what the WinRT APIs offer.
To access the Windows Runtime APIs, we will use the Windows namespace (not to be confused with window in the Browser DOM objects). To access the Windows Library for JavaScript, we use the WinJS namespace.
The template utilizes the HTML5 custom data attribute (data-) to assign custom data to the div element. Microsoft has a few custom data attributes, each beginning with win-. In this case, the code is loading up a ViewBox control built in to WinJS. Inside the ViewBox control is a div element with the fixedlayout class. We discuss the ViewBox control during Hour 13.
The code in the css\default.css file of the Fixed Layout App is as follows:
html,body{height:100%;margin:0;padding:0;}body{-ms-flex-align:center;-ms-flex-direction:column;-ms-flex-pack:center;display:-ms-flexbox;}.fixedlayout{-ms-grid-columns:1fr;-ms-grid-rows:1fr;display:-ms-grid;height:768px;width:1024px;}
The html and body tags are styles that make the content fill the entire screen. Next inside the body CSS rule, we see that display has been set to -ms-flexbox. This rule centers the entire body. The actual fixedlayout class is to be displayed as an -ms-grid element with a single column and a single row. The 1fr simply means 1 fractional unit. In this case, the grid will have one column and one row that fill the entire width and height declared (1,024 × 768). We discuss grids in more detail during Hour 10, “Binding Data to Our Apps.”
To better understand how the styles are working together, let’s add the following CSS property anywhere inside the fixedlayout rule:
background-color:gray;
This styles our fixedlayout grid to gray, with the main app styled to the dark gray from the WinJS ui-dark.css style sheet. Now when we run the FixedLayout App with the one modification, we see the result in Figure 2.7.
)
Figure 2.7. The FixedLayout App always scales the gray div, regardless of the screen resolution.