Win8: to do list demo

Bored with a todolist application to train the trainer. Po page:

You can see the basic controls from the interface, mainly an input box, an Add button, a delete button, and a listview.

For more information about how to add a listview, see Win8: listview.

Add:After each input, click Add button to push the content of the input box into a dataarray, and then set it as the data source of listview,

 
VaRDatalist =NewWinjs. Binding. List (dataarray); listview. itemdatasource= Datalist. datasource;
 

This makes it easy to implement the Add function.

Delete:Then delete the file.

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

The delete listview items method is as follows:

 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 ();});}} 

Here, the deletion only deletes the corresponding itemdatasource of the listview.

Refer to the aboveCodeIt is not difficult to right-click the selected listview items and delete it.

Save:The next step is to save the data. In myProgramIn, I put all the todo lists data in a dataarray, and the data storage method I selected is roamingsettings. But found that this stored value can only be string, In the https://www.scirra.com/manual/145/windows-8 to see

Finally, I use roamingsettings to store an array indirectly through JSON. The corresponding code is as follows:

 
//Store the array for multiple sessions.VaRAppdada =Windows. Storage. applicationdata. Current;VaRRoamingsettings =Appdada. roamingsettings;Roamingsettings. Values ["dataarray"] = JSON. stringify (dataarray );
 

The above code should be used in both Add button and delete button to ensure data accuracy.

Read data:

 
//Restore the dataarray.VaRDataarray = windows. Storage. applicationdata. Current. roamingsettings. Values ["dataarray"];If(Dataarray) {dataarray=JSON. parse (dataarray );.........}
 

 

Communications:Finally, the most important thing is to display the item content in the tile of Start Screen. Relevant content can refer to the official documentation: http://msdn.microsoft.com/en-us/library/windows/apps/hh779725.aspx

To put it simply, the notifications mechanism of Win8 is as follows:

Tile: Tile, which is called the program icon of the blocks in the Start program. There are two forms: Square, wide, and long. You can send push messages.

Badge: screen lock reminder. It can reflect the state of the program. For example, the number of apps in the app store can be updated. IOS also has related push.

Secondary tiles: Secondary tile. You can jump to a specific position of the program. Android desktop widgets.

Toash: This is very familiar. It is also called toash on Android. In the form of Win8, a prompt pops up in the upper right corner, and will automatically disappear.

.......

In todolists, I used tile configurations.

Icationicationsextensions: uses the notificationsextensions object model library to provide tile posts, screen lock reminders, and toast notification to the XML template content, without directly using the XML Document Object Model (DOM ).

So we need to add it to the database first:

1. Obtain the icationicationsextensions Library

Icationicationsextensions Library is contained in multiple downloadable tile, toast, and notification examples, and can be copied for your own use. We will use the core tile and screen lock reminder example to complete this process.

1. Download the application tile and screen lock reminder example from the Windows Developer Center.
2. Decompress the application tile and screen lock reminder sample.zip file to the folder you selected.

2. Include this library in your project

1. Start Microsoft Visual Studio 2012 or Microsoft Visual Studio express 2012 for Windows 8, and select File> open> Project/solution ".
2. Go to the extract directory of the sample, and double-click the sample Visual Studio solution (. sln) file.
3. Follow F7 or use "build> Generate solution" to build this example.
4. Copy the generated binary file icationsexsextensions. winmd from the sample folder (under \ icationicationsextensions \ bin \ relase \) to your own project directory. You do not need to copy to a specific location in your project, but we recommend that you put it in the folder where your. appxmanifest file is located.
5. Open your project in Visual Studio 2012 or Visual Studio express 2012 for Windows 8.
6. Select "add reference" from the "project" menu ".
7. Browse to the notificationsextensions. winmd (icationicationsextensions. DLL for Web Services) file location, select the file, and then click "add.

 

After adding it, we can use it in the program. The code is directly listed as follows:

Create tile and send notification:

         //  Create the wide Template          VaR Tilecontent =Icationsexsextensions. 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 = Icationicationsextensions. tilecontent. tilecontentfactory. createtilesquaretext04 (); squaretilecontent. textbodywrap. Text = "Hello world! My very own tile notification" ; Tilecontent. squarecontent = Squaretilecontent; //  Send the notification Windows. UI. Events. tileupdatemanager. createtileupdaterforapplication (). Update (tilecontent. createnotification ());

To clear notification:

 
Windows. UI. Events. tileupdatemanager. createtileupdaterforapplication (). Clear ();
 

If you want to send multiple reminders, the system will display them in a scroll manner based on the reminder queue, but note that you must first allow multiple reminders:

 
Windows. UI. Events. tileupdatemanager. createtileupdaterforapplication (). enablenotificationqueue (True);
 

The above code is taken from the code in the application tile and screen lock reminder example. You can select different templates or even customize the display form of tile as needed.

Paste the diagram of my program:

 

The end!