Win8：To Do List Demo

无聊做了一个todoList的应用来练练手。先po张界面图：

从界面可以看到基本的控件，主要是一个输入框，一个添加按钮，一个删除按钮，加一个listView。

关于listview的添加可以参照我之前写的win8: ListView 。

Add:每次在输入之后点击Add button，会把输入框内容push进一个dataArray中，再以此设为listview的数据源，

        var dataList = new WinJS.Binding.List(dataArray);

        listview.itemDataSource = dataList.dataSource;

这样很简单就实现了添加的功能。

Delete:接着就是删除。

从http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/806a4e86-9e1c-4c2c-8023-fd9f8e1aed33

看到的delete listview items 的方法：

function removeSelected() {
        // Get the control, itemDataSource and selected items
        var list2 = document.getElementById("listView3").winControl;
        var ds = list2.itemDataSource;

        if (list2.selection.count() > 0) {
            list2.selection.getItems().done(function (items) {

                // Start a batch for the edits
                ds.beginEdits();

                // To remove the items, call remove on the itemDataSource passing in the key
                items.forEach(function (currentItem) {
                    ds.remove(currentItem.key);
                    ds.remove
                });

                // End the batch of edits
                ds.endEdits();
            });
        }
    }

这里的删除只是删除listView对应的 itemDataSource的相应项。

参考上面代码不难实现右击选中listview items 再删除的功能。

Save:接着是保存数据的功能。在我的程序里，我把所有的todo lists的数据都放在一个dataArray中，我选择的数据存储的方法是roamingSettings。但是发觉这种存储存的值只能是string,在https://www.scirra.com/manual/145/windows-8 中看到

所以最后我通过Json来间接使用roamingSettings来存一个数组，相应的代码：

        // Store the array for multiple sessions.

        var appDada = Windows.Storage.ApplicationData.current;
        var roamingSettings = appDada.roamingSettings;
        
        roamingSettings.values["dataArray"] = JSON.stringify(dataArray);

上面代码在 add button 和 delete button 中都要使用，保证数据的准确性。

读取数据：

            // Restore the dataArray.
            var dataarray = Windows.Storage.ApplicationData.current.roamingSettings.values["dataArray"];
            if (dataarray) {
                dataArray = JSON.parse(dataarray);
                .........
            }    

Notifications :最后最重要的是在start Screen 的tile中显示 事项的内容。相关内容可参考官方文档：http://msdn.microsoft.com/en-us/library/windows/apps/hh779725.aspx

简单说下win8的notifications 通知机制：

tile：磁贴，即所谓的在开始节目的那些方块的程序图标，有Square 和 wide 方、长形两种形式。可通过其发些推送消息。

badge：锁屏提醒。可体现程序的相关状态，例如应用商店的数字提醒几个程序可更新。ios也有相关的推送。

Secondary tiles：辅助磁贴 。可以跳到程序的特定位置。有点Android 桌面 widget的味道。

toash：这个很熟悉啦，Android上也叫toash。在win8中的形式在右上角弹出的一条提示，会自动消失。

.......

在todolists中我之用到了tile notifications 。

NotificationsExtensions ：使用 NotificationsExtensions 对象模型库，可以提供磁贴、锁屏提醒和 Toast 通知 XML 模板内容，而无需直接使用 XML 文档对象模型 (DOM)。 

所以我们先要添加进该库：

1. 获取 NotificationsExtensions 库

NotificationsExtensions 库包含在多个可下载的磁贴、Toast 和通知示例中，并且可以复制它们供自己使用。我们将使用核心磁贴和锁屏提醒示例完成此过程。

1. 从 Windows 开发人员中心下载应用磁贴和锁屏提醒示例。
2. 将应用磁贴和锁屏提醒 sample.zip 文件解压到你选择的文件夹。

2. 将该库包含在你的项目中

1. 启动 Microsoft Visual Studio 2012 或 Microsoft Visual Studio Express 2012 for Windows 8，然后选择“文件 > 打开 > 项目/解决方案”。
2. 转至示例的解压缩目录，然后双击示例的 Visual Studio 解决方案 (.sln) 文件。
3. 按 F7 或使用“构建 > 生成解决方案”以构建该示例。
4. 将生成的二进制文件 NotificationsExtensions.winmd 从示例文件夹（在 \NotificationsExtensions\bin\Relase\ 下）复制到你自己的项目目录。不需要复制到你的项目中的特定位置，但是我们建议将其放在你的 .appxmanifest 文件所在的文件夹中。
5. 在 Visual Studio 2012 或 Visual Studio Express 2012 for Windows 8 中打开你的项目。
6. 从“项目”菜单中，选择“添加引用”。
7. 浏览至 NotificationsExtensions.winmd（对于 Web 服务为 NotificationsExtensions.dll）文件的位置，选择该文件，然后按“添加”按钮。

添加完之后我们就可以在程序中使用了，直接上码：

创建tile 并发送notification：

       
 // create the wide template
        var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
        tileContent.textHeadingWrap.text = "Hello World! My very own tile notification";
        
// create the square template and attach it to the wide template
        var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
        squareTileContent.textBodyWrap.text = "Hello World! My very own tile notification";
        tileContent.squareContent = squareTileContent;
       
 // send the notification
   Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());

若要清除notification：

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

如果你要发送多条提醒，系统会根据提醒队列滚动显示，不过注意要先表明允许多条提醒：

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);

上面代码摘自应用磁贴和锁屏提醒示例 中的代码，你可以根据需要选取不同的模版甚至自定义tile的显示形式。

贴下我的程序的图：

                               

the end！