Home > Developer > JavaScript

Use JavaScript to build your first Metro application (onwindows 8) (3)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
ArticleDirectory
    • Create a column-based Metro app

Http://blog.csdn.net/zhangxin09/article/details/6793593

 

Read by 285 Comment (0) Favorites Report

Translated by Chris sells: sp42

This is your first Metro application built with JavaScript.ProgramThe last part of the series will show you how to use 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.

Implementation 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:

View plain
  2. <Body>
  4. <H1>The old new thing</H1>
  6. <Div ID="Downloadstatus"></Div>
  8. <Div ID="Template" Data-win-control="Winjs. Binding. template">
  10. Div data-win-bind = "innertext: title " class = " posttitle " Div
  12. <Div Data-win-bind="Innertext: Date" Class="Postdate"></Div>
  14. </Div>
  16. <Div ID="Posts" Data-win-control="Winjs. UI. listview"
  18. Data-win-Options= "{Itemrenderer: Template, layout: {type: winjs. UI. listlayout },
  20. Selectionmode: 'Single ', onselectionchanged: selectionchanged }">
  22. </Div>
  24. <Div ID="Contenttemplate" Data-win-control="Winjs. Binding. template">
  26. Div data-win-bind = "innertext: title " class = " posttitle " Div
  28. Div data-win-bind = "innertext: date " class = " postdate " Div
  30. <Div Data-win-bind="Innerhtml: content" Class="Postcontent"></Div>
  32. </Div>
  34. <Div ID="Content"></Div>
  36. </Body>

Based on the record selected by the user in 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:

View plain
  2. FunctionSelectionchanged (e ){
  4. Content. innerhtml ="";
  6. VaRSelection = posts. wincontrol. selection;
  10. If(Selection. Length ){
  12. VaRPost = postitems [Selection [0]. Begin];
  14. VaRContenttemplate = winjs. UI. getcontrol (document. getelementbyid ("Contenttemplate"));
  16. Contenttemplate. Render (post). Then (Function(Element ){
  18. Content. appendchild (element );
  20. });
  22. }
  24. }
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.

View plain
  2. Body {
  4. Background-color:# Fff;
  6. Color:#000;
  8. Font-family:Verdana;
  10. Padding:8pt;
  12. Display:-MS-grid;
  14. -MS-grid-rows:Auto 1Fr;
  16. -MS-grid-columns:1FR1Fr;
  18. }
  22. ...
  26. # Posts{
  28. Width:99%;
  30. Height:100%;
  32. Overflow:Auto;
  34. -MS-grid-row:2;
  36. -MS-grid-column:1;
  38. }
  42. ...
  46. # ContenT {
  48. Width:95%;
  50. Height:100%;
  52. Overflow-Y:Auto;
  54. Margin-Right:64px;
  56. -MS-grid-row:2;
  58. -MS-grid-column:2;
  60. }

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 line is used to place titles without changes (if we want to handle overflow, we can also span two columns of span 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 reflected on the right, just as we do in 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.
    • more resources of the metro app can be found in the resource center. If you encounter problems, you can also use related resources to solve the problems.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More