Windows Metro – Personnaliser le Settings Charm de Windows 8 dans son application

On l’a déjà vu dans de précédents tutoriaux, certains fonctionnalités de Windows 8 sont unifiées comme la recherche, le partage ou les paramètres. Ainsi, vous n’avez pas besoin de les intégrer dans votre application, vous devrez utiliser ces fonctionnalités unifiées pour répondre aux exigences UX Windows 8:

Windows Metro – Clouder! (11) – Utiliser la recherche intégrée à Windows 8 dans son application

Windows Metro – Clouder! (13) – Partager une URL avec le Share Charm de Windows 8

Windows Metro Tips – Faire apparaître les fonctionnalités Search et Share natives de Windows 8 en JavaScript

Il en reste donc un, le Charm Settings :

Il devra être personnalisé au sein de votre application. Il y a un sample très bien fait par Microsoft est très complet, sinon suivez le guide:

http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

L’obligation de présenter la Privacy Policy à l’utilisateur pour la certification Windows 8

Si vous lisez le document « Windows 8 app certification requirements » publié par Microsoft, vous pourrez voir ceci dans la catégorie 4.1:

4.1.1 Your app must have a privacy statement if it collects personal information
If your app collects or transmits any user’s personal information, including an IP address, you must maintain a privacy policy that complies with applicable laws and regulations, informs users of the information collected by your app and how that information is used, stored, secured and disclosed, and describes the controls that users have over the use and sharing of their information, and how they may access their information.
You must also provide access to your privacy policy in the Description page of your app, as well as in the app’s settings as displayed in the Windows Settings charm.

Si votre application communique par Internet, vous devrez donc inclure un petit paragraphe légal pour que votre application passe les barrières du Store Windows 8.

Personnaliser les catégories présentes dans les Settings

Dans les applications Windows 8, les Settings ont un style bien spécial. Quand vous allez cliquer sur Settings, un panneau va apparaître avec une liste d’options. Parmi elles, la catégorie « Permissions » qui détaille les permissions déclarées dans votre application. Cette catégorie « Permissions » est automatiquement ajoutée par Windows, mais vous pouvez ajouter d’autres catégories.

Pour cela, vous devez ajouter un écouteur d’évènement sur WinJS.Application.onsettings, le plus simple est de faire cela dans default.js, dans le bloc qui indique que l’application a été démarrée:

WinJS.Application.onsettings = function (e) {

};

L’évènement passé à ce listener va contenir une liste de commandes , qui seront les entrées de la liste Settings dans la propriété « e.detail.application.

Une fois que vous avez ajouté vos propres commandes à cet objet, il vous suffit de les envoyer dans le Settings Flyout :

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = { "about": { title: "About", href: "/pages//aboutPage/aboutPage.html" } };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

Voici le résultat:

On peut donc ajouter des éléments clé/valeur où la clé est une String, et la valeur est un objet contenant un libellé (label) et un lien vers une page « href ». Il ne vous reste plus qu’à créer cette page, en HTML classique. Pour ne pas vous prendre la tête avec les styles, utilisez le composant WinJS.UI.SettingsFlyout.

Voici par exemple la page que j’utilise pour mon application Clouder!:

<!doctype HTML>
<html>
    <head>
        <title>About</title>
    </head>
    <body>
        <!-- BEGINSETTINGFLYOUT -->
        <div data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'about',width:'wide'}">
            <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
            <div class="win-ui-dark win-header" style="background-color:#FF6600"> <!-- Background color reflects app's personality -->
               <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
               <div class="win-label">About</div>
            </div>
            <div class="win-content ">
                <div class="win-settings-section">
                    <h3>Developed By Fabien Nicollet</h3>

                    <h3>Contact</h3>
                    <a href="mailto:fnicollet@gmail.com">fnicollet@gmail.com</a>

                    <h3>Twitter</h3>
                    <a href="http://twitter.com/fnicollet">@fnicollet</a>

                    <h3>Tutorial : Create Windows 8 apps like Clouder! (fr)</h3>
                    <a href="http://html5-tutorial.fr/windows-8-metro/">http://html5-tutorial.fr/windows-8-metro/</a>

                    <h3>Blog</h3>
                    <a href="http://html5-tutorial.fr">http://html5-tutorial.fr</a>

                    <h3>Privacy policy</h3>
The Clouder project is committed to protecting your privacy. Most of our services can be enjoyed without having to communicate to Clouder any personal data, but in some cases it may be required to provide certain information in order to access the services. This privacy policy describes the collection and processing of data in such cases. This privacy statement applies only to the services made available by the Clouder application.

<h3>Collection and use of personal data</h3>

Personal information will be requested only in cases where such information is necessary to identify you or contact you. Typically this is done in cases where it is necessary to register in order to make use of a service, such as leaving comments or join a discussion. In such cases Clouder services also gather information about the hardware and software used, such as IP address, browser type, operating system, domain name and Web site addresses from which a user has logged in. This information is used to improve the quality of service and to provide general statistics about Clouder. Clouder services also collect information on the pages visited by users within the service. Data related to visited pages are never linked to your personal information. Personal information is collected solely in order to access value-added services. 

If you decide to give your consent, your data may be used for purposes of promotion of Clouder activities. Clouder may disclose personal information only if required by law or in case there is the firm belief that such action is necessary to: 

(1) comply with laws and local regulations; 

(2) protect and defend the rights or property of Clouder. 

<h3>Control and access to personal information</h3>

The personal information you provide to Clouder for registration or for any other purpose is not shared with third parties without explicit permission from the you, except for the limited instances described above. Personal information will always be used for the purposes described above. Registration, if required, also allows the user to specify if you wish to be contacted by Clouder and how such contact should occur. Clouder provides users with all the tools they need to make sure that personal information is correct and up-to-date. If you register for the services offered by Clouder, you can edit and update the information provided at any time. 

<h3>Changes to this privacy policy</h3>

Clouder reserves the right to modify this document. If we use your personal information differently than specified in the legal information provided at the time of collection of the data, users will be notified through announcements posted on Clouder.
                </div>
            </div>
        </div>
        <!-- ENDSETTINGSFLYOUT -->
    </body>
</html>

Voilà le résultat:

Le texte a été honteusement recopié depuis la Privacy Policy de l’application UrzaGatherer de David Catuhe:

http://www.urzagatherer.com/privacy%20policy.htm

Vous pouvez bien sûr personnaliser les styles, comme la couleur de fond du header.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *