Mobile Front-End Basics: Using Composer and Material-UI

In my last post I talked about using Corona-SDK, Lua, and Material-UI for my project. In this post, I’ll discuss the basics of using composer in a mobile application project within the Corona SDK. I’ll also discuss how to use Material-UI as a front end framework for button creation, animations, etc.

Composer handles scene management within Corona. For tutorials and more information on Corona see the getting started page (https://coronalabs.com/resources/tutorials/getting-started-with-corona/). A basic menu.lua file within the corona framework can be found here under the Scene Template section (https://docs.coronalabs.com/guide/system/composer/index.html). Using this template, you can see there are a few different functions: scene:create, scene:show, scene:hide, and scene:destroy. I am building a business app, so all of my code goes within the scene:create function. This means that it will start to load right before it is going to be on the screen. If you are building a game, or including a timer, you will probably want to include things that should happen right as the screen loads in the scene:show function. Then, if you need to hide things or destroy things before the scene is unloaded you can do that in the scene:hide or scene destroy functions.

I am building a business app, so every scene that I use must be destroyed when it leaves the screen so that I when I go back to the scene it is as if I was going there for the first time. This is not always the desired functionality, but for a business app it probably is. This means that in the scene:destroy function I have to include a composer.removeScene( scenename ) piece of code after I transition to a new scene. The tutorial that I linked above is really good at discussing scene management and should be sufficient to learn how composer handles scene management.

To create a basic menu, I am using Material-UI. Material-UI is the Lua version of Google’s material design. This gave me a lot of structure and reduced the number of front-end design decisions that I had to make. Below, you will find my Material-UI, Lua, and composer code for my menu along with a screen shot of what it looks like.

CODE FOR BASIC MENU SCREEN

local composer = require( “composer” )
local mui = require( “materialui.mui” )
local scene = composer.newScene()

— ———————————————————————————–
— Code outside of the scene event functions below will only be executed ONCE unless
— the scene is removed entirely (not recycled) via “composer.removeScene()”
— ———————————————————————————–

— ———————————————————————————–
— Scene event functions
— ———————————————————————————–

— create()
function scene:create( event )

local sceneGroup = self.view

display.setDefault(“background”, 0,0,0)
background = display.newRect( 0, 0, display.contentWidth, display.contentHeight)
background.anchorX = 0
background.anchorY = 0
background.x, background.y = 0, 0
background:setFillColor( 0,0.6,1,1 )
sceneGroup:insert( background )

mui.init()

local function handleButtonEvent( event )
composer.removeScene(“menu”)
composer.gotoScene(“choose_level_type”, { effect = “crossFade”, time = 500 } )
return true
end

local function handleButtonEvent2( event )
composer.removeScene(“menu”)
composer.gotoScene(“settings”, { effect = “crossFade”, time = 500 } )
return true
end

local function handleButtonEvent3( event )
composer.removeScene(“menu”)
composer.gotoScene(“help”, { effect = “crossFade”, time = 500 } )
return true
end

textOptions = {
parent = sceneGroup,
y = mui.getScaleVal(140),
x = display.contentWidth / 2,
name = “title-main”,
text = “My Title Here”,
align = “center”,
width = mui.contentWidth,
font = native.systemFontBold,
fontSize = mui.getScaleVal(65),
fillColor = { 1, 1, 1, 1 },
}
local title = mui.newText(textOptions)

local button1 = mui.newRoundedRectButton({
parent = sceneGroup,
name = “play”,
text = “Play”,
width = mui.getScaleVal(400),
height = mui.getScaleVal(100),
x = display.contentWidth/2,
y = mui.getScaleVal(320),
font = native.systemFont,
fillColor = { 1,1,1 },
textColor = { .4,.4,.4 },
callBack = handleButtonEvent,
})

local button2 = mui.newRoundedRectButton({
parent = sceneGroup,
name = “settings”,
text = “Settings”,
width = mui.getScaleVal(400),
height = mui.getScaleVal(100),
x = display.contentWidth/2,
y = mui.getScaleVal(500),
font = native.systemFont,
fillColor = { 1,1,1 },
textColor = { .4,.4,.4 },
callBack = handleButtonEvent2,
})

local button3 = mui.newRoundedRectButton({
parent = sceneGroup,
name = “Help”,
text = “Help”,
width = mui.getScaleVal(400),
height = mui.getScaleVal(100),
x = display.contentWidth/2,
y = mui.getScaleVal(680),
font = native.systemFont,
fillColor = { 1,1,1 },
textColor = { .4,.4,.4 },
callBack = handleButtonEvent3,
})
— Code here runs when the scene is first created but has not yet appeared on screen

end

— show()
function scene:show( event )

local sceneGroup = self.view
local phase = event.phase
local params = event.params

if ( phase == “will” ) then
— Code here runs when the scene is still off screen (but is about to come on screen)

elseif ( phase == “did” ) then
— Code here runs when the scene is entirely on screen

end
end

— hide()
function scene:hide( event )

local sceneGroup = self.view
local phase = event.phase

if ( phase == “will” ) then
— Code here runs when the scene is on screen (but is about to go off screen)

elseif ( phase == “did” ) then
— Code here runs immediately after the scene goes entirely off screen

end
end

— destroy()
function scene:destroy( event )

local sceneGroup = self.view
mui.destroy()
— Code here runs prior to the removal of scene’s view

end

— ———————————————————————————–
— Scene event function listeners
— ———————————————————————————–
scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )
— ———————————————————————————–

return scene

Screenshot of what it should look like.

Then, I just need to create a play.lua file, settings.lua file, and help.lua file which will be loaded when each button is clicked respectively.

That’s it for this post. Next time I’ll discuss how to set up a few more menu types.

 

Leave a Comment

Your email address will not be published. Required fields are marked *

css.php