Task: System Information

This task, based on the Systeminfo sample delivered with the Tizen SDK, demonstrates how you can use the System Information API (in mobile and wearable applications) to retrieve and display status and details of various device-specific items. For more information on the sample functionality and creating the sample with the full source code, see SystemInfo.

This task consists of the following parts:

Defining the Application Layout defines how to create the application screens.
Displaying Device-specific Information defines how to display status information of the device properties.

This sample is a fully functional application for retrieving device-specific information and monitoring changes in the system property values.

Defining the Application Layout

The Systeminfo sample application layout consists of 2 screens: the main screen and the information screen.

The following figure shows the main screens of the application.

Figure: Systeminfo screens

Systeminfo screens

Defining the Main Screen

index.html Source File

The main screen of the application displays a list of system properties about which you can retrieve information. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.
```

<div data-role="page" id="main">
   
   <div data-role="header" data-position="fixed">
      <h1>System information</h1>
   </div>
```

The actual content section of the screen is defined within a <div> element whose data-role attribute is set to content. The content section of the main screen contains a list component (in mobile or wearable applications) displaying the system properties.

   <!--Content section-->
   <div data-role="content">
      <ul data-role="listview">
         <li id="storage-info">Storage</li>
         <li id="battery-info">Battery</li>
         <li id="cpu-info">CPU</li>
         <li id="display-info">Display</li>
         <li id="orientation-info">Device orientation</li>
      </ul>
   </div>

Defining the Information Screen

index.html Source File
1. The information screen of the application displays the details of a selected system property. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen, which varies depending on the list item the user clicks on the main screen.
```

<div data-role="page" id="info">
   
   <div data-role="header" data-position="fixed">
      <h1 id="info-title"></h1>
   </div>
```
2. The actual content section of the screen is defined within a <div> element whose data-role attribute is set to content. The content section of the information screen contains a list component displaying the details of the selected system property.
```
   
   <div data-role="content">
      <ul data-role="listview" id="info-list">
      </ul>
   </div>
</div>
```

Displaying Device-specific Information

This section builds upon the elements described in Retrieving the Current State of a Property.

Defining the List Item Types

main.js Source File
When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.

Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types:
- List item with 1 line (contains the property value)
```
function make1lineListItem(value) 
{
   return '<li>' + value + '</li>';
}
```
- List item with 2 lines (contains both the property title and value)
```
function make2lineListItem(title, value) 
{
   return '<li class="ui-li-has-multiline ui-li-text-ellipsis">'
          + title
          + '<span class="ui-li-text-sub">'
          + value
          + '</span></li>';
}
```
- Divider list item (contains a list divider title)
```
function makeDividerListItem(value) 
{
   return '<li data-role="list-divider">' + value + '</li>';
}
```

Displaying System Property Details

The system property retrieval is implemented in the main.js file.

If the user clicks a system property on the main screen, the getSystemProperty() method is invoked to check the property support and retrieve the property details. If the method succeeds, the applicable event handler displays the property values on the screen. Since all the system properties are displayed similarly, only some of them are described below.

Displaying the Battery Property Values
The onBatterySuccess() event handler determines the screen title for the BATTERY property information screen, and defines a list containing the battery level of the device, and information about whether the device is charging (both using list items with a 2-line format).

The changePage() method moves the application from the main screen to the information screen containing the defined list.
```
function onBatterySuccess(battery) 
{
   /* Screen title */
   gInfoTitle = "BATTERY";

   /* Property value list */
   gInfo = make2lineListItem("Level", battery.level)
           + make2lineListItem("Charging", (battery.isCharging == true ? "Yes" : "No"));

   /* Screen change */
   $.mobile.changePage("#info");
}
```

Displaying the Storage Property Values

The onStorageSuccess() event handler determines the screen title for the storage property information screen, and defines a list. The list contains the total, available, and removable storage space, and the storage type (all using list items with a 2-line format) for each storage found in the device, and a divider list item to identify each storage.

The changePage() method moves the application from the main screen to the information screen containing the defined list.

function onStorageSuccess(storages) 
{
   gInfoTitle = "STORAGE(" + storages.length + ")";
   gInfo = "";
   for (var i = 0; i < storages.length; i++) 
   {
      gInfo += makeDividerListItem("Storage " + (i + 1))
               + make2lineListItem("Type", storages.units[i].type)
               + make2lineListItem("Capacity", Math.floor(storages[i].capacity / 1000000) + " MB")
               + make2lineListItem("Available capacity", Math.floor(storages[i].availableCapacity / 1000000) + " MB")
               + make2lineListItem("Removable", (storages[i].isRemoveable == true ? "Yes" : "No"));
   }

   $.mobile.changePage("#info");
}

Displaying the Display Property Values

The onDisplaySuccess() event handler determines the screen title for the display property information screen, and defines a list containing the display details (using list items with 1- and 2-line formats). In addition, the details are divided into 4 sections by adding divider list items to the list.

The changePage() method moves the application from the main screen to the information screen containing the defined list.

function onDisplaySuccess(display) 
{
   gInfoTitle = "DISPLAY";
   gInfo = makeDividerListItem("Resolution")
           + make2lineListItem("Width", display.resolutionWidth)
           + make2lineListItem("Height", display.resolutionHeight)
           + makeDividerListItem("Dots per inch")
           + make2lineListItem("Horizontal", display.dotsPerInchWidth)
           + make2lineListItem("Vertical", display.dotsPerInchHeight)
           + makeDividerListItem("Physical size")
           + make2lineListItem("Width", display.physicalWidth)
           + make2lineListItem("Height", display.physicalHeight)
           + makeDividerListItem("Brightness")
           + make1lineListItem(display.brightness);

   $.mobile.changePage("#info");
}