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.*

  local page01Context = require("custom.contexts.page01Context")

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

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