Step 8

Week 8 (March 19-26) —Dynamic display.newText

• Displaying new text: http://docs.coronalabs.com/api/library/display/newText.html
• Understanding tables: https://coronalabs.com/blog/2011/06/21/understanding-lua-tables-in-corona-sdk/
• event.target: http://docs.coronalabs.com/api/event/completion/target.html

To deliver:

• All of the key word boxes showing up the correct dialog box

This week's summary:

I felt very successful this week and I give myself a 10/10.  I completed the entire task I had to to: I now have dialog boxes that pop up and change (depending on which word-box I click on.  I have run in to a few issues, but overall this is a huge leap from where I was last week.

What I learned:

A great technique that I learned was how to better plan out my coding.  I've been just throwing things on my document constantly as if the unorganized mess I've created will somehow make sense to someone (or even me) sometime in the future.  I learned this week that writing out each step as a comment, I can use this as a guide to writing up my code.  See and example with the comments bolded.

I've also learned about event. target.  This designates a display object as the target of an event so that each display object can have a different reaction depending on its ID (see the example below.

Examples of code:

-- when touched, make pop up appear and print ID

    local function appear( event )

      

        if event.phase =="ended" then

          print( event.target.id) 

          end

 

          local newPopUp = display.newRect( 300, 500, 450, 250 )

          local popUpGroup = display.newGroup()

          local function closeMe()

            popUpGroup:removeSelf()

            popUpGroup = nil

            Runtime:removeEventListener( "tap", closeMe)

          end

            timer.performWithDelay(25, function() Runtime:addEventListener( "tap", closeMe) end)

        

  -- when touched change text to box.id

        local word = event.target.id

        local wordDisplay = display.newText(word, 275, 500, "Georgia", 22)

        local definition = event.target.definition

        local definitionDisplay =   display.newText(definition, 300, 550, 400, 0, "Georgia", 22)   

          wordDisplay:setFillColor(.169,.169,.169)

          definitionDisplay:setFillColor(.169,.169,.169)

          popUpGroup:insert( newPopUp )

          popUpGroup:insert( wordDisplay )

          popUpGroup:insert( definitionDisplay )

        end

    local function loadWordBoxes()

       for i=1,#wordBoxes do

       local box = display.newRect( 0, 0, wordBoxes[i].width, 22 )

        box:setFillColor(0)

        box.anchorX = .5

        box.anchorY = .5

        box.x = wordBoxes[i].x

        box.y = wordBoxes[i].y

        box.id = wordBoxes[i].id

        box.definition = wordBoxes[i].definition

        box.alpha=.5

    -- addEvenTlisterner for touch

    box:addEventListener( "touch", appear )    

  end -- for loop

end -- fcn

Some great resources:

Kwik is a Photoshop plug in that can be used like a WYSIWYG for Corona SDK: http://www.kwiksher.com/

Next steps:

• Get the word boxes to work on the key word glossary page
• Get the little reference boxes to always be there (even if they are invisible)
• Bold the words that are clickable - this will be hard because they are all within separate strings
• Resolve the issue of not being able to click underneath the scroll view
• My background picture is too big.  It will cause problems on a device. I need to optimze it.

Functioning code so far:

Note: Most of the progress I made this week will be found on the practice sheets.

https://drive.google.com/file/d/0B406rJ0oHVzZTXNnMG0xVEtnYlk/edit?usp=sharing