how to make a simple reference app?

jjyo888 · September 4, 2012, 12:31am

Hi, do I need to learn HTML to create a simple reference app or Lua language is enough in corona?

Here is a sample picture that i in vision to create using corona:
http://i10.photobucket.com/albums/a138/jjyo888/Learnchinesehokkien.jpg
http://i10.photobucket.com/albums/a138/jjyo888/Learnchinesehokkiencontent.jpg [import]uid: 156195 topic_id: 30554 reply_id: 330554[/import]

jjyo888 · September 4, 2012, 12:38am

how can i post a picture? [import]uid: 156195 topic_id: 30554 reply_id: 122392[/import]

CraftyDeano · September 4, 2012, 1:11am

I don’t think you can post pictures here, just links to them.

I cant see the pictures you have posted because of my works proxy, can you email them directly to me ( deano.uk @ gmail .com ) and I’ll give you some assistance.

[import]uid: 62706 topic_id: 30554 reply_id: 122395[/import]

jjyo888 · September 4, 2012, 1:24am

Hi CraftyDeano, i sent you the pics. hope you can help me. thanks [import]uid: 156195 topic_id: 30554 reply_id: 122398[/import]

CraftyDeano · September 4, 2012, 2:49am

Thanks, I got the email.

I’ll put a bit of code together for you in a little while [import]uid: 62706 topic_id: 30554 reply_id: 122402[/import]

CraftyDeano · September 4, 2012, 4:22am

Have a look at this, i threw it together on my lunch break.

I will try and go back and comment some of the code but it should make a bit of sense

Note - only first words button works.

[lua]-- save as main.lua
_W = display.contentWidth / 2
_H = display.contentHeight / 2

function mainMenu()

mainMenuDisplayGroup = display.newGroup()

headerText = display.newText(“Beginners”, 0, 0, native.systemFontBold, 24)
headerText:setReferencePoint(display.CenterReferencePoint)
headerText.x = _W
headerText.y = _H - 200
headerText:setTextColor(255, 0, 0)

firstwordsRect = display.newRect(0, 0, 310,20)
firstwordsRect:setFillColor(100, 150, 255)
firstwordsRect.x = _W
firstwordsRect.y = _H - 160
firstwordsRect.name = “firstwordsBTN”

firstwordsText = display.newText(“First Words”, 0, 0, native.systemFont, 20)
firstwordsText:setReferencePoint(display.CenterLeftReferencePoint)
firstwordsText.x = _W - 150
firstwordsText.y = _H - 160
firstwordsText:setTextColor(255, 0, 0)

foodRect = display.newRect(0, 0, 310,20)
foodRect:setFillColor(100, 150, 255)
foodRect.x = _W
foodRect.y = _H - 130

foodText = display.newText(“Food”, 0, 0, native.systemFont, 20)
foodText:setReferencePoint(display.CenterLeftReferencePoint)
foodText.x = _W - 150
foodText.y = _H - 130
foodText:setTextColor(255, 0, 0)

mainMenuDisplayGroup:insert( headerText )
mainMenuDisplayGroup:insert( firstwordsRect )
mainMenuDisplayGroup:insert( firstwordsText )
mainMenuDisplayGroup:insert( foodRect )
mainMenuDisplayGroup:insert( foodText )

firstwordsRect:addEventListener(“tap”, menuTween)

end

function firstwordsMenu()

firstwordsMenuDisplayGroup = display.newGroup()

headerText = display.newText(“First Words”, 0, 0, native.systemFontBold, 24)
headerText:setReferencePoint(display.CenterReferencePoint)
headerText.x = _W
headerText.y = _H - 200
headerText:setTextColor(255, 0, 0)

backgroundRect = display.newRect(0, 0, 320,480)
backgroundRect:setFillColor(100, 150, 255)
backgroundRect.x = _W
backgroundRect.y = _H

line1Text = display.newText(“Today = Kin a dit”, 0, 0, native.systemFont, 20)
line1Text:setReferencePoint(display.CenterLeftReferencePoint)
line1Text.x = _W - 150
line1Text.y = _H - 160
line1Text:setTextColor(255, 0, 0)

line2Text = display.newText(“Tomorrow = Bin a dit”, 0, 0, native.systemFont, 20)
line2Text:setReferencePoint(display.CenterLeftReferencePoint)
line2Text.x = _W - 150
line2Text.y = _H - 130
line2Text:setTextColor(255, 0, 0)

backText = display.newText(“Tap to go Back”, 0, 0, native.systemFont, 20)
backText.x = _W
backText.y = _H
backText:setTextColor(255, 0, 0)
backText.name = “backBTN”

firstwordsMenuDisplayGroup:insert( backgroundRect )
firstwordsMenuDisplayGroup:insert( headerText )
firstwordsMenuDisplayGroup:insert( line1Text )
firstwordsMenuDisplayGroup:insert( line2Text )
firstwordsMenuDisplayGroup:insert( backText )

backText:addEventListener(“tap”, menuTween)

end

function menuTween(event)
if event.target.name == “firstwordsBTN” then
transition.to(mainMenuDisplayGroup,{time = 750, alpha = 0,transition = easing.inlinear, onComplete = firstwordsMenu})
firstwordsRect:removeEventListener(“tap”, menuTween)
elseif event.target.name == “backBTN” then
transition.to(firstwordsMenuDisplayGroup,{time = 750, alpha = 0,transition = easing.inlinear, onComplete = mainMenu})
backText:removeEventListener(“tap”, menuTween)
end
end

mainMenu()[/lua]

Config:
[lua]-- save as config.lua
application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
fps = 60,
antialias = true,
xalign = “center”,
yalign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}[/lua]
[import]uid: 62706 topic_id: 30554 reply_id: 122417[/import]

jjyo888 · September 4, 2012, 4:40am

Thank you very much CraftyDeano. wow! it looks like a lot of code. I’m a newbie in coding. is this code in Lua or html? can i paste this to my textedit then run in corona simulator? [import]uid: 156195 topic_id: 30554 reply_id: 122420[/import]

CraftyDeano · September 4, 2012, 5:18am

its all in lua, if you save one file as main.lua and the other as config.lua, it’ll run in your simulator.

If you want any of it explained in detail, let me know [import]uid: 62706 topic_id: 30554 reply_id: 122424[/import]

Omnigeek_Media · September 4, 2012, 7:29am

Looking at your mockup’s it can be done directly in Lua/Corona. You will need to know how to use the Widget library, in particular tableViews and it would probably be useful to know Storyboard since you’re going to need to change screens. It will be a bit of code.

This app also wouldn’t be too difficult to do directly in Objective-C, though as a programming language is it much much heavier on syntax and is more confusing.

As an HTML page, you’re probably going to build an unordered list, style it with CSS and then use something like jQuery Mobile to make it function like a mobile app. Probably less code, but it won’t be a native app and you will have to deal with phone users who are used to apps and not HTML5 apps being installed on their devices.
[import]uid: 19626 topic_id: 30554 reply_id: 122445[/import]

jjyo888 · September 4, 2012, 7:37am

thanks robmiracle. yes i need to learn how to code first in order to make this app into reality. do i need to learn python first before lua? or go directly to lua? [import]uid: 156195 topic_id: 30554 reply_id: 122449[/import]

jjyo888 · September 4, 2012, 7:38am

thanks craftydeano. i will try this code to corona simulator. [import]uid: 156195 topic_id: 30554 reply_id: 122450[/import]

jjyo888 · September 4, 2012, 8:33am

@craftydeano - So cool, it works. Im so excited to learn corona after i click the first words, it transfer to the next page, very fascinating in did. now i like to put a background. how can i do that? [import]uid: 156195 topic_id: 30554 reply_id: 122458[/import]

Omnigeek_Media · September 4, 2012, 8:35am

I don’t see why you would need to learn python at all.

[import]uid: 19626 topic_id: 30554 reply_id: 122460[/import]

CraftyDeano · September 4, 2012, 8:42am

You don’t need to learn python, but i found the python tutorial at www.udacity.com very good to learn the basic fundamentals of programming.

put this code into a function, to load a background from an image file.

[lua] menuBG = display.newImageRect(“menubg.png”,320,480)
menuBG.x = _W
menuBG.y = _H[/lua]

You will need to create a file called menubg.png and place it in the same directory as your main.lua

The above code I pasted is quite basic, but should show you the basics of how texts, rectangles and now images are displayed.

along with transitions between different ‘pages’ of your app. [import]uid: 62706 topic_id: 30554 reply_id: 122463[/import]

jjyo888 · September 4, 2012, 12:38am