You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2014/09/03 02:17:44 UTC
[11/30] Radii8 code base as accepted by IP Clearance
http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/CodeInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/CodeInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/CodeInspector.mxml
new file mode 100644
index 0000000..77f80b8
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/CodeInspector.mxml
@@ -0,0 +1,1480 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:Group 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:c="com.flexcapacitor.controls.*"
+ xmlns:handlers="com.flexcapacitor.handlers.*"
+ xmlns:clipboard="com.flexcapacitor.effects.clipboard.*"
+ xmlns:status="com.flexcapacitor.effects.status.*"
+ xmlns:flexiframe="com.google.code.flexiframe.*"
+ xmlns:controls="com.riaspace.controls.*"
+
+ minWidth="200"
+ minHeight="100"
+ implements="com.flexcapacitor.views.IInspector"
+ resize="editor_resizeHandler(event)"
+ >
+
+
+ <!--
+ Notes:
+
+ It may be worth investigating Moonshine project.
+
+ *******************************
+ Code highlighting
+ *******************************
+ Currently there are 3 editors, a spark textarea with no
+ syntax highlighting, a mx text area with syntax highlighting
+ but some redraw issues and no undo or redo support and
+ an html based editor called ace editor that is awesome
+ but has a bug in firefox where the code cannot be edited.
+ when it becomes uneditable you have to click on the flex
+ application and then click back into the editor.
+ it also does not resize correctly but that may be a
+ flex issue. it also is being erased when hidden and revealed.
+
+
+
+ *******************************
+ Writing code
+ *******************************
+ the code editor only shows the code of the selection or document.
+ it is not yet tied to the component to allow the user to enter
+ code and have it be retained.
+
+ in the future there may be a second code window to show or edit the
+ code of the selected event. this would listen for an event like
+ the property or style selected event that the metadata panel uses.
+ and / or there may be a option to show all document code or
+ only event code.
+
+ what most likely will happen is that this panel will be used to show
+ the selected objects generated code and or the event code.
+ then there would be full sized editors that open up in new
+ tabs that show the complete document code. or for purposes of
+ split view this would continue to server both purposes.
+
+
+ *******************************
+ Generating Code:
+ *******************************
+ this is the second or third iteration of generating source code
+ but it is inadequate.
+ there is code already started in the ComponentDecription class that
+ should be better. the component description would have a static
+ property called exporter. this would be a class that would be
+ used to generate the code. it would return the correct code through
+ the componentDescription.toString() method.
+
+ There would be a HTML exporter, MXML exporter and so on.
+
+ Currently the properties and the styles are not set on the
+ componentDescription instance. This is why we are using the current
+ method.
+ -->
+
+ <fx:Script>
+ <![CDATA[
+ import com.flexcapacitor.controller.Radiate;
+ import com.flexcapacitor.events.RadiateEvent;
+ import com.flexcapacitor.model.IDocument;
+ import com.flexcapacitor.model.IProject;
+ import com.flexcapacitor.utils.AndroidDocumentExporter;
+ import com.flexcapacitor.utils.ClassUtils;
+ import com.flexcapacitor.utils.DisplayObjectUtils;
+ import com.flexcapacitor.utils.HTMLDocumentExporter;
+ import com.flexcapacitor.utils.SyntaxHighlighter;
+ import com.flexcapacitor.utils.XMLUtils;
+ import com.flexcapacitor.utils.supportClasses.ComponentDescription;
+ import com.google.code.flexiframe.IFrame;
+
+ import mx.collections.ArrayList;
+ import mx.events.FlexEvent;
+ import mx.events.ResizeEvent;
+
+ import spark.components.Application;
+ import spark.events.IndexChangeEvent;
+ import spark.events.TextOperationEvent;
+
+ public static const HTML:String = "HTML";
+ public static const MXML:String = "MXML";
+ public static const ANDROID:String = "Android";
+ public static const XAML:String = "XAML";
+
+ /**
+ * Reference to Radiate
+ * */
+ public var radiate:Radiate;
+
+ [Bindable]
+ public var exportWindow:Boolean;
+
+
+
+ /**
+ * Indicates if XML is invalid
+ * */
+ [Bindable]
+ public var isValid:Boolean;
+
+ /**
+ * Error event, if any occurs, from generated code
+ * */
+ [Bindable]
+ public var error:Error;
+
+ /**
+ * Error message, if any occurs, from generated code
+ * */
+ [Bindable]
+ public var errorMessage:String;
+
+ /**
+ * Error messages, if any, from generated code
+ * */
+ [Bindable]
+ public var errors:Array = [];
+
+ /**
+ * Warning messages, if any, from generated code
+ * */
+ [Bindable]
+ public var warnings:Array = [];
+
+
+ public function activate():void {
+ radiate = Radiate.getInstance();
+
+ radiate.addEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange, false, 0, true);
+ radiate.addEventListener(RadiateEvent.PROPERTY_CHANGED, handlePropertyChange, false, 0, true);
+ radiate.addEventListener(RadiateEvent.MOVE_ITEM, handlePropertyChange, false, 0, true);
+ radiate.addEventListener(RadiateEvent.ADD_ITEM, handlePropertyChange, false, 0, true);
+ radiate.addEventListener(RadiateEvent.REMOVE_ITEM, handlePropertyChange, false, 0, true);
+ radiate.addEventListener(RadiateEvent.DOCUMENT_CHANGE, handleDocumentChange, false, 0, true);
+
+ if (radiate.target) {
+ update();
+ }
+ }
+
+ public function deactivate():void {
+ if (radiate) {
+ radiate.removeEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange);
+ radiate.removeEventListener(RadiateEvent.PROPERTY_CHANGED, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.MOVE_ITEM, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.ADD_ITEM, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.REMOVE_ITEM, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.DOCUMENT_CHANGE, handleDocumentChange);
+ }
+ }
+
+ public function reamoveListeners():void {
+ radiate = Radiate.getInstance();
+ radiate.removeEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange);
+ radiate.removeEventListener(RadiateEvent.PROPERTY_CHANGED, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.MOVE_ITEM, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.ADD_ITEM, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.REMOVE_ITEM, handlePropertyChange);
+ radiate.removeEventListener(RadiateEvent.DOCUMENT_CHANGE, handleDocumentChange);
+
+ }
+
+ /**
+ * Handle target change
+ * */
+ protected function handleTargetChange(event:RadiateEvent):void {
+
+ // if code is not modified by the user
+ // and show selection
+ // we only want to update the view on selection change when we are
+ // paying attention when we have show selected component code option enabled
+ if (!isCodeModifiedByUser) {
+ if (showSelection.selected) {
+ update();
+ }
+ }
+
+ if (updateCodeLive.selected) {
+ radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
+ }
+ }
+
+ /**
+ * Updates the code when the document changes.
+ * */
+ protected function handleDocumentChange(event:RadiateEvent):void {
+ var selectedDocument:IDocument = IDocument(event.selectedItem);
+
+
+ if (radiate.isPreviewVisible) {
+ //return;
+ }
+
+ if (!isCodeModifiedByUser) {
+ update(true);
+ }
+
+ if (updateCodeLive.selected) {
+ radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
+ }
+ }
+
+ /**
+ * Updates the code when a property change happens.
+ * If the text has been modified by the user then we don't update the code.
+ * They have to press the resync button.
+ * */
+ protected function handlePropertyChange(event:RadiateEvent):void {
+
+ if (!isCodeModifiedByUser) {
+ update(true);
+ }
+
+ if (updateCodeLive.selected) {
+ radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
+ }
+ }
+
+ /**
+ * Updates the code to reflect the selected language
+ * */
+ protected function codeType_changeHandler(event:IndexChangeEvent):void {
+
+ update(true);
+
+ // if HTML preview is visible then dispatch an event to
+ // so that preview can be changed else where
+ // needs refactoring
+ if (radiate.isPreviewDocumentVisible() && String(codeType.selectedItem)!=HTML) {
+ radiate.dispatchPreviewEvent(sourceCode, String(codeType.selectedItem));
+ radiate.openDocument(radiate.selectedDocument);
+ radiate.closeDocument(radiate.selectedDocument, true);
+ }
+
+ }
+
+ /**
+ * Generate the code for the provided target component.
+ * */
+ public function updateTarget(target:Object):void {
+ var iDocument:IDocument = radiate.selectedDocument;
+ var targetDescription:ComponentDescription;
+ var output:String = "";
+ var noCodeMessage:String = "Enable Show Source Code to see source code.";
+ var xml:XML;
+
+
+ // find target in display list and get it's code
+ targetDescription = DisplayObjectUtils.getTargetInComponentDisplayList(target, iDocument.componentDescription);
+
+
+ if (targetDescription) {
+
+ if (codeType.selectedItem==MXML) {
+ //output = getMXMLOutputString(targetDescription, true);
+ output = iDocument.getSource(targetDescription);
+ errorMessage = iDocument.exporter.errorMessage;
+ }
+ else if (codeType.selectedItem==HTML) {
+ var includePreviewCode:Boolean = true;
+
+ if (htmlExporter==null) {
+ htmlExporter = new HTMLDocumentExporter();
+ }
+
+ //htmlExporter.document = iDocument;
+ htmlExporter.showFullHTMLPageSource = showFullHTMLPageSource;
+ htmlExporter.useInlineStyles = setStylesInline.selected;
+ htmlExporter.showBorders = showBorders;
+ htmlExporter.showBordersCSS = showBordersCSS;
+ htmlExporter.addZoom = exportWindow ? false : setZoom.selected;
+ htmlExporter.zoomCSS = zoomCSS;
+ htmlExporter.useSVGButtonClass = useSVGButtonClass;
+ htmlExporter.css = css;
+ htmlExporter.stylesheets = stylesheets;
+ htmlExporter.target = target;
+ htmlExporter.buttonCSS2 = buttonCSS2;
+ htmlExporter.includePreviewCode = includePreviewCode;
+ htmlExporter.template = html5boilerplate;
+ htmlExporter.showOnlyHTML = showOnlyHTML;
+ htmlExporter.showOnlyCSS = showOnlyCSS;
+ htmlExporter.showScreenshotBackground = showBackgroundImage;
+
+ output = htmlExporter.export(iDocument, false, target);
+
+ errorMessage = htmlExporter.errorMessage;
+ }
+ else if (codeType.selectedItem==ANDROID) {
+ //output = getAndroidOutputString(targetDescription, true, "", true);
+
+ if (androidExporter==null) {
+ androidExporter = new AndroidDocumentExporter();
+ }
+
+ output = androidExporter.exportXMLString(iDocument, false, target);
+ }
+
+
+
+ if (codeType.selectedItem==HTML) {
+
+ try {
+ // don't use XML for HTML output because it converts this:
+ // <div ></div>
+ // to this:
+ // <div />
+ // and that breaks the html page
+
+ // we can still try it to make sure it's valid
+ xml = new XML(output); // check if valid
+
+ sourceCode = output;
+
+ // passing the raw string not the xml
+ if (showSourceCode) {
+ setTextareaCode(output);
+ }
+ else {
+ setTextareaCode(noCodeMessage);
+ }
+ }
+ catch (error:Error) {
+ // Error #1083: The prefix "s" for element "Group" is not bound.
+ // <s:Group x="93" y="128">
+ // <s:Button x="66" y="17"/>
+ //</s:Group>
+ sourceCode = output;
+
+ // passing the raw string not the xml
+ if (showSourceCode) {
+ setTextareaCode(output);
+ }
+ else {
+ setTextareaCode(noCodeMessage);
+ }
+ }
+ }
+ else {
+ sourceCode = output;
+ // passing the raw string not the xml
+ //if (showSourceCode) {
+ setTextareaCode(output);
+ //}
+ //else {
+ // setTextareaCode(noCodeMessage);
+ //}
+ }
+
+ }
+ else {
+ sourceCode = "";
+ setTextareaCode("");
+ }
+ }
+
+
+ /**
+ * Get application code
+ * */
+ public function getDocumentCode():String {
+ updateTarget(radiate.selectedDocument.instance);
+
+ return sourceCode;
+ }
+
+ /**
+ * Get the vertical position string for HTML
+ * */
+ /*public function getVerticalPositionHTML(instance:IVisualElement, propertyModel:Styles, stylesValue:String = "", isBasicLayout:Boolean = true):String {
+
+ if (!isBasicLayout) return stylesValue;
+
+ if (instance.verticalCenter!=null) {
+ stylesValue += "display:block;margin:" + instance.verticalCenter + " auto;";
+ stylesValue = stylesValue.replace("absolute", "relative");
+
+ propertyModel.display = Styles.BLOCK;
+ propertyModel.position = Styles.RELATIVE;
+ propertyModel.margin = instance.verticalCenter + " auto;";
+
+ return stylesValue;
+ }
+ else if (instance.top!=null || instance.bottom!=null) {
+ stylesValue += instance.top!=null ? "top:" + instance.top + "px;" : "";
+ stylesValue += instance.bottom!=null ? "bottom:" + instance.bottom + "px;" : "";
+ if (instance.top!=null) propertyModel.top = instance.top + "px";
+ if (instance.bottom!=null) propertyModel.bottom = instance.bottom + "px";
+ return stylesValue;
+ }
+ else {
+ stylesValue += "top:" + instance.y + "px;";
+ propertyModel.top = instance.y + "px;";
+ }
+
+ return stylesValue;
+ }*/
+
+
+ /**
+ * Get the document code and dispatch a preview event.
+ * */
+ protected function previewButton_clickHandler(event:MouseEvent):void {
+ var document:Object;
+
+ if (!radiate.selectedDocument) return;
+
+ if (!isCodeModifiedByUser) {
+ var code:String = getDocumentCode(); // puts document code into text area
+ }
+
+ // allow to swap between preview and non preview
+ if (!radiate.isPreviewDocumentVisible()) {
+ radiate.openDocumentPreview(radiate.selectedDocument, true);
+ document = radiate.getDocumentPreview(radiate.selectedDocument);
+
+ if (document is IFrame) {
+ document.content = wrapInPreview(sourceCode);
+ }
+
+ //radiate.dispatchPreviewEvent(codeModelTextArea.text, String(codeType.selectedItem));
+ }
+ else {
+ radiate.openDocument(radiate.selectedDocument);
+ //radiate.dispatchPreviewEvent(codeModelTextArea.text, "");
+ }
+ }
+
+
+ /**
+ * Text has changed in the textarea. Update preview if visible
+ * */
+ protected function sparkTextArea_changeHandler(event:TextOperationEvent = null):void {
+ //Radiate.log.info("Text area code changed");
+
+ updatePreviewDocument();
+
+ if (sparkSyntaxHighlighter) {
+ //sparkSyntaxHighlighter.highlightCode();
+ }
+
+ if (codeType.selectedItem == HTML) {
+ isCodeModifiedByUser = true;
+ }
+
+ lastTextAreaValue = sparkTextArea.text;
+
+ }
+
+ /**
+ * MX TextArea change
+ * */
+ private function mxTextAreaChangeHandler():void {
+ updatePreviewDocument();
+ mxSyntaxHighlighter.highlightCode();
+ // saveData(); this was attempt to add undo history to mxTextArea - didn't work
+ lastTextAreaValue = mxTextArea.text;
+
+
+ if (codeType.selectedItem == HTML) {
+ isCodeModifiedByUser = true;
+ }
+
+ isValid = XMLUtils.isValidXML(lastTextAreaValue);
+
+ if (!isValid) {
+ error = XMLUtils.validationError;
+ errorMessage = XMLUtils.validationErrorMessage;
+ }
+ else {
+ error = null;
+ errorMessage = null;
+ }
+ }
+
+ /**
+ * AS3 TextArea change
+ * */
+ protected function as3TextArea_changeHandler(event:TextOperationEvent):void {
+
+ updatePreviewDocument();
+
+
+ if (codeType.selectedItem == HTML) {
+ isCodeModifiedByUser = true;
+ }
+
+ lastTextAreaValue = as3TextArea.text;
+ }
+
+
+ /**
+ * Handle updating preview and set if code is modified by user
+ * */
+ public function updatePreviewDocument():void {
+
+ if (updateCodeLive.selected) {
+
+ if (radiate.isPreviewDocumentVisible()) {
+ var preview:Object = radiate.getDocumentPreview(radiate.selectedDocument);
+
+ if (preview is IFrame) {
+ preview.content = wrapInPreview(getTextAreaCode());
+ }
+
+ //radiate.dispatchPreviewEvent(codeModelTextArea.text, String(codeType.selectedItem));
+ }
+ //radiate.dispatchCodeUpdatedEvent(codeModelTextArea.text, HTML);
+ }
+
+ }
+
+ /**
+ *
+ * */
+ protected function showSelection_clickHandler(event:MouseEvent):void {
+ update(true);
+ }
+
+ /**
+ * Indicates when the user has typed in the text area
+ * */
+ [Bindable]
+ public var isCodeModifiedByUser:Boolean;
+
+ /**
+ * Show borders around HTML elements
+ * */
+ [Bindable]
+ public var showBorders:Boolean;
+
+ /**
+ * Use SVG button class
+ * */
+ [Bindable]
+ public var useSVGButtonClass:Boolean = true;
+
+ /**
+ * Show full HTML page source
+ * */
+ [Bindable]
+ public var showFullHTMLPageSource:Boolean = false;
+
+ /**
+ * Show only HTML
+ * */
+ [Bindable]
+ public var showOnlyHTML:Boolean = false;
+
+ /**
+ * Do not show source code. Syntax highlighting source code can be
+ * performance intensive so we allow the option to disable it.
+ * */
+ [Bindable]
+ public var showSourceCode:Boolean = true;
+
+ /**
+ * Show only CSS
+ * */
+ [Bindable]
+ public var showOnlyCSS:Boolean = false;
+
+ /**
+ * Create screen shot and add as background image of HTML page
+ * */
+ [Bindable]
+ public var showBackgroundImage:Boolean = false;
+
+ /**
+ *
+ * */
+ protected function resyncButton_clickHandler(event:MouseEvent):void {
+ isCodeModifiedByUser = false;
+ update(true);
+ }
+
+ /**
+ * Updates the code to show the selected item or document
+ * */
+ public function update(dispatchCodeUpdatedEvent:Boolean = false):void {
+ radiate = Radiate.getInstance();
+
+ if (!radiate.target && !radiate.selectedDocument) return;
+
+ if (showSelection.selected) {
+ updateTarget(radiate.target);
+ }
+ else {
+ updateTarget(radiate.selectedDocument.instance);
+ }
+
+ if (dispatchCodeUpdatedEvent) {
+
+ //if (radiate.isPreviewDocumentVisible()) {
+ document = radiate.getDocumentPreview(radiate.selectedDocument);
+
+ if (document is IFrame) {
+ document.content = wrapInPreview(sourceCode);
+ }
+
+ //radiate.dispatchPreviewEvent(codeModelTextArea.text, String(codeType.selectedItem));
+ //}
+
+ radiate.dispatchCodeUpdatedEvent(sourceCode, HTML, openInSeparateWindow.selected);
+ }
+
+ if (radiate.target is Application) {
+ targetNameLabel.text = "Application";
+ }
+ else {
+ targetNameLabel.text = ClassUtils.getIdentifierOrName(radiate.target, true, true);
+ }
+ /*
+ var functionName:String = "createEditor";
+ var result:Object;
+ if (currentState=="iframe" && !createdEditor) {
+ editor.content = "<div id='editor' style='display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;'></div>";
+ editor.validateNow();
+ result = ExternalInterface.call(functionName);
+ result = ExternalInterface.call("setEditorText", codeModelTextArea.text);
+ createdEditor = true;
+ }*/
+
+ return;
+
+ }
+
+ private function callback():void {
+ trace("CALLBACK");
+ }
+
+ private var aceEditorCreated:Boolean;
+ private var aceEditorVisible:Boolean;
+
+ /**
+ * Get a tag with less than or greater than wrapped around it.
+ * */
+ private function getWrapperTag(wrapperTag:String = "", end:Boolean = false, styles:String = ""):String {
+ var output:String = "";
+
+ if (wrapperTag=="") return "";
+
+ if (end) {
+ output = "</" + wrapperTag + ">";
+ return output;
+ }
+
+ output += "<" + wrapperTag;
+
+ if (styles) {
+ output += " style=\"" + styles + "\"" ;
+ }
+
+ output += ">";
+
+ return output;
+ }
+
+ /**
+ * Enable or disable live updating as on target change, property change and
+ * user code changes.
+ *
+ * If user unchecks and is modified then do not update.
+ * Resync button will visible for them to update themselves.
+ * */
+ protected function updateCodeLive_changeHandler(event:Event):void {
+
+
+ if (updateCodeLive.selected) {
+ radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
+ }
+ else {
+ if (!isCodeModifiedByUser) {
+ radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
+ }
+ }
+ }
+
+
+ protected function openInSeparateWindow_changeHandler(event:Event):void {
+
+ update();
+ }
+
+ protected function editor_updateCompleteHandler(event:FlexEvent):void {
+
+ var result:Object = ExternalInterface.call("updateHeight", editor.height);
+ //trace(result);
+ }
+
+ private var dataArray:Array= new Array();
+
+ private var currentData:int;
+
+ private function saveData():void {
+
+ if (dataArray.length<10) {
+ dataArray.push(mxTextArea.text);
+ }
+ else {
+ dataArray.splice(0,1);
+ dataArray.push(mxTextArea.text);
+ }
+
+ currentData= dataArray.length-1;
+ }
+
+ private function undo():void {
+
+ if (currentData>0) {
+ mxTextArea.text=dataArray[currentData-1];
+ currentData=currentData-1;
+ }
+ }
+
+ private function redo():void {
+ if (currentData<dataArray.length-1){
+ mxTextArea.text=dataArray[currentData+1];
+ currentData=currentData+1;
+ }
+ }
+
+ /**
+ * Last source code
+ * */
+ [Bindable]
+ public var sourceCode:String;
+
+ public var lastTextAreaValue:String;
+
+ public var mxSyntaxHighlighter:SyntaxHighlighter;
+ public var sparkSyntaxHighlighter:SyntaxHighlighter;
+
+ public function getTextAreaCode():String {
+
+ if (currentState=="normal") {
+ return sparkTextArea.text;
+ }
+ else if (currentState=="highlight2") {
+ return as3TextArea.text;
+ }
+ else if (currentState=="highlight") {
+ return mxTextArea.text;
+ }
+ else if (currentState=="editor") {
+ var result:String = ExternalInterface.call("getEditorText");
+ return result;
+ }
+
+ return null;
+ }
+
+ /**
+ * Put the generated code into a text area
+ * */
+ public function setTextareaCode(value:String):void {
+ var createEditor:String = "createEditor";
+ var result:Object;
+
+ if (currentState=="normal") {
+ sparkTextArea.text = value;
+
+ if (lastTextAreaValue==value) {
+ return;
+ }
+
+ sparkTextArea.text = value;
+ lastTextAreaValue = value;
+
+ if (!sparkSyntaxHighlighter) {
+ sparkSyntaxHighlighter = new SyntaxHighlighter(sparkTextArea);
+ sparkSyntaxHighlighter.timerInterval = 200;
+ sparkSyntaxHighlighter.cssString = SyntaxHighlighter.CRIMSON_EDITOR_CSS;
+ }
+
+ sparkSyntaxHighlighter.highlightCode();
+ aceEditorVisible = false; // temp for now
+ }
+
+ else if (currentState=="highlight2") {
+ as3TextArea.text = value;
+
+ if (lastTextAreaValue==value) {
+ return;
+ }
+
+ as3TextArea.text = value;
+ lastTextAreaValue = value;
+/*
+ if (!sparkSyntaxHighlighter) {
+ sparkSyntaxHighlighter = new SyntaxHighlighter(sparkTextArea);
+ sparkSyntaxHighlighter.timerInterval = 1;
+ sparkSyntaxHighlighter.cssString = SyntaxHighlighter.CRIMSON_EDITOR_CSS;
+ }
+
+ sparkSyntaxHighlighter.highlightCode();*/
+ aceEditorVisible = false; // temp for now
+ }
+ else if (currentState=="highlight") {
+
+ if (lastTextAreaValue==value && mxSyntaxHighlighter) {
+ return;
+ }
+
+ if (mxTextArea) {
+ mxTextArea.text = value;
+ }
+
+ lastTextAreaValue = value;
+
+ if (!mxSyntaxHighlighter) {
+ mxSyntaxHighlighter = new SyntaxHighlighter(mxTextArea);
+ mxSyntaxHighlighter.timerInterval = 20;
+ mxSyntaxHighlighter.cssString = SyntaxHighlighter.CRIMSON_EDITOR_CSS;
+ }
+
+ mxSyntaxHighlighter.highlightCode();
+ aceEditorVisible = false; // temp for now
+ }
+ else if (currentState=="editor") {
+
+ if (!aceEditorCreated) {
+ editor.content = "<div id='editor1' style='display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%'></div>";
+ //editor.content = " ";
+ editor.validateNow();
+ result = ExternalInterface.call(createEditor, "editor0", ExternalInterface.objectID);
+ ExternalInterface.addCallback("editorChange", editorChange);
+ ExternalInterface.addCallback("cursorChange", cursorChange);
+ aceEditorCreated = true;
+ }
+
+ settingEditorText = true;
+ result = ExternalInterface.call("setEditorText", value);
+ settingEditorText = false;
+
+ }
+
+ }
+
+ protected function editorType_changeHandler(event:IndexChangeEvent):void {
+ currentState = event.currentTarget.selectedItem.name;
+ setTextareaCode(sourceCode);
+ }
+
+ public function editorChange(value:String = ""):void {
+ if (settingEditorText || value==sourceCode) return;
+ updatePreviewDocument();
+ }
+
+ public function cursorChange(value:String = ""):void {
+ //trace("cursor change:" + getTimer());
+ }
+
+ protected function editor_resizeHandler(event:ResizeEvent):void {
+ //trace("resize from : " + event.currentTarget);
+ ExternalInterface.call("resizeEditor");
+ }
+
+ public var settingEditorText:Boolean;
+
+ private var htmlExporter:HTMLDocumentExporter;
+
+ private var androidExporter:AndroidDocumentExporter;
+
+ private function wrapInPreview(source:String):String {
+ var componentTree:ComponentDescription = radiate.selectedDocument.componentDescription;
+ var targetDescription:ComponentDescription;
+
+ if (showSelection.selected) {
+ targetDescription = DisplayObjectUtils.getTargetInComponentDisplayList(radiate.target, componentTree);
+ }
+ else {
+ targetDescription = DisplayObjectUtils.getTargetInComponentDisplayList(radiate.selectedDocument.instance, componentTree);
+ }
+
+ if (targetDescription==null || radiate.target == componentTree.instance) {
+ targetDescription = componentTree;
+ }
+
+ var output:String = "<div id=\"applicationContainer\" style=\"position:absolute;";
+ //output += "width:" + (component.instance.width + 40) + "px;";
+ output += "width:100%;";
+ output += "height:" + (targetDescription.instance.height + 40) + "px;";
+ output += "background-color:#666666;\">" + source + "</div>";
+
+ return output;
+ }
+
+ protected function mxTextArea_keyUpHandler(event:KeyboardEvent):void {
+ if (event.keyCode==Keyboard.Z) {
+ if (event.ctrlKey && !event.shiftKey) {
+ undo();
+ }
+ if (event.ctrlKey && event.shiftKey) {
+ redo();
+ }
+ }
+ }
+
+ protected function getHTMLButton_clickHandler(event:MouseEvent):void {
+ var htmlText:String = mxTextArea.htmlText;
+ trace(htmlText);
+ }
+
+ protected function showBorders_clickHandler(event:MouseEvent):void {
+ showBorders = showBordersCheckbox.selected;
+ update(true);
+ }
+
+ protected function useSVGButtonClassCheckbox_changeHandler(event:Event):void {
+ useSVGButtonClass = useSVGButtonClassCheckbox.selected;
+ update(true);
+ }
+
+ protected function showFullHTMLCheckbox_clickHandler(event:MouseEvent):void {
+ showFullHTMLPageSource = showFullHTMLCheckbox.selected;
+ update(true);
+ }
+
+ protected function setStylesInline_clickHandler(event:MouseEvent):void {
+ update(true);
+ }
+
+ protected function setZoom_clickHandler(event:MouseEvent):void {
+ update(true);
+ }
+
+ protected function showOnlyHTML_clickHandler(event:MouseEvent):void {
+ showOnlyHTML = showOnlyHTMLCheckbox.selected;
+ update(true);
+ }
+
+ protected function showOnlyCSS_clickHandler(event:MouseEvent):void {
+ showOnlyCSS = showOnlyCSSCheckbox.selected;
+ update(true);
+ }
+
+ protected function showBackgroundImageCheckbox_clickHandler(event:MouseEvent):void {
+ showBackgroundImage = showBackgroundImageCheckbox.selected;
+ update(true);
+ }
+
+ protected function showSourceCodeCheckbox_clickHandler(event:MouseEvent):void {
+ showSourceCode = showSourceCodeCheckbox.selected;
+ update(true);
+ }
+
+ protected function showOriginalSourceLabel_clickHandler(event:MouseEvent):void {
+ var selectedDocument:IDocument = radiate.selectedDocument as IDocument;
+
+ if (selectedDocument) {
+ Radiate.log.info(selectedDocument.originalSource);
+ }
+ else {
+ Radiate.log.info("Please select a document");
+ }
+ }
+
+ protected function showProjectSourceLabel_clickHandler(event:MouseEvent):void {
+ var selectedProject:IProject = radiate.selectedProject as IProject;
+
+ if (selectedProject) {
+ Radiate.log.info(selectedProject.source);
+ }
+ else {
+ Radiate.log.info("Please select a project");
+ }
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+
+ <fx:Object id="as3TextArea"/>
+
+ <handlers:EventHandler eventName="click" target="{copyIcon}" setTriggerEvent="true">
+
+ <clipboard:CopyToClipboard data="{sourceCode}"
+ targetAncestor="{this}"
+ allowNullData="true">
+ <clipboard:successEffect>
+ <status:ShowStatusMessage message="Code copied to the clipboard"/>
+ </clipboard:successEffect>
+ <clipboard:noDataEffect>
+ <status:ShowStatusMessage message="Nothing to copy to the clipboard"/>
+ </clipboard:noDataEffect>
+ <clipboard:errorEffect>
+ <status:ShowStatusMessage message="An error occurred while attempting to copy to the clipboard"/>
+ </clipboard:errorEffect>
+ </clipboard:CopyToClipboard>
+
+ </handlers:EventHandler>
+
+ <fx:String id="html5boilerplate">
+<![CDATA[<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title></title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
+ <link rel="stylesheet" href="css/normalize.css">
+ <link rel="stylesheet" href="css/main.css">
+ <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+ </head>
+ <body>
+ <!--[if lt IE 7]>
+ <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+ <![endif]-->
+
+<!--template_content-->
+
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\\/script>')</script>
+ <script src="js/plugins.js"></script>
+ <script src="js/main.js"></script>
+
+ <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+ <script>
+ (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+ function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+ e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+ e.src='//www.google-analytics.com/analytics.js';
+ r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+ ga('create','UA-XXXXX-X');ga('send','pageview');
+ </script>
+ </body>
+</html>
+]]>
+ </fx:String>
+
+ <!--<![CDATA[<link rel="stylesheet" href="css/normalize/2.1.2/normalize.css"/>]]>-->
+ <fx:String id="stylesheets">
+ <![CDATA[]]>
+ </fx:String>
+ <fx:String id="css">
+ <![CDATA[
+*, *:before, *:after {
+ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+]]>
+ </fx:String>
+ <fx:String id="showBordersCSS">
+ <![CDATA[
+*, *:before, *:after {
+ outline:1px dotted red;
+}
+]]>
+ </fx:String>
+
+ <!--- cause all padding and borders to be inside width and height
+ http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+ -->
+ <fx:String id="borderBoxCSS">
+ <![CDATA[
+*, *:before, *:after {
+ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+]]>
+ </fx:String>
+
+ <!---
+ adds zoom css for replicating preview
+ -->
+ <fx:String id="zoomCSS">
+ <![CDATA[
+IFRAME_ID {
+ zoom: ZOOM_VALUE;
+ -moz-transform: scale(ZOOM_VALUE);
+ -moz-transform-origin: 0 0;
+ -o-transform: scale(ZOOM_VALUE);
+ -o-transform-origin: 0 0;
+ -webkit-transform: scale(ZOOM_VALUE);
+ -webkit-transform-origin: 0 0;
+}
+]]>
+ </fx:String>
+
+
+ <!-- If you use .button it causes sizing issues where the size of the button is 0
+ Firefox:
+ Paste the following code into the editor after all other html code (from style tag to style tag).
+ And the class of the HTML button is set to class="button"
+
+ Fix:
+ Rename "button" to "buttonSkin" and set class="buttonSkin". In time this will point to actual skins and defined styles.
+ Look at buttonCSS2.
+ -->
+ <fx:String id="buttonCSS">
+ <![CDATA[
+.button {
+ position: absolute;
+ background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat;
+ border: 0px;
+}
+
+.button:hover {
+ background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat;
+}
+
+.button:active {
+ background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat;
+}
+]]>
+ </fx:String>
+
+
+ <fx:String id="buttonCSS2">
+ <![CDATA[
+.buttonSkin {
+ background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat;
+ border: 0px;
+}
+
+.buttonSkin:hover {
+ background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat;
+ border: 0px;
+}
+
+.buttonSkin:active {
+ background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat;
+ border: 0px;
+}
+]]>
+ </fx:String>
+ </fx:Declarations>
+
+ <s:states>
+ <s:State name="highlight"/>
+ <s:State name="normal"/>
+ <s:State name="highlight2"/>
+ <s:State name="editor"/>
+ </s:states>
+
+ <s:layout>
+ <s:VerticalLayout gap="8"/>
+ </s:layout>
+
+
+ <!-- FIRST ROW -->
+ <s:HGroup left="0" right="0"
+ width="100%"
+ clipAndEnableScrolling="true"
+ paddingLeft="6"
+ paddingRight="10"
+ verticalAlign="baseline"
+ >
+
+ <s:Label id="targetNameLabel"
+ minWidth="150"
+ color="#999999"
+ />
+
+
+ <!--
+ <s:Label minWidth="150"
+ color="#A6a5a5"
+ includeIn="editor"
+ text="This editor cannot edit in Firefox"
+ visible="false"
+ />
+
+ <s:Label minWidth="150"
+ color="#A6a5a5"
+ includeIn="highlight"
+ text="This editor has no undo or redo"
+ visible="false"
+ />
+
+
+ <s:Label minWidth="150"
+ color="#A6a5a5"
+ includeIn="normal"
+ text="This editor has no syntax highlighting"
+ visible="false"
+ />-->
+
+ <s:Spacer width="100%"/>
+
+ <s:CheckBox id="updateCodeLive"
+ selected="true"
+ label="Update Live"
+ visible="{!exportWindow && codeType.selectedItem==HTML}"
+ includeInLayout="{!exportWindow}"
+ change="updateCodeLive_changeHandler(event)"/>
+
+ <s:Button id="resyncButton"
+ label="Resync"
+ enabled="{isCodeModifiedByUser}"
+ click="resyncButton_clickHandler(event)"
+ visible="{!exportWindow && codeType.selectedItem==HTML}"
+ includeInLayout="{!exportWindow}"
+ />
+
+ <s:Button label="Preview HTML"
+ enabled="{codeType.selectedItem==HTML}"
+ visible="{!exportWindow && codeType.selectedItem==HTML}"
+ includeInLayout="{!exportWindow}"
+ click="previewButton_clickHandler(event)"/>
+
+ <s:Label text="Editor type:"
+ color="#A6a5a5"
+ visible="false"
+ includeInLayout="false"
+ />
+
+ <s:ButtonBar id="editorType"
+ requireSelection="true"
+ selectedIndex="0"
+ labelField="name"
+ initialize="editorType.dataProvider = new ArrayList(states);editorType.selectedIndex = 0;"
+ change="editorType_changeHandler(event)"
+ visible="false"
+ includeInLayout="false">
+ </s:ButtonBar>
+
+ <s:Label text="Language type:"
+ color="#A6a5a5"
+ />
+
+
+ <s:ButtonBar id="codeType"
+ selectedIndex="0"
+ change="codeType_changeHandler(event)">
+ <s:dataProvider>
+ <s:ArrayList>
+ <fx:String>{MXML}</fx:String>
+ <fx:String>{HTML}</fx:String>
+ <fx:String>{ANDROID}</fx:String>
+ </s:ArrayList>
+ </s:dataProvider>
+ </s:ButtonBar>
+
+ <c:ImageButton id="copyIcon"
+ source="{Radii8LibraryAssets.copy}"
+ toolTip="Copy the code to the Clipboard"
+ verticalAlign="middle"
+ useHandCursor="true"
+ />
+ </s:HGroup>
+
+ <!-- SECOND ROW -->
+ <s:TileGroup left="0"
+ right="0"
+ top="28"
+ width="100%"
+ clipAndEnableScrolling="true"
+ paddingLeft="6"
+ paddingRight="10"
+ verticalAlign="top"
+ verticalGap="6"
+ horizontalGap="6"
+ maxHeight="45"
+ minHeight="24"
+ visible="{codeType.selectedItem==HTML}"
+ includeInLayout="{codeType.selectedItem==HTML}"
+ >
+
+
+ <s:Button id="getHTMLButton"
+ label="GetHTML"
+ click="getHTMLButton_clickHandler(event)"
+ includeInLayout="false"
+ visible="false"
+ />
+
+ <s:CheckBox id="openInSeparateWindow"
+ label="Open in Window"
+ visible="{codeType.selectedItem==HTML}"
+ includeInLayout="{codeType.selectedItem==HTML}"
+ change="openInSeparateWindow_changeHandler(event)"/>
+
+ <s:CheckBox id="useSVGButtonClassCheckbox"
+ label="Use SVG Button"
+ visible="{codeType.selectedItem=='htmll'}"
+ includeInLayout="{codeType.selectedItem=='htmll'}"
+ change="useSVGButtonClassCheckbox_changeHandler(event)"/>
+
+
+ <s:CheckBox id="showSourceCodeCheckbox"
+ selected="true"
+ label="Show Source Code"
+ click="showSourceCodeCheckbox_clickHandler(event)"/>
+
+ <s:CheckBox id="showFullHTMLCheckbox"
+ selected="false"
+ label="Show Full HTML"
+ click="showFullHTMLCheckbox_clickHandler(event)"/>
+
+ <s:CheckBox id="showBackgroundImageCheckbox"
+ selected="false"
+ label="Show Background Image"
+ click="showBackgroundImageCheckbox_clickHandler(event)"/>
+
+ <s:CheckBox id="setStylesInline"
+ selected="false"
+ label="Set styles inline"
+ click="setStylesInline_clickHandler(event)"/>
+
+ <s:CheckBox id="showOnlyCSSCheckbox"
+ selected="false"
+ label="Show only styles"
+ click="showOnlyCSS_clickHandler(event)"/>
+
+ <s:CheckBox id="showOnlyHTMLCheckbox"
+ selected="false"
+ label="Show only markup"
+ click="showOnlyHTML_clickHandler(event)"/>
+
+ <s:CheckBox id="showBordersCheckbox"
+ selected="false"
+ label="Show Outlines"
+ visible="{!exportWindow}"
+ includeInLayout="{!exportWindow}"
+ click="showBorders_clickHandler(event)"/>
+
+ <s:CheckBox id="setZoom"
+ selected="true"
+ label="Set zoom"
+ visible="{!exportWindow}"
+ includeInLayout="{!exportWindow}"
+ click="setZoom_clickHandler(event)"/>
+
+ <s:CheckBox id="showSelection"
+ selected="false"
+ label="Show Selected Item"
+ visible="{!exportWindow}"
+ includeInLayout="{!exportWindow}"
+ click="showSelection_clickHandler(event)"/>
+
+ <!--<s:Spacer width="100%"/>-->
+
+ <s:Spacer width="16"/>
+
+ </s:TileGroup>
+
+ <s:Group width="100%" height="100%" >
+
+ <s:TextArea id="sparkTextArea"
+ top="55"
+ focusColor="#585858"
+ width="100%" height="100%"
+ fontFamily="Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace"
+ borderVisible="false"
+ paddingTop="8"
+ fontSize="12"
+ includeIn="normal"
+ change="sparkTextArea_changeHandler(event)"
+ >
+ <s:keyFocusChange>
+ event.preventDefault();
+ event.currentTarget.insertText("\t");
+ </s:keyFocusChange>
+ </s:TextArea>
+
+ <!--<controls:AS3TextArea id="as3TextArea"
+ top="55"
+ focusColor="#585858"
+ width="100%" height="100%"
+ fontFamily="Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace"
+ borderVisible="false"
+ paddingTop="8"
+ fontSize="12"
+ includeIn="highlight2"
+ change="as3TextArea_changeHandler(event)"
+ >
+ <controls:keyFocusChange>
+ event.preventDefault();
+ event.currentTarget.insertText("\t");
+ </controls:keyFocusChange>
+ </controls:AS3TextArea>-->
+
+ <mx:TextArea id="mxTextArea"
+ top="0"
+ focusAlpha="0"
+ fontFamily="Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace"
+ borderVisible="false"
+ paddingTop="8"
+ fontSize="12"
+ width="100%" height="100%"
+ keyUp="mxTextArea_keyUpHandler(event)"
+ change="mxTextAreaChangeHandler()"
+ editable="true"
+ includeIn="highlight"
+ leading="0"
+ >
+ <mx:keyFocusChange>
+ event.preventDefault();
+ //mx.controls.TextArea(event.currentTarget).insertText("\t");
+ </mx:keyFocusChange>
+ </mx:TextArea>
+
+
+ <flexiframe:IFrame id="editor"
+ top="50" left="0"
+ width="100%" height="100%"
+ includeIn="editor"
+ resize="editor_resizeHandler(event)"
+ overlayDetection="true"
+ >
+ </flexiframe:IFrame>
+
+ </s:Group>
+
+ <s:Label id="showOriginalSourceLabel"
+ paddingLeft="8"
+ paddingBottom="4"
+ color="#888888"
+ toolTip="Show original source code"
+ text="Show original document source code"
+ includeInLayout="false"
+ visible="false"
+ click="showOriginalSourceLabel_clickHandler(event)"
+ />
+
+ <s:Label id="showProjectSourceLabel"
+ paddingLeft="8"
+ paddingBottom="4"
+ color="#888888"
+ toolTip="Show project source code"
+ text="Show project source code"
+ includeInLayout="false"
+ visible="false"
+ click="showProjectSourceLabel_clickHandler(event)"
+ />
+
+ <s:Label id="errorLabel"
+ paddingLeft="8"
+ color="#f00000"
+ text="{errorMessage}"
+ includeInLayout="false"
+ visible="false"
+ width="100%"
+ />
+</s:Group>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/ComponentsInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/ComponentsInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/ComponentsInspector.mxml
new file mode 100644
index 0000000..a4e2779
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/ComponentsInspector.mxml
@@ -0,0 +1,371 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:Group 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:handlers="com.flexcapacitor.handlers.*"
+ xmlns:collections="com.flexcapacitor.effects.collections.*"
+
+ implements="com.flexcapacitor.views.IInspector"
+ width="400" height="300"
+ >
+
+ <!--
+
+ The list of components to include come from spark-manifest-defaults.xml
+ in Radii8LibrarySparkAssets. The include attribute must be set to true for them to be visible.
+
+ The component classes are included by creating a reference to them in Radii8LibrarySparkAssets.
+
+ We create an instance of the class in the mouse down handler.
+
+
+ -->
+
+
+ <fx:Script>
+ <![CDATA[
+ import com.flexcapacitor.controller.Radiate;
+ import com.flexcapacitor.events.DragDropEvent;
+ import com.flexcapacitor.events.RadiateEvent;
+ import com.flexcapacitor.managers.layoutClasses.LayoutDebugHelper;
+ import com.flexcapacitor.model.IDocument;
+ import com.flexcapacitor.utils.DragManagerUtil;
+ import com.flexcapacitor.utils.supportClasses.ComponentDefinition;
+ import com.flexcapacitor.views.IInspector;
+
+ import mx.core.ClassFactory;
+ import mx.events.DragEvent;
+ import mx.managers.ISystemManager;
+ import mx.managers.SystemManagerGlobals;
+
+ import spark.components.Application;
+ import spark.components.Group;
+ import spark.components.Label;
+
+ private var target:Object;
+ private var radiate:Radiate;
+ private var dragManagerInstance:DragManagerUtil;
+
+
+ public function activate():void {
+ radiate = Radiate.getInstance();
+
+ components.source = Radiate.componentDefinitions.source;
+ }
+
+ public function deactivate():void {
+
+ }
+
+ protected function targetChangeHandler(event:RadiateEvent):void {
+ target = event.selectedItem;
+ }
+
+ /**
+ * Listen for drag movement and start dragging if drag tolerance is met
+ * */
+ public function rowGroupMouseDownHandler(event:MouseEvent, data:Object, itemIndex:int):void {
+ var classFactory:ClassFactory;
+ var item:ComponentDefinition;
+ var application:Application;
+ var component:Object;
+ var document:IDocument = radiate.selectedDocument;
+ var rowGroup:Group;
+
+ item = ComponentDefinition(data);
+
+ dropTargetLabel.text = "";
+
+ rowGroup = event.currentTarget as Group;
+
+ event.stopImmediatePropagation();
+ //list.dragEnabled = false;
+
+ application = document && document.instance ? document.instance as Application : null;
+
+ if (!application) return;
+
+ component = Radiate.createComponentForAdd(document, item);
+
+
+ if (!dragManagerInstance) {
+ dragManagerInstance = new DragManagerUtil();
+ }
+
+ rowGroup.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ rowGroup.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);
+
+ //dragManagerInstance.listenForDragBehavior(rowGroup, application, event, component);
+ dragManagerInstance.listenForDragBehavior(rowGroup, document, event, component);
+ dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
+ dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
+ dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);
+
+ dragManagerInstance.addEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
+ dragManagerInstance.addEventListener(DragEvent.DRAG_OVER, handleDragOver);
+ dragManagerInstance.addEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);
+
+ // DRAG DROP
+ // is continued in
+ // DragManagerUtil.dragDropHandler()
+
+ // and then in handleDragDrop() here
+ }
+
+ /**
+ * Remove mouse handlers from row
+ * */
+ protected function mouseUpHandler(event:MouseEvent):void
+ {
+ // we need a custom FlexSprite class to do this
+ /*if (event.currentTarget.eventListeners) {
+ event.currentTarget.removeAllEventListeners();
+ }*/
+
+ //list.dragEnabled = true;
+ event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+
+ }
+
+ /**
+ * Handles drag drop event. This is only the first part of adding to the stage.
+ * We can prevent automatic adding by calling event.preventDefault().
+ * If we do not call preventDefault dragDropComplete is the next event to be called.
+ * */
+ protected function handleDragDrop(event:DragDropEvent):void
+ {
+ var component:Object = event.draggedItem;
+
+ // if text based or combo box we need to prevent
+ // interaction with cursor
+
+ // UPDATE THIS IN DRAG DROP COMPLETE
+ /*
+ if (component is TextBase || component is SkinnableTextBase) {
+ component.mouseChildren = false;
+
+ if ("textDisplay" in component && component.textDisplay) {
+ component.textDisplay.enabled = false;
+ }
+ }*/
+
+ dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP, handleDragDrop);
+ dropTargetLabel.text = "Drag drop to:" + dragManagerInstance.dropTargetName;
+
+ dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
+ }
+
+ private static var _layoutDebugHelper:LayoutDebugHelper;
+
+ public static function get debugHelper():LayoutDebugHelper
+ {
+ if (!_layoutDebugHelper)
+ {
+ _layoutDebugHelper = new LayoutDebugHelper();
+ _layoutDebugHelper.mouseEnabled = false;
+ var sm:ISystemManager = SystemManagerGlobals.topLevelSystemManagers[0]
+ sm.addChild(_layoutDebugHelper);
+ }
+ return _layoutDebugHelper;
+ }
+
+ private function deferredInstanceFromFunction():Array {
+ var label:Label = new Label();
+ return [label];
+ }
+
+ /**
+ * Dispatched after drag drop event. Drag drop can be canceled. If it
+ * is not canceled this event happens.
+ * */
+ protected function handleDragDropComplete(event:DragDropEvent):void
+ {
+ var o:LayoutDebugHelper = debugHelper;
+ var component:Object = event.draggedItem;
+
+
+ /*
+ // if text based or combo box we need to prevent
+ // interaction with cursor
+ if (component is TextBase || component is SkinnableTextBase) {
+ component.mouseChildren = false;
+
+ if ("textDisplay" in component && component.textDisplay) {
+ component.textDisplay.enabled = false;
+ }
+ }
+
+ if (component is ComboBox) {
+ if ("textInput" in component && component.textInput.textDisplay) {
+ component.textInput.textDisplay.enabled = false;
+ }
+ }
+
+ // we can't add elements if skinnablecontainer._deferredContentCreated is false
+ if (component is BorderContainer) {
+ var factory:DeferredInstanceFromFunction = new DeferredInstanceFromFunction(deferredInstanceFromFunction);
+ BorderContainer(component).mxmlContentFactory = factory;
+ //BorderContainer(component).initialize();
+ BorderContainer(component).createDeferredContent();
+ BorderContainer(component).removeAllElements();
+
+ // we could probably also do this:
+ //BorderContainer(component).addElement(new Button());
+
+ }
+
+ // we need a custom FlexSprite class to do this
+ // do this after drop
+ if ("eventListeners" in component && !(component is GroupBase)) {
+ component.removeAllEventListeners();
+ }*/
+
+ //o.addElement(component as ILayoutElement);
+ dragManagerInstance.removeEventListener(DragDropEvent.DRAG_DROP_COMPLETE, handleDragDropComplete);
+ dropTargetLabel.text = "Drag Complete to:" + dragManagerInstance.dropTargetName;
+
+
+ dragManagerInstance.removeEventListener(DragEvent.DRAG_OVER, handleDragOver);
+ }
+
+ protected function addItemHandler(event:RadiateEvent):void {
+ //trace("item addedd");
+
+ //radiate.target = event.eventTarget;
+
+ }
+
+ protected function handleDragOver(event:Event):void {
+
+ //Radiate.log.info("target: " + dragManagerInstance.lastTargetCandidate);
+ dropTargetLabel.text = "Drag over: " + dragManagerInstance.dropTargetName;
+ }
+
+ protected function list_dragStartHandler(event:DragEvent):void {
+
+ }
+
+ public function filterComponentsFunction(item:Object):Boolean {
+
+ if (item && item.enabled) {
+ return true;
+ }
+
+ return false;
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:ArrayCollection id="components" filterFunction="filterComponentsFunction"/>
+
+
+
+ <!-- FILTER BY NAME -->
+ <handlers:EventHandler eventName="creationComplete"
+ target="{this}"
+ >
+ </handlers:EventHandler>
+ </fx:Declarations>
+
+ <!--
+ <s:Rect>
+ <s:fill>
+ <s:SolidColor color=""
+ </s:fill>
+ </s:Rect>-->
+
+ <s:layout>
+ <s:VerticalLayout gap="6"/>
+ </s:layout>
+
+ <s:List id="list"
+ width="100%"
+ height="100%"
+ labelField="name"
+ dragEnabled="true"
+ borderVisible="false"
+ interactionMode="mouse"
+ dataProvider="{components}"
+ dragStart="list_dragStartHandler(event)"
+ >
+ <s:itemRenderer>
+ <fx:Component>
+ <s:ItemRenderer width="100%" height="100%" minHeight="22" >
+ <fx:Script>
+ <![CDATA[
+ import com.flexcapacitor.controller.Radiate;
+ import com.flexcapacitor.utils.supportClasses.ComponentDefinition;
+
+ override public function set data(value:Object):void {
+ super.data = value;
+ var definition:ComponentDefinition = value as ComponentDefinition;
+ var path:String;
+
+
+ if (definition) {
+ if (definition.icon) {
+ iconImage.source = definition.icon;
+ }
+ else {
+ path = "assets/images/components/" + definition.name + ".png";
+ iconImage.source = path;
+ }
+ }
+ }
+
+ protected function iconImage_ioErrorHandler(event:Event):void {
+ iconImage.source = "assets/images/components/BorderContainer.png";
+ }
+
+ protected function groupMouseDownHandler(event:MouseEvent):void
+ {
+ outerDocument.rowGroupMouseDownHandler(event, data, itemIndex);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:HGroup id="rowGroup"
+ width="100%"
+ height="100%"
+ verticalAlign="middle"
+ paddingLeft="5"
+ mouseDown="groupMouseDownHandler(event)">
+ <s:Image id="iconImage"
+ contentLoader="{Radiate.contentCache}"
+ ioError="iconImage_ioErrorHandler(event)"
+ securityError="iconImage_ioErrorHandler(event)"
+ width="16" height="16"/>
+ <s:Label id="labelDisplay"
+ fontSize="11"
+ typographicCase="lowercaseToSmallCaps"/>
+ </s:HGroup>
+
+ </s:ItemRenderer>
+ </fx:Component>
+
+ </s:itemRenderer>
+ </s:List>
+
+ <s:Label id="dropTargetLabel" width="100%" paddingLeft="4" visible="false" includeInLayout="false"/>
+ <s:Spacer height="4"/>
+</s:Group>
http://git-wip-us.apache.org/repos/asf/flex-radii8/blob/f370bfcf/Radii8Library/src/com/flexcapacitor/views/panels/ConsoleInspector.mxml
----------------------------------------------------------------------
diff --git a/Radii8Library/src/com/flexcapacitor/views/panels/ConsoleInspector.mxml b/Radii8Library/src/com/flexcapacitor/views/panels/ConsoleInspector.mxml
new file mode 100644
index 0000000..1b7a14c
--- /dev/null
+++ b/Radii8Library/src/com/flexcapacitor/views/panels/ConsoleInspector.mxml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:Group 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:controls="com.flexcapacitor.controls.*"
+
+ width="200" height="100"
+ creationComplete="group1_creationCompleteHandler(event)"
+ >
+
+
+ <!-- to use
+
+
+ Radiate.log.info("Document SHOW event");
+ Radiate.log.error(event.text);
+
+ -->
+ <fx:Script>
+ <![CDATA[
+ import com.flexcapacitor.controller.Radiate;
+
+ import mx.events.FlexEvent;
+ import mx.logging.AbstractTarget;
+
+ import spark.components.VScrollBar;
+ import spark.events.TextOperationEvent;
+
+ private var radiate:Radiate;
+
+ [Bindable]
+ public var logTarget:AbstractTarget;
+
+ /**
+ * The more text in the text area the slower everything runs.
+ *
+ * In one test during debug in Properties view, the time to call describe type
+ * on a target increased by 1 or 3 ms for each line of text.
+ *
+ * If the font size is 10 px and max position is 200 lines
+ * since 2000/10.
+ * */
+ public var maxScrollPosition:int = 3000;
+
+ protected function group1_creationCompleteHandler(event:FlexEvent):void {
+
+ /*
+ logTarget = new RadiateLogTarget();
+ Radiate.setLoggingTarget(logTarget, null, consoleTextArea);
+ */
+
+ logTarget = Radiate.logTarget;
+ Radiate.setLoggingTarget(logTarget, null, consoleTextArea);
+
+ }
+
+ protected function clearTextAreaHandler(event:MouseEvent):void {
+ consoleTextArea.text = "";
+ }
+
+ protected function consoleTextArea_valueCommitHandler(event:FlexEvent):void {
+ scrollToTheBottom();
+ }
+
+ protected function consoleTextArea_changeHandler(event:TextOperationEvent):void {
+ scrollToTheBottom()
+ }
+
+ public function scrollToTheBottom():void {
+ var scrollBar:VScrollBar = consoleTextArea.scroller.verticalScrollBar;
+ scrollBar.value = scrollBar.maximum;
+ consoleTextArea.validateNow();
+
+ if (scrollBar.value != scrollBar.maximum) {
+ scrollBar.value = scrollBar.maximum;
+ consoleTextArea.validateNow();
+ }
+
+ if (scrollBar.maximum>maxScrollPosition) {
+ consoleTextArea.text = "";
+ }
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:Label text=""
+ height="14"
+ right="4"
+ fontSize="10"
+ typographicCase="uppercase"
+ textAlign="center"
+ verticalAlign="middle"
+ fontWeight="bold"
+ backgroundAlpha=".15"
+ backgroundColor="#000000"
+ useHandCursor="true"
+ buttonMode="true"
+ click="clearTextAreaHandler(event)"
+ />
+ <s:TextArea id="consoleTextArea"
+ top="12"
+ width="100%" height="100%"
+ tabFocusEnabled="false"
+ fontWeight="normal"
+ fontSize="13"
+ focusAlpha="0"
+ fontFamily="Courier New"
+ borderVisible="false"
+ change="consoleTextArea_changeHandler(event)"
+ valueCommit="consoleTextArea_valueCommitHandler(event)"
+ />
+ <controls:ImageButton source="{Radii8LibraryAssets.clear}"
+ right="8"
+ click="clearTextAreaHandler(event)"
+ width="18"
+ height="18"
+ horizontalAlign="center"
+ verticalAlign="middle"
+ />
+</s:Group>