2017-07-30 44 views
0

我正在使用電暈的業務應用程序。 interfcae有點像gmail移動應用程序界面。你有一個帶有表格的屏幕,當單擊一行時,它會打開一個新頁面。如何在下載時在兩個場景之間製作加載場景。電暈sdk

接口說明:該應用程序從json對象中的索引元素獲取文本和圖像鏈接。對於json對象中的每個元素(jsonObject [i]),創建一行並從包含在每個json元素中的「imagelink」字段中的鏈接下載圖像,而文本則從相同json中的其他字段獲取元件。我使用套接字來獲取圖像,並將其存儲在臨時位置,以便在所有圖像顯示之前下載圖像。當單擊一行時,它會傳遞當前的json元素(jsonObject [i])以及下載的tempimage,並在此新頁面上顯示tempImage和表中未使用的其他字段。

問題:當單擊某一行時顯示的表格和頁面顯示的場景前後移動時,需要一段時間才能加載。可以理解,因爲它必須下載圖像,爲了解決這個問題,我創建了一個名爲「加載」的場景來調用另外兩個場景,現在它只有一個平面白色框(屏幕大小),我希望它顯示下一個場景需要加載時間,這樣看起來應用程序不會凍結。

我的問題:「加載」場景不起作用,我知道應用程序加載它導致我刪除代碼中的部分去到下一個屏幕,並加載場景顯示,但是當它加回來,所有事情都按照之前的方式進行轉換,當前屏幕顯示爲凍結,然後轉到下一個屏幕,如「加載」場景不存在。我可以請這個幫忙嗎?我在「goto」之前嘗試使用「loadScene」,但是我收到了很多錯誤。謝謝!

我的代碼:

ItemListPage.lua

local composer = require ("composer") 
local widget = require("widget") 
local json = require("json") 

-- Load the relevant LuaSocket modules 
local http = require("socket.http") 
local ltn12 = require("ltn12") 

local scene = composer.newScene() 

--To help with navigation, these two variables are set on all scenes except loading 
--nextScene is the scene I want loaded after the "loading scene" 
--prevScene is the current scene which will soon become the previous. 
composer.setVariable("nextScene", "itemDisplayPage") 
composer.setVariable("prevScene", composer.getSceneName("current")) 

--NavigationBar elements initiated 
--Removed for readability 


--Load Json from local file 
local filename = system.pathForFile("items.json", system.ResourceDirectory) 
local decoded, pos, msg = json.decodeFile(filename) 

if not decoded then 
    print("Decode failed at "..tostring(pos)..": "..tostring(msg)) 
else 
    print("File successfully decoded!") 
end 
local items=decoded.items 
--items being JsonObject explained in queston 

--image handler 
local function networkListener(event) 
    if (event.isError) then 
     print ("Network error - download failed") 
    end 

    print ("event.response.fullPath: ", event.response.fullPath) 
    print ("event.response.filename: ", event.response.filename) 
    print ("event.response.baseDirectory: ", event.response.baseDirectory) 
end 



--Table stuff 
local scrollBarOptions = { 
    sheet = scrollBarSheet, -- Reference to the image sheet 
    topFrame = 1,   -- Number of the "top" frame 
    middleFrame = 2,   -- Number of the "middle" frame 
    bottomFrame = 3   -- Number of the "bottom" frame 
} 


local function onRowRender(event) 

    -- Get reference to the row group 
    local row = event.row 
    local params=event.row.params 
    local itemRow=3; 

    -- Cache the row "contentWidth" and "contentHeight" because the row bounds can change as children objects are added 
    local rowHeight = row.contentHeight 
    local rowWidth = row.contentWidth 

    row.rowTitle = display.newText(row, params.topic, 0, 0, nil, 14) 
    row.rowTitle:setFillColor(0) 
    row.rowTitle.anchorX = 0 
    row.rowTitle.x = 0 
    row.rowTitle.y = (rowHeight/2) * 0.5 

    --Other elements removed for readabilty (it's all just text objects) 

    --Download Image 
    --params referring to items[i] 
    local imagelink =params.imagelink 

    -- Create local file for saving data 
    local path = system.pathForFile(params.imagename, system.TemporaryDirectory) 
    myFile = io.open(path, "w+b") 

    -- Request remote file and save data to local file 
    http.request{ 
     url = imagelink, 
     sink = ltn12.sink.file(myFile) 
    } 

    row.Image = display.newImageRect(row, params.imagename, system.TemporaryDirectory, 25, 25) 
    row.Image.x = 20 
    row.Image.y = (rowHeight/2) * 1.5 

    row:insert(row.rowTitle) 
    row:insert(row.Image) 
end 

local function onRowTouch(event) 
    local row = event.target 
    local params=event.target.params 

    composer.removeScene(composer.getSceneName("current")) 
    composer.gotoScene("loading" , {params=params}) 

end 

-- Table 
local tableView = widget.newTableView(
    { 
     left = 0, 
     top = navBar.height, 
     height = display.contentHeight-navBar.height, 
     width = display.contentWidth, 
     onRowRender = onRowRender, 
     onRowTouch = onRowTouch, 
     listener = scrollListener 
    } 
) 

function scene:create(event) 
    local sceneGroup = self.view 

    -- create a white background to fill screen 
    local background = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) 
    background:setFillColor(1) -- white 

    -- Insert rows 
     for i = 1, #sermons do 
      -- Insert a row into the tableView 
      tableView:insertRow{ 
       rowHeight = 100, 
       rowColor = { default={ 0.8, 0.8, 0.8, 0.8 } }, 
       lineColor = { 1, 0, 0 }, 
       params=items[i] 
      } 
     end 

    -- all objects must be added to group (e.g. self.view) 
    sceneGroup:insert(background) 
    sceneGroup:insert(tableView) 
end 

-- other functions and elements unused and removed for readability 

loading.lua

local composer = require ("composer") 
local widget = require("widget") 
local json = require("json") 
local scene = composer.newScene() 

local nextParams 

function scene:create(event) 
local sceneGroup = self.view 

nextParams= event.params 

-- create a white background to fill screen 
local background = display.newRect(display.contentCenterX, 

display.contentCenterY, display.contentWidth, display.contentHeight) 
    background:setFillColor(1) -- white 

    -- all objects must be added to group (e.g. self.view) 
    sceneGroup:insert(background) 
end 

local function showNext(event) 
    --go to next scene 
    composer.removeScene(composer.getSceneName("current")) 
    --Goes to next scene with parameters passed from previous scene 
    composer.gotoScene(composer.getVariable("nextScene"), {params=nextParams}) 
    return true 
end 

function scene:show(event) 
    local sceneGroup = self.view 
    local phase = event.phase 

    if phase == "will" then 
     -- Called when the scene is still off screen and is about to move on screen 
    elseif phase == "did" then 
     showNext() 
    end 
end 

-- other functions and elements unused and removed for readability 

ItemDisplayPage.lua

local composer = require ("composer") 
local widget = require("widget") 
local json = require("json") 
local scene = composer.newScene() 

--To help with navigation, these two variables are set on all scenes except loading 
--nextScene is the scene I want loaded after the "loading scene" 
--prevScene is the current scene which will soon become the previous. 
composer.setVariable("nextScene", composer.getVariable("prevScene")) 
composer.setVariable("prevScene", composer.getSceneName("current")) 

--NavigationBar elements initiated 
--This creates the "back button", when clicked it returns to the previous scene, in this case "itemListPage" 
--it takes, no parameters 
local function handleLeftButton(event) 
    if (event.phase == "ended") then 
     composer.removeScene(composer.getSceneName("current")) 
     composer.gotoScene("loading" , {params=nil}) 
    end 
    return true 
end 
--Remaning navbar elements removed for readability 

function scene:create(event) 
local sceneGroup = self.view 
local params=event.params 

-- create a white background to fill screen 
local background = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) 
background:setFillColor(1) -- white 

--creating header bar 
local bar = display.newRect(navBar.height + (headerBarHeight*0.5), display.contentCenterY, display.contentWidth, headerBarHeight) 
bar:setFillColor(1) 

-- create stuff 
local title = display.newText(params.topic, 0, 0, nil, 14) 
title:setFillColor(0) 
title.anchorX = 0 
title.x = margin 
title.y = ((2*headerBarHeight/2) * 0.5)+navBar.height 

local Image = display.newImageRect(params.imagename, system.TemporaryDirectory, 25, 25) 
Image.x = 50 
Image.y = display.contentCenterY 


-- all objects must be added to group (e.g. self.view) 
sceneGroup:insert(background) 
sceneGroup:insert(title) 
sceneGroup:insert(Image) 

end 
-- other functions and elements unused and removed for readability 

回答

0

如果我理解正確的場面見下面的順序: ItemListPage - >loading - >ItemDisplayPage

但裝載現場沒有任何繁重的工作要做 - 所以它是多餘的。

ItemListPage.lua您將圖像加載到onRowRender回調中。當您撥打電話tableView:insertRow(...)scene:create時,會調用此回撥。所以有freese的根源

我建議你在ItemListPage現場create事件中創建加載覆蓋。告訴你負荷疊加到用戶後,與表的創建代碼部分應該運行 - 在ItemListPagescene:show事件

function scene:show(event) 
    local sceneGroup = self.view 
    local phase = event.phase 

    if phase == "will" then 
    elseif phase == "did" then 
    composer.showOverlay("loading", { isModal = true }) 
    -- Insert rows 
    for i = 1, #sermons do 
    --put your code here 
    end 
    composer.hideOverlay("fade", 100) 
    end 
end 
+0

謝謝你,我會嘗試這個現在 –

+0

你好,我似乎遇到了阻礙,可能你也許指向我到一個頁面,解釋如何創建你正在談論的覆蓋 –

+0

@DrewU首先你可以嘗試[覆蓋現場](https://docs.coronalabs.com/guide/system/composer/index.html#overlay-scenes) 。作爲覆蓋層應該可以工作,打開你的加載場景 - 只需從中刪除'showNext'方法。我編輯了我的答案。 –