The ScreenOrientation sample application demonstrates how you can access the current screen orientation.

For information on creating the sample application project in the IDE, see Creating Sample Applications.

The following figure illustrates the main screen of the ScreenOrientation.

Figure: ScreenOrientation screen

The application displays the current screen orientation as the device changes its orientation:

• The orientation value can be portrait-primary, landscape-primary, or landscape-secondary.
• The default mode is portrait-primary.

Source Files

You can create and view the sample application project including the source files in the IDE.

File name	Description
config.xml	This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
css/style.css	This file contains CSS styling for the application UI.
index.html	This is a starting file from which the application starts loading. It contains the layout of the application screen.
js/main.js	This file contains the code for handling the main application functionalities.

Implementation

To manage the screen orientation:

• To access the screen orientation, the screen-orientation property of the Tizen setting details in the config.xml file must be set to auto-rotation.

  Set the value in the Tizen tab of the Web application configuration editor.

• To retrieve the current screen orientation, use the screen.orientation attribute:

  var orientationValue = document.getElementById('orientation');
  orientationValue.innerHTML = screen.orientation;

• To receive notifications of the screen orientation changes, add an event listener to the screen object:

  screen.addEventListener("orientationchange", showOrientation, false);