Navigation :

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,

commands/page01/*.lua
components/page01/*.lua
components/page01UI.lua
contexts/page01Context.lua
mediators/page01Mediators.lua

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

tmplt/contexts/ApplicationContext.lua

  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

each component needs to be loaded from custom folder too. So change the 3d parameter to true

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

Search UI.curPage and replace each of them for “01”, for instance,

Before
```
_AC.Action:playAction("page"..UI.curPage..".action_act_hide_all", params)
```
After
```
_AC.Action:playAction("page".."01".."action_act_hide_all", params)
```
now if the action is called from page02, it calls the page01 action.

pageNum_text.lua

elFontSize is 100
text=“0”..UI.curePage

local elFontSize = 100
...
--
function _M:localPos(UI)
    local pageNum_options = { text = "0"..UI.curPage, x = mX, y = mY, fontSize = elFontSize,

background image is disabled in Layer_1_image.lua for the other pages. the background is only displayed if curPage == 1

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