Create a scrollable non editable text display - actionscript-3

I have very little experience with flex/actionscript3/mobile developement, but I'm currently working on a problem with an app, and find myself somewhat lost. In a legacy app I'm currently making modifcations to, we were previously using adobe Air 16, Flex 4.6. However, sometime ago an update was made to use Air 23 and Flex 4.15 instead.
Since then a couple of issues have come up, most notably a display we used is not longer working.
Previously we were using the following to display some information pulled from a log file for viewing by testers. The contents are added via the controller when the view is loaded up. That isn't included as it isn't particular important(at least I don't think it is).
<s:VGroup id="logPanel" horizontalAlign="center" width="100%" height="100%" paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15" gap="15">
<s:TextArea id="logContents" width="100%" height="100%" editable="false" text="Opening file...">
</s:TextArea>
</s:VGroup>
Previoulsy using the editable tag was enough to prevent the keyboard from popping up, and allow the mobile user to scroll through the text area via touching.
However, after updating this doesn't seem to be the case. In newer version the keyboard pops up and I can't seem to find a way to implement scrolling, and prevent the soft keyboard from appearing. It looks like the editable field is respected(as editing is enabled), but the prevent the soft keyboard via that tag isn't. I can disabled the soft keyboard via adding event listeners for a variety of Mouse events, but this doesn't seem ideal, and also doesn't help with scrolling.
Is their a simple way to get the functionality I want with this text area, or do I need to be using a different component for this entirely. After spending time trying to research this I keep coming back to text areas as the component I want, but as I mentioned getting the desired behavior is difficult, and I'm fairly new this language as a whole.
If I set enabled to false I am able to prevent the keyboard from appearing, but then I don't seem to be able to add event listeners to mouse inputs which I would need to manually implement scrolling.

The reason I was stumped was because I was being dumb. The text area doesn't seem to be able to behave the way the original authors intended anymore. However, the RichEditableText component was able to have the functionality I needed. Switched to the following game all the desired functionality. Had I not been so slow in going through documentation I might have found this sooner.
<s:VGroup id="contentPanel" horizontalAlign="center" width="100%" height="100%" paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15" gap="15">
<s:Scroller width="100%" height="80%">
<s:RichEditableText id="contents" percentWidth="100" percentHeight="100" editable="false" selectable="false">
</s:RichEditableText>
</s:Scroller>
</s:VGroup>

Related

UWP ListView in touch mode

I have this ListView in a Windows 10 project:
<ListView ItemsSource="{x:Bind ViewModel.ItemsList, Mode=TwoWay, Converter={StaticResource BindableSourceConverter}}"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
RelativePanel.Below="pageHeader"
CanReorderItems="True"
SelectionMode="None"
CanDragItems="True"
AllowDrop="True"
CanDrag="True" />
and i need to allow the user to reorder the ListView.
Using mouse everything works fine, but using the touch, i need to wait one second before that i'm able to move the items around.
Any idea on how to fix that?
There isn't any, if you don't wait one second internal ScrollViewer thinks you do scroll action. Since it can't know your intention for sure, it can't know the difference.
If you don't need scroll action, consider not using ListView.

Winrt Scrollbar not working

I am trying to use scrollbar (not scrollviewer) in window store application and it seems there is a bug. It doesn't display at all. It occupies the space as per set width but nothing else is visible.
I have set viewport,small change large change maximum etc but nothing working.(code below)
<ScrollBar Orientation="Horizontal" ViewportSize="500" SmallChange="10" LargeChange="20" Maximum="1000" Minimum="20" Height="20" Margin="130,5,433,5" >
</ScrollBar>
I can not use scroll viewer ,so need specific help on scrollbar only.
Please help. its urgent.
See this article:
In WinRT, How to use ScrollBar control as like in WPF
The recommendation is that you use ScrollViewer for Windows Store App. What is your specific need in wanting to use ScrollBar?
Also, the article discusses the behaviour of ScrollBar, which might explain your issue.

How to remove Flex IFrame while loading a new module?

I have an application (container) within which modules are loaded using a module loader, when a menu item in the application is clicked. Within one of the modules, I have an iframe which is created and added dynamically when the user clicks on a tree item within that module.
The problem is, when the menu is clicked to load another module, the iframe alone is not getting removed from the parent application and is being displayed (incorrectly) over the new module.
My question is how to remove that iframe from the currently loaded module, just before loading the new module ?
PS:
Flex 4 SDK
Say for e.g., Consider this is the IFrame instance I have created which is inside a border container.
<s:BorderContainer id="mybordercontainer" right="0" top="0" left="5" bottom="0" width="100%" height="100%">
<flexiframe:IFrame id="googleIFrame"
label="Google"
source="http://www.google.com"
width="80%"
height="80%"/>
</s:BorderContainer>
for some reason, the following code didn't work.
(mybordercontainer.getElementAt(0) as IFrame).removeIFrame();
Instead, I directly called the removeIFrame() method using the IFrame instance which works well.
googleIFrame.removeIFrame();

setFocus in Flex

I'm Using following code in flex4 mxml That works fine.
<mx:Button label="Set focus to Username"
click="focusManager.setFocus(username);" />
How to use the same in Action script I mean creation complete event of an application without using button.
That is I have login panel in application While page loads the
username field should focused having cursor in it.
Can any one help me?
The issue is that within your application the TextInput has focus, but within the HTML page your Flex application does not. So basically the only extra step you need is to give the Flex app focus. There's only one way to achieve this: through JavaScript. And you should do it after the application was loaded.
The guys at Farrata wrote a very good example on how to do this, so I'm just going to point you there: http://flexblog.faratasystems.com/2011/12/15/setting-focus-in-flex-components

Flex Textfield doesnot gain focus when cursor is in text field of iframe

I have a web page which has a SWF file embeded. I have an issue with the focus.
Steps to reproduce:
1)Click on a HTML Text Field which is inside a Iframe
2)Click on a Flex Field.
3)Begin to type some text.
Expected Result is the entered text should go in the Flex TextInput field but the actual Result is it goes into HTML text field.
This is the bug which was filed but closed without any resolution. The workaround suggested there doesnt work. ( bugs.adobe.com/jira/browse/SDK-12377 )
This is happening only in IE 6.0 and IE 7.0. Below is the live example.
http://drumbeatinsight.com/examples/htmlcomponent/iframe/HTMLFrameInApplication.html
Any Suggestions or workaround to solve this problem are requested.
Your browser is maintaining focus instead of giving it back to the flash player. I ran into this issue when trying to 'embed' html content inside my flex app ... accomplished by floating html iframe above the flash player.
I have to hide and restore the iframe if I want to interact with flex because the iframe needs to be on top of the flash player, but all that is easy. I would find, even if I hid the iframe, flash player was never getting keyboard focus back. You need to tell the browser to give keyboard focus back to the flash player.
Now there is no really good way to determine if you need to instruct the browser to give keyboard focus back, I end up executing this javascript on every mouse down, rather inefficient, but it was the only way to gaurentee whenever my user clicked on flash player content, that the browser gave keyboard focus back.
Execute a javascript method that looks up the embeded content by name and call focus().
Basically - document.getElementById('flexEmbedID').focus();
Use the external interface to call that on stage.mouseDown(). Lots of overhead as it executes a lot, but it will fix your problem.