Win8：To Do List Demo

hb120973135

　　无聊做了一个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 和通知示例中，并且可以复制它们供自己使用。我们将使用核心磁贴和锁屏提醒示例完成此过程。

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

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

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