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

move to App/

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”}}