Page Transition using storyboard with Corona in Cross Platform Mobile App

Introduction:

An application with multiple pages will definitely require transition while moving from one page to another. Different frameworks use different ways to do the page transition. Corona SDK is also providing ease ways to do the same stuff. One of them is using director class and another one is use of storyboard. So today we will how story board can be used to do the page transition in our cross-platform mobile application.

Description:

Before starting let’s make a scenario. We will have two pages named home and menu and we will apply transition on these two pages. Home and menu page will contain a message labels, on click of them we will apply the effect. And also we will have the main.lua file which is the landing page for corona SDK. So here is the code for main.lua file which is the starting page of our application.

main.lua:

— Hide status bar

display.setStatusBar( display.HiddenStatusBar)

— Assign default background colour to all the pages

display.setDefault(‘background’, 0, 0, 255);

— Called the storyboard module and assigned to a global variable

storyboard = require “storyboard”

— Redirect to home page

storyboard.gotoScene( “Home”, “slideLeft”, 500 )
——————– Main page code ends here——————————–

On above code you can see that I have defined a global variable which required the storyboard class which is mainly responsible to make the redirection of pages through the application. And then we called the function ‘gotoScene’ defined in storyboard class. Let’s discuss about the parameters passed in gotoScene function.

“Home”: This the page name where we need to redirect

“slideLeft” : Transition style. Corona provides various styles for this purpose. slideLeft is one of them.

500: It is the time defined in milliseconds to complete the transition.

So when the app get started, main.lua file will be called first and here storyboard.gotoScene( “Home”, “slideLeft”, 500 ) will redirect to home page with a transition effect.In same way we have home and menu pages.

home.lua:

— Define the home screen

local homeScreen = storyboard.newScene()

— Define a local variable

local homePageMsgTxt

— Touch event listener for message container

local function onHomePageMsgTxtTouch( self, event )

— Condition for starting of touch event

if event.phase == “began” then

print( ‘Touched on home message container’ )

— Redirect to Menu page

storyboard.gotoScene( “Menu”, “slideLeft”, 500 )

end

end

— Called when the home screen’s view does not exist and it will create the screen

function homeScreen:createScene( event )

— Define home screen view

local homeScreenGroup = self.view

— Define text container to display message

homePageMsgTxt = display.newText( “Hi This is home page. Click here to move on menu page.”, 0, 0,

display.contentWidth, display.contentHeight * 0.5, native.systemFontBold, 30 )

homePageMsgTxt:setTextColor( 255, 255, 255 )    — Define text color of the message

homePageMsgTxt:setReferencePoint( display.CenterReferencePoint )  — Set the display reference point

homePageMsgTxt.x, homePageMsgTxt.y = display.contentWidth * 0.5, display.contentHeight * 0.5  — Define x,y cordinates of the container

— Insert the container to home screen view

homeScreenGroup:insert( homePageMsgTxt )

— Assign a function to the touch event of the message container

homePageMsgTxt.touch = onHomePageMsgTxtTouch

— Bind the touch event with the message container

homePageMsgTxt:addEventListener( “touch”, homePageMsgTxt )

print( “Home screen created”)

end

— Called immediately after screen has moved onscreen

function homeScreen:enterScene( event )

— TODO : Here we can remove previous screen

end

— Called when screen is about to move out of screen

function homeScreen:exitScene( event )

end

— Called prior to the removal of screen’s “view” i.e. display group

function homeScreen:destroyScene( event )

— TODO : destroy screen elements here

end

— Bind events with the screen

homeScreen:addEventListener( “createScene”, homeScreen )

homeScreen:addEventListener( “enterScene”, homeScreen )

homeScreen:addEventListener( “exitScene”, homeScreen )

homeScreen:addEventListener( “destroyScene”, homeScreen )

return homeScreen

——————– Home page ends here ——————————

menu.lua :

— Define the menu screen

local menuScreen = storyboard.newScene()

— Define a local variable

local menuPageMsgTxt

— Touch event listener for message container

local function onMenuPageMsgTxtTouch( self, event )

— Condition for starting of touch event

if event.phase == “began” then

print( ‘Touched on menu message container’ )

— Redirect to Home page

storyboard.gotoScene( “Home”, “slideRight”, 500 )

end

end

— Called when the menu screen’s view does not exist and it will create the screen

function menuScreen:createScene( event )

— Define menu screen view

local menuScreenGroup = self.view

— Define background view container

backGroundView = display.newRect( 0, 0, display.contentWidth, display.contentHeight )

backGroundView:setFillColor( 255, 0, 0 )  — Set background color

— Insert to the main container

menuScreenGroup:insert( backGroundView )

— Define text container to display message

menuPageMsgTxt = display.newText( “Hi This is home page. Click here to move back on home page.”, 0, 0,

display.contentWidth, display.contentHeight * 0.5, native.systemFontBold, 30 )

menuPageMsgTxt:setTextColor( 255, 255, 255 )    — Define text color of the message

menuPageMsgTxt:setReferencePoint( display.CenterReferencePoint )  — Set the display reference point

menuPageMsgTxt.x, menuPageMsgTxt.y = display.contentWidth * 0.5, display.contentHeight * 0.5  — Define x,y cordinates of the container
— Insert the container to home screen view

menuScreenGroup:insert( menuPageMsgTxt )

— Assign a function to the touch event of the message container

menuPageMsgTxt.touch = onMenuPageMsgTxtTouch

— Bind the touch event with the message container

menuPageMsgTxt:addEventListener( “touch”, menuPageMsgTxt )

print( “Menu screen created”)

end

— Called immediately after screen has moved onscreen

function menuScreen:enterScene( event )

— TODO : Here we can remove previous screen

end

— Called when screen is about to move out of screen

function menuScreen:exitScene( event )

end

— Called prior to the removal of screen’s “view” i.e. display group

function menuScreen:destroyScene( event )

— TODO : destroy screen elements here

end

— Bind events with the screen

menuScreen:addEventListener( “createScene”, menuScreen )

menuScreen:addEventListener( “enterScene”, menuScreen )

menuScreen:addEventListener( “exitScene”, menuScreen )

menuScreen:addEventListener( “destroyScene”, menuScreen )

return menuScreen

——————— Menu page ends here ——————————-

So on above code for home and menu pages you can see that each time we have created the new page (screen) by calling the function ‘storyboard.newScene()’. Then we have defined different event listeners with those pages to implement UI elements and also to manage the elements throughout the life of these pages.

Summary:

By using storyboard we can easily do the page navigation and also additionally we can take the advantages of different instances of the page like createScene, enterScene, exitScene, destroyScene to apply our own functional logics and mostly for memory management.

Written ByRaju 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