Win8:To Do List Demo

  1. 云栖社区>
  2. 博客>
  3. 正文

Win8:To Do List Demo

吞吞吐吐的 2017-09-20 19:08:00 浏览719
展开阅读全文

无聊做了一个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!

 

本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2012/10/24/2733822.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
吞吞吐吐的
+ 关注