Is there a way for the Flex app to get any information about the HTML document via the ExternalInterface? Can Flex find out if a particular DIV exists, for example?
ExternalInterface is a Javascript interface with the containing page, so anything that is possible in javascript is possible through ExternalInterface, either directly or through functions on the hoast page.
AnnonymousFunctionCall from ExternalInterface
Is there a way for the Flex app to get any information about the HTML document via the ExternalInterface?
Check out JSInterface - JavaScript API for ActionScript 3. Two front page examples are called:
JavaScript'ing Inside Flash
ActionScript'ing Inside HTML
I use this library currently and it is extremely powerful. I asked him (Oleg Galaburda) once whether or not I should use this for simply being able to resize the swf. He said something like "if you only need to do a few in javascript, just stick with ExternalInterface. If you need access to the DOM in ActionScript, use this".
There are hundreds of examples in the svn repository. He's done an awesome job with this thing. It converts JavaScript Objects to ActionScript and back, so you can use full-on classes. It would take a ton of work to rebuild that so it's cross browser and everything. He's done that!
Everything in JSInterface is basically a dynamic class, so you can drill down the DOM easily. Here's some sample methods (in ActionScript):
protected function testCSS():void
{
var styleTag:JSHTMLElement = JSInterface.pushCSS('.text{font-weight:bold;color:#ff00ff;font-size:90;text-decoration:underline;}');
var font:JSHTMLElement = JSInterface.document.createElement('font');
font.innerHTML = 'Hello world!';
font.setAttribute('class', 'text');
font.className = 'text';
JSInterface.document.body.appendChild(font);
trace(styleTag);
}
protected function insertIFrame():void
{
var body:JSDynamic = JSInterface.document.getElementsByTagName('body')[0];
var frame:JSDynamic = JSInterface.document.createElement("iframe");
frame.width = 300;
frame.height = 300;
if (JSInterface.navigator.appName.indexOf('Microsoft')>=0)
{
frame.onreadystatechange = function():void
{
trace(frame.readyState);
};
}
else
{
frame.onload = function():void
{
trace('iFrame loaded');
};
}
frame.src = 'http://actualwave.com';
body.appendChild(frame);
}
The library internally uses ExternalInterface to handle everything. But to serialize/deserialize the DOM to/from ActionScript, that's a ton of work. This library should do the trick.
Hope this helps,
Lance
Responding to another question I explained how ExternalInterface actually works. What you can take from that is a simple "yes".
[edit] some sample code:
var jsFunc:String = 'function () { return document.getElementById("test") != null; }';
var divExists:Boolean = ExternalInterface.call(jsFunc);
should clarify things ...
Related
In my C# or dreamweaver template I need to know what am I rendering. The problem is that I don't know for sure if I'm looking for a page or component. I could probably use package.GetByType(ContentType.Page) and if it's empty - get content of a component, but I feel there should be a shorter way.
Example of David is shorter:
engine.PublishingContext.ResolvedItem.Item.Id
engine.PublishingContext.ResolvedItem.Item.Id
You can also check the Publishing Context's resolved Item and see if it's a Page or not (if it's not, then it's a Component).
For example:
Item currentItem;
if (engine.PublishingContext.ResolvedItem.Item is Page)
{
currentItem = package.GetByName(Package.PageName);
}
else
{
currentItem = package.GetByName(Package.ComponentName);
}
TcmUri currentId = engine.GetObject(currentItem).Id;
If you want to shortcut the engine.GetObject() call, then you may be able to get the ID from the Item's XML directly:
String currentId = currentItem.GetAsSource().GetValue("ID");
That's how I've seen it done before:
// Contains the call you describe in your question
Page page = GetPage();
if (page == null)
{
// Contains a call using package.GetByName("Component")
// to avoid the situation with multiple Components on the package
Component comp = GetComponent();
// Do component stuff
}
else
{
// Do page stuff
}
Not sure you can encapsulate it much nicer than that really but I may be proved wrong.
I am working on an application which has quite a bit of field-validation in it. The validation works great and I am 1000000% sure the validation message popups were appearing earlier. Now I did quite a bit of work and refactoring. One of the things I changed was the way I open up Popups/Dialog. In order to have these centered over the entire application instead of the opening component I refactored the way I open dialogs. I used the source of the Alert as a base for this but extended it quite a bit as I was having other issues (Focus Manager etc.) (I am just mentioning this as I am assuming that my missing popups are related to this).
Here comes the code responsible for opening popups in my application:
public function show(realParent:Sprite,
displayParent:Sprite = null,
closeHandler:Function = null,
moduleFactory:IFlexModuleFactory = null):Dialog {
// Get the parent ...
// If none is set, use the top-level-application.
if (!displayParent) {
var sm:ISystemManager = ISystemManager(FlexGlobals.topLevelApplication.systemManager);
// no types so no dependencies
var mp:Object = sm.getImplementation("mx.managers.IMarshallPlanSystemManager");
if (mp && mp.useSWFBridge())
displayParent = Sprite(sm.getSandboxRoot());
else
displayParent = Sprite(FlexGlobals.topLevelApplication);
}
// Register for close-events, making sure the pop-up is closed.
if (closeHandler != null) {
this.addEventListener(CloseEvent.CLOSE, closeHandler);
}
// Setting a module factory allows the correct embedded font to be found.
if (moduleFactory) {
this.moduleFactory = moduleFactory;
} else if (realParent is IFlexModule) {
this.moduleFactory = IFlexModule(realParent).moduleFactory;
} else {
if (realParent is IFlexModuleFactory) {
this.moduleFactory = IFlexModuleFactory(realParent);
} else {
this.moduleFactory = FlexGlobals.topLevelApplication.moduleFactory;
}
// also set document if parent isn't a UIComponent
if (!parent is UIComponent) {
this.document = FlexGlobals.topLevelApplication.document;
}
}
// Make the dialog center itself relative to the parent.
PopUpManager.addPopUp(this, displayParent, true);
PopUpManager.centerPopUp(this);
return this;
}
What could be responsible for the Validation popups not showing up any more? Where should I look?
Chris
Ok ... so I figgured this out by myself again. I coould bang my head at the wall for taking so long for finding it though.
If I use the Spart forms, the FormItems and Forms themselves can define error text areas in order to output error messages. So as soon as the FormItem posesses a skin part with the id "errorTextDisplay" the error messages go there. I was now expecting that if there was no such part, the old notifications would be used ... nope.
After about 2-3 Hours of messing around with the code of FormItem and it's skins, I noticed that the "contentGroup" explicitly defined an attribute to suppress error tooltyips by setting showErrorTip to false. Simply removing the "errorTextDisplay" from the skin and changing the showErrorTip to true made my popups appear nicely :-)
Hopefully this post might help someone with the same problems.
i'm pulling my hair out. need to print html generated invoices from a distant server, using
the print class, event if bitmap is set as false, will render the invoice a bitmap. at least the text is blurry and not usable. alivepdf could be a solution but i need to print straight, not save the pdf locally. i don't even understand, giving the fact this print class sucks badly, flex won't allow a simple javascript print function from the remote page.
i beg for some help here !
thank you
Why don't you use the browser to print?
Here's an example:
Put this in your index.html template:
<script language="JavaScript">
function printPage(htmlPage)
{
var w = window.open("about:blank");
w.document.write(htmlPage);
w.print();
w.close();
}
</script>
Put this in your Flex Project. What you're doing is checking to see if you have access to ExternalInterface to have access to the browser. Then you're going to use the ExternalInterface static method of "call" to call the javascript:
import mx.controls.Alert;
import flash.external.ExternalInterface;
public static function PrintHtmlPage(pHtmlPage:String):void
{
if (ExternalInterface.available)
{
try
{
ExternalInterface.call("printPage",pHtmlPage);
}
catch (error:SecurityError) { Alert.show("Security Error"); }
catch (error:Error) { Alert.show("Error");}
}
else { Alert.show("ExternalInterface not avalible");}
}
Now the user can print clean html from their browser!
http://cookbooks.adobe.com/post_How_to_print_in_Flex_using_browser_capabilities-11468.html
EDIT:
If you are using AIR and need to do this, you can try using AlivePDF and following this tutorial:
use alivepdf (http://alivepdf.bytearray.org/), and look at this tutorial for printing from AIR (http://murrayhopkins.wordpress.com/2011/01/07/using-alivepdf-to-print-from-air-javascript-via-actionscript3-part-1/)
parse the HTML into Spark components, and then add them as a Sprite, then use printAsBitmap = true in your option, and FlexPrintJob
Does anyone know what the onLoad() or similar Event is in Flex? I'm trying initialize, but no joy.
protected function videoArea_initializeHandler(event:FlexEvent):void
{
var currentPosition:int = videoArea.verticalScrollPosition;
if (currentPosition < 0)
{
left_button.visible = false;
right_button.visible = true;
}
}
The best alternative for onLoad() in Flex would be creationComplete.
See this link (Adobe) and this link (MikaFlex) for more information about the event hierarchy.
What are you trying to initialize? If you're asking for the Flex Parallel to OnLoad(); perhaps you should tell us where onLoad() comes from?
I strongly suggest reading up on the Flex Component LifeCycle.
You can do initalization in the constructor of a component. If using MXML, you might want to use the preinitialize event. Some folks also use creationComplete.
I am building a complex Flex app, and now I am at the point where navigation becomes a problem. I make use of Viewstacks with a Menu Bar, but I am not sure how to clearly structure this.
Depending on the logged in User and chosen Company by the user, he can see different pages. For now I restricted this hiding the appropriate buttons in the Menu Bar. However, not just the menu bar, but also buttons/links from within the app should be able to navigate to each existing page.
When I am loading up an existing page, it needs some initialization (depending on the context it is loaded from). In addition, when a company is chosen, I need to load the status from the backend, and depending on this status a specific page might be visible.
Are there any guidelines how to tackle more complex navigation/site hierarchies in Flex?
Now I am having all my views in a viewstack in the Application, and refer to it with Application.application.appViews.selectedChild -> but that's obviously not best practice, since it violates encapsulation.
Was thinking of implementing some sort of State Machine, which takes care of all this, but not quite sure it this would make sense, or if there is any better way.
Thanks guys,
Martin
If it's really complex, you might want to consider breaking your application up into modules.
Also, Mate is a great Flex framework for handling complex communication and navigation. Mate's EventMaps help you centralize the communication and logic between components, modules, etc. And, it keeps you away from the dreaded Application.application references.
Even if you don't use a framework like Mate, you can avoid the Application.application references by having components dispatch custom events that bubble up to the top-level of your application. The top level of the application can listen and catch these events and act on them. I've found this to be a much more flexible approach. I avoid Application.application as much as possible!
If you have a complex menu bar that needs to enable / disable a lot of buttons or options based on many different logic conditions, the State pattern is a decent way to handle it. I built an enterprise-level app that had a "Word-like" button bar at the top...and there were so many different conditions that affected the states of the buttons that I had to centralize the logic in one place. At first I didn't use the State pattern and maintaining the code was a difficult chore. One day, I bit the bullet and re-factored all the conditional logic into a StateManager class. It definitely made life easier from there on out.
Again, you might want to consider using Custom Events to broadcast important events to your application. You can make these events bubble up to the Application level. Then, by adding event listeners at the Application level, you can capture and respond to these events and target components or modules from the Application level. This gives you a central location for handling events and "directing traffic". It also prevents the tight-coupling of the Application.application approach. (Which quickly becomes a nightmare as your application grows and scales!)
For example, your StateManager can contain the case statements for deciding which state your application needs to be in. Once the decision about the current state is determined, you would dispatch a custom StateEvent. (Which might have properties like StateEvent.STATE_CHANGED and StateEvent.CURRRENT_STATE) This event can bubble up to the Application level and be caught by a listener. The listener then calls a method to load / change the state.
Does that clarify it for you? If not, perhaps I can spend an hour or two putting together a little sample.
Let me know,
=Bryan=
I can give you the approach I used for some of your sub-questions, the problem of initializing a page at runtime and how to encapsulate navigation.
For page initialization, the issue I came across is that it's not always known once you navigate to a page whether certain elements should be shown, since it not-only depends on overall user permissions, but also permissions against the currently-selected data. And if the information needed to determine this must be loaded from the server, you cannot show the page as-is while loading the information. So we created a control called LoadingPanel, which is a container that can cover content with a loading indicator until additional information has been received. Here's a shortened version of the ActionScript:
[DefaultProperty("children")]
public class LoadingPanel extends ViewStack
{
public function LoadingPanel()
{
this.resizeToContent = false;
super();
}
public function get children():Array { return _children }
public function set children(value:Array):void { _children = value; }
public function get loadingImageStyle():String {
return _loadingImgStyle; }
public function set loadingImageStyle(value:String):void {
_loadingImgStyle = value;
if (_loadingIndic)
_loadingIndic.loadingImageStyle = value;
}
public function showLoadingIndicator():void
{
if (_loadingIndic)
{
super.selectedChild = _loadingIndic;
}
else
{
_pendingLoadingIndic = true;
var me:LoadingPanel = this;
var listener:Function = function(event:Event):void
{
if (me._pendingLoadingIndic)
me.showLoadingIndicator();
}
addEventListener(FlexEvent.CREATION_COMPLETE, listener);
}
}
public function hideLoadingIndicator():void
{
_pendingLoadingIndic = false;
if (_content)
{
super.selectedChild = _content;
}
else
{
var me:LoadingPanel = this;
var listener:Function = function(event:Event):void
{
me.hideLoadingIndicator();
}
addEventListener(FlexEvent.CREATION_COMPLETE, listener);
}
}
public function waitForEvent(target:EventDispatcher, event:String):void
{
_eventCount++;
showLoadingIndicator();
var me:LoadingPanel = this;
target.addEventListener(
event,
function(evt:Event):void
{
me._eventCount--;
if (!me._eventCount)
{
me.hideLoadingIndicator();
}
}
);
}
override public function addChild(child:DisplayObject):DisplayObject
{
var result:DisplayObject = child;
if (_content)
{
result = _content.addChild(child);
invalidateDisplayList();
}
else
{
if (!_children)
{
_children = [];
}
_children.push(child);
}
return result;
}
override protected function createChildren():void
{
super.createChildren();
if (!_content)
{
_content = new Box();
_content.percentWidth = 1.0;
_content.percentHeight = 1.0;
super.addChild(_content);
}
if (!_loadingIndic)
{
_loadingIndic = new LoadingIndicator();
_loadingIndic.percentWidth = 1.0;
_loadingIndic.percentHeight = 1.0;
_loadingIndic.loadingImageStyle = _loadingImgStyle;
super.addChild(_loadingIndic);
}
if (_children)
{
for each (var child:DisplayObject in _children)
{
_content.addChild(child);
}
}
}
private var _loadingImgStyle:String = "loadingIndicatorDark";
private var _loadingIndic:LoadingIndicator = null;
private var _content:Box = null;
private var _children:Array = null;
private var _pendingLoadingIndic:Boolean = false;
private var _eventCount:int = 0;
}
We typically used these by wrapping a LoadingPanel around content then calling the panel's waitForEvent method. Typically, the event we'd wait for is for a web service response to come in. The class also lets you wait on multiple events before it will show its children.
Another recommendation I would make for your project is that you look into deep linking in Flex. Our users appreciated being able to bookmark a resource/location in our complex Flex application as well as being able to hit refresh in their browser and return to the same "page" they were on. But implementing deep linking also helped me out for one of the problems you mentioned; how do you send the UI to a specific page in an encapsulated manner? The way we did it is by raising a bubbling navigation event containing a destination "URL." A top-level navigation "manager" then handled interpreting the URL and "sending" the user to the appropriate area.
Hopefully this will give you some ideas for some of the challenges you face.