Use JavaScript to build your first Metro application (onWindows8)

Web technologies, including HTML, CSS, and JavsScript, are being adopted by Metro-style programs as the first class development technology in Windows programs. In comparison, JavaScript is not deployed on one page after another as traditional Web servers. Metro... SyntaxHighlighter. all ();

Web technologies, including HTML, CSS, and JavsScript, are being adopted by Metro-style programs as the first class development technology in Windows programs. In comparison, JavaScript is not deployed on one page after another as a traditional Web server, and Metro App is locally installed on the client machine. This is similar to the traditional Win program. directly using JavaScript, you can access the underlying layer and communicate with other programs.

Note: If you prefer C #, C ++, or VB withXAML for development, see Buildingyour first Windows Metro style app with C #, C ++, or VB.

Target
In this tutorial, we will show you how to build a Metro-style program using JavaScrip. Using HTML5, stacked Style Sheets (CSS3), and JavaScript technologies, we will work with you to create a lightweight RSS client, and try to make the program better personalized (that conveys the right personality ). We will introduce core contents including controls, functions, layout, templates, data binding, and JS libraries. The technologies mentioned have been optimized in Metro App development, easy to use. Based on this tutorial, you should have the ability to initially develop the JS version of Metro App after learning. The tutorial is divided into three small sections. It is estimated that you will finish reading the section in 20 minutes. Of course, if you do a good job in each exercise, it may take a little longer.
Hello Win Metro
As with web pages, you must first have an HTML file to write the Metro App.

View plaincopy to clipboardprint? 
 
Hello, Windows Metro styleapps! 
Welcome to Windows Metro styleapps 
 


Hello, Windows Metro styleapps!
Welcome to Windows Metro styleapps

If you put this HTML in a browser to run it, it will be meaningless. Needless to say, if it is executed in the Metro App, it is another world. Of course, your customers generally do not care whether it is a browser or a Metro App. The difference is that the Metro App will be installed in the Window Store, just like other Win programs. Furthermore, a single Web page is not a complete program, even those involving style, code, and image resources. Now, the Metro App not only includes these but also provides standard applications, so there will be metadata and program resource files:

The manifest file used to describe the program itself, including the program name, introduction, and launch page.

The image or icon file used for appearance.

The icon logo used for Windows Store display.

A splash screen is used when your program starts ).

Manifest is an xml file named appxmanifest. XML. This file contains details such as program name, program description, and image reference. One of the most important information is the startup page of the specified program. Microsoft Visual Studio 11 Express for Windows Developer Preview can automatically export the program list and help you complete a series of tasks through JavaScript, these tasks are used to create, edit, package, start, and debug your Metro-style applications.

Develop Windows Metro Apps in
Microsoft Visual Studio is the tool for developing Windows programs and the first tool for developing Metro programs. It not only provides HTML, CSS, JavaScript, image editing, and general development tasks such as editing program lists using JavaScript, but also includes project management throughout the development cycle, it involves many processes such as source code management, integrated build, and deployment. There are several VS versions. Here we use the free Visual Studio 11 Express for Windows Developer Preview version, which is available in Windows Software Development Kit (SDK) for MetroApp. After the installation, the compilation, packaging, and deployment tools are installed. VisualStudio 11 Express for Windows Developer Preview provides several templates, as shown in:

 

The simplest project template is Blank Application. After running the program, a file exclusive to the Visual Studio 11 Express for WindowsDeveloper Preview Metro style app using JavaScript project (. wwaproj) is generated ).

 

Now, if you open the default default.html file, you will find that it is almost all empty content. The same applies to open the default. js file under the js directory. Obviously, the main file is provided here, waiting for you to create something to add.

For debugging, you can click "Debug> StartDebugging". It provides several debugging tools that developers are familiar:

Debuggers, breakpoint, step-by-step, and monitoring JS data and behavior.

JS Console window (JavaScript ConsoleWindow), where the JavaScript Object command line interacts.

DOM browser window, observe the HTML Document Object Model or element style.

Simulator: simulates events of related devices in the development environment.

MetroApp written in JavaScript, except for its syntax, is similar to other languages when accessing the underlying Windows platform. However, according to some features of JavaScript programmers, there should be some predefined packages that can be used repeatedly. That is to say, the Windows Class Library provides a set of reusable JS and CSS files for JavaScript, so as to better reflect the new features of Windows. The VS template contains a series of CSS style rule tables to provide a uniform look & feel ). The simplest way is to introduce it through the project template file, which automatically contains the files required by WinJS.

Although the Blank Application project file is empty, it already contains certain styles. The reason why the Metro style is called "style" is that there are some requirements on the style. Style itself does not mean uniformity, because in many cases you need a specific layout, personalized design. Here is an example. In fact, although the so-called Metro-style programs are new things, past experiences are still worth studying. Here we will introduce Raymond Chen, a well-developed developer in the Window project team. Mr. Chen is also The author of The Old New Thing, and he also has Weblog.

Mr Chen's main achievement is that the average person is not easy to see the lack of the Win platform, or the lack of the United States, and the text and Sample resources are actively posted on his blog. In this way, all are Win programs. We can use these materials to demonstrate new constructor methods.

Therefore, we need to download data from his blog to find out where to place the code.

Call the WinJS. Application Object
The default.html file generated by the project template loads JS and CSS files with the lowest requirements required by WinJS by default:

View plaincopy to clipboardprint? 
 
 
 
RssReader