Brightscript : Web Accordion effect - accordion

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.
Please visit this image
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.

Related

I want to add required attribute in MUI TextField based on a condition

I want to add required attribute in MUI TextField based on a condition.
Var flag = false
If (investment>50000 && investment<5000){
flag = true
}
<TextField
required = {flag}
id="shop-name"
label="Shop Name"
variant="outlined" />
This doesn't seems to work
Seems you have your if statement in the wrong way and you wanted the investment number to be between 50000 and 5000. So change it to
if (investment > 5000 && investment < 50000) {
flag = true;
}

UI5 dialog increases its size when the hidden input field is shown

I have a sap.m.Dialog form:
When I click on «Forgot password?», I show a hidden sap.m.Input field:
The problem is that the extended form is now much bigger then the original one.
I've tried to figure out why but can't find a source of the issue.
A click on the «Forgot password?» calls onResetPasswordForm:
onResetPasswordForm() {
// hide the reset password form
if (oView.byId("resetPasswordUsername").getVisible()) {
oView.byId("username").focus();
oView.byId("resetPasswordUsername").setVisible(false);
oView.byId("btnResetPassword").setVisible(false);
oView.byId("resetPasswordUsername").setValue("");
// show the reset password form
} else {
oView.byId("resetPasswordUsername").focus();
oView.byId("resetPasswordUsername").setValue("");
oView.byId("resetPasswordUsername").setVisible(true);
oView.byId("btnResetPassword").setVisible(true);
}
}
XML-template:
<core:FragmentDefinition
xmlns:core = "sap.ui.core"
xmlns = "sap.m">
<Dialog
id = "authDialog"
contentWidth = "300px"
title = "{i18n>AUTH_DIALOG_DIALOG_TITLE}"
type = "Message"
escapeHandler = ".escapeHandler">
<Label
labelFor = "username"
text = "{i18n>AUTH_DIALOG_LAB_USERNAME}" />
<Input
id = "username"
liveChange = ".onLiveChange"
placeholder = "{i18n>AUTH_DIALOG_PH_USERNAME}"
type = "Text" />
<Label
labelFor = "password"
text = "{i18n>AUTH_DIALOG_LAB_PASSWORD}" />
<Input
id = "password"
liveChange = ".onLiveChange"
placeholder = "{i18n>AUTH_DIALOG_PH_PASSWORD}"
type = "Password" />
<Link
id = "showHideResetPasswordForm"
text = "{i18n>AUTH_DIALOG_PASSWORD_FORGOT}"
class = "authFormHelperText"
press = ".onResetPasswordForm" />
<Input
id = "resetPasswordUsername"
visible = "false"
liveChange = ".onLiveChange"
placeholder = "{i18n>AUTH_DIALOG_PH_USERNAME}"
type = "Text" />
<beginButton>
<Button
id = "btnResetPassword"
enabled = "false"
visible = "false"
press = ".onResetPassword"
text = "{i18n>AUTH_DIALOG_BTN_RESET_PASSWORD}"
type = "Emphasized" />
</beginButton>
<endButton>
<Button
id = "btnLogin"
enabled = "false"
press = ".onPressLogin"
text = "{i18n>AUTH_DIALOG_BTN_SUBMIT}"
type = "Emphasized" />
</endButton>
</Dialog>
</core:FragmentDefinition>
How can I show a hidden sap.m.Input without changing the initial sap.m.Dialog sizes?
You can control the content size with the properties contentWidth and contentHeight.
Update after the comment:
but more interesting is the reason why does the showing of extra [content] leads to change the dialogue window size?
That's probably the native behavior of Blink (Chromium's layout engine). If an additional HTMLElement needs to be rendered and the Dialog's <div> element does not specify the width explicitly (getContentWidth() returning an empty value), the sizes of the <div> grow automatically along with the content.
According to this comment, other browsers behave differently. So the Dialog tries to "fix" it in that case.
Try to set the height of Dialog with vh. Hope that will work.

How to bind popup user control to view model and how to handle back button? (Windows Phone 8.1 Runtime)

I'm working on WP 8.1 runtime application and I'm using Caliburn.Micro. Application follows MVVM pattern. I have an ItemPageView and ItemPageViewModel and data binding works as it should.
I want to add popup (UserControl) over ItemPageView(Page) after I click one item on ItemPage. Popup has only one ScrollViewer containg one Image and I want to do something like this :
<Image x:Name="imageFull"
Source="{Binding _currentItem.ImageURL}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
_currentItem is a property of ItemPageViewModel.
My second problem is related to Back button. I've added this to my code:
void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
{
Frame frame = Window.Current.Content as Frame;
if (_popUpActive)
{
_popUpActive = false;
_showImagePopUp.Close();
frame.GoForward();
//var lastPage = frame.BackStack.LastOrDefault();
//frame.Navigate(typeof(SingleGuideView));
e.Handled = true;
}
else
{
frame.GoBack();
e.Handled = true;
}
}
After I click on Back button Popup will close, and after that, it will navigate back. Only "solution" to stay on current view is to call frame.GoForward(); .
About the Popup, you can write some Code like the following in you XAML (Keep the Popup in just below the First Grid):
<!-- This is the First Grid -->
<Grid>
<Popup x:Name="myPopup" Width="400">
<ScrollViewer>
<StackPanel>
<Image x:Name="imageFull"
Source="{Binding _currentItem.ImageURL}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</ScrollViewer>
</Popup>
</Grid>
You can handle the problem with the Popup by having a Counter for the Hardware Back Button Press. Have a look at the Code Below:
int _popUpCounter = 0, _dummyCounter = 0;
void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
{
_dummyCounter++;
Frame frame = Window.Current.Content as Frame;
if (_popUpCounter == 0 && _dummyCounter == 1)
{
_popUpCounter = 1;
_popUpActive = false;
_showImagePopUp.Close();
frame.GoForward();
//var lastPage = frame.BackStack.LastOrDefault();
//frame.Navigate(typeof(SingleGuideView));
e.Handled = true;
}
else if (_popUpCounter == 1 && _dummyCounter == 2)
{
_popUpCounter = _dummyCounter = 0;
frame.GoBack();
e.Handled = true;
}
}
This will help you with the problem related to Popup.

Access form elements on different Frames in VBScript

I have these three frames on a website.
<frame scrolling="AUTO" src="../../vix/thalada/Rangasamy?MokkaKumuta1234567" name="AAN">
<frame scrolling="AUTO" src="../../vix/thalada/Rangasamy?MokkaK****13245678" name="BAN">
<frame scrolling="AUTO" src="../../vix/thalada/Rangasamy?MokkaK****85234175" name="CAN">
This is how it goes:
Set oIE = CreateObject("InternetExplorer.application")
oIE.Visible = True
oIE.navigate ("https://ec.rcuwebportal.au.eds.com/cics/r1cb/rm0p00ba?cb246")
oIE.Document.getElementsByTagName("a").item(0).Click // This works and it clicks on a image button in the frame named AAN. Fine
Next when I tried to access another text box that is present in the frame named BAN , I got the object not found error. Obviousy, because I'm still the frame AAN , but the element belongs to frame BAN.
Below is the textbox that is present in the frame named BAN.
<input type="text" maxlength="30" size="30" value=" " name="BAFREENAME"></input>
How do I access the form control on this frame? Any ideas?
Appreciate your help.
You can access all elements off of the frames by first, iterating through the frames, then referencing their contentWindow.document.
Dim oIE, aHTML, oIFrames, frame, i, obj, ifHTML: i = 1
Set oIE = CreateObject("InternetExplorer.application")
oIE.Visible = True
'This page must be remote...
oIE.navigate ("http://your/website...")
'local websites (file://) will return access denied on IFRAME/Frame Content viewing.
Do
Loop While oIE.ReadyState < 4 And oIE.Busy
Set aHTML = oIE.document
Set iframes = aHTML.getElementsByTagName("frame")
For Each frame In iframes
Set inputs = frame.contentwindow.document.getElementsByTagName("input")
For Each obj In inputs
If obj.className = "BAFREENAME" Then
'MsgBox "found BAFREENAME in frame:" & i
End If
Next
i = i + 1
Next
'MsgBox "done"

Added navigation button doesn't work first time in Titanium alloy

i added navbutton to navigation and i wrote 'click' function on to it doesn't work first time . actually am adding button to navigation bar on that first click it was not working on second click it works how can i solve this
my xml code is
<Alloy>
<Window id="aboutWin" name="aboutWinName">
<NavigationGroup id="navAbout" platform="ios">
<Window class="container" id="aboutChildWin">
<View id="aboutView">
<ImageView id="logoImg"></ImageView>
<ImageView id='logoWrd'></ImageView>
<Label id="versionLbl"></Label>
</View>
<View id="footView"></View>
</Window>
</NavigationGroup>
</Window>
</Alloy>
and my Js code is
var button = Titanium.UI.createButton({
// title:"Back",
backgroundImage:"/images/MenuList.png",
// top : 4.5,
height : 35,
width : 40,
// left : 4
})
$.aboutChildWin.leftNavButton = button;
button.addEventListener('click',function(){
if(Ti.App.currentAnimateWindow == "About")
{
Ti.App.socialWindow.hide();
Ti.App.menuWindow.show();
$.aboutWin.animate(animateLeft);
Ti.App.currentAnimateWindow = "Menu";
}
else if(Ti.App.currentAnimateWindow == "Menu")
{
$.aboutWin.animate(animateRight);
Ti.App.currentAnimateWindow = "About";
}
})
can any one solve this
i just make small change, insert of adding button to navigation window i add the navbutton to whole window.
code is :
$.aboutWin.leftNavButton = button;
That might sound stupid but did you try to change the order?
var button = Titanium.UI.createButton({
// title:"Back",
backgroundImage:"/images/MenuList.png",
// top : 4.5,
height : 35,
width : 40,
// left : 4
});
button.addEventListener('click',function(){
if(Ti.App.currentAnimateWindow == "About")
{
Ti.App.socialWindow.hide();
Ti.App.menuWindow.show();
$.aboutWin.animate(animateLeft);
Ti.App.currentAnimateWindow = "Menu";
}
else if(Ti.App.currentAnimateWindow == "Menu")
{
$.aboutWin.animate(animateRight);
Ti.App.currentAnimateWindow = "About";
}
};
$.aboutChildWin.leftNavButton = button;
Without using alloy this change makes no difference.