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

Source: Internet
Author: User
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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.