Page Navigation using Director Class with Corona SDK

Introduction:
In every application we have different pages to hold different components and we need to navigate from one to another. With the Corona SDK, we have different ways for page navigation like navigation using director class, storyboard and so on. So here we will discuss about the page navigation using ‘director.lua’ class.

Description:
Suppose we have two windows, window1 and window2 and every application prepared with Corona have a landing page or we can say it as a start page for the application named as ‘main.lua’. If someone renames this file then app will not run. In order to use director class we need to put the director.lua file to root directory of the project with main.lua file.

main.lua:
— Hide status bar

display.setStatusBar( display.HiddenStatusBar )
— Import director library
local director = require( ‘director’ )
— Define a group
local mainPageGroup = display.newGroup()
— Define app start function

Function startApp()

Print (‘Start of application!’)
— director view used as master page
mainPageGroup:insert( director.directorView )
— Move to window1 page
director:changeScene( ‘win1’ )
return true;
end

startApp()

If you look into the above code an instance of director class and a local group is made to contain the all UI elements of the page. As application get started and it comes this landing page the startApp() gets executed. In this function director class instance called changeScene() to navigate on win1 window. Here you can see that the changescene function takes a parameter which is the page name to which page gets navigated without .lua extension.

win1.lua :
— Expose the module throughout the app
module(…, package.seeall)
— Function to hold win1 page UI elements
function new()
— Define a group for win1
local win1Group = display.newGroup()
local messageTxt = display.newText( “This is window1!”, 0, 0, “HelveticaNeue”, 35 )
messageTxt( 0, 0, 0 )
messageTxt.x = 100
messageTxt.y = 100
win1Group:insert( messageTxt )
— Function for moving to window2
local moveToWin2 = function()
— Director class called for page navigation
director:changeScene( ‘win2’, ‘flip’ )
end
— Timer define to call a function after 5 seconds
timer.performWithDelay( 5000, moveToWin2)
return menuGroup
end

At the beginning of this file ‘module (…, package.seeall)’ is added to exposed this file throughout the application. There is a function called as ‘new ()’ which contains all the necessary UI elements for these page. The name of this function is also predefined if we rename this function than this page cannot be called by other page using director class.

Timer is used to call the moveToWin2  function to navigate to win2 with flip style to make the transition effect.

win2.lua file :
— Expose the module throughout the app
module(…, package.seeall)
— Function to hold window2 page UI elements
function new()
— Define a group for menu
local win2Group = display.newGroup()
local messageTxt = display.newText( “This is window2!”, 0, 0, “HelveticaNeue”, 35 )
messageTxt( 0, 0, 0 )
messageTxt.x = 100
messageTxt.y = 100
win2Group:insert( messageTxt )
return win2Group
end

Summary:
So here we have describe page navigation process using director class. We can also have different transition style like flip, moveFromRight, moveFromLeft etc.

NOTE: This will works in any platform supported by corona framework.

Written By: Raju Mahato, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s