How to remove Flex IFrame while loading a new module? - actionscript-3

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();

Related

Display Text with HTML image tag inside WPF control

I try to display a Text that contains a string plus HTML tags, and render images.
SourceText="TextToDisplay <img Source="Http://...cat.png"> and thats <b>it</b>";
RichTextBox doesnt work well.
I found some NuGet packages:
HtmlRenderer : But cannot access image that needs my Windows credentials to access, no way to send credential, so i got error 404 for images.
HtmlAgilityPack : Does not work for images
HtmlRichTextBoxBehavior : Does not work for images
I'm out of ressources....
Use case is I try to replicate TFS Description box in a WorkItem, it can contains HTML tags.
When i query TFS api to get Description, thats what we receives and i want to display the same box with the same iamges....
It's WPF, so you can just build whatever custom control you want very easily.
Start with a TextBlock and an Image control inside a StackPanel and go from there. It doesn't have to be any more complicated than that if you don't want it to. Or you can add a bunch of extra functionality if you need extra features. WPF gives you the flexibility to build whatever you want.
<StackPanel>
<TextBlock Text="TextToDisplay"/>
<Image Source="http://myUrl.../myImage.png"/>
</StackPanel>
This places them one after the other. If you want them to overlay one another, use a Grid to hold them. If you want a MouseOver effect, use a PopUp control. If you want an actual hyperlink in the UI, use the WPF Hyperlink element.

Create a scrollable non editable text display

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>

Object Tag and IE9

I've come across an interesting problem with IE9 and object tags.
In the simplest form for a client I am hosting a website (ASP .NET Web Forms site) within an object tag from a page in a separate website, for reasons that are ridiculous and mind blowing, the html looks like the following:
<object id="so" data="https://so.com/so" scrolling="auto" frameborder="0">
</object>
In Chrome and Firefox when I click a link in the html inside the object tag, the browser tab has a loading icon (as per a normal page event) giving the user feedback that an event has occurred. In IE 9 this does not occur so the user doesn't know that clicking the link has fired any events.
I've looked at the onbeforeunload event of the object tag with no success, for instance:
<object id="so" data="https://so.com/so" scrolling="auto" frameborder="0" onBeforeOnLoad="javascript: onDocumentUnLoad();">
</object>
Using the above method the onbeforeunload function is not called.
I also tried using a ajax load via jQuery into a div but handling out of context css and js references and post-backs become unmanageable and also adding click events to every button or href affected performance and functionality.
I was was wondering if there's another approach to give the user feedback or a simple workaround.
I've found a solution that works.
In the parent page create an handler for a custom event. In this case "unloadingChild":
//using jQuery 1.4.2
$("body").bind("unloadingChild", function(){
console.log("child unloaded");
});
In the child hosted page trigger the custom event via the body unload event:
//body element unload
$(window).unload(bodyUnload());
function bodyUnload(){
//trigger the parent unloadingChild event
parent.$("body").trigger("unloadingChild");
}
I don't know if it's the best way but it seems like a good way. That certainly works for this scenario.
It doesn't solve the object unload but it gets around the problem.
This will only work for two websites with the same origin. Otherwise you will get an error similar to "Permission denied to access property '$'"

Is it possible to drag a flex component over the html page?

I want to know whether is it possible to drag a flex component, say the component is a draggable image, over an iframe that present in the application.
I have observed that whenever i do that the image is going behind the iframe and not over the iframe.
Any ideas?

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