Release 4.2.0 is available and online with MXML code complete support

In this release the browser version has been upgraded to match the desktop version. With the browser version you do not need to install anything. You can visit the page and you will receive the latest version. You don’t have to download an app. There are benefits to having applications run in web browsers.

In this release we’ve fixed a bug so you can run the desktop version without an internet connection. We’ve also added code completion while editing MXML in the code editor. We’ve added in the class registry so any of the Spark, MX components or classes can be created via the code view. You can now press CTRL+Enter (or CMD+Enter) in the code view to apply your changes to the design view or press CTRL+Space bar to show code completion suggestions.

There is also a rebuild option in the HistoryInspector to rebuild the design view if part of the layout needs rebuilt. In the browser you can now drag and drop images right onto the page and they will be imported onto the design view.

The text tool has been fixed when adding text over groups. It removes the border around the editable text.

Locked components on the design view now show a red border around them. This applies when you try to select components that are inside of groups when group selection mode is enabled.

Many additional bugs have been fixed and improvements made. Download.

Release Notes:

  • removed scroll bars on container page when layout accidentally overflows in browser
  • added wmode on container page so HTML elements show above application in IE
  • updated icons for online version
  • changed to using ApplicationLoader class to load application locally. Fixes layout issues when not online.
  • removed margins from design view area
  • now loading in and registering classes from flex-config manifests for dynamic namespace to qualified class name resolution
  • fixed documentation not showing in some browsers because of calls to http in https page
  • removed focus rect around text when editing rich text
  • fixed size document to image original size call not working
  • added expand document to contents
  • using class registry to export MXML to the correct namespace
  • added support to set options when importing MXML
  • added live dragging to divider groups
  • removed margin in code editor
  • added dynamic adding of xml namespaces in code editor
  • fixed error messages showing up constantly when editing live in the code editor
  • fixed duplicate components imported when editing application code
  • added option to render typed code when ctrl + enter is keys are used
  • added code complete for MXML
  • prevented tooltip showing on lengthy changes
  • fixed editor in import window creating multiple editors

  • add rebuild in history inspector

  • added initial code completion
  • added secure redirect

  • remove check when not running on localhost

  • removed ace editor js code in Radiate.js (not needed)
  • turned off debug flags in Radiate
  • fixed when images added from the browser are not sized correctly
  • fixed bug when calling clear project home page when not logged in
  • added live dragging to left vertical column
  • added new icons to selection inspector
  • prevent transform from being enable when outline is not enabled
  • fixed bug when iframe has not been created yet in APIInspector
  • fixed bug when console inspector was not showing messages when dispatched to console
  • fixed layout issue in LibraryInspector
  • fixed ace css editor not disabled when hidden

  • added updated ace editor js to template page in RadiateBrowser

  • changed mode to gpu in Radiate Browser (testing)
  • added drag and drop of images into Radiate in browser
  • updated styles in RadiateBrowser
  • removed normalize css
  • organized startup process in main desktop and browser applications
  • changed default width and height of application
  • added addBase64ImageData method call in Radiate
  • fixed embedded image local name incorrect in exported and imported MXML
  • added support to listen to events when parsing base64 image data and load is complete
  • fixed many errors when user is not logged in
  • prevent opening FTP network window when in browser
  • fixed close application when in browser
  • changed selection toolbar to use small buttons instead of checkboxes (still needs work)
  • fixed ace editor not working in code inspector
  • reseting undo history on editors in code inspector (buggy) to prevent undo to previous selection
  • added embed images button but invisible in code inspector (needs testing)
  • fixed console inspector and ace editor bug where appendText was not working
  • redesigned DocumentationInspector
  • fixed bugs by checking for user logged in status in LibraryInspector
  • attempted to fix layout issues with click to upload label
  • dispatching animation end event in AnimatedPanelWindow
  • fixed layout issues with AceEditor in ImportWindow
  • fixed bugs in login window when running in the browser
  • attempted to fix bugs in settings window when running in the browser

  • updated how to docs on adding new features to radiate

  • showing default gravatar icon locally since it’s not coming through. sent email requesting permission to cache icon. read somewhere it was ok but sent anyway.
  • fixed warning to show color when error or warning
  • added swcs to library project instead of referencing libraries
  • attempting to get default property from MXML components
  • added support to get styles, properties and events that are set as child nodes (experimental)
  • fixed design view text editor not selecting text or losing focus on click
  • added callLater call on Radiate class
  • showing highlight around components when group selection is on (select group not component for easier drag and drop)
  • fixed text tool not placing text in the correct location. all text is on the root unless the component is a basic layout
  • added support to import default layouts on a group base container
  • removed errors for import of fill and stroke nodes
  • added try catch around addElement in importer to keep importer working in live import mode
  • added initial support to wrap text flow content even if TextFlow tag was not surrounding content
  • attempt to fix user is online status icon
  • added option to get metadata details from super class
  • added RichEditableText to list of supported components

Live MXML rendering in the browser with MXML Azzurro

One thing I’ve wanted to achieve is live MXML rendering. There has been a live rendering mode of HTML markup in Radiate for a few versions now and in Radiate version 4.0.0 we introduced basic MXML rendering. But if you just wanted code pure MXML without any application now you can. The MXML renderer is here and it’s online.

Using this application you can code MXML and see it rendered live.

Features include:

  • XML validation
  • Error annotations
  • MXML validation
  • Syntax highlighting
  • Code completion of classes, properties, styles and events
  • Drag and drop MXML files onto the application
  • Nothing to install. Due to the power of the internet you always have the latest version
  • Viewer if you want to display the results without the editor

This application does not support certain tags and does not interpret ActionScript. If anyone is interested in upgrading the UI please contact me.

Note:
If you need a code editor for your own Flex or AIR application or drag and drop support for your Flex application in the browser or you would like to support future Flex products like these check out the products page.

What comes after HTML, CSS and JavaScript?

It is said that in the beginning it took God seven days to create the heavens and the earth. That’s incorrect. It actually took one day and six days to get it to look right in Internet Explorer.

For the last ten years I’ve spent many days writing tools for web development. I work in HTML converting advanced desktop markup language into HTML markup. I work on conversion tools frequently. They say to use the best tool for the job. HTML markup was originally created for formatting text documents. I’ve come to the conclusion that HTML markup is not the best tool for the jobs that many of us have to do. It is vastly under powered. It’s time for a new markup language.

All powerful markup languages have certain goals and expectations.

  • easy to read
  • easy to understand
  • declarative properties
  • container set that helps layout components
  • components that size to content, explicit or percentage
  • containers that size to content, explicit or percentage
  • advanced positioning like top, left, right, bottom, vertical center, horizontal center
  • advanced alignment such as top, middle, bottom and baseline
  • supports states, transitions, component styling and skinning model
  • supports tools that make it possible to parse and report errors and warning

While CSS has advanced HTML markup has not. As I’ve said, I convert from various markup languages to HTML markup. It is possible for HTML to achieve some or all of these through the use of specific tags, style sheets, display modes, box sizing models, transform matrices and so on but after using advanced layout markup there’s no going back to the caveman level that HTML has been stuck at. We all know it. I’ve worked with many markup languages and MXML satisfies all these goals (the open source Apache Flex SDK is one tool that compiles MXML). I would suggest we look at MXML as the next standard for markup in the browser. Continue reading.

MXML was created to handle and render layouts from multiple design tools. It was designed to support advanced layouts and typographic from the leading design tools in the industry: InDesign, Illustrator, Photoshop, Flash and PDF and more. It was created to support vector graphics, raster graphics, advanced multi-language typography, states, transitions, cascading style sheets, bindings, filters and more. It is a document that holds a vast description of design elements and presents them gracefully.

That description is in XML format and can be parsed by any application. It is extensible and allows for additional namespaces without breaking or causing collisions. It is designed and meant for the web and applications.

Live MXML Renderer

I cringe when I hear someone ask how to get started making websites with HTML. I get asked repeatedly, “Why do I have to do back flips to do a simple task or layout?” “Well, it’s because HTML was originally created to format a text document.” “I never expected creating a website was this challenging”.

verticalcentering

After years of using various markup languages from HTML, Macromedia MXML, Android XML, Microsoft XAML, Illustrator XML, InDesign IDML, Flash XFL, PDF XFA, SVG, FXG, TLF and more I can say this with confidence, HTML IS NOT A SUFFICIENT MARKUP LANGUAGE FOR APPLICATIONS! It is for documents! As a web community we need an updated markup language! MXML is the most advanced I have encountered in all my years. Anyone implementing MXML can verify it their renderer works by comparing there MXML rendering using Mustella testing framework or by simply compiling it with the open source mxmlc MXML compiler in Apache Flex or parsing it live with the open source Live MXML Editor.

As a web community using many different frameworks and technologies we desperately need an updated markup language now. Would it be a good idea to adopt MXML as a starting point and continue to develop it as an open source community?

You can view the online MXML editor here or download the Live MXML editor / renderer here. You can download the open source Apache Flex SDK here and compile MXML into applications that run in the browser, on the desktop or on mobile devices. MXML is used in all of them.

You can read my previous post about MXML here.

Note: Would it take a long time to develop it and gain adoption? It may. Or it may be possible to parse MXML and reuse existing code. It may take ten or twenty years for it to be adopted but we and our descendants will have something that makes much more sense than what we did. And the sooner we start the sooner we will arrive. But we have a head start with MXML in that we have software that already renders it and it can be used as comparison. It can even be used immediately with MXML parsers. We also have a head start in that the browser manufacturers can apply their existing layout rules to a new set of elements. Finally, the MXML compiler and MXML Flex SDK is open source so the parsing and rendering code could be compiled into the browser software and that is with or without plugins.

In another form MXML can be compiled down to bytecode. One network request is much much faster than multiple requests over the network. Instead of ten to twenty seconds for your page to load it would take one to two seconds.

Disclaimer: I’ve been working on a design and development tools that read and write MXML documents. It generates MXML for you as you use the design tools or allows you to see MXML rendered live. This software has been available for around 4 years. There’s no pay wall. You can download it for free or purchase a copy. But I’m not promoting my software. I’m promoting MXML. The reason why I’m promoting it now though is because I’m tired of dealing with HTML. Everything in the web and software world is advancing. It’s time for HTML markup to be part of that progress.

Live MXML Rendering, Transform Controls, Graphic Primitives and Text Tools in Version 4.0.0

New Features:
– Text tool – a tool to add text to the design view
– Transform controls – adds resize handles to resize components
– Added support for graphic primitives such as Rect, Path, Ellipse and Line
– Basic live viewing of MXML as you type – what you type in code editor updates the design
– Saving image data to the MXML document so you don’t have to upload to a server
– Showing image data in HTML preview when image is not uploaded
– Added support for selecting and positioning images in RichTextEditor
– Faster import of MXML
– Numerous bug fixes

There have been a few major updates this release that may cause issues. I hope to have a dot release to fix them but please report any bugs you find.

Note: I’ve added the Live MXML Editor application (now updated to version 1.1) to the download page.

Release notes:
– updated how to documentation on adding a new tool
– moved all debugging options to be set in application complete event
– added new text tool for adding text to the stage
– added icons for graphic primitives
– added document updated event for generic updated use
– added option to import target components into a position in a container
– added option to specify a default value when using a clear button instead of settings to undefined
– fixed cases where the description was not being passed to the history events
– added option to remove properties from components during export
– setting default fill and stroke when creating graphic primitives
– fixed bug where import was not importing into a container
– tried to fix merge last history events with mild but success. undo has issues
– added swap history events in history manager
– added support for rotation but has too many issues to enable
– added size constraint to prevent sizing backwards
– fixed numerous cases where object was hidden when dragging and dropping in DragManagerUtil
– adding option to embed image data in MXML when image is not uploaded to a server. experimental. does not export correctly when document is closed.
– added support to export and import stroke and fill data from graphic elements
– added show transform icon
– fixed drop location from resizing when too much content
– added stroke and fill property inspectors
– added basic caveman style code importing and live coding to Code Inspector
– showing icon for showing nested elements in CodeInspector
– added error messages group to CodeInspector
– fixed some event descriptions in HistoryInspector
– added open button in projects list on welcome screen
– added basic support for setting properties on target properties for things like element.fill in PropertiesGridRenderBase

  • added events for beginning and end of undo history
  • set validate layout default to false in apply changes method in Radiate (if layout is not updating check this)
  • fixed numerous cases where event description was not saved
  • added capture properties and capture sizing property values methods in Radiate
  • added method to get valid advanced constraints layout sizing and positioning properties object from component size and position model
  • fixed case where taking snapshots of graphic elements to put in library was not working
  • fixed cases where beginning and end of undo history events were not dispatched
  • added a flag to Project to tell when opened from metadata
  • bug exists where closing a project and then opening (not found yet)
  • fixed sizing with transform handles
  • fixed group not being selected when selecting GraphicElements
  • fixed undo and redo keyboard shortcuts not being dispatched at times
  • added legacy redo of keyboard.Y + ctrl
  • fixed bug where selection was not updated when element was deleted
  • fixed bug where selection size and position was not correct when using undo and redo
  • fixed cases where element would disappear in DragManagerUtil. still occurs but not as frequent.
  • now creating image data for HTML preview when image is not uploaded
  • now positioning graphic elements correctly in non basic layout (except Line bc we need to refactor SVG export)
  • added constants for size and position to MXMLDocumentConstants
  • fixed bug in MXML importer that prevented importing
  • fixed bug where projects were not showing up in project inspector
  • removed Close Project feature bc documents are getting lost or removed and document source xml loses all attributes after close or close and open
  • fixed case where warning icon was always enabled
  • selecting a project in the project inspector no longer opens it now you must double click on the list item
  • added refresh icon to project inspector
  • fixed closed projects looking like documents. now look like closed folders
  • showing tooltip in history inspector showing properties that have changed when hovering over history item

  • added support for maintaining aspect ratio when resizing with transform handles

  • when resizing rounding x and y properties to int
  • added possible fix to components disappearing when performing some drag and drop operations
  • getting some validation on application when not online which is closer to solving the issues
  • added support to drill down into selected objects

  • added go to design screen method

  • added basic properties inspector for paths
  • added transform support for graphic elements
  • fixed missing image icon for graphic elements

  • disabled dispatching events when parsing MXML on a new document

  • dispatching history change event with new parameters
  • added listener to RichText instances to invalidate the size so remote inline images display
  • fixed bug where history event description was not being set
  • removing references when removing document history
  • added listener for history change event in Selection
  • added call later for history change event in Selection since target size is sometimes zero
  • disabling transform checkbox when document is scaled because of bugs
  • removing transform handles when document is scaled
  • parsing the resize value when using transform to integers
  • fixed persistent resize handles showing by unregistering components when showTransform is disabled
  • fixed incorrect handle positions by setting size in updateTransformRectangle method in Selection
  • added graphic primitives Rect, Path, Line and Ellipse
  • resizing does not take into account percentages or advanced constraints
  • adding default fill and stroke to graphic elements
  • adding id to graphic elements on HTML export
  • added duration of import on sourceData object
  • fixed bug in dragging and dropping of graphic primitives

  • added InsertImageTest application

  • added TransformTest application
  • added document close event in Radiate
  • added initial support to drop remote images from a URL onto Radiate
  • added duplicate document
  • fixed bugs related to documents not being closed or closing properly
  • fixed bugs related to opening and starting from example projects
  • added initial transform support (does not size or position when scaled, doesn’t update always, disable is not working, starting from scratch each time so slow)
  • added VisualElementHandle class with static properties for setting styles on transform controls
  • added font smoothing on HTML export
  • added support to export component alpha, textAlign, border, padding in HTML export
  • added support for autoPlay, loop and muted on video player in HTML export
  • added tool tip to component breadcrumb trail showing number of descendants
  • sorted projects by date saved on welcome screen
  • removed label in busy indicator in Settings screen
  • fixed missing documents when document is deleted by calling save on project
  • showing message when saving or opening a document from the documents inspector
  • added open document in browser button back into documents inspector
  • added enable word wrap in console button
  • clearing code editor when document is closed
  • showing render and complete time in code editor when updating or previewing an HTML document

  • fixed case where values that were false were not exported in MXML

  • fixed line break showing before custom HTML override code

  • added check for update menu item

  • ordering new update window to front of application correctly

Known Issues and workarounds:
– Text tool does not work with Labels only RichText components. Switch to Selection tool and double click on the label
– Text tool does not position the text correctly when over some container groups. If the text appears in the incorrect location move it
– Undo does not work correctly when using live editing of MXML. Go to the history panel and click Open and then click the last item in the history list. This rebuilds the document.
– Keyboard shortcuts for undo and redo do not work unless Selection tool is selected. Use undo and redo buttons or menu items.

Rich text editing, custom HTML markup in Release 3.0.0

In this release the most significant change is stability in saving and restoring projects and documents. Next, in no particular order, is live rich text editing, customization of HTML output, better live HTML editing with scroll position lock, opening files from the welcome screen (through drag and drop) and better HTML export support with more styles exported. There are also more information messages to give you better feedback on asynchronous actions. This release also updates the build to latest AIR version to support native drag and drop, and more.

Rich text editing
With rich text editing you can now format text using familiar editing tools. To use, simply drag a RichText component on to the design view and double click on it. A call out will open with an rich text edit bar.

Rich text editing

Rich text editing with a RichText component

More rich content

rich text

TLF TextFlow markup

TLF TextFlow markup

HTML Features
HTML output has got a lot of attention this release. In the past you were able to add your own CSS styles to any element. Now you can add your own attributes. You can also add markup before the elements markup and after the elements markup. You can now even overwrite the element markup to add your own HTML or JavaScript.

For example, select a Label component and then open the HTML section of the Properties panel.

Label text

Label component

New HTML features

Property Inspector showing HTML properties

Adding styles to the element in CSS

Your styles are added to the element CSS selector

Adding additional attributes to the element

Your attributes are added to the elements markup

Adding code before element markup

Adding code before element markup

Adding code after element markup

Adding code after element markup

Using your own element markup

Using your own element markup

You can add your own JavaScript, CSS and HTML using these powerful features. They are windows for web developers into the export process.

The following will show an alert when you click on the label:

Adding an event to an attribute

Listening to a click event

The next example adds JavaScript in a script tag after the element’s declaration:

Adding a script tag after an element's markup

Adding a script tag after an element’s markup

Retain scroll position in live preview
One of the most useful features is editing code and seeing the changes updated live. But when that content is scrolled off the screen, scrolling back to the last position gets old quick. With this update the scroll position is retained as you edit.

You can’t see it in this image but if you could, you would see that as you type in the code editor the page remains locked at the scroll location even as it’s being updated live.

Retained vertical scroll position as you edit

Retained vertical scroll position as you edit

See the full change log here

Release 3.0 Change log

Change log

  • added button to add namespaces when importing MXML in ImportWindow
  • added HTML tag name override in HTML properties
  • added HTML override in HTML properties
  • fixed bug in CodeInspector when document is null
  • added support to drop files on application when at welcome screen
  • fixed bug where project was not loading recent projects on welcome screen
  • added View in Site Scanner to menu bar options
  • fixed export of TLF to HTML where font size was not included in new extended TextFieldHTMLExporter2 class
  • added support for importing and exporting of TLF TextFlow in MXML markup
  • added initial support of saving individual XML nodes when importing from MXML document
  • added support to report errors in imported TLF TextFlow markup
  • added initial support to export display object filters to MXML
  • turned off option to set explicit size in HTMLDocumentExporter (may cause issues)
  • fixed missing styles on body tag including color, background color, padding, typographicCase and tracking
  • fixed missing styles padding and scroll policy on groups and border container and other exported components
  • exporting TLF textflow markup to HTML
  • fixed bug where only first paragraph of HTML was exported from textflow
  • added support for minheight, maxheight and minwidth, maxwidth in exported HTML
  • fixed bug where cornerRadius value did not include “px” rendering it ineffective when exported to HTML
  • fixed bug where no document selected caused error in Selection
  • added xml property on document to save a reference to the original XML of an imported MXML file. not fully used yet
  • added componentDefinitionAdded event in Radiate
  • defining TextFieldHTMLExporter2 class to be used when exporting to HTML from a TLF text flow in Radiate
  • added an attempt to fix the layout going wonky when not connected to the internet after loading a Document with a SWFLoader called resizeFix() in Radiate. doesn’t work
  • fixed bug where if value of a property was zero then it would not appear in the MXMLi
  • added a visual message when MXML has import errors
  • added additional applications for testing future design time rich text editing
  • Added RichTextEditorCallOut testing application. Can be removed or simplified.
  • Added documentationChange and consoleValueChanage to Radiate
  • Added support to get namespace attributes and nodes values in getPropertiesStylesEventsFromNode in Radiate
  • Added support to format text on the design view using a new RichEditableTextBarCallOut in Radiate. Experimental.
  • Added support to open documentation internally in the panel by default
  • Added support to export custom HTML before and after exported content in HTMLDocumentExporter
  • Added support to export custom attributes to an exported HTML element in HTMLDocumentExporter
  • Fixed bug where HTML text was being set as the content of a HTML TextArea. Now setting to normal non-formatted text.
  • Fixed indentation bug when adding an anchor
  • Checking for duplicate identifiers and logging an error in the sourceData.errors array if found
  • Fixed bugs where component definition was not found during MXML export
  • Fixed bug where import and export of TextFlow content was not imported when using different namespaces
  • Explicit sizing was turned off in HTML export causing sizing to content issues. Needs additional work to check for auto size to work. Set explicit size or set child elements to position relative to support some cases
  • Fixed bugs in LayersInspector when nothing was selected. Needs work
  • Showing console panel when showing Project or Document source from menu in MainView
  • Showing info message when opening a project
  • Added info messages when no documents were open when clicking on any of the buttons in the RunToolBar
  • Console Inspector panel now has a scroll to end button
  • Constraints Panel is now disabled if nothing is selected
  • Documents Panel is now showing info messages before performing actions
  • In the HTMLInspector panel, the HTML before, after and custom textareas support tab key
  • Fixed MXML import warnings from specialized namespace attributes
  • Made Save Document before close window clearer
  • fixed incorrect URL for the browser screenshot and site scanner sites
  • added support for setting basic fonts or all fonts to RichTextEditor pop up
  • no longer backing up locally since it is not managed
  • preventing a bug that causes documents to have empty source code when saved
  • fixed cases where example documents were not saved or saved incorrectly
  • fixed projects not saving documents and projects correctly
  • showing more information when calling show document or show project menu items
  • fixed project list not refreshing after project deleted
  • updated descriptors to use AIR 23
  • now showing all fonts in editor bar when editing rich text
  • fixed first item pushed down when exporting rich text TLF to HTML
  • fixed TLF markup collapsing whitespace during export to XML
  • fixed TLF markup collapsing whitespace during import to XML
  • now saving the document before using functions from RunToolBar
  • restoring last scroll bar position when previewing document in HTML preview
  • fixed bug where new documents weren’t saved to existing project
  • fixed indent issues in rich text output in HTML

Release Notes for 2.6.0

In this release fixes a few usability issues. When editing text by double clicking on the label on the stage the text could not be selected and the cursor would not work. It was then hard to select any other component. This has been fixed.

The other fix is the style name was not getting exported. So if you were exporting to HTML and you specified a style name or (class name in HTML) it was not exported with the HTML element tag. This has been fixed.

Also, fixed is new user registrations. When registering the message to activate your account was not shown and the process may never be finished. Also, the new user email was not being sent due to new changes on the server. These have been fixed.

Download