Notatki o Windows 8 - odc. 13

Przegląd predefiniowanych animacji oraz obsługa helpa w aplikacjach Metro JS.

Animations

Navigation

• enterPage  Animates the contents of the first page in view when the app is loaded. Showing the app after the splash screen
• transitionPage Transitions between two different app pages or views, usually triggered by a user action. Navigating to a new page or view

Content within a view

• transitionContent Swaps between one piece or set of content to another piece or set of content. Change the contents of a section of a page. Hierarchical navigation between folders.
• reveal / hide  Shows additional inline information. Showing error messages that requires other content in the view to reflow. Showing less details about a particular item, usually due to a user action.
• reposition  Moves an item into a new position. Moving headers in a panorama view.
• crossFade  Shows that an item is changing state. Switching between portrait and landscape view of a photo. Refreshing the current contents.
• createPeekAnimation  Temporarily shows additional information on a tile. Alternate between showing a picture or text on a tile when the tile is not large enough to show both at once.
• updateBadge  Updates a numerical indication. Update a number showing the count of unread e-mails.

Supplemental UI

• showPopup / hidePopup Displays contextual UI on top of the view. Showing a custom context menu. Showing a custom dialog. Show more detailed information about an item in a pop-up element.
• showEdgeUI / hideEdgeUI Slides edge-based UI in on top of the view. Showing a custom app bar.
• showPanel / hidePanel  Slides large edge-based panels in on top of the view. Showing a custom keyboard. Showing a task pane.
• fadeIn / fadeOut Shows transient UI or controls. Showing playback controls due to user interaction. Showing a transient scroll bar.

Collection scenarios

• createAddToListAnimation / createDeleteFromListAnimation  Adds an item to a list. Adding or deleting an item from an existing one-dimensional or two-dimensional list.
• createAddToSearchListAnimation / createDeleteFromSearchListAnimation  Quickly adds an item to a list when searching. Adding or deleting items from a list in a search scenario.
• dragSourceBegin / dragSourceEnd  Gives visual feedback that the user is dragging an item and can rearrange a list. User begins dragging an item or drops an item.
• dragBetweenEnter / dragBetweenLeave  Shows that a dragged item can be dropped between two other items, rearranging a list. User drags an item between two items that it can be dropped between.

Selection scenarios

• pointerUp / pointerDown  Gives visual feedback of a successful user interaction. Click or tap on a tile.
• crossSlideReveal  Hints that an item supports the swipe interaction. Tap and hold a tile that supports the swipe interaction.
• crossSlideSelect / crossSlideDeselect  Transitions a tile to a swipe-selected state. User swipes to select an item.

Animating lists and list items

The addToList animation is used to add one or more items to a collection of similar items. Conversely, the item or items can be deleted from the collection through deleteFromList. The addition or deletion of multiple items together should happen at the same time, with no delay between the action on the individual objects. These animations are designed to be used on members of a collection or set that is already being displayed. Don't use the list animations on an entire set. Use the transition animations to add or remove an entire collection within your container.

Transition animations

Transition animations are used in an app to transition from one element of content to another. This set of animations consists of the following:

• transitionContent replaces part of a page, while keeping the rest of the page constant.
• transitionPage moves the entire application surface from an existing page to a new page.
• enterPage displays the first content in a newly launched application.

transitionContent

The transitionContent animation transitions between two sets of content while keeping the container or background constant. New content coming onto the screen slides in from an offset as it fades in. If there is existing content to be replaced, the old content is faded out as the new content is coming in.

Note that the original content and the replacement content don't need to have the same layout or size.

Use transitionContent when there is a set of new items to bring into an empty container. For example, after the initial load of an app. Use transitionContent to replace one set of content with another set of content that already resides in the same container within a view (f.e when the user switches from a "Latest Issues" view to a "My Issues" view). If you have more than one container whose content is to be updated, trigger all of the transition animations simultaneously without any staggering or delay.

Don't use transitionContent to bring in an entire new container. If the content's container is not visible on the screen, use either showPopup (for floating UI) or fadeIn (for UI on the main application surface) to bring on the container.

transitionPage

The transitionPage animation transitions the entire application surface from an existing page to a new page.

The new page slides into place from an offset as it fades in. The existing content fades out as the new content fades in. The new page is split into regions and each region transitions onto the screen separately, with staggered timings.

The way the incoming page is split into regions is specified by the application developer. It should be split into 2 to 4 regions, with the most common layouts being:

• Header, content
• Header, left and right content
• Left and right headers and content

Slide the new content into the view against the general page flow or reading order. For instance, if the animation is to bring in new content to a "page" in a document that flows from left to right, then the incoming content should transition in from right to left.

If there is more than one content region in your new page, choose the transition order so that new content appears in each region following the reading order. For instance, if the reading order is left to right, the content regions should be ordered top to bottom, then left to right.

If some of the contents on the incoming page are not ready to display immediately, use transitionPage to bring in the empty container. Show a progress control while readying the content then use transitionContent to bring in the contents once they are ready.

Don't use transitionPage when only a portion of the page needs to be refreshed. If there is only one region of the page that needs to be updated while most content remains the same, use transitionContent.

Use transitionPage only when you are moving from one page to another. To refresh the current page, use the crossFade animation.

Don't animate elements that are constant between the outgoing and incoming pages. For instance, don't animate a Back button if both pages have one.

enterPage

The enterPage animation is essentially the same as the transitionPage animation without the outgoing content.

Animating UI elements

Drag-and-drop animations

Common drag-and-drop animation scenarios include the user changing the placement of a single item in a list or the user dropping one item on top of another. Do not use the drag-and-drop animations when the user is not directly moving the object. Instead, use the reposition animation.

This set of animations includes the following:

• dragSourceStart is used when the user begins to drag an object.
• dragBetweenEnter is used when the user drags an object between two other objects that it can be placed between.
• dragBetweenLeave is used when the user drags an object away from the drop area that would allow it to move between two other objects.
• dragSourceEnd is used when the user stops dragging an object (drops it).

dragSourceStart

Include affected objects in the animation if and only if there are objects that can be affected by the drag.

Allow some object movement before triggering the dragSourceStart animation to start a drag-and-drop sequence. This will prevent the user from accidentally dragging an object that they only meant to tap or select. The recommended threshold is 20 touch independent pixels (TIPs).

dragSourceEnd

The dragSourceEnd animation moves the drag source (the object being dragged) to its final position while undoing the visual changes to the drag source and affected items that were performed by dragSourceStart. The affected objects in the dragSourceEnd call are always the same as those in dragSourceStart.

When dropping an object to reorder a list, it is often necessary to reflow the items in the list to make room for the item being dropped. After the dragSourceEnd animation, use the addToList animation with no added item (since the item being added is already present). This will perform the reflow animation of the list.

If the drag source will disappear after being dropped, use the fadeOut animation. This is used, for example, when a file is dropped onto a folder's icon to store that file in that folder.

dragBetweenLeave

This animation is used only after a dragBetweenEnter animation has been shown.

Transient UI animations

This set of animations consists of the following:

• The showPopup and hidePopup animations are used for temporary pop-up windows that display on top of your application.
• The fadeIn and fadeOut animations are used with individual controls or groups of controls or for UI that does not have another recommended animation.

showPopup and hidePopup

The showPopup and hidePopup animations are used with transient pop-up elements such as context menus, tooltips, dialogs, and flyouts.

If you are using the standard Windows dialog, context menu, tooltip, or flyout controls, these controls include the showPopup and hidePopup animations. You do not need to include those animations yourself when using those controls.

Use these animations with a custom context menu, dialog, flyout, tooltip, or other contextual UI that is located above the application surface. The pop-up animations are used to show UI that floats above the main application surface, such as a dialog box.

fadeIn and fadeOut

Use these animations to show or hide UI elements that are not associated with a recommended animation.

Don't use these animations for UI elements that have another recommended animation.

• Dialog box, Flyout, Tooltip, Context menu - showPopup and hidePopup
• Command bar - showEdgeUI and hideEdgeUI
• Task pane or edge-based panel - showPanel and hidePanel
• Contents of any UI container - transitionContent

Edge-based UI animations

These animations are used to show or hide UI that originates from the edge of the screen. Showing this UI can be initiated either by the user or by the application. The UI can either overlay the application or be part of the main application surface.

There are two versions of these animations available:

• The showEdgeUI and hideEdgeUI animations are used with edge-based UI, for example the Settings page.
• The showPanel and hidePanel animations are used with edge-based UI that is generally larger and covers more of the screen, for example the soft keyboard.

If the contents of the app need to resize in response to the UI sliding in or out, use the crossFade animation.

• If the UI is sliding in, use crossFade after showPanel or showEdgeUI.
• If the UI is sliding out, use crossFade at the same time as hidePanel or hideEdgeUI.

You can use standards-based Cascading Style Sheets, Level 3 (CSS3) transitions and animations to build exciting Metro style apps.

App help

Application help is a single page help file that you hook up to the Help charm.

{

var n = Windows.UI.ApplicationSettings;

var settingsPane = n.SettingsPane.getForCurrentView();

var vector = settingsPane.applicationCommands;

 

//Ensure no settings commands are currently specified in the settings charm   

vector.clear();

 

// Add a known settings command to the settings charm

var commandPreferences = new settingsSample.SettingsCommand(n.KnownSettingsCommand.help, OnHelp);

vector.append(commandHelp);

 

// Add a custom settings command to the settings charm

var commandParameters = new n.SettingsCommand("Custom.Parameters", "Parameters", OnParameters);

vector.append(commandParameters);

}

<body role="application">

...

<!-- Known settings command Preferences launches a settings panel -->

    <div id="KnownSettingsCommand.Help" style="visibility:hidden"

         data-win-control="WinJS.UI.SettingsPane"

         data-win-options="{width:'wide'}">

         <div class="win-label">

            <button onclick="WinJS.UI.SettingsPane.show()">

               <div style="background-image:url('images/back_sprite_40.png')"

                    class="win-spritestates"></div>

            </button>

            Help

         </div>

        <div>

               Your Help contents here.

        </div>

    </div>

<!-- END Help Panel -->

...

</body>

function AddSettingsPanel() { 

    var panel = document.getElementById("KnownSettingsCommand.Help");

       WinJS.UI.process(panel);

    }

You can also use online help by conditionally showing an iframe if the user is online.

function toggleHelp() {

    var onlineDiv = document.getElementById("onlineHelp");

    var offlineDiv = document.getElementById("offlineHelp");

    var condition = ((navigator.onLine) ? 'online':'offline');

    if (condition=='online') {

        onlineDiv.style.display = "inline";

        offlineDiv.style.display = "none";

    }

    else if (condition=='offline') {

        onlineDiv.style.display = "none";

        offlineDiv.Style.display = "inline";

    }

}

Help content should be a single page and can include text, links, and images. To provide the most current content, you should include a link to your support or home page or either embed an online page into your help page.

Before including Help content for your app, you should consider whether your app actually needs it.

Do open to your Help page from the Settings pane. The Help entry point shouldn't link directly to a website.

If your Help content does not fit into a single topic, or if you want to include information that requires updating, then add links to your support website from the Help content.

c.d.n