| <?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> |
