Document directory
- Create a column-based Metro app
This is the last tutorial in the series "Build your first Metro application with JavaScript, with the help of the metro style and split template provided by Microsoft Visual Studio 11 express for Windows Developer Preview, how to Use the CSS style to make your program more compatible with windows look & feel.
Preface
This article is the third article about using JavaScript to build your first Metro application (on windows8). If you have not read the first and second articles, read them immediately. If you are familiar with HTML5, css3, and JavaScript, it is best to understand them without affecting your understanding of the subject.
Implement css3 grid layout
Microsoft has already achieved a considerable degree of web standards: HTML5, ecmascript Fifth Edition of the language specification and css3. One of the Standards in css3 is css3grid layout (grid layout ). With this technology, you can easily adjust the rows and columns of a table on the HTML page. In this example, the listview is in this layout. Listview can fill in all spaces, but our current requirement is to make the listview occupy half of the screen, put it on the left, and the right is the content area. Click listview to display details in the content area.
As shown in, we want two rows of grid, one row for the title, and one row for the RSS data. The RSS data area is split into two columns, one is the listview on the left and the other is the content. Let's take a look at how to do this. We need to draw a place on the right and place the template:
[HTML]View plaincopy
- <Body>
- <H1> the old New thing
- <Div id = "downloadstatus"> </div>
- <Div id = "template" data-win-control = "winjs. Binding. template">
- <Div data-win-bind = "innertext: Title" class = "posttitle"> </div>
- <Div data-win-bind = "innertext: Date" class = "postdate"> </div>
- </Div>
- <Div id = "posts" data-win-control = "winjs. UI. listview"
- Data-win-Options = "{itemrenderer: Template, layout: {type: winjs. UI. listlayout },
- Selectionmode: 'Single ', onselectionchanged: selectionchanged} ">
- </Div>
- <Div id = "contenttemplate" data-win-control = "winjs. Binding. template">
- <Div data-win-bind = "innertext: Title" class = "posttitle"> </div>
- <Div data-win-bind = "innertext: Date" class = "postdate"> </div>
- <Div data-win-bind = "innerhtml: content" class = "postcontent"> </div>
- </Div>
- <Div id = "content"> </div>
- </Body>
Based on the record selected by the user on the left listview, the content is displayed in the right div, And the template is used to define the appearance. We also need to set listview to the "single select" selection mode (the default value is none ). Once the content of the selected area changes, the event handler will be triggered. The processor itself is relatively simple:
[JavaScript]View plaincopy
- Function selectionchanged (e ){
- Content. innerhtml = "";
- VaR selection = posts. wincontrol. selection;
- If (selection. Length ){
- VaR post = postitems [Selection [0]. Begin];
- VaR contenttemplate = winjs. UI. getcontrol (document. getelementbyid ("contenttemplate "));
- Contenttemplate. Render (post). Then (function (element ){
- Content. appendchild (element );
- });
- }
- }
-
When the user clicks the content of an item on the listview, this means that either the selected content or the content is canceled (reversed ). Either event triggers the event processor. Specifically, first clear the content on the current right side, and then check the selection area. If there is a selection area, we extract the post records from the RSS data, then fill in the record data in the content template, as we did before. With rendered HTML elements, you can simply put the HTML elements on our content Div.
In addition to style adjustment, grid layout has almost finished its work.
[CSS]View plaincopy
- Body {
- Background-color: # FFF;
- Color: #000;
- Font-family: verdana;
- Padding: 8pt;
- Display:-MS-grid;
- -MS-grid-rows: auto 1fr;
- -MS-grid-columns: 1fr 1fr;
- }
- ...
- # Posts {
- Width: 99%;
- Height: 100%;
- Overflow: auto;
- -MS-grid-row: 2;
- -MS-grid-column: 1;
- }
- ...
- # Content {
- Width: 95%;
- Height: 100%;
- Overflow-Y: auto;
- Margin-Right: 64px;
- -MS-grid-row: 2;
- -MS-grid-column: 2;
- }
In the body style, we define the entire page as the gridl ayout mode. "-MS-grid-rows: auto1fr;" is divided into two rows, the adaptive width of one row (the maximum width is the width), and the remaining space is occupied by the other row. "-MS-grid-columns: 1fr1fr;" is divided into two columns on the page, both columns are equal. By default, all content is in the first row and column (the rows and columns are counted from 1, not 0 ). In other words, because the first row is used to place titles without changes (if we want to handle overflow, we can also span two columns across two columns ), the Post's listview is moved to the second row and the first column; The content area is moved to the second row and the second column. So the entire grid layout can be filled up.
Create a column-based Metro app
So far, our RSS reader program has jumped onto the paper. In fact, this style is so common that it is summarized into a specific project template called"Split Application". If you create a new project of this type and execute it, you will see that we have created a more beautiful version, although there is no real data. When you click the project on the left, you will see the data on the right, as we did in our simple RSS reader program:
Next step
-
Congratulations! You have built your first metro program. In the end, we suggest:
- Find some windows Developer Preview sample gallery sample programs
- Explore the reference section document of the metro style app.
- You can explore more resources of the metro app in the resource center. If you encounter problems, you can also use related resources to solve the problems.
Original article address