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>
