Share Your Code

abc alphabet learner Tutorial using table View in ansca corona

Posted by Deepak Singh Rawat, Posted on September 19, 2011, Last updated December 6, 2011

GitHub URL: 
https://abc-lerner-for-kids.googlecode.com/files/Iphone%20Alphabet%20Reader%20For%20kids.zip

This tutorial is build using list view of corona sample.

For more information check my blog :-
www.anscacorona.blogspot.com

or

My youtube channel :-

www.youtube.com/user/iphonemaclover

thank you

Have fun with corona SDK

--xxxxxxxxxxxxxxx main.lua file xxxxxxxxxxxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
--import the table view library
local tableView = require("tableView")
 
--import the button events library
local ui = require("ui")
 
display.setStatusBar( display.HiddenStatusBar ) 
------
--initial values
local image
local screenOffsetW, screenOffsetH = display.contentWidth -  display.viewableContentWidth, display.contentHeight - display.viewableContentHeight
 
local myList, backBtn, detailScreenText
 
local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
background:setFillColor(77, 77, 77)
 
--Uncomment the line below to see a background image
-- local background = display.newImage("coffeeBg.png")
 
--setup a destination for the list items
local detailScreen = display.newGroup()
 
local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,255,255)
detailScreen:insert(detailBg)
 
detailScreenText = display.newText("For", 0, 0, native.systemFontBold, 24)
detailScreenText:setTextColor(0, 0, 0)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/4)        
detailScreen.x = display.contentWidth
 
--setup the table
local data = {}  --note: the declaration of this variable was moved up higher to broaden its scope
 
--iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50)  --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180)  --set the color fill to light blue
selected.isVisible = false  --hide color fill until needed
 
--setup functions to execute on touch of the list view items
function listButtonRelease( event )
        self = event.target
        local id = self.id
        print(self.id)
        ------>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
        
        ---000000000000000000000000000000000000000000
        
        --00000000000000000000000000000000000000000000
        detailScreenText.text =
        data[id].subtitle.." for ".. data[id].title --added this line to make the right side of the screen more interesting
 
-----adding new image with call
 
    image1 = display.newImage(data[id].image1);
        image1.x=160
        image1.y=270
              
------------------------------
 
 
---000000000000000000000000000000000000000000
 
--00000000000000000000000000000000000000000000
 
        --check for screen width of the iPad
        if system.getInfo("model") == "iPad" then                       
                selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
                selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
                selected.isVisible = true --iPad: show the fill color
        else
                transition.to(myList, {time=400, x=display.contentWidth*-1, transition=easing.outExpo })
                transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
                transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
                transition.to(backBtn, {time=400, alpha=1 })
        
                delta, velocity = 0, 0
        end
end
 
function backBtnRelease( event )
        print("back button released")
        
        --->>>>>>>>>>>>>>>>>>
        image1.isVisible=false
        ---->>>>>>>>>>>>>>>>>
        transition.to(myList, {time=400, x=0, transition=easing.outExpo })
        transition.to(detailScreen, {time=400, x=display.contentWidth, transition=easing.outExpo })
        transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
        transition.to(backBtn, {time=400, alpha=0 })
 
        delta, velocity = 0, 0
end
 
--setup each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = "Apple"
data[1].subtitle = "A"
data[1].image = "a.png"
data[1].image1 = "apple.png"
 
data[2] = {}
data[2].title = "Ball"
data[2].subtitle = "B"
data[2].image = "b.png"
data[2].image1 = "ball.png"
 
data[3] = {}
data[3].title = "Cat"
data[3].subtitle = "C"
data[3].image = "c.png"
data[3].image1 = "cat.png"
 
data[4] = {}
data[4].title = "Dog"
data[4].subtitle = "D"
data[4].image = "d.png"
data[4].image1 = "dog.png"
 
data[5] = {}
data[5].title = "Elephant"
data[5].subtitle = "E"
data[5].image = "e.png"
data[5].image1 = "elephant.png"
 
data[6] = {}
data[6].title = "Fish"
data[6].subtitle = "F"
data[6].image = "f.png"
data[6].image1 = "fish.png"
 
-------------------------------------------
 
data[7] = {}
data[7].title = "Grapes"
data[7].subtitle = "G"
data[7].image = "g.png"
data[7].image1 = "grapes.png"
 
 
data[8] = {}
data[8].title = "Horse"
data[8].subtitle = "H"
data[8].image = "h.png"
data[8].image1 = "horse.png"
 
 
data[9] = {}
data[9].title = "Inkpot"
data[9].subtitle = "I"
data[9].image = "i.png"
data[9].image1 = "inkpot.png"
 
 
data[10] = {}
data[10].title = "Joker"
data[10].subtitle = "J"
data[10].image = "j.png"
data[10].image1 = "joker.png"
 
 
data[11] = {}
data[11].title = "Kite"
data[11].subtitle = "K"
data[11].image = "k.png"
data[11].image1 = "kite.png"
 
 
 
data[12] = {}
data[12].title = "Lion"
data[12].subtitle = "L"
data[12].image = "l.png"
data[12].image1 = "lion.png"
 
 
 
data[13] = {}
data[13].title = "Monkey"
data[13].subtitle = "M"
data[13].image = "m.png"
data[13].image1 = "monkey.png"
 
 
 
data[14] = {}
data[14].title = "Niddle"
data[14].subtitle = "N"
data[14].image = "n.png"
data[14].image1 = "niddle.png"
 
 
 
data[15] = {}
data[15].title = "Orange"
data[15].subtitle = "O"
data[15].image = "o.png"
data[15].image1 = "orange.png"
 
 
 
data[16] = {}
data[16].title = "Peacock"
data[16].subtitle = "P"
data[16].image = "p.png"
data[16].image1 = "peacock.png"
 
 
 
data[17] = {}
data[17].title = "Queen"
data[17].subtitle = "Q"
data[17].image = "q.png"
data[17].image1 = "queen.png"
 
 
data[18] = {}
data[18].title = "Rose"
data[18].subtitle = "R"
data[18].image = "r.png"
data[18].image1 = "rose.png"
 
 
data[19] = {}
data[19].title = "Ship"
data[19].subtitle = "S"
data[19].image = "s.png"
data[19].image1 = "ship.png"
 
 
data[20] = {}
data[20].title = "Teeth"
data[20].subtitle = "T"
data[20].image = "t.png"
data[20].image1 = "teeth.png"
 
 
data[21] = {}
data[21].title = "Umbrella"
data[21].subtitle = "U"
data[21].image = "u.png"
data[21].image1 = "umbrella.png"
 
 
 
data[22] = {}
data[22].title = "violin"
data[22].subtitle = "V"
data[22].image = "v.png"
data[22].image1 = "violin.png"
 
 
 
data[23] = {}
data[23].title = "Window"
data[23].subtitle = "W"
data[23].image = "w.png"
data[23].image1 = "window.png"
 
 
 
data[24] = {}
data[24].title = "Xmas tree"
data[24].subtitle = "X"
data[24].image = "x.png"
data[24].image1 = "xmass.png"
 
 
 
data[25] = {}
data[25].title = "Yellow"
data[25].subtitle = "Y"
data[25].image = "y.png"
data[25].image1 = "yellow.png"
 
 
 
data[26] = {}
data[26].title = "Zebra"
data[26].subtitle = "Z"
data[26].image = "z.png"
data[26].image1 = "zebra.png"
-----------------------------------------
 
--iPad: duplicate some of the sample data to make the list longer
--[[for i=1, 6 do
        table.insert(data, data[i])
end
]]
 
local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0
 
-- create the list of items
myList = tableView.newList{
 
        data=data, 
        default="listItemBg_white.png",
        --default="listItemBg.png",
        over="listItemBg_over.png",
        onRelease=listButtonRelease,
        top=topBoundary,
        bottom=bottomBoundary,
        --backgroundColor={ 255, 255, 255 },  --commented this out because we're going to add it down below
     callback = function( row )
                         local g = display.newGroup()
 
                         local img = display.newImage(row.image)
                         g:insert(img)
                         img.x = math.floor(img.width*0.5 + 6)
                         img.y = math.floor(img.height*0.5) 
 
                         local title =  display.newText( row.title, 0, 0, native.systemFontBold, 14 )
                        title:setTextColor(0, 0, 0)
                         --title:setTextColor(255, 255, 255)
                         g:insert(title)
                         title.x = title.width*0.5 + img.width + 6
                         title.y = 30
 
                         local subtitle =  display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
                         subtitle:setTextColor(80,80,80)
                         --subtitle:setTextColor(180,180,180)
                         g:insert(subtitle)
                         subtitle.x = subtitle.width*0.5 + img.width + 6
                         subtitle.y = title.y + title.height + 6
 
                         return g   
                  end  
}
 
local function scrollToTop()
        myList:scrollTo(topBoundary-1)
end
 
--Setup the nav bar 
local navBar = ui.newButton{
        default = "navBar.png",
        onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
 
local navHeader = display.newText("Alphabet Book For Kids", 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y
 
--Setup the back button
backBtn = ui.newButton{ 
        default = "backButton.png", 
        over = "backButton_over.png", 
        onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y 
backBtn.alpha = 0
 
--Add a white background to the list.  
--It didn't move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)
 
--*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo("model") == "iPad" then       
        --Rather than creating a new graphic, let's just stretch the black bar at the top of the screen
        navBar.xScale = 6  
 
        --Set new default text since the list is now on the left
        detailScreenText.text = "Tap an item on the left" 
 
        --Change the width and x position of the detail screen
        detailBg.width = display.contentWidth - myList.width
        detailScreen.x = myList.x + myList.width*0.5 + 1
 
        --Insert the selected color fill one level before the last item (which was the background inserted above)
        myList:insert(2,selected)
        --Adjust the x position of the selected color fill
        selected.x = myList.x + myList.width*0.5
end
-------xxxxxxxxxx-------------


Replies

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

please Vote it if you like it,
and any suggestion to improve it!!!

nicholasclayg
User offline. Last seen 1 day 10 hours ago. Offline
Joined: 16 May 2011

This is really cool. I can see the potential for many applications.

By the way, to make the code look cleaner on a post

you could use the tags (edit your reply look at bottom you will see code and lua)

Here is the

lua

1
Place code here

or

code

1
place code here

•You can enable syntax highlighting of source code with the following tags: , <blockcode>, <as>, <as3>, <applescript>, <bash>, <cpp>, <css>, <drupal6>, <fortran>, <html>, <java>, <javascript>, <lua>, <mysql>, <php>, <python>, <rails>, <ruby>, <text>. The supported tag styles are: <foo>, [foo].

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

THanks nicholasclayg!!!

autolib
User offline. Last seen 30 weeks 5 days ago. Offline
Joined: 19 Jan 2011

How would you add a sound to each row?

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

--load sound
local clickSND = audio.loadSound("apple.wav")
--first row contain sound for apple

--in each row add differend sound
data[1].sound = clickSND

tc good day fun with ansca corona!!!

--Note:- i dont tested it in machine yet!!

nicholasclayg
User offline. Last seen 1 day 10 hours ago. Offline
Joined: 16 May 2011

See if you would use the code tags your posted code would look like this

1
2
3
4
5
6
7
8
9
10
11
12
--load sound
 
local clickSND = audio.loadSound("apple.wav")
 
--first row contain sound for apple
 
--in each row add differend sound
data[1].sound = clickSND
 
--tc good day fun with ansca corona!!!
 
--Note:- i dont tested it in machine yet!!

It's kind of hard to read the code when it's not tagged :)

ccopca
User offline. Last seen 7 weeks 2 days ago. Offline
Joined: 10 Mar 2011

Hey dsrawat4u, the application is really nice! I'm new in corona and I have a newbie question for you, could you use a database or file to store all the abc and images??, instead of using a table ..local data = {}
or Why is a table better??
thanks

autolib
User offline. Last seen 30 weeks 5 days ago. Offline
Joined: 19 Jan 2011

Anybody get the sound addition to work?

--I added:

local sound
local clickSND = audio.loadSound("apple.wav")

-- above local image

Nothing happens.

autolib
User offline. Last seen 30 weeks 5 days ago. Offline
Joined: 19 Jan 2011

Anyone willing to tackle the two questions above?

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

THanks nicholasclayg!!!
now i made changes in it!!!

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

hello Autolib,
i think you forget to add

1
2
3
--in each row add differend sound
data[1].sound = clickSND
 

hope its work....

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

hello ccopca
yes corona have the feature to store database using SQLITE !!

for more information check out this link

http://developer.anscamobile.com/content/data-storage

and for more info about why table is better read this blog of Jonathan Beebe!!!

http://blog.anscamobile.com/2011/06/understanding-lua-tables-in-corona-sdk/

hope its work!!

I am a learner too.....buddy
have fun with corona SDK!!! :)

nicholasclayg
User offline. Last seen 1 day 10 hours ago. Offline
Joined: 16 May 2011

It appears github having issues, can't download the .zip file.

I'll try later :)

autolib
User offline. Last seen 30 weeks 5 days ago. Offline
Joined: 19 Jan 2011

I do have that.

The code :

--load sound

local clickSND = audio.loadSound("apple.wav")

--first row contain sound for apple

--in each row add differend sound
data[1].sound = clickSND

--tc good day fun with ansca corona!!!

--Note:- i dont tested it in machine yet!!

Still does not work any ideas?

cavedawes
User offline. Last seen 17 weeks 5 days ago. Offline
Joined: 25 Sep 2009

Haven't used Corona for a while so it's fun to see all the new code examples and delve in again and start messing around. The table list view is really useful and this Alphabet app sample is a great demo of it. Coming from a Flash AS2/AS3 background I try to slim my code down if there are similar things to add to a list and I noticed this occurs in your code. That's when I usually add loops to insert items on the fly rather than have to write them all out long hand. Anyway I've taken out all the individual data table info and replaced it with the following table and insert loop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
--setup each row as a new table, then add title, subtitle, and image
alphabetWords = {"Apple", "Ball", "Cat", "Dog", "Elephant", "Fish", "Grapes", "Horse", "Inkpot", "Joker", "Kite", "Lion", "Monkey", "Niddle", "Orange", "Peacock", "Queen", "Rose", "Ship", "Teeth", "Umbrella", "Violin", "Window", "Xmas Tree", "Yellow", "Zebra"}
 
for i = 1, #alphabetWords do
data[i] = {}
data[i].title = alphabetWords[i]
displayWord = data[i].title  
if (displayWord == "Xmas Tree") then
        displayWord = "xmass"
end
data[i].subtitle = data[i].title:sub(1, 1)
data[i].image = data[i].subtitle..".png"
--use displayWord instead of data[i].title here so that the Xmas Tree xmass.png image will show in the list
data[i].image1 = displayWord..".png"
end

The logic behind this is that each table row consists of an alphabet picture with the image pngs and label made up of the first letter of the main alphabet picture, or the picture name itself so you only need to set up a list with the picture labels in and extract the relevant information from them and then concantenate that with e.g. .png etc. The only exception is Xmas Tree which has an image name, xmass.png so I threw in a test for this picture.

Anyway have fun and hope it helps.

Cheers,

Nick

dbooncha
User offline. Last seen 1 day 15 hours ago. Offline
Joined: 1 Jul 2011

Has this been removed from github? When I click the github link I get "nothing to see here"

Just wondering...

Thanks

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

Hello dbooncha , now try to download using github button ,dear its uploaded in

code.google.com

Deepak Singh Rawat
User offline. Last seen 2 years 27 weeks ago. Offline
Joined: 13 Apr 2011

cavedawes thanks for the wonderful example......

have fun with corona....

'If knowledge is power, let's spread it as widely as possible and dilute it to deny those who would abuse it.'

hlh132132
User offline. Last seen 1 year 49 weeks ago. Offline
Joined: 29 Oct 2011

how can i use this project with RSS 2.0 ?
i want to get images from my RSS page.

thnx

staytoooned
User offline. Last seen 2 weeks 2 days ago. Offline
Joined: 8 Sep 2010

Is this code obsolete now that the newer tableview widget is available?