At this point, the entry module is silently caching translation results in order to save service costs. However, the design also calls for the app to let the user view this history and review previous translations. This calls for another scene. Save entry.lua, and copy scenetemplate.lua into a new scene file, history.lua. Open this file in your preferred editor.

The history view will use a table view to display the English lines that were sent to the translator. Like the result module, it will create the table fresh each time the scene is launched, but it's even simpler; it needs no extra controls, so no stratum is required:

function scene:enterScene( event )
  local group = self.view

  self.History = widget.newTableView{
    id = "translation_history";
    width = display.contentWidth, height = display.contentHeight;
    topPadding = display.statusBarHeight, bottomPadding = 50;
  }
  group:insert(self.History)
end

-- Called when scene is about to move offscreen:
function scene:didExitScene( event )
  self.History:removeSelf()
end

Similarly to the result module, the history will use an array table to store all the translation requests to display or execute. However, it will use single-line text objects to display just the first part of the English submissions, and each entry will be based on one line in the history file:

  local group = self.view

  self.Data = {}
  local function displayHistory(event)
    display.newText(event.view, self.Data[event.row.index][1], 4, event.row.height * 0.125, native.systemFont, event.row.height * 0.75)
      :setTextColor(0x00)
  end
  self.History = widget.newTableView{
    id = "translation_history";
    width = display.contentWidth, height = display.contentHeight;
    topPadding = display.statusBarHeight, bottomPadding = 50;
    onRowRender = displayHistory;
  }

The table will fill in this array with lines from a text file:

  group:insert(self.History)
  for line in io.lines(PATH) do
    table.insert(self.Data, (json.decode(line)))
    self.History:insertRow{
      height = display.contentHeight * 1/12;
    }
  end
end

Unlike the result view, rows in this table should be selectable to load their contents in the result view. Table views make this easy by taking an onRowTouch handler that processes touch events on the rows and notifies them when they've been pressed, released, or swiped. We're only interested in releases in this case.

The function is basically a copy of the displayResults utility function in entry.lua:

      :setTextColor(0x00)
  end
  local function loadHistory(event)
    if event.phase == 'release' then
      storyboard.gotoScene("result", {effect = 'slideLeft'; params = self.Data[event.row.index]})
    end
  end
  self.History = widget.newTableView{
    id = "translation_history";
    width = display.contentWidth, height = display.contentHeight;
    topPadding = display.statusBarHeight, bottomPadding = 50;
    onRowRender = displayHistory;
    onRowTouch = loadHistory;
  }

We want users to be able to request translations through either the new entry or the history view; there's an established convention for this in mobile apps, and Corona provides support for it through the tab bar widget. A tab bar usually takes up the bottom of the screen and has a few icons, often with text labels, that can be tapped to switch between different pages of an app's interface. Like the other widgets, the tab bar is highly customizable, but its default appearance is frequently quite adequate, so the only things you have to specify are where to put it and what buttons to put on it.

Now you can load the app and switch between the two views. However, unless your history only consists of very small phrases, you may notice an odd glitch when you select a sentence from the history.

To keep the table short, the history view displays only the beginning of each English sentence in a single-line text object. However, the rest of each text is still hanging off the right edge of the screen. This isn't an issue until the scene slides left to make room for the result display, dragging the extra text across the view. We'll fix this with a mask.

The file presentation/masking-frame.png is pretty simple. Since the screen size is specified in the config.lua file as being 320 x 480, the mask file consists of a white area (which will reveal everything in its target object normally) surrounded by a 4 pixel black border on all sides. Black prevents anything in the target object from showing up at that spot. So, using this mask crops out everything around the edges of the target screen. We'll load the mask with the history module, and attach the mask to the view whenever it's created:

local json = require "json"

local frame = graphics.newMask("presentation/masking-frame.png")

-- Called when the scene's view does not exist:
function scene:createScene( event )
  local group = self.view

  group:setMask(frame)
end

The mask can be positioned on its target using the maskX and maskY values, which specify where to put the center of the mask compared to the masked object's local origin. This is usually the center of the object, but for groups, it's whatever point is defined as the group's point (0, 0). That's frequently the top-left corner, depending on where you placed the group's children inside it. So, we'll move the mask to line up with the center of the screen:

function scene:createScene( event )
  local group = self.view

  group:setMask(frame)
  group.maskX, group.maskY = display.contentCenterX, display.contentCenterY
end

If you try it again, you should not see any more spill-over from the history view into the results as they slide in!