HTML + JavaScript 学习Metro程序 (1)

Windows 8 已经正式发布了,有人说好,也有人说不好。但是不管怎样, Windows 8 肯定会有大量的用户。作为程序员,当然又得学习新的东西了,俺也不例外啊。

Windows 8的传统界面跟Windows 7 没有太大区别,区别大的就是Metro风格了(现在好像叫做Modern UI了吧)。

根据MSDN上的说法,开发Metro程序有三种方式:

1. HTML + JavaScript

2. C#/VB + XAML

3. C++ + XAML/DirectX

个人觉得如果Metro App里面UI部分比较多的话,采用第一种或者第二种比较好,不太推荐C++, 当然如果App里面比较涉及底层的话,还是C++。

 

我先选择HTML + JavaScript来学习开发Metro程序。第一次开发Metro,错误在所难免,各位大哥不要笑话啊。

MSDN上面已经有很详细的说明了:http://msdn.microsoft.com/zh-cn/library/windows/apps/br211385.aspx。这里主要是为了记录一下我自己的学习过程。

 

先从最最简单的Blank App开始,用VS2012创建一个JavaScript Windows store 应用程序,选择Blank App模板,如下图。

随后,VS就生成了一个模板代码。主要有3个文件:default.css, default.js, default.html.

这也就是HTML + JavaScript开发Metro应用程序的3个重要组成部分:

1. css文件: 用来协助HTML文件布局UI;

2. HTML文件:处理UI;

3. js文件:程序的代码。

对于做过Web开发的程序员来说,可以很快的用javascript做一个Metro小应用。因为CSS, HTML 和javascript在web开发里面太常见了。

接下来,我用javascript来模拟一个小应用吧,就模拟做一个登录页面。比如:

很简单,就居中放一个登录框。我用default.js, default.css, default.html来处理这个对话框。

先来看看default.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- App1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    
    
    <div id="logging">
        <div class="row" style="margin-top:50px">
            Username: <input id="TextUserName" type="text" style="width:150px"/>
        </div>
        <div class="row">
            Password: <input id="TextPassword" type="password" style="width:150px"/>
        </div>
        <div class="row" style="margin-top:20px;margin-left:50px">
            <button type="button" id="login" style="position:relative">Login</button>
            <button type="button" id="register" style="position:relative">Register</button>
        </div>
        <div class="row" style="margin-top:20px;margin-left:50px">
            <p id="hint"></p>
        </div>
    </div>
    
</body>
</html>

其中<div id="logging"></div>,这部分就是用来显示登录框的。相当的简单啊,这个对于做过web开发的程序员来说简直是小菜一碟,呵呵。

看看相应的css:

body {
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}



#logging {
    border: 2px solid #C0C0C0;
    background-color: #008080;
    font-family: 黑体;
    font-size: 20px;
    position: fixed;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

.row {
    width: 260px;
    height: auto;
    margin-left:10px;
}

我就加了一个id和一个class,其中id logging里面,为了把登录框居中显示,用了一个小技巧,就是top和left都是50%,这样左上角的位置就是屏幕中心,然后margin-left, margin-top用了一个负数,也就是宽度和高度的一半。这样就相当于登录框的中心点在屏幕的中心了。这样办法使用于任何屏幕分辨率。


 OK, 接下来就看看代码:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
               
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                AddEvents();
            }));
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    WinJS.UI.Pages.define("/default.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            AddEvents();

            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;

            var username = document.getElementById("TextUserName");
            var str = roamingSettings.values["username"];
            username.value = str;
        },

    });

    // The click event handler for login
    function Login(mouseEvent) {
             window.navigate("pagecontrol.html");
     //   WinJS.Navigation.navigate("pagecontrol.html");
    }

    function Register(mouseEvent) {
        var hint = document.getElementById("hint");
        var username = document.getElementById("TextUserName");
        var pwd = document.getElementById("TextPassword");
        hint.innerText = "username:" + username.value + "\npassword:" + pwd.value;

    }

    function nameInputChanged(eventInfo) {
        var ele = eventInfo.srcElement;

        var appData = Windows.Storage.ApplicationData.current;
        var roamingSettings = appData.roamingSettings;
        roamingSettings.values["username"] = ele.value;
    //    WinJS.Application.sessionState.UserName = ele.value;
    
    }


    function AddEvents() {
        var login = document.getElementById("login");
        login.addEventListener("click", Login, false);
        var register = document.getElementById("register");
        register.addEventListener("click", Register, false);
        var username = document.getElementById("TextUserName");
        username.addEventListener("change", nameInputChanged);
    }

    app.start();
})();

增加一个函数function AddEvents(),这个函数用来给按钮设置响应函数。那么我们在什么地方调用这个函数呢?

1. 在app.onactivated里面,这样等于app激活的时候就设置按钮的响应函数;

2. 但是这里好像有个问题,对于app中有多个页面的时候,app.onactivated不会调用多次。比如切换到第二个页面,那么第二个页面的按钮的响应函数什么时候设置呢?我们可以使用ready成员函数,如:

WinJS.UI.Pages.define("/default.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            AddEvents();
    });

我还不是很确定ready函数是页面开始加载前调用,还是页面已经加载完了再被调用?这个还得进一步确认。

 

注意,JavaScript的匿名函数的第一行代码, "use strict",这个意思是使用strict(严格)模式,MSDN上是这么解释的:

Strict mode is a way to introduce better error-checking into your code. When you use strict mode, you cannot, for example, use implicitly declared variables, or assign a value to a read-only property, or add a property to an object that is not extensible. The restrictions are listed in the Restrictions on Code in Strict Mode section later in this topic.


 ok,这个例子里面有2个按钮,登录和注册,注册就简单显示一条信息。登录的话,就是切换到第二个页面。

那么如何添加一个新的页面呢?也是很简单,在vs向导就可以了,如:

我们只有增加一个PageControl就行了,然后VS就会自动生成3个文件:css,html,js。

注意上面登录按钮里面是如何切换到第二个页面的,我这里使用window.navigate("pagecontrol.html");来切换到第二个页面。其实这个地方有好几种办法,web开发里面的js跳转页面的方法基本都可以用。而且微软自己好像也封装了一些办法,这个不在这里探讨了。

第二个页面很简单,就放了个返回登录页面的链接:

怎么实现的呢,太简单了,就用了一个html超链接:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>pagecontrol</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/pagecontrol.css" rel="stylesheet" />
    <script src="/js/pagecontrol.js"></script>
</head>
<body>
    <div class="pagecontrol fragment" style="text-align:center">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Second page</span>
            </h1>
        </header>
       
        <a href="/default.html">return to "login page"</a>
    </div>

    
</body>
</html>

就是这一行:<a href="/default.html">return to "login page"</a>,其他什么也没做,cool。


ok,再介绍一下数据存储。我们可以使用2种对象:

1. Windows.Storage.ApplicationData.current.roamingSettings

2. WinJS.Application.sessionState

第一种是“永久”存储,就是说就算应用退出了,数据还是存在的。

第二种就是临时的了MSDN上的说法是:

会话数据为临时数据,它与应用中用户的当前会话相关。会话会在以下情形下结束:用户使用关闭手势或 Alt + F4 关闭应用、重新启动计算机或注销计算机。

上面的例子里面使用了第一种“永久”存储。使用也是相当的简单,通过这些对象,我们可以把应用的状态保存起来,然后在某种情况下恢复,比如把应用从后台迁到前台。

 

先学习到这里,下一次来看看“应用栏”的使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值