2017-07-30 45 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'方法。我编辑了我的答案。 –