Html component for Flex??

I know there is one for AIR, but is there something similar
for a Flex web app? I'm writing a front end to an application that
records classes (has a recording, the screen capture, bookmarks for
the lecture, etc) and while I thought I could link and play the swf
directly, I need to access the html page that wraps the recordings
and data. I have a canvas area in my app that I want to put the
video, but i'm not sure how to call the html page, which will then
call the group of swf files.
Any ideas?

See if this is useful:
http://drumbeatinsight.com/htmlcomponent

Similar Messages

How to use FC to make a sub-component for Flex

Most of the examples and tutorials I've seen so far assume you are creating the app itself in FC.
However, what I need to do is create a custom component that will be a "screen" in a large Flex app, like a page in a Wizard.
So if I was doing this without FC, I'd make a new mxml component in Flex, e.g. "WizardStep.mxml" and then in the main app,
<mx:ViewStack>
<h:WizardStep id="one" label="Step One" />
<h:WizardStep id="two" label="Step Two" />
</mx:ViewStack>
For example, assuming I have set up the namespace "h" to like "com.handycam.*"
How would I accomplish this scenario if "WizardStep" is what I have been building in FC?

Thanks for your answer!
Unfortunately it still doesn't work.
In FC I used the file menu item "publish as swf" ( or however it's called in English -
I'm also struggling with the -unwanted- German workspace terms). This generated
the deploy-to-web and run-local folders. In Flex3, I imported haupt.swf (=main.swf)
from the run-local folder.
When I use the imported file in the Image tag with the
loadForCompatibily attribute set to "true",the application compiles,
opens the IE, the remaining LinkBar buttons are not affected - they
show/run the Flash Pro .swfs and their controls,
but the attempt to access the .swf in question produces:
VerifyError: Error #1053: Illegal override of z in mx.core.UIComponent.
at flash.display::MovieClip/nextFrame()
at mx.managers::SystemManager/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\fra mework\src\mx\managers\SystemManager.as:319]
at mx.managers::SystemManager/preloader_initProgressHandler()[C:\autobuild\3.2.0\frameworks\ projects\framework\src\mx\managers\SystemManager.as:2945]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\ src\mx\preloaders\Preloader.as:398]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
The alternative approach:
<mx:SWFLoader x="3" y="35" width="970" height="425" loadForCompatibility="true" source="insets/haupt.swf"/>
produces:
VerifyError: Error #1014: Class flash.text.engine::TextLine could not be found.
at global$init()
If I code the SWFLoader tag as:
<mx:SWFLoader x="3" y="35" width="970" height="425" loadForCompatibility="true" source="
@Embed(source='insets/Haupt.swf')"/>
I get the same errors as I did for the Image tag approach.
Hope this helps.

Native HTML component?

Is there a free HTML component for Flex 4 floating around on the internet? I'm asking because I've read somewhere that using iframes in a Flex app affects the app's speed and isn't very efficient.

I know about the AIR counterpart which I believe implements the WebKit framework. However, unfortunately, I'm making a web application.

Use Alchemy to create a Flex HTML Component ?

Hi,
would it be possible to create a HTML rendering component for Flex using Alchemy ?

Please show your support for this needed component by voting on this issue:
http://bugs.adobe.com/jira/browse/SDK-13740
Deeanna
Lead Flex Developer
http://www.pups-seeking-homes.com

Overlapping with html component

Hi,
Html component overlaps dropdown menu bar i.e when pdf is opened with in html componenet
I have a problem with html component in flex...
I have 12 drop down menus on top of the page...
On click of item in dropdown the corressponding file opens in html component....
There is no problem if its html file file....
But if pdf opens in html component the dropdown menu goes behind the pdf file....
i.e pdf file in html component overlaps drop down menus...
Pls let me know how we can overcum this.....
Thanks & Regards

I never did find a solution for this. The Reader just doesn't support it. What I ended up doing back then was to use ColdFusion's CFPDF tag to automatically convert each page in the PDF to an png, then do the touch gestures on the pngs.
Don Kerr

Component for iPhone-like spinner/slot machine list, like picker view ?

Does anyone know of a component or tutorial for implementing a slot machine-like list similar to the interface component on the iPhone (example at http://www.iphonesdkarticles.com/2009/01/uipickerview-creating-simple-picker.html)? I did find one commercial component for flex at http://strawberrypixel.com/blog/flexwheel-component-page/, but am not sure how open this would be for modification (looks like it's a compiled SWC file in the example).
Any ideas?

I'm not sure I understand your response. Are you talking about customizing the component referenced in my email? I don't have access to the source code for that, so was looking for a tutorial or source code for a component with this functionality--specifically, creating a control with the same slot machine-style functionality as the iPhone picker. This looks like it would involve customizing the list component to respond to click and swipe mouse inputs, and using some physics (an easing algorithm) to make the wheel "spin" and come to a stop.
As for using the component referenced here, I've tried using this in my flash project, but only see a list of child components in the Components window (no "flex wheel" component, just things like AnimateProperty, ArrayCollect, etc. as in attached).
Can you help me understand your response?
Thanks,
John

[svn:fx-trunk] 7765: Fixing up some copyrights, adding copyrights, and fixing up some legal-eese for the Flash Component Kit For Flex.

Revision: 7765
Author:   [email protected]
Date:     2009-06-11 15:58:18 -0700 (Thu, 11 Jun 2009)
Log Message:
Fixing up some copyrights, adding copyrights, and fixing up some legal-eese for the Flash Component Kit For Flex.
Also, updating the MXP to get latest changes to base classes.
QE Notes: -
Doc Notes: -
Bugs: SDK-21670
Reviewer: No one (just header updates)
tests: checkintest (seem to fail due to local changes to ScrollBar, which I'm not checking in here)
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-21670
Modified Paths:
    flex/sdk/trunk/frameworks/flash-integration/FlexComponentKit.mxp
    flex/sdk/trunk/frameworks/flash-integration/readme.txt
    flex/sdk/trunk/frameworks/projects/flash-integration/FlexComponentKit.mxi
    flex/sdk/trunk/frameworks/projects/flash-integration/JSFL/Convert Symbol to Flex Component.jsfl
    flex/sdk/trunk/frameworks/projects/flash-integration/JSFL/Convert Symbol to Flex Container.jsfl
    flex/sdk/trunk/frameworks/projects/flash-integration/JSFL/MakeFlexComponent.jsfl
    flex/sdk/trunk/frameworks/projects/flash-integration/readme.txt
    flex/sdk/trunk/frameworks/projects/flash-integration/src/mx/flash/ContainerMovieClip.as
    flex/sdk/trunk/frameworks/projects/flash-integration/src/mx/flash/UIMovieClip.as

Flex Hero - Links in HTML component does not works.

WebView-app.xml
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.5">
WebView.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:HTML location="http://google.com/" />
</s:WindowedApplication>
I can see google homepage in my test desktop application.
But all links are not work in html document.
Flex 4.0 and 4.1 SDK works well. Only Flex Hero has this problem.
How can I fix it?
Thanks.

Hi Kevin,
I had the same problem. This 4.5 build from 11/30/2010 fixed the HTML component issue.
http://opensource.adobe.com/wiki/display/flexsdk/download?build=4.5.0.18623&pkgtype=1

Dragging an HTML component

Hello,
I'm a bit of a newbie to Flex ( started Yesterday ) and i'm finding my way quit well. Using some of the examples that the internet provides i managed to create the following applcation:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="1024" height="768"
   creationComplete="getData.send()" xmlns:flexui="flexunit.flexui.*">
<fx:Script>
<![CDATA[
import flash.utils.flash_proxy;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.DragSource;
import mx.effects.easing.*;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.managers.DragManager;
import mx.rpc.events.ResultEvent;
import mx.rpc.xml.SimpleXMLDecoder;
import mx.utils.ArrayUtil;
[Bindable]
public var Images:ArrayCollection;
protected function toggleBtn(event:MouseEvent):void
if(btn.label== 'Open')
panelOut.play();
else
panelIn.play();
protected function initiateDrag(event:MouseEvent, value:String):void
var dragInitiator:HTML = event.currentTarget as HTML;
var dragSource:DragSource = new DragSource();
dragSource.addData(value, 'value');
var dragProxy:HTML = new HTML();
dragProxy.location = event.currentTarget.location;
dragProxy.width = 100 ;
dragProxy.height = 100 ;
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
private function dragEnterHandler(event:DragEvent):void {
var dropTarget:VBox =event.currentTarget as VBox;
if (event.dragSource.hasFormat('value')) {
DragManager.acceptDragDrop(dropTarget);
private function dragDropHandler(event:DragEvent):void {
var value:String = event.dragSource.dataForFormat('value') as String;
bigImage.location = "assets/Big_Html/"+value;
]]>
</fx:Script>
<mx:Canvas id="panel" width="1013.95" height="202" y="10.3" backgroundColor="#000000" x="0.05">
<mx:TabNavigator x="2" y="0" width="994" height="181">
<s:NavigatorContent label="Eerste" width="100%" height="100%" id="navigatorContent">
<mx:HBox width="992" height="137">
<mx:Repeater dataProvider="{getData.lastResult.gallery.image}"
id="rep" width="991" height="137">
<mx:HTML x="228" y="10" width="113" height="112" location="assets/Small_Html/{rep.currentItem}"
mouseMove="initiateDrag(event,event.currentTarget.getRepeaterItem())" >
</mx:HTML>
</mx:Repeater>
</mx:HBox>
</s:NavigatorContent>
<s:NavigatorContent label="Tweede" width="100%" height="100%">
</s:NavigatorContent>
</mx:TabNavigator>
<mx:LinkButton id="btn" width="100%" height="21"
   label="Open"
   click="toggleBtn(event)" enabled="true" x="-3" y="179"/>

</mx:Canvas>
<mx:Canvas>
</mx:Canvas>
<mx:VBox width="995" height="508" backgroundColor="#000000"
horizontalAlign="center" verticalAlign="middle"
dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)" x="19" y="250">
<mx:HTML x="83" y="44" id="bigImage"/>
</mx:VBox>
<fx:Declarations>
<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'"
duration="1500" easingFunction="Bounce.easeOut"/>
<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'"
duration="1000" easingFunction="Bounce.easeIn"/>
<mx:HTTPService id="getData"
url="SWF.xml" />
</fx:Declarations>
</s:WindowedApplication>
The goals of the application are:
1     Getting a repeater filled with HTML pages get generated from an XML file
2     Fitting the repeater in a box that can be hidden
3     Open HTML pages from the repeater by dragging them into a bigger HTML component
The first two points work great, no problems there. But the third is a bit more more demaning.
I set off trying to get this to work with images and that worked just fine. Apart from not being able to see what i'm dragging, minor issue. Now i try this with the HTML component things start to change. I guess this has to do with the fact that the mouse pointer interacts with the page shown in the HTML component rather then with the HTML component itself.
Can anyone help with this problem. If not i guess i'm going to work with images in the repeater, that should work.
Thanks in advanced for any input,
Daniel

No such component in 2.0. See http://blogs.adobe.com/aharui/2008/01/html_and_flex_1.html for more info.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

How to display html content in flex hero..

i need to display html content using flex hero for balckberry playbook..i could not find a component for it..i have tried with spark text area by setting its html text property via MobileTextField. bt i need a webview to load html content to execute javascript and all....Is there any component for it???? Please help....

Hello,
The only current way is to use an iFrame, or if you only need some html tags you could use the Text Layout Framework.
Here this is the iFrame approach:
http://code.google.com/p/flex-iframe/
If the swc do not work in Flex4 just use its ource code which works...
...it is basically based on this:
http://www.deitte.com/archives/2008/07/dont_use_iframe.htm
see also and vote, please:
http://bugs.adobe.com/jira/browse/SDK-12291
http://bugs.adobe.com/jira/browse/SDK-13740
Regards
Marc

Disabling flash display in Air HTML Component

Hi,
in my AIR application, I use an HTML Component in its own
sort of frame or container that has a viewing size that is smaller
than the web page itself. Next to it is a panel with many controls
in it. When a website with flash components (e.g. flash banners) is
displayed, the flash components in the HTML Component overlap the
control panel even though it's underneath in another container. Is
there a way to disable showing Flash in an HTML Component or
another way to make sure everything in an HTML Component stays on
its own layer?
Thanks for any help!

Hi,
I don't think the problem is because the URL is pointing to a
JSP. I think the problem might be with the JavaScript which is
trying to do operations which are not allowed. Please find more
details at the URL below.
http://livedocs.adobe.com/flex/3/html/dg_part_7_1.html
Hope this helps.

AIR HTML Component - URL problem

Hi,
We face the below mentioned problem. Attached herewith are code sample and simulation for the problem. Would be great if someone could help us.
Due to problems with uploading the attachment here, please send a email to the following email-id ([email protected]) and I shall send the attachment in response.
HTML Component provided in AIR is used to access different URLs one after another. When we switch from one URL to another, the previous link gets loaded prior to opening new link. Is there a way to trap events which is happening during loading of URLs.
* Steps to Reproduce:
1. Install HTML_Component_TrapEvent.air and execute the code.
2. Initially Home page is displayed.
3. Click on anyone of the three buttons labeled: Yahoo, Google, Rediff.
4. Respective website homepage is displayed. Wait till entire page is loaded. For example, assume Yahoo button is clicked, Yahoo website will be loaded.
5. Click on Button labeled "Home". Home Page gets Loaded.
6. Then click on Button labeled "Google". The HTML component with Previous web page (in this case Yahoo web page) is displayed until Google web page is loaded.
* Expected Result:
The HTML component last loaded should not be visible when the current component is loading. In other words, Yahoo website should not be visible when Google site is loaded.
* Actual Result:
The HTML component last loaded is displayed until the current component is loaded. Which means, Yahoo website is displayed until Google is loaded.
* Any Workaround: NONE
Thanks in advance.

I might add that this is flex 3 Retail version, not the beta.
Seems to work in the flex 3 milestone 4 beta.

Adjust aliasing of webfonts within an HTML component?

Hello,
I'm trying to use an icon font in an html page that is being loded into an HTML component. I read somewhere that the HTML component uses webkit as its rendering engine, but -webkit-font-smoothing in the web page's css appears to be ignored. Is there another way to adjust the aliasing of fonts within the HTML?
I've seen plenty of articles about embeding fonts in the flex application itself, but as far as I've been able to tell, that has no effect on the fonts in the HTML component itself.
Thanks for any help,
Cameron

JFC/Swing has JEditorPane that can be used in conjunction with HTMLEditorKit to display HTML 3.2
http://developer.java.sun.com/developer/onlineTraining/GUI/Swing1/shortcourse.html#JFCEditorPane
Look for section
11.1.5 JEditorPane
in the sample chapter of a swing book at:
http://manning.spindoczine.com/sbe/files/uts2/Chapter11html/Chapter11.htm

Where are the LiveDocs for Flex?

I can't find the LiveDocs from Adobe regarding flex development anymore. Where are they gone? A few days ago they were there.
For example the following URL from a Google search regarding E4X:
https://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDkQFjAB&url=h ttp%3A%2F%2Flivedocs.adobe.com%2Fflex%2F3%2Fhtml%2F13_Working_with_XML_01.html&ei=XaawUoWw OK2V7AaPzYEo&usg=AFQjCNHW5gjQwn26e2SYcj3BTNhT64NNIw&bvm=bv.57967247,d.ZGU
When you search with Google all LiveDoc pages are gone and result in an overview page for flex.
Whats that. I think this source of information are very important for flex development.
Why did they do that?

If you're looking for trash sounds, those are located in /System/Library/Components/CoreAudio.component/Contents/Resources/SystemSounds/ . If you're wanting to change the put stuff in trash and empty trash sounds, then follow these steps.
Convert your sounds to aif, save them in some convenient location.
Replace the two sound files *"move to trash"* and *"drag to trash"* inside the Finder and Dock folders, respectively, inside the SystemSounds folder, with the one you want for putting things in the trash and the *"empty trash*" one inside the Finder folder with the new one for emptying the trash.
Ensure that you rename the new ones the same as the originals. (I usually copy the originals and add a .bak suffix so I can restore the sounds to their original condition.)
OPTION-click the Finder's Dock icon and select Relaunch.
Do note that if you'll have to authenticate to copy, rename, and replace these files. I use the Terminal with the sudo command to affect the changes.

HTML component blinking cursor and combobox problems

Hi there.
I have a problem using a website displayed with the HTML component in a spark window. In any textfield in this homepage there is no blinking cursor displayed which is not really a problem but is still pretty confusing to the users. Another issue comes up with the comboboxes where the possible choices cannot be clicked with the mouse. Choosing an entry with the keyboard is possible though.
To reproduce this issue, add a html component in a spark window and load for example http://www.ard.de. The cursor is blinking in the search textfield in the top left. After clicking on the combobox on the left side - where i can't choose an entry with the mouse - the cursor in the textfield is no longer displayed.
Is this a known issue?
Best regards

Hi,
I've looked at your example and found the following 2 issues:
1. The cursor not appearing was actually a focus issue and you can fix it by adding an event listener on "windowActivate" in which to re-set the focus to the _htmlWindow. See the code below for more details on "onActivate()"
2. The issue with the dropdown is actually a bug (internal bug id #2721855) and it has been fixed in the next version of AIR which will be released towards the end of this year.
<?xml version="1.0" encoding="utf-8"?>
<s:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          windowDeactivate="onDeactivate()"
          windowActivate="onActivate()"
          alwaysInFront="true"
          showStatusBar="false"
          title="WebKit Browser"
          creationComplete="onCreationComplete()">
     <fx:Declarations>
          
     </fx:Declarations>
     <fx:Script>
          <![CDATA[
               import flash.profiler.showRedrawRegions;
               import mx.controls.Alert;
               import mx.managers.CursorManager;
               import mx.managers.HistoryManager;
               [Bindable]
               private var _location:String;
               private function onCreationComplete():void {
                    nativeWindow.x = Capabilities.screenResolutionX * 0.1;
                    nativeWindow.y = Capabilities.screenResolutionY * 0.1;
                    nativeWindow.width = Capabilities.screenResolutionX * 0.8;
                    nativeWindow.height = Capabilities.screenResolutionY * 0.8;
                        // call this function on "windowActivate" in order to re-set the focus on your html element
               private function onActivate():void {
                    _htmlWindow.setFocus();
               private function onDeactivate():void {
                    try {
                         if (nativeWindow)
                              nativeWindow.activate();
                    } catch (e:Error) { // nativeWindow Object not yet available
               public function set location(value:String):void {
                    _location = value;
                    showStatusBar = false;
                    status = "Lade " + value + "...";
                    CursorManager.setBusyCursor();
               public function get location():String {
                    return _location;
               private function onHTMLComplete():void {
                    CursorManager.removeBusyCursor();
                    showStatusBar = false;
               private function uncaughtScriptExecution(e:HTMLUncaughtScriptExceptionEvent):void {
                    CursorManager.removeBusyCursor();
                    Alert.show("Scriptfehler: " + e.exceptionValue, "Error", Alert.OK);
          ]]>
     </fx:Script>
     <mx:HTML id="_htmlWindow"
                width="100%"
                height="100%"
                runtimeApplicationDomain="{ApplicationDomain.currentDomain}"
                complete="onHTMLComplete()"
                location="{_location}"
                uncaughtScriptException="uncaughtScriptExecution(event)">
     </mx:HTML>
</s:Window>
Regards,
Catalin

Html component for Flex??

Similar Messages

Maybe you are looking for