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.


Version 2.5.1 adds full support for constraints in HTML export, bug fixes and more

In this release we’ve completed major HTML export improvements, registered for image, PSD and MXML document file types, made reporting errors easier, fixed and improved import of PSD, added easy copy MXML to clipboard button, inline documentation and more.

You can now view the documentation right in the application. Click the develop perspective and then the Documentation tab. On the left is a list of help documents and on the right is the documentation itself.

Screen Shot 2016-05-05 at 4.09.27 PM

With registered file types you can drag and drop an image or document onto the application icon before it’s even open and it will open with the file you dropped onto it. You can also use “Open with…” and Radiate will show up as images, PSDs and MXML documents. The document is resized to the same size as the image and then if it’s too large it is scaled to fit into the view.

Added a New Document button that doesn’t require you to create a project to work on an image, PSD or mockup. Before you had to create a project, name the project and then drag and drop an image or document onto the application. Now you can click New Document or drag and drop an image on the application itself and it’s opened right away.

Screen Shot 2016-05-05 at 4.06.30 PM

Error reports and console log messages can now be sent easily with the new console log inspector buttons. When a message appears at the top of the screen it’s added to the console logs. You can then open the Console Logs Inspector and see a list of all previous messages. Two new buttons have been added: Share and Copy to Clipboard. Clicking the copy to clipboard button copies the log message to the clipboard. Clicking the Share button opens the Contact Window and enters the message into the email body contents field.

Screen Shot 2016-05-05 at 4.12.37 PM

When exporting to HTML we now stopped using divs as wrappers around some exported HTML elements. This results in much cleaner and easier to work with markup.

Screen Shot 2016-05-05 at 4.15.46 PM

Exported HTML markup now has full support for the following positioning constraints in all major browsers:

  • top left, top right, top center
  • center left, center, center right
  • bottom left, bottom right, bottom center

Before that we only supported top, left, bottom and right and horizontal centering would break in many cases.

The following image shows constraints working in numerous browsers. On the edges are the HTML elements and their location described eponymously. On the inside box, which is centered vertically and horizontally, is a group that has the design embedded in background (and tinted red) and then the HTML elements positioned on top of them.

You can view the constraints page in your browser and test it here.

It also supports vertical align middle in horizontal groups much more accurately. The first image is a screenshot of the design in Radiate. The second is a screen shot of the same design in different browsers.

Screen Shot 2016-05-05 at 3.47.05 PM

Screen Shot 2016-05-05 at 3.49.31 PM

You can view the vertically align horizontal group page in your browser and test it here.

It is much easier to test and compare HTML output. Select the container of the element you want to compare and in Properties > HTML options select embed background image checkbox. Then, click the Preview in internal browser. An embedded snapshot from the design time design is embedded in background of the runtime HTML. This is called onion skinning and used in animation when comparing from frame to frame. In this case the snapshot is in the background of the container. The HTML elements are positioned above the background image and you can see a comparison. If you then save and publish the file you can click the View in Browser shots command in the Commands menu.

Screen Shot 2016-05-05 at 3.50.46 PM

Screen Shot 2016-05-05 at 3.51.14 PM

Additional HTML improvements:

  • fixed font styles not applied to numerous HTML elements
  • switched from using line-height to align items vertically to using full height spacer element.
  • removed numerous cases where wrapperTagStyles were added to HTML elements on export. may cause issues but seems they were not removed correctly with other more recent changes
  • fixed user styles not added to numerous text HTML elements
  • added no repeat as default option to embedded background image
  • added support to horizontally and vertically center an element using transform and translate by default.
  • fixed when convert to image would show child elements

Major Bug fixes:
– Import of PSD was not working correctly in the last update
– Invalid property error numerous times through normal use

Bugs not fixed:
– Undo and redo sometimes remove the previous selected targets. If this happens, a workaround is to go to the history panel and click the Open row to revert all changes and then select the last item in the list. This will recreate the document. This is a major bug that was found just before this release. But it seems to exist in prior versions.
– Drag and drop in the layers inspector is sometimes off by one index. For example, if you start to drag the first item a line will appear before it or after it. If the line is after it then it is added after the next item.
– Drag and drop in the layers inspector sometimes selects the incorrect item after a drag and drop.

Release notes:
– updated howto.txt
– fixed issue when exporting release build for registered file types
– added function for key modifier to use CTRL+S on win and CMD+S on mac
– when using setTargets not attempting to perform invalidation
– fixed bug in layers inspector creating incorrect name when editing layer name
– added support to open pop up with error message from console log inspector
– added copy to clipboard for log message
– set Group default minWidth to 20. should just set width size and not minWidth size
– added support for dragging and dropping MXML, PNG, JPEG, GIF and PSD onto application icon in desktop
– added support for “open with” in operating system file menu
– added support to check for online connection
– added new event for when an asset is loaded
– added isUserOnline property (not enabled by default at this time)
– added support to scaleToFit to prevent scaling up if selection size is smaller than document size
– fixed broken import of PSD due to changes else where related to setting default values
– when importing PSD resizes document to fit PSD and then scales the view to fit full image
– adds composite of PSD to library when importing
– added getMXML that gets the MXML from the document
– fixed bug where duplicate was not dispatching addItems event
– added support to paste an MXML document onto the application
– added support to create a new document and project from a file (for example, if invoked by dropping PSD on icon)
– added initial support to add events to when creating property and style changes or history events
– added moveElement2 that accepts single parameter for styles, events and properties rather than uses three parameters. it also checks object members are valid.
– added third parameter to moveElement for events
– added support to add elements to Canvas or Container classes from Flex 3 mx classes
– added support in moveElement to remove constraints from properties list and add them as styles. this prevents objects storing styles and properties data from containing both values
– added third parameter to addElement for events
– added support to document updateComponentTree when adding new elements
– added restore image to original size command
– added sizeDocumentToBitmapData size method
– added parameter to pass in a different target for sizeSelectionToDocument method
– attempted to fix multiple checked items in windows in menu bar
– added parameter to pass on to document importer and exporter classes to dispatch events
– added copyCodeToClipboard in RunManager
– added check to see if keypresses occur when stage has focus but also text input in item editor and prevent it
– fixed no error for when importing MXML and class was not supported message
– fixed layer name not showing up on MXML import
– rewrote Breadcrumbs to support ComponentDescription instead of old VisualElementVO tree
– fixed bug where component tree in Layers Inspector was not updated on history changes or add new items
– attempted to fix a bug where items aren’t selected in LayersInspector when component tree is updated. still is buggy
– fixed error when selected target was not in component tree and error was generated trying to set the alpha property
– fixed key events being dispatched and tree responding as you typed in a new layer name in a text input
– added New Document button to welcome screen so you don’t need to go through creating a new project pop up
– when importing a PSD shows a message that it is importing
– added new Documentation view that shows help inline
– fixed error in ImageProperties when selected target was not an image component
– fixed bug when internal HTML document viewer was visible and code inspector opened that HTML document was blank
– when new document is created or old document deleted saves the project only not all documents
– added button to copy MXML to the clipboard in DocumentsInspector
– added support to change layer name in LayersInspector
– added better tool tip message to indicate an asset was not uploaded yet rather than showing null
– fixed case where after pressing import the import window is still open. window was not showing message. now shows message and then closes window. may change the behavior later.
– added stack trace to log data

– stopped using divs as wrappers by default around exported HTML elements
– fixed font styles not applied to numerous HTML elements
– switched from using line-height to align items vertically to using full height spacer element. better option is to use a pseudo after style with empty content and same styles or optionally support flex box. table and table cell also work but space in-between may be an issue.
– removed numerous cases where wrapperTagStyles were added to HTML elements on export. may cause issues but seems they were not removed correctly with other more recent changes
– fixed user styles not added to numerous text HTML elements
– added no repeat as default option to embedded background image
– added useTransformCentering option
– added support to horizontally and vertically center an element using transform and translate by default. uses display table but might be able to use display block. display table seemed to support when the element did not have explicit size set but that may have been unrelated problem causing the issue.
– fixed when convert to image would show child elements

Giving and Donations and Progress for the Open Web

A few of the tasks involved in making software work is having the tools and resources to create and test that software. My goal has been to make web development better for designers and developers targeting HTML web, Flash web, Flex and mobile and desktop AIR. Read more at opening up the MXML specification for W3C.

I’m currently running into bugs on Windows that don’t show up on Mac which is what I have. To properly test on Windows I would need to either get a Windows machine, or a Windows VM for Mac. A windows VM would probably cost less but I have on average 5 GB free space. My Macbook is Mid 2011, 128GB and built in Intel graphics card. It’s about 5 years old at this point. The battery also needs serviced.

So for me to test on Windows I would need:
– the following components:
– a larger hard drive (macbook air uses an SSD internally)
– an upgrade to VM ware fusion to run my 30GB vm file or alternative vm with windows and windows key
– or instead of an upgrade to windows fusion a windows dvd so i can dual boot)

  • or a newer Macbook that I can dual boot with windows (have to find my old windows XP key, Windows DVD and remote DVD drive since Macbook AIR doesn’t have a DVD drive)
  • or a somewhat recent windows machine or laptop since windows xp is not supported by Microsoft maybe windows 7 or greater?

Of course there’s a much easier way. Someone download and test each build on their windows machine and report bugs, improvements and provide feedback.

I ask for computer hardware because many times people in our field have parts lying around collecting dust.

I thought about crowd funding this project but crowdfunding is a one time thing. After a successful campaign I could run out of money and sometimes new ideas come up that might take more money to fund. None of this would matter if I was getting plenty of sales but it’s not the case yet and I think it’s because it’s not quite there yet in meeting the needs of any particular community. Designers might enjoy it but it doesn’t have all the design features they’re used to in other tools. Developers might like it but it might be too limiting for editing code at this time.

So far it’s good for getting a design to layout how they like in the design view inside the program. It’s ok for getting the same design published online as an HTML page, available to visit at a URL. It’s pretty good for generating MXML but not all MXML. It’s good for saving projects online but not locally. It’s ok for exporting MXML and HTML locally but uploading to FTP is spotty as it doesn’t support HTTPS (not sure how to do this yet). It’s ok to export one file but not a whole project.

So I’ve looked at patreon but it’s confusing. I’ll try it again but any suggestions would be welcome. Buying 100 copies would also be nice. There is a donation button on the front page no one has pressed. Think about it, you could be the first! Think of the fame!

New support forum at Google Groups

I’ve added a new support forum at!forum/radiate-support. Please use this for any new questions and feedback.

Screen Shot 2016-01-29 at 8.25.01 AM