Windows 8 App View States kontrollieren

Eine Windows 8-App kann unterschiedliche Gestalten annehmen. Besonders beliebt beim Benutzer ist die Funktion, eine Windows 8-App an die Seitenleiste zu heften. Diese Aktion (auch „snapping“ genannt) führt dazu, dass der App nur noch 320 Pixel Breite zur Verfügung stehen (siehe Guidelines for snapped and fill views). Als Programmierer muss man darauf reagieren, damit die App auch im Snap View sinnvolle Informationen anzeigt oder in einen pausierten Zustand übergeht. Ein Möglichkeit zur Erkennung, möchte ich mit JavaScript vorstellen. Ein sehr gutes Code-Beispiel gibt es auch im Microsoft Entwicklungscenter.

Code

default.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<html>
  <head>
    <meta charset="utf-8" />
    <title>ViewState Sample</title>
 
    <!-- WinJS references -->
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
 
    <!-- CSS -->
    <style>
      body{
        background-color: lightblue;
        font-family: "Segoe UI Semilight";
        font-size: 42pt;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- Display -->
    <div id="viewStateDisplay"></div>
    <!-- Respond to view states -->
    <script>
      var viewStateDisplay = document.getElementById("viewStateDisplay");
 
      window.onload = window.onresize = function(){
        var currentViewState = Windows.UI.ViewManagement.ApplicationView.value;
        var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
        var statusText = "Error: Invalid view state returned.";
 
        switch (currentViewState) {
          case viewStates.snapped:
            statusText = "This app is snapped!";
            break;
          case viewStates.filled:
            statusText = "This app is in filled state!";
            break;
          case viewStates.fullScreenLandscape:
            statusText = "This app is full screen landscape!";
            break;
          case viewStates.fullScreenPortrait:
            statusText = "This app is full screen portrait!";
            break;
        }
 
        viewStateDisplay.innerHTML = statusText;
      }
    </script>
  </body>
</html>

Best Practices

Schöner als die direkte Implementierung der window.onresize-Methode ist die Verwendung eines Event Listeners:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var viewStateDisplay = document.getElementById("viewStateDisplay");
 
function displayViewState() {
  var currentViewState = Windows.UI.ViewManagement.ApplicationView.value;
  var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
  var statusText = "Error: Invalid view state returned.";
 
  switch (currentViewState) {
    case viewStates.snapped:
      statusText = "This app is snapped!";
      break;
    case viewStates.filled:
      statusText = "This app is in filled state!";
      break;
    case viewStates.fullScreenLandscape:
      statusText = "This app is full screen landscape!";
      break;
    case viewStates.fullScreenPortrait:
      statusText = "This app is full screen portrait!";
      break;
  }
 
  viewStateDisplay.innerHTML = statusText;
}
 
window.addEventListener("load", displayViewState);
window.addEventListener("resize", displayViewState);

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.