Recently learning the development of the Win8 Metro app, just learned a small example today and shared Before you begin, you need to prepare ... 1, Development WIN8 application needs to have Windows 8 and Microsoft Visual Studio Express for Windows 8 Download Windows 8 2. After installing WINDOW8, go to the developer's downloads, find the download tool and the SDK title, and click the Download Now button 3. You need a developer license to start creating a Windows store app. Get a developer license. To create a new project in Visual Studio, we create a new app called HelloWorld. Here's how to do it: Start Visual Studio Express for Windows 8. On the File menu, choose New Project. The New Project dialog box appears. You can select the type of template to display in the left pane of the dialog box. In the left pane, expand installed, template, and JavaScript, and then select the Windows store template type. The center pane of the dialog box displays a list of project templates for JavaScript. In the center pane, select the Blank App template. In the Name text box, enter "HelloWorld". Click OK to create the project. Visual Studio creates the project and displays it in Solution Explorer. Although the Blank App is the most basic template, the template still contains a small number of files: The manifest file (package.appxmanifest) describes the app (its name, description, Tile, start page, splash screen, and so on) and lists the files that the app contains. A set of large and small logo images (logo.png and smalllogo.png) to display in the Start screen. Represents an image (Storelogo.png) that is applied to the Windows store. Displays the splash screen (splashscreen.png) of the app startup time. CSS and code files for the Windows JavaScript Library (located in the References folder). The start page (default.html) and the accompanying JavaScript files (default.js), which run when the app starts. These files are essential to all Windows store apps that use JavaScript. All projects that are created in Visual Studio contain these files. Now that we've created a simple app, if you want to see what it looks like, press F5 to build, deploy, and launch the app. The default splash screen appears first. This is the splash screen. To close the app, swipe from the top edge of the screen to the bottom edge or press ALT-F4. (Some notebooks press ALT+FN+F4) to close the app Next we modify the Default.htm page, which is generated by default 1 <! DOCTYPE html> 2 Next, add some new content to the Default.html file. Just as you add content to any other HTML file 1. Replace the existing content in the BODY element with the following: Displays the header of "Hello, world!", some text asking for the user name, INPUT element to accept the user name, button, and div element. Assign an ID to the input, button, and Div. 1 <body>2 <div style= "width:100%; height:100%; ">3 Let's start the app and see how it works.
Now click the button is not any reaction, because we did not register the event for it, the next thing to do is to add events to the button, we add the event handler code to the Default.js file. Let's open the Default.js file and see what it is. Before we start adding our own code, let's take a look at the first and last lines of the code in the file: 1 (function () {2 "use strict"; 3 4 //omitted Code 5 6 }) ();
This is the self-executing anonymous function The next behavior of the code is that the JavaScript code turns on strict mode. Strict mode provides additional error checking for your code. For example, it prevents you from using implicitly-declared variables or assigning values to read-only properties. View the remainder of the code in Default.js. It handles the activated and checkpoint events of the application. We'll look into the details of these events later. The activated event is now triggered as soon as you know that the app is started. Let's define the event handler for the button. function Buttonclickhandler () { } Within the event handler, retrieve the user name from within the InputName control and create a greeting with that user name, first to determine whether the user name is entered, no popup prompt, and the output greeting 1 function Buttonclickhandler () 2 {3 var username = document.getElementById ("InputName"). Value; 4 if ( Username = = "") {5 new Windows.UI.Popups.MessageDialog ("Please input your name! "," Tip "). Showasync (); 6 return false; 7 } 8 else {9 var greeting = "Hello," + Username + "! Nice to meet you "; document.getElementById (" Outputmsg "). InnerText = greeting;11 }12 }
Now, you only need to register the event handler with the button. A good time to register an event handler is when the app is activated. Fortunately, Visual Studio generated some code for us in the Default.js file to handle the activation of the app: App.onactivated event handler 1 app.onactivated = function (args) {2 if (args.detail.kind = = = Activation. Activationkind.launch) {3 if (args.detail.previousExecutionState!== activation. applicationexecutionstate.terminated) {4 //TODO: This application just started. Initialize 5 //Your application here. 6 } else {7 //TODO: This application has been reactivated from the suspended state. 8 //Restore application state here. 9 }10 args.setpromise (WinJS.UI.processAll ()); var Hellobutton = document.getElementById ("Btnhello "); hellobutton.addeventlistener (" Click ", Buttonclickhandler, false); }16 };
The following is the complete code for the updated Default.js file: 1 (function () {2 "use strict"; 3 4 WinJS.Binding.optimizeBindingReferences = true; 5 6 var app = Winjs.ap Plication; 7 var activation = Windows.ApplicationModel.Activation; 8 9 app.onactivated = function (args) {ten if (args.detail.kind = = = Activation. Activationkind.launch) {One-args.detail.previousExecutionState!== activation. applicationexecutionstate.terminated) {//TODO: This application just started. Initialize 13//your application here. -else {//TODO: This application has been reactivated from the suspended state. 16//Restore application state here. }18 args.setpromise (WinJS.UI.processAll ()); var Hellobutton = Document.getelem Entbyid ("Btnhello"); Hellobutton.addeventlistener ("Click", Buttonclickhandler, false); 23 }24};25-app.oncheckpoint = function (args) {$//TODO: This application is about to be suspended. Save here 28//any state that needs to be retained in the suspend. You can use the//WinJS.Application.sessionState Object that will be automatically saved and restored in the 30//suspension. If you need to complete the asynchronous operation before the 31///suspend application, call the +//args.setpromise (). };34 function Buttonclickhandler () () $ username = document.getElementById ("InputName") . value;38 if (username = = "") {new Windows.UI.Popups.MessageDialog ("Please input your name! "," Tip "). Showasync (); false;41}42 else {var greeting =" Hello, "+ u Sername + "! Nice to meet You "; document.getElementById (" outputmsg "). InnerText = greeting;45}46}47 Pp.start (); 49}) ();Let's run our program.
The execution is successful, let's add some style to the button. Open the Default.css file and add the following style 1 Body {2} 3 4. ButtonStyle {5 margin-left:6px; 6 background-color:chocolate; 7} 8 9 @media screen and (-ms-view-state:fullscreen-landscape) {}12 @media screen and (-ms-view-state:filled) {}15-@media screen and (-ms-view-state:snapped) {}18 @media screen and (-ms-view-state:fullscreen-portrait) {20}
Only. ButtonStyle is added by ourselves oh, the other is the default So how to add to the button, we came to the Default.js file 1 app.onactivated = function (args) {2 if (args.detail.kind = = = Activation. Activationkind.launch) {3 if (args.detail.previousExecutionState!== activation. applicationexecutionstate.terminated) {4 //TODO: This application just started. Initialize 5 //Your application here. 6 } else {7 //TODO: This application has been reactivated from the suspended state. 8 //Restore application state here. 9 }10 args.setpromise (WinJS.UI.processAll ()); var Hellobutton = document.getElementById ("Btnhello "); hellobutton.classname =" ButtonStyle "; hellobutton.addeventlistener (" click ", Buttonclickhandler , false); }16 };
Hellobutton.classname= "ButtonStyle"; Add this sentence on it, run it yourself and see it. This article is from the blog of Small Hui only, the original address: http://www.cnblogs.com/zhaohuionly/archive/2012/11/24/2785980.html
|
