Screen Orientation example

The index.html file containing JavaScript that makes use of the Screen Orientation API functionality is listed below.

<!DOCTYPE html>
<html manifest="manifest.appcache">
  <head>
    <title>Screen Orientation API</title>
    <link rel="x-antenna-managed-webapp-descriptor" href="webapp-descriptor.xml" />
    <script type="text/javascript">

      function printText(str) {
        var d = document.getElementById('text-box');
        d.appendChild(document.createTextNode(str));
        d.appendChild(document.createElement('br'));
        d.scrollTop = d.scrollHeight;
      }

      function setAllowed() {
        window.launchbox.ScreenOrientation.setAllowed({
            'pp': document.getElementById("demo_box_1").checked,
            'pd': document.getElementById("demo_box_2").checked,
            'll': document.getElementById("demo_box_3").checked,
            'lr': document.getElementById("demo_box_4").checked
        });
      }

    </script>
  </head>


  <body>
    <header>
      <h3>
	  AMP Hybrid Client
        <span>Screen Orientation API usage example</span>
      </h3>
    </header>

    <div class="checkbox">
      <input id="demo_box_1" type="checkbox" checked="checked"/>
      <label for="demo_box_1">Portrait</label>
      <br/>

      <input id="demo_box_2" type="checkbox" checked="checked"/>
      <label for="demo_box_2">Portrait upside down</label>
      <br/>

      <input id="demo_box_3" type="checkbox" checked="checked"/>
      <label for="demo_box_3">Landscape left</label>
      <br/>

      <input id="demo_box_4" type="checkbox" checked="checked"/>
      <label for="demo_box_4">Landscape right</label>
    </div>

    <input type="button" onclick="setAllowed();" value="Set allowed orientation"/>
    <div id="text-box">
    </div>

  </body>
</html>

The contents of the cache manifest file called manifest.appcache for this application are listed below:

CACHE MANIFEST

CACHE:
index.html

NETWORK:
*

The webapp-descriptor.xml file for this application is defined in the following way:

<?xml version="1.0" encoding="UTF-8"?>
<webapp-descriptor xmlns="http://www.pega.com/application-hosting/
web-app-descriptor/2.0">
    <id>com.pega.sample.ScreenOrientation</id>
    <version>1.0.0</version>
    <name>Screen Orientation API usage example</name>
</webapp-descriptor>

Screen Orientation

Screen Orientation example

Related topics