无聊做了一个todoList的应用来练练手。先po张界面图:
从界面可以看到基本的控件,主要是一个输入框,一个添加按钮,一个删除按钮,加一个listView。
关于listview的添加可以参照我之前写的win8: ListView 。
Add:每次在输入之后点击Add button,会把输入框内容push进一个dataArray中,再以此设为listview的数据源,
var dataList = new WinJS.Binding.List(dataArray); listview.itemDataSource = dataList.dataSource;
这样很简单就实现了添加的功能。
Delete:接着就是删除。
看到的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!