|
Usage
Before continue be sure to read how CacheFileSystem works StageWebViewDisk initializationStageWebViewDisk is the responsable of all disk transactions with StageWebViewBridge. It is required to initialize the StageWebViewDisk class before we can use a StageWebViewBridge instance. There are 2 events that gets dispatched from this class. We must listen to the StageWebviewDiskEvent.END_DISK_PARSING before create any StageWebViewBridge instance Events // Dispatched at disk parsing start StageWebviewDiskEvent.START_DISK_PARSING; // Dispatched at disk parsing end StageWebviewDiskEvent.END_DISK_PARSING; Example initialization code
// OPTIONAL BEFORE INIT OPTIONS SETTING
StageWebViewDisk.setDebugMode( true ); // if we need debug mode assign it before initializaton
// StageWebViewDisk Events. First time app launches it proceses the filesystem
// As it can take some time, depending of the filesize of the included files
// we provide 2 events to know when process start/finish
StageWebViewDisk.addEventListener(StageWebviewDiskEvent.START_DISK_PARSING, onDiskCacheStart);
StageWebViewDisk.addEventListener(StageWebviewDiskEvent.END_DISK_PARSING, onDiskCacheEnd);
StageWebViewDisk.initialize( stage /*Stage instance. Required*/ );
var bridge:StageWebViewBridge;
function onDiskCacheStart( e:StageWebviewDiskEvent ):void{ /* Do something at process start */ }
function onDiskCacheEnd( e:StageWebviewDiskEvent ):void
{
//Now is safe to init our StageWebViewBridge class
bridge = new StageWebViewBridge( 0, 150, 320, 280 );
....
}TIP If we are targeting only Mobile we can less the debug mode true all the time, as it din't affect on Mobile StageWebViewBridge extends BitmapAs StageWebViewBridge extends bitmapdata, you can do: /** * StageWebViewBridge Class * @param xpos Indicates the initial x pos * @param ypos Indicates the initial y pos * @param w Indicates the initial width * @param h Indicates the initial height * @param autoVisibleUpdate Boolean. Control visibility testing of his parents. * TRUE by Default. Disable it to save some CPU ( as it uses an EXIT_FRAME event listener to work ) * then control yourself his visibility. * * @example * var testBridge:StageWebViewBridge = new StageWebViewBridge( ); * */ // create StageWebViewBridge instance var view:StageWebViewBridge = new StageWebViewBridge( 0, 150, 320, 280 ); // add it to the display list addChild( view ); // move it view.x = 100; view.y = 100; // get a SnapShot for use as the Bitmap's bitmapdata view.getSnapShot(); // toggle the visibility of the SnapShot view.snapShotVisible = true; // rotate, scale, change alpha ( only when snapShotVisible = true ) view.alpha = .5; view.rotation = 45; view.scaleX = .5; Creating a new StageWebViewBridge instanceAS3 Code // create StageWebViewBridge instance
// new StageWebViewBridge( x,y,width,height )
var view:StageWebViewBridge = new StageWebViewBridge( 0, 150, 320, 280 );
// add listener for when page becomes loaded
view.addEventListener( Event.COMPLETE, onViewLoadComplete );
// enable javascript to call function helloWorldFromJS
view.addCallback('helloWorldFromJS', helloWorldFromJS );
// load content to the view
view.loadLocalURL('appfile:/index.html');
// as StageWebViewBridge extends Bitmap
// we can now add it to the displaylist
addChild( view );
// event listener that gets called on page load complete
function onViewLoadComplete( e:Event ):void
{
trace('view loaded');
// call a javascript function after the page loads
// that will do an alert with the date passed from as3
view.call('helloWorldFromAS3', null, new Date().toString() );
}
// function to be called from JS
function helloWorldFromJS( at:String ):void
{
trace('helloWorldFromJS called from JavaScript at '+ at );
}
index.html <html>
<head></head>
<body style="margin:0px; padding:0px">
<script>
function helloWorldFromAS3( at )
{
alert('helloWorldFromAS3 called from AS3 at '+ at );
}
</script>
<button onclick="StageWebViewBridge.call('helloWorldFromJS',null,new Date().toString() )">Call Actionscript helloWorldFromJS function</button>
</body>
</html> Working with SnapShotsYou can get an SnapShot of the view by calling the getSnapShot method. GetSnapShot method works asynchronously, you can listen for the StageWebViewBridgeEvent.ON_GET_SNAPSHOT event to know when the bitmapdata is generated view.addEventListener( StageWebViewBridgeEvent.ON_GET_SNAPSHOT, onGetSnapShot );
view.getSnapShot();
function onGetSnapShot( e:StageWebViewBridgeEvent ):void
{
// remove listener
view.removeEventListener( StageWebViewBridgeEvent.ON_GET_SNAPSHOT, onGetSnapShot );
// set the bitmapdata visible, hides de stagewebview
view.snapShotVisible = true;
}
|
► Sign in to add a comment
Does it work with remote html page? I mean in term of bidirectional AS-JS communication. I tried it on my machine but it didnt work for me. It gave me StageWebViewBridge? as undefined variable error on android. please let me know if I miss something for remote resource AS-JS communication.
Hoping for a reply soon.
Thanks, Mamta
Hi, sorry, I have not explained this....
Just updated the source code... now you can see an .js file...
To work, include this StageWebViewBridje?.js file in the page you are loading from online, whait for the COMPLETE event when loading to be sure comm worked...
Say me if helps...
( I will update docs to reflect this )
Hello there! Thanks for this verry nice class. It a life saver. I just have a problem though. While running on an iPad, it seems not to be working correctly. I guess it's because of the www folder that doesn't exist on it. Is there anyway to add it, create it or change the link to some other place? Please let me know, I'm stucked on this for more than 4 hours and it's driving me crazy ;o)
Thanks,
Max
Hi, the location of the www dir , and the way you include it depends the way you compile/use it...
The easy way is to use CS5.5, then in the iOS publish settings specify the www in the included files..
Hi, thanks for the quick answer. Th'ats exactly what I'm doing. I play with AIR for a long time now and I never had this king of troubble with Desktop apps. By the way, while I'me testing it in the IDE, it works great. But on the iPad, it doesn't at all. When I trace is, the www folder doesn't exist. Is there any walkaround for this?
I really appreciate it!
I really dont understand why don't work 4 you... can you send me some code? .fla? etc....
Excuse me I had to sleep a little, I spend my night on this ;o)
Here is a link where you can download my code : http://www.max-niceback.com/TEMP/StageWebView.zip
It's a CS5.5 file, hope this is ok for you. It is set for AIR iOS Device for the iPad. As said before, it works perfectly in the browser but not on the iPad.
I used the swr files. So please just check the linkage of the librairies in the publication panel on your computer.
Thx, Max
Hi,
Sorry 4 the delay,
The bug was solved!!!, it was happening because you include the www dir witth no files inside... ejemmmm , and I have not contempled this....
Anyway... can you test.....
I send you your .fla because I modified a bit, for the events....
Sorry 4 not write in french as I speak a little... I live in Perpignan ( but I am spanish )...
See you...
http://www.megaupload.com/?d=VDMONUP2
Great! Good news it was a pretty dumb problem coming from Adobe ;o) Don't worry for your French, you speak perfectly english, spanish and actionscript!
I've been playing with the new swc. It works on iPad now! I have a new small problem. I'm using your classes to play with facebook login. I call the Authorization page from Facebook giving a URI to redirect when the user logs in. For some reason, during the redirect, the page couldn't be found. I get a message like this : NOT FOUND The requested URL /ilike/SWVData?eyJtZXRob2QisqdTRJsfdlksdfPOTISDFkfjdddsfsd... was not found on this server
Now, the ilike is the folder where my online file is hosted. Is it normal I don't get any http:// and the rest of my url?
I also get this has something to do with the serialization librairies but I'm not good at those!
Any idea?
Take care and thanks for the good work
How can I make the StageWebViewBridge? resize onOrientationChange event? I tried creating a new instance but didn't seem to respond.
Thanks
Hi,
In the listener of the onOrientationChange event... use the x,y properties of the StageWebViewBridge? to change the position...
Then use the .setSize( w, h ) method to change its dimensions..
Thanks
I tried that in my onOrientationChange event I have the following:
webView.x = 0; webView.y = 0; webView.setSize( stage.stageWidth, (stage.stageHeight - 40));
I understand the concept behind it, it just doesn't seem to be cooperating with me.
Thanks
Please, send me some code...
The way you are doing is correct, what is the problem?
I am working on my first flex project using flexbuilder 4.5. I copied your source files into the project source folder. I am getting compilation error in StageWebViewExternal?.as - JSON.stringify is not being recognized. Any suggestions on how to resolve this problem in my project.
Curious9,
The problem is that you are not using the AIR3.0 SDK, as JSON native support is new to 3.0 you need to upgrade your Flex SDK.
Please refer to:
http://forums.adobe.com/thread/899921
To see the instructions explaining how to overlay and use it with your FlexBuilder?.
Thanks
Hi There, Awesome project! I'm playing with this in CS5.5 and have it loading a local .html file with a html5 <video> tag, on the iPad. Can this system be used to control the native iPad video player? ie: have it stop when stage is set to null or destroyed? Currently video will continue playing with air2.6 or 3.0 overlay.
Perhaps there is a better way to play and control video?
Best, Dave
Hi,
Yes, you can use it to control the player, but... with some limitations that are not specific to my proyect...
You can't control audio volume, or make the video Autoplay...
The only workaround to autoplay videos is to load the video directly, without the html code:
stageInstance.loadURL('video.mp4');
Anyway, I dont have an video example to let you... but you can google to search it...
Thanks for the great tips! Very useful.
I think I'm very close a getting a super simple working setup with your cool project but have become stuck. I want to get to the point where my video loads on the iPad and I can call js on the html to control it. Mainly to stop it when I view.dispose() or set the view.stage property to = null. Here's a complete sample.zip http://bit.ly/rtHWXf of the current state of what I'm working with... I wonder if you can see what I've missed or help make this right? There are some notes on the 'as' layer with errors encountered, they may or may not be relevant. What do you think?
Note: using cs5.5 with air3.0 overlay.
Thanks in advance, Dave
I need to include lots of video files in my iOS app. Confused which folder to include in the "Included files" area www or wwwSource? Both? Thanks.
The download examples seem to work in both directions, only in the Flash IDE as air for iOS, but when packaged and loaded onto the iPad, the html does not load above the Flash. Any ideas? Working with ExampleBasic?.fla
Hi,
Always you should ONLY include the WWW directory ( the wwwSource directory is generated automatically by the framework )
The error you say is due the same problem, always use debugMode whe deploy ios/android apps on desktop. This way you can test on desktop without the www files been overwrited and the package the www as the main "localhost" directory. Framework does the rest of work... parsing.. etc
Also be sure to update the next commit I will upload. Fixes apps been rejected at 5.0 or 5.0.1 new apple directives....
Hi,
Thanks for the assistance, appreciated. I updated to the latest swc and have the same issue. It works in the Flash IDE but no html is displayed on the iPad. Here is the order of events when testing from Flash and when testing on the iPad.
When testing from Flash:
popup #1 file:///someFolder/someFolder/someFolder/_exp/WebStageViewBridge/@swvb_examples%20(1)%20copy/wwwSource:::file:///PROJECTS/someFolder/someFolder/_exp/WebStageViewBridge/@swvb_examples%20(1)%20copy/wwwSource:::file:///Users/silverlaptop/Documents:::html,htm,css,js
popup #2 data
HTML displays, buttons top and bottom work. Very cool!
When testing on iPad (only included the www folder) popup #1 debug popup (I hit cancel)
popup #2 file:///var/mobile……htm,css,js (long string as above) (tap ok)
html does not display. blank white screen on top
Flash button at bottom "Show Javascript Alert" does pop up a js alert
Do you know how I can make the HTML display on the iPad?
My goal is to call a function in Flash from the HTML when a video ends.
Thanks very much for your awesome framework.
Hi xperiment,
Thanks for working on you StageWebViewBridge?, it's a life saver! I'm on the brink of having my app function how I need it to but I'm having difficulty understanding the procedure of including the StageWebViewBridge?.js file in order to set up comms between my online web page and my app.
If I use the following code to load 'ExampleCallBackFuncions?.html' as a local file everything works correctly:
webView.loadLocalURL('applink:/ExampleCallBackFuncions?.html');
When I move the 'ExampleCallBackFuncions?.html' to an online server and try to load it using:
webView.loadURL("http://www.myserver.com/ExampleCallBackFuncions.html");
The html page appears but when I press the callAS3Function button I get the following error:
ReferenceError?: Can't find variable: StageWebViewBridge? callAs3Funciton at http://www.myserver.com/ExampleCallBackFuncions.html : 14 onclick at http://www.myserver.com/ExampleCallBackFuncions.html : 27
I'm assuming this has something to do with the need to include the StageWebViewBridge?.js somewhere but I don't understand where/how this should be included. Could you possibly post an example of this please.
Many thanks,
Mark
Hi, Crooksy88
You must simple include the StageWebViewBridge?.js in your online server and the include it in the page you are calling... as for online pages it need to be present.
For app html files this .js is injected by the library but 4 online files you must include it.
Thanks Pedro,
I've amended ExampleCallBackFuncions?.html to the following and uploaded the StageWebViewBridge?.js to the web server:
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>example</title>
<script type="text/javascript" src="StageWebViewBridge.js"></script>
</head> <body bgcolor="#CCCCCC"> Example - CallBack? Functions<br/><br> <button onclick="callAs3Funciton()">callAs3Funciton</button> </body> </html>When I press the callAS3Function button I now get the following output
serializeObject =>onDomReady serializeObject =>getFilePaths serializeObject =>onDeviceReady serializeObject =>fnCalledFromJS TypeError?: Error #1009: Cannot access a property or method of a null object reference.
We can assume the Actionscript is correct as the same html file works if I use loadLocalURL.
Would you know why I might be getting this error?
Thanks,
Mark
Can I load an local swf file in a html using stagewebviewbridge?
When I use view.snapShotVisible = true; My StageWebViewBridge? area is filled in with solid red. I can control the alpha of the red box, but it does not show the htm page it has loaded. The htm is in there correctly, I can see it perfectly when I set view.snapShotVisible = false;
Any help?
Is there a way to read the HTML response from a loadUrl? e.g. wait for the Event.COMPLETE and then read the response as a string?
Thanks!
Just updated to air 3 and updated stagewebviewbridge. In the ExampleBasic?.fla, when I set...
I get a black box where the snapshot should be. Any thoughts? This was happening with air 2.7, except it was a red box (see my comment above).
Hi,
Are you doing the getSnapShot process waiting 4 the event?
view.addEventListener( StageWebViewBridgeEvent?.ON_GET_SNAPSHOT, onGetSnapShot ); view.getSnapShot();
function onGetSnapShot( e:StageWebViewBridgeEvent? ):void {
}this is the way it works... you must wait the event before do something with the "bitmap".
Say me if is this the problem...
In a flash builder project, where would the ww folder reside? Next to the 'src' folder? Can anyone provide a quick Flashbuilder sample - I've been trying to figure out how to use the StageWebView? thing but i haven't really succeeded! thanks!
In other words, where is the 'File.applicationDirectory' while debugging in Flash Builder? where do i put my local .html file that i want to load using getLocalUrl();?
hi, I want to track function inside the html page object, Like "HTMLLoader.window.object.function = myfunction". is that possible with this?