Text In Scroll view

Solar2D General Questions/Discussion
#1

Hi,

I need help placing text inside a scroll view.

The text has been parsed from a website in the form of JSON.

Here is my code:

[lua]local storyboard = require(“storyboard”)

local json = require (“json”)

local widget = require(“widget”)

local scene = storyboard.newScene()

function scene:createScene(event)

local group = self.view

local background = display.newRect(0, 0, display.contentWidth, display.contentHeight+30)

background:setFillColor(255)

local titleBox = display.newRect(0,100,display.contentWidth,75)

titleBox:setReferencePoint(display.CenterReferencePoint)

titleBox:setFillColor(100)

local titleText = display.newText(event.params.entry[‘title’], display.contentWidth/2.5, 115, native.systemFont, 24 )

titleText.x = display.contentWidth/2

local authorText = display.newText(event.params.entry[‘author’], display.contentWidth/2.5, 145, native.systemFont, 20 )

authorText.x = display.contentWidth/2

local content = event.params.entry[‘content’]

content = content:gsub( “<.->”, “”)

local articleText = display.newText(content, 10, 180, display.contentWidth*0.9, 0, native.systemFont, 24)

articleText:setTextColor(30)

local backButton = display.newImage(“backButton.png”, -10, 25)

local function backButtonTapped(event)

storyboard.removeScene(“view2”)

storyboard.gotoScene(“view1”)

end

backButton:addEventListener(“tap”, backButtonTapped)

local function scrollListener(event)

    local phase = event.phase

    if (phase == “began”) then print(“Scroll view was touched”)

    elseif (phase == “moved”) then print(“Scroll view was moved”)

    elseif (hase == “ended”) then print(“Scroll view was released”)

    end

    if (event.limitReached) then

        if (event.direction == “up”) then print(“Reached top limit”)

        elseif (event.direction == “down”) then print(“Reached bottom limit”)

        end

    end

    return true

end

local scrollView = widget.newScrollView

{

    top = 180,

    left = 0,

    width = display.contentWidth, 

    height = display.contentHeight,

    scrollWidth = display.contentWidth,

    horizontalScrollDisabled = true

}

    listener = scrollListener

group:insert(background)

group:insert(titleBox)

group:insert(articleText)

group:insert(titleText)

group:insert(authorText)

group:insert(scrollView)

end[/lua]

Thanks  :slight_smile:

#2

Hi @thakrarr11,

Basically, you should just create the text object(s) and :insert them into the scrollView, as shown in the examples in the docs (see the bottom few lines in each example):

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Hope this helps,

Brent

#3

@thakrarr11

In addition to what Brent said, bear in mind that while placing text objects into the scrollView, you should be doing so w.r.t the scrollView canvas and not the entire scene.

Ex: Let’s say you’ve created a new scrollView of area 200 x 200 pixels at the center of the scene. If you want to place a text object at the center of the scrollView, before/after inserting the text object into the scrollView, the text object’s X and Y co-ordinates must be set to 100, 100 respectively and not contentCenterX, contentCenterY.

#4

Thanks Brent and Prathap. Wherever I place the text, it always appears underneath the scrollView. How can I make it appear on top, or how can I send the scrollView to the “Back”?

#5

  1. Firstly, in your declaration of the scrollView, “listener = scrollListener” must be within braces (curly brackets) and not outside. This isn’t the source of the problem, just mentioning it.

  2. If you go through the documentation that Brent referred to, whatever objects you want to be in the scrollView must be inserted into the scrollView and not the parent display group. In your case, I’m assuming you want all the newly created display objects in the scrollView. If that’s the case, this is how your code must look –

    local scrollView = widget.newScrollView { top = 180, left = 0, width = display.contentWidth, height = display.contentHeight, scrollWidth = display.contentWidth, horizontalScrollDisabled = true, listener = scrollListener } group:insert(scrollView) scrollView:insert(background) scrollView:insert(titleBox) scrollView:insert(articleText) scrollView:insert(titleText) scrollView:insert(authorText)

#6

Hi @thakrarr11,

Basically, you should just create the text object(s) and :insert them into the scrollView, as shown in the examples in the docs (see the bottom few lines in each example):

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Hope this helps,

Brent

#7

@thakrarr11

In addition to what Brent said, bear in mind that while placing text objects into the scrollView, you should be doing so w.r.t the scrollView canvas and not the entire scene.

Ex: Let’s say you’ve created a new scrollView of area 200 x 200 pixels at the center of the scene. If you want to place a text object at the center of the scrollView, before/after inserting the text object into the scrollView, the text object’s X and Y co-ordinates must be set to 100, 100 respectively and not contentCenterX, contentCenterY.

#8

Thanks Brent and Prathap. Wherever I place the text, it always appears underneath the scrollView. How can I make it appear on top, or how can I send the scrollView to the “Back”?

#9

  1. Firstly, in your declaration of the scrollView, “listener = scrollListener” must be within braces (curly brackets) and not outside. This isn’t the source of the problem, just mentioning it.

  2. If you go through the documentation that Brent referred to, whatever objects you want to be in the scrollView must be inserted into the scrollView and not the parent display group. In your case, I’m assuming you want all the newly created display objects in the scrollView. If that’s the case, this is how your code must look –

    local scrollView = widget.newScrollView { top = 180, left = 0, width = display.contentWidth, height = display.contentHeight, scrollWidth = display.contentWidth, horizontalScrollDisabled = true, listener = scrollListener } group:insert(scrollView) scrollView:insert(background) scrollView:insert(titleBox) scrollView:insert(articleText) scrollView:insert(titleText) scrollView:insert(authorText)