<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:htmlFrame="ardisia.components.htmlFrame.*"
xmlns:pane="ardisia.components.pane.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)"
preinitialize="application1_preinitializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import ardisia.components.htmlFrame.HtmlFrame;
public function creationComplete():void
{
demoAppWrapper.topLevelCompassContainer.westResizeLocked = false;
demoAppWrapper.topLevelCompassContainer.westCanBeMinimized = false;
demoAppWrapper.topLevelCompassContainer.minWestWidth = 10;
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstackChangeHandler);
}
public function animatedIn():void
{
htmlFrameA.visible = true;
}
protected function viewstackChangeHandler(event:Event):void
{
if (!htmlFrameA || !htmlFrameB || !htmlFrameC || !htmlFrameD || !htmlFrameE)
return;
var selectedLabel:String = demoAppWrapper.tabBar.selectedItem.label;
if (selectedLabel == "Single HtmlFrame")
{
borderVisibleSelect.selected = true;
htmlFrameB.visible = htmlFrameC.visible = htmlFrameD.visible = popup.visible = htmlFrameE.visible = false;
htmlFrameA.visible = true;
}
if (selectedLabel == "Multiple HtmlFrames")
{
borderVisibleSelect.selected = true;
htmlFrameA.visible = htmlFrameD.visible = htmlFrameE.visible = popup.visible = false;
htmlFrameB.visible = htmlFrameC.visible = true;
htmlFrameB.setFrameSourceURL('http://ardisialabs.com/external-test.php');
htmlFrameC.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html');
}
if (selectedLabel == "Draggable HtmlFrame")
{
borderVisibleSelect.selected = false;
htmlFrameA.visible = htmlFrameB.visible = htmlFrameC.visible = htmlFrameE.visible = false;
htmlFrameD.visible=popup.visible = true;
htmlFrameD.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html');
}
if (selectedLabel == "Raw HTML")
{
borderVisibleSelect.selected = true;
htmlFrameA.visible = htmlFrameB.visible = htmlFrameC.visible = htmlFrameD.visible = popup.visible = false;
htmlFrameE.visible = true;
}
}
protected function application1_preinitializeHandler(event:FlexEvent):void
{
Security.allowDomain("*");
}
protected function removedFromStageHandler(event:Event):void
{
if (popup)
popup.closeFloatedPane(true);
htmlFrameA.dispose();
htmlFrameB.dispose();
htmlFrameC.dispose();
htmlFrameD.dispose();
htmlFrameE.dispose();
}
]]>
</fx:Script>
<fx:Declarations>
<s:NumberFormatter id="numFormatter"
fractionalDigits="4"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="HtmlFrame Description"
description="The HtmlFrame component displays HTML content inside a Flex component. Users can load a URL (webpage, PDF, image, etc.) into the component (remote or local content) or set raw HTML markup. The HtmlFrame's position is managed like any other Flex based visual element. The HtmlFrame works without changing any settings (including wmode) in the application or the HTML wrapper, unlike other Flex based HTML viewport components. No changes to the HTML wrapper or Flash Player settings are necessary to use this component."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormItem label="Padding Top:">
<s:HSlider id="framePaddingTopSelect"
width="100"
minimum="0" maximum="50" value="0"/>
</s:FormItem>
<s:FormItem label="Padding Right:">
<s:HSlider id="framePaddingRightSelect"
width="100"
minimum="0" maximum="50" value="0"/>
</s:FormItem>
<s:FormItem label="Padding Bottom:">
<s:HSlider id="framePaddingBottomSelect"
width="100"
minimum="0" maximum="50" value="0"/>
</s:FormItem>
<s:FormItem label="Padding Left:">
<s:HSlider id="framePaddingLeftSelect"
width="100"
minimum="0" maximum="50" value="0"/>
</s:FormItem>
<s:FormItem label="Border Visible:"
enabled="{demoAppWrapper.viewstack.selectedIndex!=2}">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="borderColorSelect"
selectedColor="{getStyle('borderColor')}"
open="borderColorSelect.popupPart.move(5, borderColorSelect.popupPart.y);"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Thickness:">
<s:HSlider id="borderThicknessSelect"
minimum="0" maximum="20" value="1"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Single HtmlFrame</data:tabLabel>
<data:exampleDescription>A single HtmlFrame. Use the buttons below to load the desired content.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Button label="Load CKEditor"
click="htmlFrameA.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
<s:Button label="Load External URL"
click="htmlFrameA.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<htmlFrame:HtmlFrame id="htmlFrameA"
visible="false"
top="20" right="20" bottom="20" left="20"
borderColor="{borderColorSelect.selectedColor}"
borderThickness="{borderThicknessSelect.value}"
framePaddingTop="{framePaddingTopSelect.value}"
framePaddingRight="{framePaddingRightSelect.value}"
framePaddingBottom="{framePaddingBottomSelect.value}"
framePaddingLeft="{framePaddingLeftSelect.value}"
borderVisible="{borderVisibleSelect.selected}"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Multiple HtmlFrames</data:tabLabel>
<data:exampleDescription>Support for multiple instances at once, each completely independent of the others.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:VGroup verticalAlign="middle">
<s:Label text="Frame #1 Content"
fontWeight="bold"/>
<s:HGroup>
<s:Button label="Load External URL" click="htmlFrameB.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
<s:Button label="Load CKEditor" click="htmlFrameB.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
</s:HGroup>
</s:VGroup>
<separators:VSeparator height="100%"/>
<s:VGroup verticalAlign="middle">
<s:Label text="Frame #2 Content"
fontWeight="bold"/>
<s:HGroup>
<s:Button label="Load External URL" click="htmlFrameC.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
<s:Button label="Load CKEditor" click="htmlFrameC.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
</s:HGroup>
</s:VGroup>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20"
verticalAlign="justify"
gap="20">
<htmlFrame:HtmlFrame id="htmlFrameB"
width="100%" height="100%"
visible="false"
borderColor="{borderColorSelect.selectedColor}"
borderThickness="{borderThicknessSelect.value}"
framePaddingTop="{framePaddingTopSelect.value}"
framePaddingRight="{framePaddingRightSelect.value}"
framePaddingBottom="{framePaddingBottomSelect.value}"
framePaddingLeft="{framePaddingLeftSelect.value}"
borderVisible="{borderVisibleSelect.selected}"/>
<htmlFrame:HtmlFrame id="htmlFrameC"
visible="false"
width="100%" height="100%"
borderColor="{borderColorSelect.selectedColor}"
borderThickness="{borderThicknessSelect.value}"
framePaddingTop="{framePaddingTopSelect.value}"
framePaddingRight="{framePaddingRightSelect.value}"
framePaddingBottom="{framePaddingBottomSelect.value}"
framePaddingLeft="{framePaddingLeftSelect.value}"
borderVisible="{borderVisibleSelect.selected}"/>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Draggable HtmlFrame</data:tabLabel>
<data:exampleDescription>HtmlFrame added to a floated Pane as child content. The frame can be moved around via dragging without any additional programming.</data:exampleDescription>
<data:primaryContent>
<pane:Pane id="popup"
width="700" height="500"
minWidth="400" minHeight="400"
boundingMode="boundEntirePane"
displayCloseButton="false" displayMinimizedButton="false" displayMaximizedButton="false"
title="Draggable HTML Frame"
creationComplete="popup.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, false, null, moduleFactory);popup.visible = htmlFrameD.visible = false; popup.move(400, 200);"
backgroundColor="#E9E9E9"
skinClass.stockholm="components.htmlFrame.stockholm.skins.PaneSkin"
skinClass.london="components.htmlFrame.london.skins.PaneSkin"
skinClass.spark="components.htmlFrame.spark.skins.PaneSkin">
<s:VGroup width="100%" height="100%"
horizontalAlign="justify"
gap="0">
<s:HGroup paddingBottom="10" paddingTop="10" paddingLeft="20"
verticalAlign="middle">
<s:Button label="Load CKEditor" click="htmlFrameD.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
<s:Button label="Load External URL" click="htmlFrameD.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
</s:HGroup>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="#9B9B9B"
weight="1"
caps="square"
pixelHinting="true"/>
</s:stroke>
</s:Line>
<htmlFrame:HtmlFrame id="htmlFrameD"
visible="false"
width="100%" height="100%"
borderVisible="false"
framePaddingTop="{framePaddingTopSelect.value}"
framePaddingRight="{framePaddingRightSelect.value}"
framePaddingBottom="{framePaddingBottomSelect.value}"
framePaddingLeft="{framePaddingLeftSelect.value}"/>
</s:VGroup>
</pane:Pane>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Raw HTML</data:tabLabel>
<data:exampleDescription>Raw HTML can be inserted into the HtmlFrame component, and updated at any time.</data:exampleDescription>
<data:toolbarContent>
<s:VGroup>
<s:TextArea id="rawHtml"
width="400"
text="<p><span style='color:red;'>Hello</span><h1>World</h1></p>"/>
<s:Button label="Set Raw HTML"
click="htmlFrameE.setFrameRawHTML(rawHtml.text);"/>
</s:VGroup>
</data:toolbarContent>
<data:primaryContent>
<htmlFrame:HtmlFrame id="htmlFrameE"
top="20" right="20" bottom="20" left="20"
visible="false"
borderColor="{borderColorSelect.selectedColor}"
borderThickness="{borderThicknessSelect.value}"
framePaddingTop="{framePaddingTopSelect.value}"
framePaddingRight="{framePaddingRightSelect.value}"
framePaddingBottom="{framePaddingBottomSelect.value}"
framePaddingLeft="{framePaddingLeftSelect.value}"
creationComplete="htmlFrameE.setFrameRawHTML(rawHtml.text);"
borderVisible="{borderVisibleSelect.selected}"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>