<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:htmlDragDrop="ardisia.components.htmlDragDrop.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:scroller="ardisia.components.scroller.*"
frameRate="60"
width="100%" height="100%" minWidth="900"
removedFromStage="removedFromStageHandler(event)"
preinitialize="application1_preinitializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.Image;
import ardisia.components.htmlDragDrop.events.HtmlDragDropErrorEvent;
import ardisia.components.htmlDragDrop.events.HtmlDragDropEvent;
public function creationComplete():void
{
demoAppWrapper.topLevelCompassContainer.westResizeLocked = false;
demoAppWrapper.topLevelCompassContainer.westCanBeMinimized = false;
demoAppWrapper.topLevelCompassContainer.minWestWidth = 10;
}
public function animatedIn():void
{
htmlDragDrop.visible = true;
}
protected function dragLoadHandler(event:HtmlDragDropEvent):void
{
switch (event.type)
{
case HtmlDragDropEvent.DRAG_ENTER:
textArea.text += "DRAG ENTER";
if (event.types)
{
for each (var mime:String in event.types)
{
textArea.text += "\n" + mime;
}
}
textArea.text += "\n";
break;
case HtmlDragDropEvent.DRAG_OVER:
textArea.text += "DRAG_OVER\n";
break;
case HtmlDragDropEvent.DRAG_LEAVE:
textArea.text += "DRAG_LEAVE\n";
break;
case HtmlDragDropEvent.DRAG_DROP_STARTING:
textArea.text += "DRAG_DROP_STARTING";
if (event.file)
textArea.text += " File Name: " + event.file.name + " size: " + event.file.size;
textArea.text += "\n";
break;
case HtmlDragDropEvent.DRAG_LOAD_START:
htmlDragDrop.setStyleProperty('backgroundColor', '#A1E5FC');
textArea.text += "DRAG_LOAD_START";
if (event.file)
textArea.text += " File Name: " + event.file.name + " size: " + event.file.size;
textArea.text += "\n";
break;
case HtmlDragDropEvent.DRAG_PROGRESS:
textArea.text += "DRAG_PROGRESS";
if (event.file)
textArea.text += " Progress: " + event.percentLoaded + "%";
textArea.text += "\n";
break;
case HtmlDragDropEvent.DRAG_LOAD:
mime = event.file.type.toLowerCase();
var group:VGroup = new VGroup();
var label:Label = new Label();
label.setStyle("fontWeight", "bold");
label.text = "File Dropped:";
group.addElement(label);
label = new Label();
label.text = "Name:" + event.file.name;
group.addElement(label);
label = new Label();
label.text = "Size: " + event.file.size;
group.addElement(label);
label = new Label();
label.text = "MIME:" + mime;
group.addElement(label);
if (mime.indexOf("jpeg") > -1 || mime.indexOf("jpg") > -1 || mime.indexOf("png") > -1)
{
var data:ByteArray = event.file.data;
var img:Image = new Image();
img.width = img.height = 200;
img.source = data;
group.addElement(img);
}
droppedFilesContainer.addElement(group);
droppedFilesContainer.validateNow();
droppedFilesContainer.verticalScrollPosition = 500000;
textArea.text += "DRAG_LOAD";
if (event.file)
{
textArea.text += " File Name: " + event.file.name + " size: " + event.file.size;
}
textArea.text += "\n";
break;
}
eastScroller.viewport.verticalScrollPosition = 500000;
}
protected function dragErrorHandler(event:HtmlDragDropErrorEvent):void
{
htmlDragDrop.setFrameRawHTML("<div> </div>");
textArea.text += "ERROR: " + event.type + "\n";;
eastScroller.viewport.verticalScrollPosition = 50000;
}
protected function htmlDragDrop_creationCompleteHandler(event:FlexEvent):void
{
htmlDragDrop.setFrameRawHTML("<style>html,body{padding:0;margin:0;height:100%;width:100%;}body{background:#373737 url('http://ardisialabs.com/assets/images/drop-zone.png') no-repeat center center;}</style>");
}
protected function application1_preinitializeHandler(event:FlexEvent):void
{
Security.allowDomain('*');
}
protected function removedFromStageHandler(event:Event):void
{
htmlDragDrop.dispose();
}
]]>
</fx:Script>
<fx:Declarations>
</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="HtmlDragDrop Description"
eastRegionTitle="Event Log"
description="Creates a drop region for files dragged from the user's desktop to the Flex application via the HTML5 drag and drop API. Currently, HTML drag and drop is supported in most modern browsers."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:eastContent>
<scroller:Scroller id="eastScroller"
width="100%" height="100%">
<s:Group>
<s:RichText id="textArea"
width="100%"
paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10"/>
</s:Group>
</scroller:Scroller>
</containers:eastContent>
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormHeading label="ExternalInterface"/>
<s:FormItem label="Supported:">
<s:Label paddingTop="5"
text="{ExternalInterface.available}"/>
</s:FormItem>
<s:FormHeading label="HTML5 Drag/Drop API"/>
<s:FormItem label="Supported:">
<s:Label paddingTop="5"
text="{htmlDragDrop.isSupported}"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>Drag file(s) from your desktop to the drop region below. A single file can be dropped, or multiple files can be dropped. If a dropped file is an image, it will be displayed below. The event log generated by the HtmlDragDrop component is displayed in the East region.</data:exampleDescription>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20"
gap="20"
verticalAlign="justify">
<s:VGroup width="50%" height="100%">
<s:Label text="Drag file(s) from your desktop to the drop region below:"
fontWeight="bold"/>
<s:Label text="Can drop a single file or multiple files."/>
<htmlDragDrop:HtmlDragDrop id="htmlDragDrop"
visible="false"
width="100%" height="100%"
dragEnter="dragLoadHandler(event);"
dragOver="dragLoadHandler(event);"
dragLeave="dragLoadHandler(event);"
dragDropStarting="dragLoadHandler(event);"
dragLoadStart="dragLoadHandler(event);"
dragProgress="dragLoadHandler(event);"
dragLoad="dragLoadHandler(event);"
notFoundErr="dragErrorHandler(event);"
notReadableErr="dragErrorHandler(event);"
abortErr="dragErrorHandler(event);"
browserNoSupportErr="dragErrorHandler(event);"
unknownErr="dragErrorHandler(event);"
borderVisible="false"
creationComplete="htmlDragDrop_creationCompleteHandler(event)"/>
</s:VGroup>
<s:VGroup width="50%" height="100%"
horizontalAlign="justify"
gap="20">
<s:Label text="Dropped Files (images resized to fit):"
fontWeight="bold"/>
<scroller:Scroller width="100%" height="100%"
focusEnabled="true" mouseEnabled="true">
<s:VGroup id="droppedFilesContainer"
gap="20"/>
</scroller:Scroller>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>