Right Now I'm creating An application. Here we have Help sections. Usually, Giant applications like Youtube,NetFlix and Vimeo are not showing their Help section in their App. But In our Case, We wanted to show the Help portions. So it will have some questions. But From the design,It is the same like Accordion effect.
I know It is very hard to do it. I don't know, how to to get focus if I use simple Labels.
I have tried some different methods.
Method 1 : By using Label
one by one. So I can hide and show by using visible
property.
Doubt : So how can I get the focus? so If there are 20 questions, How can I set focus?
Method 2 : By using LabelList
. So it has autofocus.
Doubt : So how can I hide and show contents by using LabelGroup? I think, there is no visible property.
And finally, I used an Animation.
For this, I have used Vector2DFieldInterpolator Animation
And Here is my Code.
<component name = "AnimationV2DExample" extends = "Group" >
<children>
<Rectangle
width = "900"
height = "330"
color = "0x10101000" >
<Label
id="QuestionLabel"
text="What is this?"/>
<Rectangle
id="answer1rect"
width = "900"
height = "330"
color = "0x10101000" >
<Label
id="AnswerLabel"
text="This is a Roku App."
visible="false"/>
</Rectangle>
<Label
id="QuestionLabel1"
text="What is that?"/>
<Rectangle
id="answer2rect"
visible = "false"
color = "0x10101000" >
<Label
id="AnswerLabel"
text="This is a Roku App."
visible="false"/>
</Rectangle>
<Animation
id = "exampleVector2DAnimationrev"
duration = "7"
easeFunction = "outExpo" >
<Vector2DFieldInterpolator
id = "exampleVector2D"
key = "[ 1, 0 ]"
keyValue = "[ [0.0,50.0], [0.0,0.0] ]"
fieldToInterp = "AnswerLabel.translation" />
</Animation>
</Rectangle>
</children>
</component>
And Here is Brightscript
sub init()
examplerect = m.top.boundingRect()
centerx = (1280 - examplerect.width) / 2
centery = (720 - examplerect.height) / 2
m.top.translation = [ centerx, centery ]
m.revanimation = m.top.findNode("exampleVector2DAnimationrev")
m.answer = m.top.findNode("AnswerLabel")
m.answerRec = m.top.findNode("answer1rect")
m.qustion1 = m.top.findNode("QuestionLabel1")
m.qustion1.translation = [40,100]
m.answer.translation = [50,50]
m.question = m.top.findNode("QuestionLabel")
end sub
function onKeyEvent(key as String, press as Boolean) as Boolean
handled = false
if press then
if(key = "OK" AND m.question.id = "QuestionLabel")
m.answer.visible = true
m.revanimation.repeat = false
m.revanimation.control = "start"
handled = true
end if
end if
return handled
end function
So How can I do a successful Accordion with this? Am I going in a right way? Or If it is not possible, Please suggest me the better way.