• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
TSB Alfresco Cobrand White tagline

Technology Services Group

  • Home
  • Products
    • Alfresco Enterprise Viewer
    • OpenContent Search
    • OpenContent Case
    • OpenContent Forms
    • OpenMigrate
    • OpenContent Web Services
    • OpenCapture
    • OpenOverlay
  • Solutions
    • Alfresco Content Accelerator for Claims Management
      • Claims Demo Series
    • Alfresco Content Accelerator for Policy & Procedure Management
      • Compliance Demo Series
    • OpenContent Accounts Payable
    • OpenContent Contract Management
    • OpenContent Batch Records
    • OpenContent Government
    • OpenContent Corporate Forms
    • OpenContent Construction Management
    • OpenContent Digital Archive
    • OpenContent Human Resources
    • OpenContent Patient Records
  • Platforms
    • Alfresco Consulting
      • Alfresco Case Study – Canadian Museum of Human Rights
      • Alfresco Case Study – New York Philharmonic
      • Alfresco Case Study – New York Property Insurance Underwriting Association
      • Alfresco Case Study – American Society for Clinical Pathology
      • Alfresco Case Study – American Association of Insurance Services
      • Alfresco Case Study – United Cerebral Palsy
    • HBase
    • DynamoDB
    • OpenText & Documentum Consulting
      • Upgrades – A Well Documented Approach
      • Life Science Solutions
        • Life Sciences Project Sampling
    • Veeva Consulting
    • Ephesoft
    • Workshare
  • Case Studies
    • White Papers
    • 11 Billion Document Migration
    • Learning Zone
    • Digital Asset Collection – Canadian Museum of Human Rights
    • Digital Archive and Retrieval – ASCP
    • Digital Archives – New York Philharmonic
    • Insurance Claim Processing – New York Property Insurance
    • Policy Forms Management with Machine Learning – AAIS
    • Liferay and Alfresco Portal – United Cerebral Palsy of Greater Chicago
  • About
    • Contact Us
  • Blog

Working with Adobe Flex and iframes

As part of the upcoming Active Wizard 4.0 release, and as a result of a client's requirement, we recently added a new input type: WYSIWYG. The WYSIWYG input type allows users to style and format text just like in a word processing application.

You are here: Home / Adobe / Working with Adobe Flex and iframes

November 16, 2009

As part of the upcoming Active Wizard 4.0 release, and as a result of a client’s requirement, we recently added a new input type: WYSIWYG. The WYSIWYG input type allows users to style and format text just like in a word processing application. After evaluating some of the popular HTML/JavaScript based editors we finally decided on FCKEditor (now CKEditor.) Another new feature of Active Wizard 4.0 is an Adobe Flex based Active Form component. Integrating these two new features proved to be quite the challenge.

At the end of the day, Flex is Flash; an HTML or JSP page will have a swf file embedded in it and the Flash Player plug-in will be used to render it. Until now, most of our Flex and Flash projects have consisted of either small components within a page, or the entire page itself. In both cases the default “wmode” parameter value has always been used: “window.” Integrating the WYSIWYG control within our Flex component required using a different wmode value: opaque.

In order to integrate the WYSIWYG control into our Flex component we had to use iframes and this is what necessitated the use of the opaque wmode value. A quick Google search for “Flex iframes” turns up quite an interesting selection. One of the top hits is a project on Google Code called flex-iframe. We actually wound up using this component as it’s quite robust and works well. However, the first hit is an article titled “Don’t Use IFrames for HTML in Flex” and lists reasons why using iframes and Flex/Flash is a bad idea. One of the reasons is specifically because it requires the use of the opaque wmode value and lists the following three reasons:

  1. Speed: There is no big surprise here, but when you force Flash to composite the HTML layers above and below, you are adding additional processor load.
  2. Accessibility: wmode makes your movie invisible to screen readers
  3. Inconsistent Performance

At various points during development, issues 1 and 3 came up and were quite problematic. Regarding the speed issue, we noticed that the more complicated content an iframe contained the slower the performance was. Surely this could be expected to some degree, however, given that we were embedding complex JavaScript based WYSIWYG controls, our iframe content sometimes became all but unusable. Inconsistent performance also left us scratching our heads: two separate views that shared quite a bit of code wound up performing differently when their content was scrolled, but only in Internet Explorer. Fortunately, Adobe’s JIRA system already had that bug logged. Unfortunately the bug was still listed as open with no plans from Adobe to be fixed anytime soon.

So what did we end up doing? Several things:

  • To address the performance issue we wound up not embedding FCK in our form multiple times. Instead we embedded a simple html page that we updated when the user changed content. The WYSIWYG only appears when the user clicks in the html area, via a modal popup.
  • The scrolling issue fix was easy to implement, however, thinking of it took a bit of time. We initially tried some of the suggested fixes posted on the JIRA page, but they didn’t seem to work us. Since the issue only affected the UI while the user was scrolling the page, we decided to simply disable “live scrolling.” That is, the user can move the scrollbar normally but the rest of the UI won’t update until the user lets go of the scrollbar.

Flex  iFrames

In the end we wound up with a rather elegant solution that’s transparent to the end-user; they don’t know that they’re using a combination of Flash, HTML and JavaScript, it just works. While we hope Adobe eventually addresses the issue with wmode we would rather they create a better rich text editor (RTE.) We only went with the HTML/JavaScript RTE because the built-in Flex RTE wasn’t robust enough for our requirements. Had it been able to support superscript and subscript, copying and pasting from MS Word and the ability to output XHTML we would have gladly used it. While there are hacks to achieve some of those requirements, copy and pasting from MS Word doesn’t appear to be possible at this time. Hopefully Adobe will either enhance the built in RTE or offer official support for integrating HTML/JavaScript (via iframes or something else.) In the meantime all we can do is come up with creative solutions that work as best as possible given these limitations.

Filed Under: Adobe, Flex, OpenContent Forms, Product Suite, Tech Tip

Reader Interactions

Trackbacks

  1. Documentum – What’s Next Updated for 2010 « TSG Blog says:
    February 23, 2010 at 3:22 pm

    […] “what’s next” items include of Adobe Flex to create a better user interface, form and workflow enhancements, browser based annotation […]

    Reply
  2. TSG Blog – 18 months and counting « TSG Blog says:
    September 13, 2010 at 6:17 am

    […] Working with Adobe Flex and iframes – Based on volume, this was our most popular pos and speaks to the skill requirements of high-end Flex development […]

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search

Related Posts

  • Flex Applications and Security Constraints
  • Active Wizard Flex Interface – Upcoming Enhancements
  • Creating Active Wizard Forms Outside Documentum – AWLite
  • Adobe Livecycle and ActiveWizard Comparison
  • Documentum Transformation Services (DTS) – Alternative Approaches with Adobe LiveCycle and OpenOffice
  • Documentum – What’s Next Updated for 2010
  • Documentum Open Source Software
  • Upgrading your Webtop 5.3 Application NOW to simplify your 6.5 upgrade later
  • Documentum Versioning – Differences Between 5.3 and D6.x
  • Alfresco – Do More with OpenAnnotate

Recent Posts

  • Alfresco Content Accelerator and Alfresco Enterprise Viewer – Improving User Collaboration Efficiency
  • Alfresco Content Accelerator – Document Notification Distribution Lists
  • Alfresco Webinar – Productivity Anywhere: How modern claim and policy document processing can help the new work-from-home normal succeed
  • Alfresco – Viewing Annotations on Versions
  • Alfresco Content Accelerator – Collaboration Enhancements
stacks-of-paper

11 BILLION DOCUMENT
BENCHMARK
OVERVIEW

Learn how TSG was able to leverage DynamoDB, S3, ElasticSearch & AWS to successfully migrate 11 Billion documents.

Download White Paper

Footer

Search

Contact

22 West Washington St
5th Floor
Chicago, IL 60602

inquiry@tsgrp.com

312.372.7777

Copyright © 2023 · Technology Services Group, Inc. · Log in

This website uses cookies to improve your experience. Please accept this site's cookies, but you can opt-out if you wish. Privacy Policy ACCEPT | Cookie settings
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT