Components

bookstore consists of the following files and modules

Photoshop files

library.psd

dialog.psd

table.psd

Solar2D components

• App/bookTOC

  ├── App
  │   ├── bookFree
  │   ├── bookOne
  │   ├── bookTOC
  |        ├── components
  |        |      ├── library
  |               |      ├── layers
  |               |      |      ├── bg.lua
  |               |      |      ├── bookFreeIcon.lua
  |               |      |      ├── bookOneIcon.lua
  |               |      |      ├── downloadBtn.lua
  |               |      |      ├── purchaseBtn.lua
  |               |      |      ├── restoreBtn.lua
  |               |      |      ├── savedBtn.lua
  |               |      |      └── savingTxt.lua
  |               |      ├── page
  |               |      |     └── bookstore.lua ⭐️
  |               |      └── index.lua　 ⭐️
  |               └── dialog
  |                     └──  layers
  |                            ├── bg.lua
  |                            ├── bookIcon.lua
  |                            ├── downloadBtn.lua
  |                            ├── hideOverlayBtn.lua
  |                            ├── infoTxt.lua
  |                            ├── purchaseBtn.lua
  |                            ├── savedBtn.lua
  |                            ├── savingTxt.lua
  |                            └── inddx.lua
  │
  ├── components
      ├── bookstore
          ├── controller
          ├── model
          ├── smc
          ├── view
          ├── index.lua
          └── model.lua ⭐️
  

bookstore component is defined in components.pages table. This calls bookstore.lua

• App/bookTOC/scenes/library/index.lua

    local sceneName = ...
    --
    local scene = require('controller.scene').new(sceneName, {
        name = "library",
        components = {
          layers = {
              {  bg ={ } },
              {  bookIcon ={ } },
              ...
              ...
          },
          audios = {  },
          groups = {  },
          timers = {  },
          variables = {  },
          pages = { "bookstore" }
        },
        commands = {  },
        onInit = function(scene) print("onInit") end
    })
    --
    return scene
  

• App/bookTOC/components/libary/pages/bookstore.lua

  local _M = {}
  
  local bookstore = require("components.bookstore.index").new()
  --
  function _M:init(UI)
  end
  --
  function _M:create(UI)
    local sceneGroup = UI.scene.view
    local layers = UI.layers
    --
    --for k, v in pairs(UI.props) do print(k, v) end
    bookstore:init(sceneGroup, UI.props)
  end
  --
  function _M:didShow(UI)
    local layers = UI.layers
    bookstore:setSceneGroup(UI.scene.view)
  end
  --
  --
  function _M:toDispose(UI)
    bookstore:destory()
  end
  --
  return _M
  

  bookstore.lua calls components.bookstore.model

model

Please fill the bookstore model with values of each book

• compoents/bookstore/index.lua

  local M = {}
  --
  local pageCommand = require("components.bookstore.controller.pageCommand")
  local model = require("components.bookstore.model.base")
  --
  model.debug = true
  model.URL = "http://localhost:8080/bookshop/"
  -- model.URL = nil means simple IAP store without network download
  -- downloadBtn, savingTxt won'T be used. You don't need to create them.
  ----------
  model.TOC           = "bookTOC"
  model.LIBRARY_PAGES = {en = "scenes.library"}
  model.DIALOG_PAGES  = {en = "scenes.dialog"}
  --
  model.name = "catalog01"
  --
  model.books = {
    bookFree = {
      name         = "bookFree",
      versions     = {},
      titles       = {en="bookOne"},
      descriptions = {en="desc"},
      isFree       = true,
      isOnlineImg  = true,
      isDownloadable = true,
      image        = "App/bookFree/assets/images/page1/bg.png",
      productNames = {apple = "bookFree", google = "bookFree", amazon = "bookFree"},
    },
    bookOne = {
      name         = "bookOne",
      versions     = {},
      titles       = {en="bookOne"},
      descriptions = {en="desc"},
      isFree       = false,
      isOnlineImg  = true, -- true
      isDownloadable = true, -- true
      image        = "App/bookOne/assets/images/page1/bg.png",
      productNames = {apple = "bookOne", google = "bookOne", amazon = "bookOne"},
    }
  }
  --
  model.purchaseAlertMessages = {en="Your purchase was successful"}
  model.restoreAlertMessages  = {en="Your items are being restored"}
  model.downloadErrorMessages = {en="Check network alive to download the content"}
  model.descriptions = {en=""}
  model.titles = {en=""}
  
  --
  model.gotoSceneEffect = "slideRight"
  model.showOverlayEffect = "slideBottom"
  
  --
  M.new = function()
    return pageCommand.newBookstore(model)
  end
  --
  M.model = model
  --
  return M
  

  • debug

    if true, IAPBadger is in debug mode.

  • URL

    if book assets are downlodable, please set the server url

  • LIBRARY_PAGES

    bookstore shows one of library page with lang value

  • DIALOG_PAGES

    bookstore shows one of dialog with lang value

  • name

    the name for IAP catalog. You may create another model.lua with a differnet name

  • books

    • name

    • versions

      you can put language codes for multilingual books.

      you may invent a new lang code for versions. For example, instead of language code, use blue, red, gree of colors as version

    • titles

    • descriptions

    • isFree

      true or falase

    • isOnlineImg

      if true, thumbnail image is loaded with the following given path in App folder

      if false, from URL .."/"..image

    • image

      thumbnail image path

    • productNames

      if debug is false, productNames should be replaced with values of Apple store, Google play, Amazon store

view

You would like to customize the looks

marker

updateText

• components/bookstore/view/marker.lua

  local M = {}
  --
  function M.new (dst, group)
      print(dst, group)
      if dst.updateMark == nil then
          local obj = display.newCircle(0,0,4)
          obj.x = dst.x + dst.width/2
          obj.y = dst.y - dst.height/2
          obj:setFillColor(1,0,0)
          group:insert(obj)
          dst.updateMark = obj
      else
          dst.updateMark.alpha = 1
      end
  end
  ---
  return M
  

• components/bookstore/view/spinner.lua

local M = {}
--
function M.new (host)
    local obj = {}
    local spinner
    obj.host = host
    --
    function obj:show(host)
        if not spinner then
            spinner = display.newGroup()
            local hostName = host or obj.host or ""
            --Place a progress spinner on screen and tell the user the app is contating the store
            local spinnerBackground = display.newRect(0,0,360,600)
            spinnerBackground:setFillColor(1,1,1,0.75)
            --Spinner consumes all taps so the user cannot tap the purchase button twice
            spinnerBackground:addEventListener("tap", function() return true end)
            local spinnerText = display.newText("Contacting " .. hostName .. "...", 0, -20, native.systemFont, 18)
            spinnerText:setFillColor(0,0,0)
            --Add a little spinning rectangle
            local spinnerRect = display.newRect(0, 0,35,35)
            spinnerRect:setFillColor(0, 0)
            spinnerRect:setStrokeColor(1,1,1)
            spinnerRect.strokeWidth = 2
            transition.to(spinnerRect, { time=4000, rotation=360, iterations=999999, transition=easing.inOutQuad})
            --Create a group and add all these objects to it
            spinner:insert(spinnerBackground)
            spinner:insert(spinnerText)
            spinner:insert(spinnerRect)
            spinner.x, spinner.y = _W/2, _H/2
            spinner.spinnerText = spinnerText
        end
    end

• updateText

  • startTime: the start time of a book download
  • size: the size in progress
  • bookSize:the total size of assets of a book

  function obj:updateText()
      local percent = self.size/self.bookSize
      local sec     = os.difftime( os.time(), self.startTime)
      local remain  = math.floor(sec * (1.0/percent))
      local time    = os.date("*t", remain)
      self.spinnerText.text = math.floor(percent*100).." % (" ..self.size .."/" ..self.bookSize .." Mb) \n left " ..time.min..":"..time.sec
  end
  

controller

These functions are available for page&book navigation. You can set it for an event action.

• components/bookstore/controller/pageCommand.lua
  • gotoTOC()
  • showView(page, options)
  • gotoSceneBook(book, page, version)
  • gotoSceneNextBook(version)
  • gotoScenePreviousBook(version)
  • gotoScene(event, version)
    • event = {target = {selectedPurchase= “bookOne”}}