The PageNavigation sample application demonstrates how you can handle page navigation with JavaScript.

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

The following figure illustrates the main screen of the PageNavigation.

Figure: PageNavigation screen

The application opens with the main screen. You can navigate between the Main page, second page, and third page by clicking Prev and Next. To move to the previous page, you can also press the Back key of the device.

The page sequence is: Main page -> Second page -> Third page.

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 the 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 screens.
js/main.js	This file contains the code for handling the main functionality of the application.
js/page.js	This file contains the code for handling the page navigation.

Implementation

To implement page navigation:

1. To use the page.js file, add related scripts in the index.html file:

   <script src="js/main.js"></script>
   <script src="js/page.js"></script>
   

2. When the application starts, make a PageControl object that handles page navigation:

   pageControl = new PageControl();
   pageSequence = ["pageMain", "pageSecond", "pageThird"];
   
   for (i = 0; i < pageSequence.length; i++) 
   {
      pageControl.addPage(pageSequence[i]);
   }
   

3. After the PageControl object is registered, create buttons and register events for each page:

   for (i = 0; i < pageSequence.length; i++) 
   {
      pageDiv = document.querySelector("#" + pageSequence[i]).querySelector(".detail");
      wrapBtn = document.createElement("div");
      btnForward = document.createElement("div");
      btnBackward = document.createElement("div");
   
      wrapBtn.className = "wrapNaviBtn";
      btnForward.appendChild(document.createTextNode("Next >>"));
      btnForward.className = "naviBtn";
      if (i + 1 < pageSequence.length) 
      {
         btnForward.addEventListener("click", pageControl.moveNextPage);
      }
      btnBackward.appendChild(document.createTextNode("<< Prev"));
      btnBackward.className = "naviBtn";
      if (i > 0) 
      {
         btnBackward.addEventListener("click", pageControl.movePrevPage);
      }
   
      wrapBtn.appendChild(btnBackward);
      wrapBtn.appendChild(btnForward);
      pageDiv.appendChild(wrapBtn);
   }
   

4. Add a hardware key event handler to make the PageControl object to return to the previous page when the Back key is pressed:

   if (event.keyName === "back") 
   {
      if (pageControl.isMainPage() || pageControl.moveBackPage() === false) 
      {
         try 
         {
            tizen.application.getCurrentApplication().exit();
         } 
         catch (ignore) {}
      }
   }