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.
constraints

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

HTMLDocumentExporter
– 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