In the previous few we described how to use C # + XAML to complete the implementation of the Windows Store App feature, and then we'll look at how to use Html + WinJS to accomplish these features.
In this article, we use WINJS to create a simple project to see what the project is made of, and what the similarities and differences with C#,xaml's project are.
Let's start by selecting the Windows store, JavaScript---Java, in Visual Studio 2013 to create a blank application that looks at the composition of the project (I put a store app with XAML on the right for the convenience of comparison)
Package.appxmanifest files are mostly the same as XAML projects, you can start with the Windows 8.1 app again-create my first app.
One place to note is that the entry point in the Application tab becomes the start Page , and the students who are familiar with BS development will certainly not be unfamiliar with the start page.
Here's a look at the start Page default.html:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <MetaCharSet= "Utf-8" /> <title>Winjsappdemo</title> <!--WinJS References - <Linkhref= "//microsoft.winjs.2.0/css/ui-dark.css"rel= "stylesheet" /> <Scriptsrc= "//microsoft.winjs.2.0/js/base.js"></Script> <Scriptsrc= "//microsoft.winjs.2.0/js/ui.js"></Script> <!--Winjsappdemo References - <Linkhref= "/css/default.css"rel= "stylesheet" /> <Scriptsrc= "/js/default.js"></Script></Head><Body> <P>Content shown here</P></Body></HTML>
This is a very simple HTML composition, and we see that the file adds references to Winjs and Default.js and Default.css for the start page.
Take a look at Default.js:
(function () { "Use Strict"; varApp =winjs.application; varActivation =Windows.ApplicationModel.Activation; App.onactivated=function(args) {if(Args.detail.kind = = =activation. Activationkind.launch) {if(Args.detail.previousExecutionState!==activation. applicationexecutionstate.terminated) {//TODO: This application just started. Initialize this place //your application. }Else { //TODO: This application has been reactivated from the suspended state. //the application state is restored here. } args.setpromise (WinJS.UI.processAll ()); } }; App.oncheckpoint=function(args) {//TODO: This application is about to be suspended. Save this place //any state that needs to be retained in the suspend. You can use //The WinJS.Application.sessionState object that will be //suspend in Auto save and restore. If you need to //to complete an asynchronous operation before suspending the application, call the //args.setpromise (). }; App.start ();}) ();
As we can see, there are two very important methods in this file, app.onactivated and App.oncheckpoint, respectively, when the application is activated and the processing is suspended. Similar to OnLaunched and Onsuspending in XAML.
Attention Args.setpromise (WinJS.UI.processAll ()); The operation of WinJS.UI.processAll () is done before the onactivated is complete. This operation means that the declared control is bound to all elements and is started on the specified root element.
What do we need to do if we want to jump to the page we specify when default.html page loads, such as main.html?
First we create new main.html related files, main.html, Main.js and Main.css, the path is Pages/main, then we have two ways to complete the jump:
(1). Specify a jump page in default.html
Make the following changes to Default.js first
var nav = winjs.navigation; var ui = Winjs.ui;
Two variables are defined above, and the following code is added to replace args.setpromise (WinJS.UI.processAll ()) in the following onactivated method;
var p = Ui.processall (). Then (function () {return nav.navigate (nav.location | | Application.navigator.home, nav.state);}); Args.setpromise (p);Then, in the body of the Default.html page, add
<id= "Contenthost" data-win-control= " Application.pagecontrolnavigator " data-win-options=" {home: '/pages/main/main.html '} "/ >This allows you to specify the display main.html at startup.
(2). Specify Jump in Default.js
Make the following changes to Default.js
var nav = winjs.navigation;
To define the NAV variable, add the following code to replace Args.setpromise (WinJS.UI.processAll ()) in the Onactivated method below.
var p = WinJS.UI.processAll (). Then (function () { return nav.navigate ("/pages/main/main.html")}); Args.setpromise (p);Then add the following method
function (evt) { var contenthost = document.body.querySelector ("#contenthost"), = evt.detail.location; WinJS.Utilities.empty (contenthost); WinJS.UI.Pages.render (URL, contenthost); }Finally, in the Default.html file, add
<id= "Contenthost"/>
This also completes the start of the page to jump to main.html requirements.
Well, here we're using WINJS and Html to create a simple project, and then we'll use WINJS to demonstrate the other features described in XAML, thank you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
