Design and Development of Windows 8 Metro-settings and preferences (2)

Add preferences page

Now you knowMetroYou need to add another page -- this is the preference page, which allows the user to input and edit the preference. We only add a preference and demonstrate how to operate it. However, you can add more preferences according to your preferences. The preferences you want to add allow users to configureContosocookbookReturn to the previous recipe or a series of recipes displayed at startup.

Task1-ModifyApp. onsettingsProcessingProgram

Modify fromOnsettingsThe handler starts. It adds a"About"Command, so Add a"Preferences"Command.

1.OpenDefault. js, FindApp. onsettingsFunction.

2.Add a highlighted statement to the function:

Javascript

App. onsettings = function (eventobject ){

Eventobject. Detail. applicationcommands = {

// Add an about command

"About ":{

Href: "/html/about.html ",

Title: "about"

},

"Preferences ":{

Href: "/html/preferences.html ",

Title: "Preferences"

}

}

 

Winjs. UI. settingsflyout. populatesettings (eventobject );

};

3.PressF5Start the application and use the "set super" button to display the settings pane.

4.The confirmation settings pane now includes"Preferences"Command,4.

Figure4

With"Preferences"Command settings pane

5.ReturnVisual StudioAnd stop debugging.

 

Task2-AddPreferences.htmlWebpage Control

The next task is to createPreferences"Command to call the web control.

1.InSolution ExplorerRight-clickHtmlFolder,Add-new item"Command to add the namePreferences.html.

2.SetPreferences.cssMove to projectCSSFolderPreferences. jsMove to projectJSFolder.

3.OpenPreferences.htmlChange the pathPreferences.cssAndPreferences. jsTo reference their new locations:

Html

<Link href = "/CSS/preferences.css" rel = "stylesheet">

<SCRIPT src = "/JS/preferences. js"> </SCRIPT>

4.SetIDForPreferences Fragment"DivReplace with the followingCode:

Html

<Div id = "Preferences" data-win-control = "winjs. UI. settingsflyout" data-win-Options = "{width: 'narrow'}">

<Div class = "settingspane">

<Div class = "Win-label">

<Button onclick = "winjs. UI. settingsflyout. Show ()" class = "Win-backbutton">

</Button>

<SPAN class = "settingstitle"> preferences </span>

</Div>

<Article class = "settingscontent">

<Input type = "checkbox" id = "rememberposition"/> remember where I was

</Article>

</Div>

</Div>

5.OpenPreferences.cssAnd add the followingCSSClass:

CSS

. Settingspane {

Margin-top:36px;

Margin-left:48px;

}

 

. Settingstitle {

Margin-left:36px;

}

 

. Settingscontent {

Margin-top:24px;

}

6.PressF5Run the application.

7.Show the super button bar and select"Settings".

8.Select"Preferences"Command.

9.Confirm that the preference page appears and contain a check box,5.

 

Figure5

Contoso cookbookPreference page

10.ReturnVisual StudioAnd stop debugging.

 

Task3-Keep preference status

Now, the"Rememberwhere I was"The check box is not connected to anything, and it will not remain in its status. Let's solve this problem by using roaming settings to save the status of the check box and initializing the check box each time the preferred box page is displayed.

1.OpenPreferences. jsAndUse strictAdd the following statement after the line:

Javascript

VaR appdata = windows. Storage. applicationdata;

2.Still inPreferences. js, Close to the bottomWinjs. pages. DefineAdd the following statement after the block:

Javascript

Winjs. namespace. Define ("Preferences ",{

Rememberposition:Function (){

Appdata. Current. roamingsettings. Values ["remember"] = Document. queryselector ("# rememberposition"). checked;

}

});

3.DirectionPreferences. jsAdd the following statement to the ready function that has been written in.Remember"Value. The initialization check box is displayed every time the preference page is displayed:

Javascript

VaR remember = appdata. Current. roamingsettings. Values ["remember"];

Remember =! Remember? False:Remember; // false if value doesn't exist

Document. queryselector ("# rememberposition"). Checked = Remember;

4.OpenPreferences.htmlAnd the highlightedOnclickAdd attributes to the check box:

Html

<Div id = "Preferences" data-win-control = "winjs. UI. settingsflyout" data-win-Options = "{width: 'narrow'}">

<Div class = "settingspane">

<Div class = "Win-label">

<Button onclick = "winjs. UI. settingsflyout. Show ()" class = "Win-backbutton">

</Button>

<SPAN class = "settingstitle"> preferences </span>

</Div>

<Article class = "settingscontent">

<Input type = "checkbox" id = "rememberposition"Onclick = "preferences. rememberposition ()"/> Remember where I was

</Article>

</Div>

</Div>

5.PressF5Run the application.

6.Display the superbutton bar and select"Settings".

7.Select"Preferences"Command.

8.Click"Remember where I was"Check box, select it.

9.Deselect the settings pane.

10.ReturnVisual StudioAnd stop debugging.

11.PressF5Start the application again.

12.Go to the preferences page and check the check box.

13.ReturnVisual StudioAnd stop debugging.

Note: ThisArticleThis is the script for Windows 8 online lab on msdn. It is for your reference only. If you want to experience the complete experiment, click the msdn online lab below

Http://msdn.microsoft.com/zh-cn/hh968278