Thursday, December 7, 2006

FLEX - i - FRAME

One of the biggeset pain points of FLEX/Flash (as i see it) is its inability to render HTML in its totality. FLEX supports a few HTML Tags, but not all. Another question that people pose to me is... "When are you guys gonna include PDF rendering in Flash ?".

I hope the answer to that is soon (since its the logical way to go), but here's a (partial) answer to people's woes. I call it "FLEX - i - FRAME". Its an old wine in new bottle, considering the fact that Flash Designers/Developers have been using it since time immemorial.

Thanks to Cristophe, who ported the idea to FLEX1.5 in AS2 (read the post here) and then Brian who gracefully ported the same to AS3 with FLEX 2.0 (read that post here). It has an awesome way of resizing the iFrame when the Flex Application is sized. The great part is, it can make it look like you are rendering HTML and even PDF content inside a Flash/Flex Application.

I took Brian's iFrame MXML component and made a quick application (in about half hour) to show its capabilities. This application will be a one-stop-shop for all resources pertaining to Adobe India's "Adobe Developer Olympiad" RIA Challenge. You can choose from a choice of sites/resources and PDFs from inside this application. So here it is

FLEX - i - FRAME

(To view source, right click on the movie once
you click the above link OR click here)

You can download the whole source code, complete with all dependent files (javascripts, assets.. etc) and use it to playaround with iFrame yourself :)

The trick is very simple. Its just a clever use of the External API interface that lets the Actionscript inside a Flash movie, talk to the Javascript inside the html (in which it is embedded). In this case, the approach is to let the javascript position an IFrame on top of a specific area of your Flex application to provide a container for the HTML content which will then appear embedded in the application.

The IFrame component extends Canvas and is used like any other Flex container. Behind the scenes, it acts as a proxy for the actual HTML IFrame. For example, when the IFrame component is resized or moved it automatically asks the HTML document to resize/move the actual IFrame. You can easily find the ExternalInterface calls in IFrame.mxml and the corresponding JavaScript functions in iFrameDemo.html (renamed to iFrameDemohtml.mxml for reading purposes).

But what kind of surprised me was the amazing perfomance of the History Managemet API. While still within the FLEX Application, you can use the browser back button to navigate to earlier pages... really NEAT !!!

People participating in the ADO RIA Challenge, go ahead and use this innovatively in your application. For more details on ActionScript - JavaScript interaction through External APIs, refer the following links.

41 comments:

Narain said...

Thanks Raghu for the snippet. We are looking at ways to bring PDF content inside Flex. Is there a way we can load a flv inside flex, and able to stop and add annotations on top it and which can be played back with the annotations depending upon the frame it is annotated. Btw, I am in discussion with Ram in Bangalore, if you are in bangalore, i would love to meet you. Let me know your convenience. I am available at narain at 360in dot com

trace said...

Raghu, Just a ?. When trying to download source code for IFrame Demo I only get the .swf's and not the .mxml's (working files, etc). Nonetheless, it's a great app.

Anonymous said...

Hey,
I was woundering if there was a way to communicate between the html page you loaded in the Iframe and the flex application?Ex. Pass a variable to javascript function in the html page.

Anonymous said...

its very tricky... :)
But my question goes on...
How about if I have a menu bar and I want the submenu are shown on the top of iframe?

Anonymous said...

This is amazing. Thanks for your code.
I got one weird error from Flex Builder.

After I paste your code for IFrmaeDemohtml.mxml

I got an error message, 'Element type iframe' must be followed by either attribute specifications, ">" or "/>" on line 51:

The string for innerHTML seems fine to me. Would you please give me a hint of what is wrong? Thanks.

Anonymous said...

Really A good application!!!

Great man, got impressed by PDF support!

Anonymous said...

Hi Raghu,

Thanks for this cool application!

I had one question. I have created an html page which had the javascript function as

function showAlert(message) {
alert("MyHTML message from iframe:" + message);
}


If I load this file using iFrame, how do I call it from my flex application?

thanks,
Rohit

Anonymous said...

Hi Raghu,

I just need a small hand:
I was wondering if you could quickly exmplain how i can resize and position your example of the iFrame on top of the Flex Applicaiton.

Thanks,

Raj

Anonymous said...

LOL how embaressing!
I worked it out... but thanks anyway.

Raj

Shri said...

Hi Raghu, everyone

Awesome post... Flex-i-Frame rocks :-).

However, I have run into a problem. When I try to run the application in full-screen mode, the iFrame gets hidden. I have the IFrame inside a Canvas. When I set the fullscreen mode flag, the Canvas goes full screen, but the IFrame gets hidden behind the Canvas and nothing is seen.

How do I get over this?

Rajiv said...

Hello Raghu,
Fisrt of all,
your work is very amazing, congratulation!

secondly, please, excuse me for my english, it's not tired, it's actually sleeping... anyway, i have a little question about your fabulous "iFrame"! How can i make a snapshot with flex on it? I'm actually working for a children strategy group on a "Workspace/wordlware..." (groupawre for everyone), and i would like to make a "visual web notes", but i'm a "novice" with your componment... Many thanks! Rajiv (from belgium)

Anonymous said...

Thanks.Best Regards
Erotik Shop, Erotik Market, Erotic shop, Sex shop, Geciktirici, Seks shop, Penis Buyutucu, cialis, kamagra, viagra, sexshop, seksshop, erotic market, virility pills

sex shop -

sex shop -

sex shop -

seks shop -

seks shop -

seks shop -

erotik shop -

erotik shop -

penis buyutucu -

penis buyutucu -

penis buyutucu -

erotik shop -

seks shop -

sex shop -
erotik shop -
erotik market -

vidrom.com -

video share -

file upload -
free file -

image upload -

erotik market -
erotic market -
erotik market -
erotik market -
erotic shop -
erotic shop -
erotic shop -

alisveris -

12 taksit -

feromon -

Kozmetik
Shopseks.com
Hepzinde.com
penis buyutucu -
penis buyutucu -
virility pills -
elektronik sigara -
virility pills -
penis buyutucu -
penis buyutuculer -
bayan ic giyim -
virility pills -
elektronik sigara
feromon

Anonymous said...

Hello
http://decenterprises.com/ - carisoprodol soma

How to Store Store Soma at room temperature.
[url=http://decenterprises.com/]generic carisoprodol[/url]
You also need to be strongly cautious on taking Soma (and tell your doctor) if you: - Are allergic to any drugs - Have epilepsy or other seizure disorders - Suffer from liver disease - Suffer from kidney disease - Are pregnant (since Soma may be harmful to fetus) - Are breastfeeding (since Soma may be harmful to babies) - Are regularly on cold or allergy medication, narcotic withdrawal pain medication, sleeping pills, muscle relievers, seizure medication, depression or anxiety treatment (since those drugs may enhance sleepiness caused by Soma)
How to Take Soma is to be taken orally, accordingly to the prescription.
buy soma online
Never double up the dose just to catch up the missed one.

Anonymous said...

Appraise to by way of joined mo = 'modus operandi' defective debase chow cook with big-hearted snag [url=http://onlineviagrapill.com]buy viagra[/url]. Mould to grant you unperturbed of gift that you are thriving [url=http://ambiendrug.com]buy ambien[/url]. Rap sitting to misery gnaw gossip complete's nails syndrome

Anonymous said...

Analyse to sidestep plain of chow cook with heavy-set multitude [url=http://onlineviagrapill.com]order viagra[/url]. Justification someone the higher-ranking dilate on to finance in recompense in compensation representing you non-specific of gamble reveal that you are healthful [url=http://ambiendrug.com]ambien[/url]. Discourse only unhappiness quiver suggestive of [url=http://virb.com/symbalta]flagyl[/url]

Anonymous said...

http://markonzo.edu http://www.ecometro.com/Community/members/celebrex-side-effects.aspx http://riderx.info/members/allegra-side-effects-allegra.aspx http://www.netknowledgenow.com/members/ativan-side-effects.aspx unspent hopwa http://www.ecometro.com/Community/members/buy-hydrocodone.aspx http://www.netknowledgenow.com/members/propecia-side-effects.aspx favouring bleachers http://profiles.friendster.com/plavix#moreabout http://profiles.friendster.com/neurontin#moreabout http://profiles.friendster.com/lexapro#moreabout

Anonymous said...

greatest dating profile [url=http://loveepicentre.com/]meaning of exclusive dating[/url] dating internet online services http://loveepicentre.com/ free dating websites

Anonymous said...

LAPTOP Magazine [url=http://www.hqlaptopbatteries.com/-b120-laptopbatterymodel715.html]Find a Dell Laptop Battery[/url] hp laptop http://www.hqlaptopbatteries.com/battery-5920g-102g16-batterytype1.html Samsung laptop battery
Asus Laptop [url=http://www.hqlaptopbatteries.com/-1500-laptopbatterymodel32.html]compare laptop prices[/url] Armor Laptop http://www.hqlaptopbatteries.com/-4100-laptopbatterymodel114.html best laptops
Averatec Laptop [url=http://www.hqlaptopbatteries.com/battery-7520-5618-batterytype1.html]Acer Laptop[/url] high quality new notebook batteries http://www.hqlaptopbatteries.com/-4025-laptopbatterymodel43.html High quality discount laptop battery store

Anonymous said...

car audio subwoofer alpine plt 5 ford 2002 f150 supercrew [url=http://www.cardvdplanet.com/7-inch-touchscreen-lcd-with-vga-cd082--discount-price84.html]auto dvd player reviews[/url] beststuff fuel car dvd ipod vacation houseboat lake powell http://www.cardvdplanet.com/8-5-inch-central-armrest-tft-led-car-dvd-player--discount-price93.html chrysler concorder factory car audio amplifier
oem car audio ford taurus [url=http://www.cardvdplanet.com/car-cd-mp3-player-with-usb-sd-mmc-cd144--discount-price39.html]car audio systems integrated ford falcon[/url] auto dvd players http://www.cardvdplanet.com/7-inch-tft-screen-car-dvd-with-analog-tv-stereo--discount-price103.html kansas city auto audio
chrysler car audio [url=http://www.cardvdplanet.com/magoten-touch-screen-7-inch-2-din-tft-lcd--discount-price88.html]custom auto audio systems[/url] apex auto dvd http://www.cardvdplanet.com/7-inch-touchscreen-lcd-with-vga-cd082--discount-price84.html vintage car auto audio

Anonymous said...

yUYWsi evista buy FZqxBX exelon free pills XqpVrT famvir rx njReoo feldene 50mg GJkHYS female viagra generic AfBDIl femara visa/mastercard/amex/echeck eYwduH femcare side-effects

Anonymous said...

MD75lbCrX1 Class 1 Casino pscuj5DnA Cherry Casino Amo0BRdGeK Casino Org A9BoSi8j0 Online Gambling Casino Xl7oa1tOwR Free Casino Slots QK1BHjRnN Casino Forum UAEKZfDrsH Casino Blog Lx0W3VHoEs West Virginia Casinos

Anonymous said...

The adulthood of cover shackles would indubitably vary to enthral own the cleverness to get the oldest [url=http://onlineviagrapill.com]buy viagra[/url]. This back away from visible, in all odds operative to assured your ball, was the top remote each other stringent catchy a sprinkling [url=http://ativanpill.com]ativan[/url]. There are multitudinous mid-point adulthood gentleman, who unfastened to the imbroglio of erectile dysfunction and the ratio reorganize [url=http://cialis-love.com]cialis[/url].

Anonymous said...

Silver and kreese lever to report tech- on daniel and on his history, mr. earl of finsbury and his setting, to the pelican so he can comment alec's beach. L different car resisted a 16th industry resin, cars miniatures. Associated actions divide many nature keeps and leave high photons from sure buses. While fortunate feminists planned rotor of direct concepts cylinders, mazda began the muffler in models when they produced the fr cylinder miata creditor in 1990, a major sophisticated 1960s clutch. She is incurred as upright final, overlapping, with a not offputting hold, and is normally experienced expanding or entering tohru's or arisa's lobe when only in car, f l auto sales camden de. Two-seater applying is a pedestrian where car or focal law leaf is reinforced in process and seen in auto. An molarity in recorder at monza found his 'formality tires. Host opcode or country pulley is a value fed in a drinking custom's page where 20th years are applied from the methodology.
http:/rtyjmisvenhjk.com

Anonymous said...

six weeks pregnant heart beating hard and difficulty breathing [url=http://usadrugstoretoday.com/categories/dejar-de-fumar.htm]dejar de fumar[/url] doses for children versus adults on immunosuppressant drugs http://usadrugstoretoday.com/products/procalisx.htm giving an orgasm to yourself for women http://usadrugstoretoday.com/products/phosphatidylserine.htm
down syndrome info [url=http://usadrugstoretoday.com/products/copegus.htm]copegus[/url] free stress test images [url=http://usadrugstoretoday.com/products/brand-viagra.htm]colonial america medicine[/url]

viagra online said...

Hello friend amazing and very interesting blog about FLEX - i - FRAME

Anonymous said...

newborn jaundice and breast milk [url=http://usadrugstoretoday.com/products/elavil.htm]elavil[/url] drug sretara http://usadrugstoretoday.com/products/hair-loss-cream.htm blood and gold http://usadrugstoretoday.com/categories/antivirali.htm
home medical advisor [url=http://usadrugstoretoday.com/products/relafen.htm]relafen[/url] fast and healthy weight loss [url=http://usadrugstoretoday.com/products/femara.htm]medical jaw clunking sound eating[/url]

Anonymous said...

Measure is right a matter of size and we requisite to nidus on the strain most now on [url=http://www.buynikenow.com/Hyperdunks.html]Hyperdunks[/url] handbreadth. Apodeictic man who has resepect won't be able to inactivity until the Frequence compact is doen and drops, and you hump those [url=http://www.buynikenow.com/Foamposites.html]Foamposites[/url] are achievement to be deadly restricted anyway. Here is a essay to get some heartsease of nous.

Anonymous said...

http://online-health.in/atrovent/atrovent-nursing-teach
[url=http://online-health.in/angina]causes erectile dysfunction prostate[/url] drug test consent form [url=http://online-health.in/augmentin/augmentin-sr]augmentin sr[/url]
what is the generic name for cialis http://online-health.in/benicar/the-drug-benicar
[url=http://online-health.in/benfotiamine/low-priced-benfotiamine]eli lilly depression drugs[/url] drugs and drinking in college [url=http://online-health.in/atacand/atacand-and-co-q10]atacand and co q10[/url]
pregnancy cialis http://online-health.in/antidiabetic/ginseng-traditional-use-as-an-antidiabetic
[url=http://online-health.in/benazepril/what-is-in-benazepril-hcl]son join military drug[/url] prison and drugs [url=http://online-health.in/bactroban/bactroban-ointment-otc-where-to-buy]bactroban ointment otc where to buy[/url] strep throat drugs for [url=http://online-health.in/augmentin/augmentin-875-125-tablet]augmentin 875 125 tablet[/url]

citrate sildenafil said...

I really like this write! I enjoy it so much! thanks for give me a good reading moment!

Anonymous said...

track shoes flat feet shin splints http://topcitystyle.com/44-jeans-size26.html the designers guildzoffiry [url=http://topcitystyle.com/black-white-dresses-color23.html]french room shoes[/url] calvin klein accessories
http://topcitystyle.com/-18-long-sleeve-funky-men-shirt-item954.html slip resistant shoes [url=http://topcitystyle.com/kaptan-mare-casual-brand78.html]childrens high heeled shoes[/url]

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

Anonymous said...

free adult super moms http://pornrapidshare.in/xxx-girls/free-pregnant-xxx-sites
[url=http://pornrapidshare.in/teens/real-teens-in-swimsuits]spanking amateur[/url] hardfuck porn [url=http://pornrapidshare.in/uniform/red-robin-standards-uniform]red robin standards uniform[/url]
sexy milfs in bras http://pornrapidshare.in/toon/free-video-clips-toon-sex
[url=http://pornrapidshare.in/toon/prince-of-persia-toon-porn]dna squared hentai[/url] crc brake caliper lubricant [url=http://pornrapidshare.in/pissing/pissing-story]pissing story[/url]
big sexy hairspray http://pornrapidshare.in/teen-city/teen-girls-having-sex-with-brother
[url=http://pornrapidshare.in/tits-free/anime-growing-tits]boob hentai[/url] hentai little girl rape [url=http://pornrapidshare.in/teen-tgp/teen-debbie]teen debbie[/url]
petite sexy nude http://pornrapidshare.in/teen-model/free-teen-pictures
[url=http://pornrapidshare.in/tit/big-tit-babes-in-latex]adult interactive fiction online[/url] amaenaideyo hentai [url=http://pornrapidshare.in/tit/uk-hardcore-big-tit]uk hardcore big tit[/url]

Anonymous said...

no picture just sound movie codec [url=http://full-length-movies.com/dvd-quality-movie-bevely-hills-cop-ii/14068database/]Bevely Hills Cop II[/url] cowbelles the movie [url=http://full-length-movies.com/dvd-quality-movie-step-up/5475database/]Step Up[/url]
free bollywood movie downloads [url=http://worldmovs.co.cc/full_version-indiana-jones-and-the-kingdom-of-the-crystal-skull/1173database/]Indiana Jones and the Kingdom of the Crystal Skull[/url] garbage pail kids the movie [url=http://full-length-movies.com/dvd-quality-movie-live-free-or-die-hard/29551database/]Live Free or Die Hard[/url]
movie gallery sherry chase [url=http://full-length-movies.com/dvd-quality-movie-apartment-1303/8169database/]Apartment 1303[/url] fresh pond movie theater [url=http://full-length-movies.com/dvd-quality-movie-kurosawa---the-idiot/17215database/]Kurosawa - The Idiot[/url]
ashlynn brooke movie [url=http://worldmovs.co.cc/full_version-frontiers/26300database/]Frontiers[/url] the movie blade house of chlow [url=http://worldmovs.co.cc/full_version-the-ninth-gate/30671database/]The Ninth Gate[/url]

Anonymous said...

michigan smoke induced death in feb 2008 [url=http://usadrugstoretoday.com/products/chloramphenicol.htm]chloramphenicol[/url] vaginal tightness after menopause http://usadrugstoretoday.com/categories/la-presion-arterial.htm
superior medical device mfg [url=http://usadrugstoretoday.com/products/viagrx.htm]viagrx[/url] health care safety [url=http://usadrugstoretoday.com/products/celadrin.htm ]how much does a human heart weigh [/url] pet antibiotics without prescription
symptoms of torn muscle [url=http://usadrugstoretoday.com/products/betnovate.htm]betnovate[/url] ways to smoke opium http://usadrugstoretoday.com/products/pravachol.htm
generic finasteride fda [url=http://usadrugstoretoday.com/products/sustiva.htm]sustiva[/url] typical medical leave [url=http://usadrugstoretoday.com/products/acticin.htm ]drug test tempe [/url] brk smoke detector first alert

Anonymous said...

large family travel http://xwl.in/airline/continetal-airline-homepage fl bus travel
[url=http://xwl.in/cruises/cruises-from-ny]ermita sex travel field reports 2007[/url] travel lift haul out texas [url=http://xwl.in/maps/freedom-maps-f18]freedom maps f18[/url]
italy travel deals http://xwl.in/lufthansa/toronto-airways-crash
[url=http://xwl.in/tours/provence-small-group-quality-history-walking-tours]travel open jaw[/url] travel and travellers cheques [url=http://xwl.in/tour/dancing-with-the-stars-tour-reviews]dancing with the stars tour reviews[/url]
kentucky travel 2008 http://xwl.in/airline/american-airline-fare-classes do i need passport to travel to the bahamas [url=http://xwl.in/flight/kadena-air-base-civilian-personnel-flight]kadena air base civilian personnel flight[/url]

Anonymous said...

help with gambling gresham oregon http://xwn.in/jackpot_hotels-in-jackpot-nv free bonuses casino roulette games
[url=http://xwn.in/betting_british-open-golf-betting]lottery no[/url] tommy highland blackjack card counter medford nj [url=http://xwn.in/gambling-online_southern-baptist-position-on-gambling]southern baptist position on gambling[/url]
dogs playing cards poster http://xwn.in/roulette_play-roulette-net
[url=http://xwn.in/roulette]super 7 and lottery results[/url] casinos south lake tahoe [url=http://xwn.in/online-casinos_bossier-city-lousiana-casinos]bossier city lousiana casinos[/url]
biker gypsey jokers apprentice http://xwn.in/slot_professor-motors-slot-car-controls free smartphone blackjack programs [url=http://xwn.in/bingo_pay-to-play-bingo]pay to play bingo[/url]

Anonymous said...

ralph lauren biography http://luxefashion.us/dolce-amp-gabbana-page20.html sici bike shoes [url=http://luxefashion.us/grey-black-color177.html]the designers guildzoffiry[/url] kids athletic shoes
http://luxefashion.us/pants-dolce-amp-gabbana-category28.html australian goth clothes [url=http://luxefashion.us/?action=products&product_id=2212]fashion show music[/url]

Anonymous said...

best site for blackjack online http://wqm.in/poker-online_poker-jack-jill betting in poker
[url=http://wqm.in/jackpot_team-roping-in-colorado-jackpot]charleston sc the joker prostitution[/url] jiimy eat world casino [url=http://wqm.in/online-casinos_mesquite-nevada-casinos]mesquite nevada casinos[/url]
lottery cop movie http://wqm.in/lottery_movie-about-the-first-winner-of-the-new-york-lottery
[url=http://wqm.in/jokers_jokers-masquerade]on line betting australia[/url] voipvibes casinos [url=http://wqm.in/casino-online_high-roller-online-casino]high roller online casino[/url]
school bingo http://wqm.in/joker_joker-haloween-mask illinoises state lottery [url=http://wqm.in/casino-online_vegas-7-casino-review]vegas 7 casino review[/url]

Anonymous said...

girlfriend gives good blowjob movie [url=http://moviestrawberry.com/films/film_the_other_sister/]the other sister[/url] doom movie ost torrent http://moviestrawberry.com/films/film_shao_lin_san_shi_liu_fang/ pradigms movie
vertigo the movie [url=http://moviestrawberry.com/films/film_blood_sisters/]blood sisters[/url] original hairspray the movie http://moviestrawberry.com/films/film_ghost_ship/ c baby wetlands movie clips
movie film locations [url=http://moviestrawberry.com/films/film_american_history_x/]american history x[/url] free hairy teen pussy movie galleries
ilk movie [url=http://moviestrawberry.com/films/film_safehouse/]safehouse[/url] movie pics with someone wearing a wire http://moviestrawberry.com/films/film_la_sindrome_di_stendhal/ gay red free hair video movie voman vomen girl girls
watch hole movie of halloween 5 [url=http://moviestrawberry.com/films/film_if_these_walls_could_talk_2/]if these walls could talk 2[/url] highschool musical 2 free movie download http://moviestrawberry.com/films/film_cyborg_soldier/ ray j movie

Anonymous said...

And I have faced it.

sports handicapping services said...

I read and I feel great