Overlaying UI on Every Other Page

Overlaying UI on Every Other Page

these samples reuse the page1 UI components to other pages. There two sample projects available. Here I explain with Overlay project.

Copy page01/*.lua to custom folder

Overlay project’s page1 components are reused for other pages. Kwik publishes page1 lua files to build4 with the following folders,

these lua files in build4 are copied and pasted into build4/custom folder to make it reuse for other pages.

then use the trick of context switching.

Modify tmplt/contexts/ApplicationContext.lua

page01Contexts loads the page01UI from custom folder and maping for events are redirected to custom.commands.*

Modify build4/custom/ files

contexts/page01Context.lua

Before

  self:mapMediator("views.page01Scene", "mediators.page01Mediator")
  self:mapCommand("page01.action_act_hide_all", "commands.page01.action_act_hide_all")
  ...

After custom. is added

  self:mapMediator("views.page01Scene", "custom.mediators.page01Mediator")
  self:mapCommand("page01.action_act_hide_all", "custom.commands.page01.action_act_hide_all")
  ...

Modify tmplt/components/pageXXXUI.lua

in order to make overlay over other pages, page01UI functions are added to pageXXXUI.lua

  _Class.new = function(scene)
    ...
    -- Reuse custom.page01UI for overlay
    local page01UI = nil
    if UI.curPage ~= 1 then
      page01UI = require("custom.components.page01UI").new(scene)
      page01UI.curPage = {{page}}
      UI = setmetatable( UI, {__index=page01UI})
      UI.layer = setmetatable( UI.layer, {__index=page01UI.layer})
    end
    ...
 function UI:setLanguge()
    ...
    if page01UI then  page01UI:setLanguge() end
  end
  --
  function UI:setVars()
    ...
    if page01UI then  page01UI:setVars() end
  end
  --
  function UI:create()
    ...
    if page01UI then  page01UI:create() end
  end
  --
  function UI:didShow(params)
    ...
    if page01UI then page01UI:didShow(params) end
  end
  --
  function UI:didHide(params)
    ...
    if page01UI then page01UI:didHide(params) end
  end
  --
  function UI:destroy(params)
    ...
    if page01UI then page01UI:destroy(params) end
  end

Modify custom/components/page01UI.lua

Before

  function UI:create()
    self:_create("common",  const.page_common, false)
  ...
  end
  --
  function UI:didShow(params)
    self:_didShow("common",  const.page_common, false)
  ...
  end
  --
  function UI:didHide(params)
    self:_didHide("common",  const.page_common, false)
  ...
  end
  --
  function UI:destroy(params)
    self:_destroy("common",  const.page_common, false)
  ...
  end

After

  function UI:create()
    self:_create("common",  const.page_common, true)
  ...
  end
  --
  function UI:didShow(params)
    self:_didShow("common",  const.page_common, true)
  ...
  end
  --
  function UI:didHide(params)
    self:_didHide("common",  const.page_common, true)
  ...
  end
  --
  function UI:destroy(params)
    self:_destroy("common",  const.page_common, true)
  ...
  end

Disable preload in page01/page_common.lua

disable preloads at line 50

       -- Preloads next scene. Must be off to use page curl
       -- if not _K.exportCurrent then
       -- _K.timerStash.timer_pl = timer.performWithDelay( 5000, function()
       --    composer.loadScene( "views.page02Scene")
       -- end)
       -- end

For other files in custom folder

now if the action is called from page02, it calls the page01 action.

  function _M:localPos(UI)
    ...
    if UI.curPage == 1 then
        layer.Layer_1 = display.newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight)
      ...
    end
  end

how to make sure your custom files are loaded correctly?

you can rename or delete original folders such as components/page01, commands/page01