Page Navigation Sample Overview

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

The following figure illustrates the main screen of the Page Navigation.

Figure: Page Navigation 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.

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) {}
      }
   }