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

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

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 https://groups.google.com/forum/#!forum/radiate-support. Please use this for any new questions and feedback.

Screen Shot 2016-01-29 at 8.25.01 AM

How to create a better web development experience – Use the existing MXML Specification

Over the last 10 years I’ve been using Flex MXML markup to make pixel perfect layouts that create and run in mobile, desktop and web browsers. It has been an environment that made all projects a blast. Before that I was a web based developer using HTML, CSS and JavaScript. This environment was one of the most frustrating, under developed, misappropriated set of technologies to build or design anything more than a text and pictures document. Hence, it was a terrible fit for applications.

But the HTML stack has improved and continues to improve. However, many problems exist when you rely on the browser to layout and position your content using HTML markup. First, there are different layout types, with different layout rules. Many are confusing and do not make sense outside of the context of a document. For example, a Division element stretches to fill all available space on the screen by default but not the available height. An Span element on the other hand, ignores all width and height sizing that you might require and then fills only the space of it’s content. There are many quirky layout rules that don’t make sense when trying to layout an application.

These type of issues make sense in 1990 when the internet was about sharing documents. Now, we are creating online stores, advanced interactive social networks, inline social video games, online tv and video sites. Many new and different types of applications are being created and the new wine is being poured into old wine skins pouches (this results in the old wine skins pouches to stretch at the seems and burst).

In the early 2000s Macromedia and Adobe recognized the HTML stack was stretched into doing things it was not original designed to do. They sat down with many companies, many web developers, many application architects and asked an important question:

If we could redesign the web today, knowing what we know, knowing what people are building and what people need what would it look like?

With this in mind, Macromedia and then Adobe (who purchased Macromedia) went on a quest to create all the components necessary to create a perfect environment for accomplishing these goals. Those goals included:

  • markup that was easy to read and write
  • a programing language with advanced object orient programming
  • a user interface that can take advantage of the benefits of Cascading Stylesheets
  • a set of preset collection of components that could used in layout
  • a compiler to check for and prevent errors at runtime
  • a collection of runtimes that allowed your application to run on the most popular platforms without changing your code base. This means you can build an application with one code base and export it to web, desktop and mobile without changing your code and get the same pixel perfect results. Instead of multiple teams you can have one team and focus on a better product rather than maintaining multiple code bases

This product was named Flex and used MXML for markup and layout, CSS for styling and ActionScript3 (an advanced optionally object oriented version of JavaScript). As soon as I started using Flex (after using HTML, JS, CSS, Flash 7 and ActionScript2) my world opened up. I could create applications and it was fun. It looked the way I wanted. It was performant. As a content creator, originally a designer, it was amazing.

Now, after spending years of energy and time learning Flex, creating applications and then later fighting for the Flash platform I’ve come to the conclusion of a couple of things.

  • Flash will never be on iOS (iPhone or iPad). You are able to export a Flex or Flash project to a native iOS mobile app using LLVM but an app is does not have the benefits of the ubiquitous nature and ability to run in a browser.
  • Apple may never upgrade it’s Safari browser with necessary features. All the new HTML5 web features may never see the light of day in this browser. This choice by Apple prevents the web from progressing. So an HTML alternative may be necessary. A boycott by developers of the Safari browser may be more effective.

In these cases, I would suggest that browser manufacturers instead agree to support the MXML specification. It provides a very clear layout and markup language, supports CSS and is designed for the web. It fixes numerous web related issues. Most of all, you can use the existing MXML and the Flex compiler to confirm the layout, look and functionality of the markup.

<s:HGroup width="100%" verticalAlign="baseline">

    <s:Label text="Export:" 
         color="black"
         fontWeight="bold"
         minWidth="120"/>

    <s:RadioButton id="selectedDocumentButton" 
         label="Selected Document" 
         color="black"
         selected="true"
         groupName="amountOfDocuments"/>

    <s:RadioButton id="allDocumentsButton" 
         label="All documents in project" 
         minWidth="120"
         groupName="amountOfDocuments"/>

</s:HGroup>

Constraints Example

Screen Shot 2016-02-18 at 6.09.59 AM

Being able to see and test MXML documents in the browser are very close to being possible. A few months ago I created a Live MXML Editor app that lets you see code rendered live (new versions on the download page). Using Mustella, an open source Flex SDK testing harness, MXML documents can be rendered in the Flash or AIR Runtime and then that rendering can be compared via the software to a browser manufacturers rendering. This allows browser manufacturers to implement and test layout and CSS support and confirm it using tools that exist now.

This specification will allow a structured, strongly typed UI and layout for browser manufacturers to aspire to. Using the Flex compiler you can take any MXML document and export and view it in the browser. With a companion web app, which would probably take a week or two to develop, you would be able to type MXML live using the Flash runtime and in time, see and compare the output to the same MXML rendering generated by the browser. The Flash runtime would be the baseline.

Note: As Flash has been unpopular in some in the media it is loved by millions of developers (and users who mostly enjoy it’s features without knowing what it is or has done for them on sites like YouTube, Vine, Vimeo, Facebook, Google, etc). The downside and upside is that Flash is developed by Adobe. This has been a blessing but also at times a pain. Having a single vendor prevents fragmentation and they are rapid to address security issues and bugs but at the same time they control what features are added and bugs that are fixed. Even so, they have a multitude of unit tests and stringent quality control. The same code written in 1998 runs the same in the latest version of Flash and the latest Flash app or game runs exactly the same across browsers, operating systems and devices because of their abstraction layer. The main downside to the Flash Platform is Adobe not allowing open source development. It is proprietary.

The solution, I firmly believe, is to adopt the MXML markup specification to the W3C and implement it as a standard. This will allow browser manufacturers a way to help developers with a consistent language, a way to help users with consistent and expected results, and a way to help manufacturers with an open source way forward to implement an awesome language specification completely in their control and time frame. This allows the benefits of MXML across browsers, and platforms when plugins aren’t available. The tools to view, verify and compare a browsers implementation to the Flash Runtime allow manufacturers a way to test their implementation. The existing browser rendering engines can start by creating tags that have the predefined layout rules described by MXML and then comparing them to the Flash Player’s rendering using bitmap compare or Mustella testing suite.

FYI Adobe donated the Flex SDK to Apache and it’s now being developed and maintained as open source by a community of developers. Any browser manufacturer developers can join and improve MXML and Flex. Browser manufacturers can test their MXML interpreters and make sure it works in their browser and Adobe and or the Apache Flex community can test their MXML interpreters and make sure it works in the Flash and AIR runtimes (the same runtimes that run in the browser, as iOS and Android apps, and as Mac, Linux and PC apps).

Release 2.4.0 – Browser screen shots, site scanner, new examples, and bug fixes

In this release we have added a browser shots comparison, site scanner report service and a few other important bug fixes. If you were using constraints you might not have been able to save your file. This update fixes that.

The Run Toolbar is the focus of this update. From here you can run browser shots, site scanner, open the document in the internal (webkit browser), open the document in your default system browser (Firefox, Safari, Chrome, etc) and finally open your home page.

run-tool-bar

The Site scanner and Browser Shots are both provided by Microsoft. You can read more about Browser Screenshots and Quick Site Scanner.

The previous menu bar has been converted to a native menu items. This provides many native desktop application features such as minimize, zoom, enter full screen, bring all to front, a nice About pop up, hide Radiate, hide others, show all and a native quit menu.

New settings have been added. You can now choose your own Browser Screenshot and site scanner websites. And if you change your mind you can revert back to the default.

Some new examples have been added in the Getting Started Project. These should help you get started and learn about some key features. I’ve added screenshots below:

Constraints Example
Constraints Example

Vertical Group Examples
Vertical Group Example

WordPress Keywords Examples
WordPress Keywords Example

WordPress Keywords Example (running online)
WordPress Example Live

NOTE: There is a small bug in the live text editing. When you double click on a text field on the stage, the text is all highlighted. You can move the cursor with the cursor keys, but if you try to click to move the cursor, it stops editing and you can’t select any other component or do much of anything else. A temporary solution is to double click again on a word that was in the text field to select it and then click outside of the text field so it loses focus. A fix is currently being worked on.

NOTE: The new browser comparison features, that show how the HTML web output looks in different browsers, has shown there are some layouts that are not exported correctly. This is a known issue. It’s on the to do list to get all of the output correct but in the meantime you can preview in the browser and then with web tools like Firebug, adjust the code. Any fixes or feedback is welcome. Rewards will be considered.

Put pixel perfect interactive designs online with the live MXML renderer

Screen Shot 2016-02-17 at 6.26.39 PMPart of the goal of Radiate is to get your design online. Part of the challenge of that is getting the online live site to reproduce your design faithfully. We can, of course, create an image snapshot but that’s not very interactive. We could export to HTML and CSS. But, that has issues too. However, if we want to get exact, we could render the same design in the browser using Flex.

Screen Shot 2016-02-18 at 6.09.51 AM

Radiate is built using Flex. Radiate also uses MXML, the markup language of Flex, to store and retrieve the design. Since Flex runs on top of the Flash Player runtime, it means that we can faithfully reproduce the same design with interactions in the browser. Why is this good? If you’re a designer, you know how much it pains you when the layout is off and the typography is poor and you’re trying to show your best work. With MXML and Flex you can faithfully reproduce your design. It also means you can share work with a Flex developer for any potential projects.

Screen Shot 2016-02-18 at 6.09.59 AM

So this is a prototype you can use to write client side MXML at runtime. Right now it’s an desktop app but the online version is not far from now. Download.

UPDATE: (Feb 11, 2017)
The MXML editor, now called MXML Azzurro, is now online here. It features code complete, save and restore and more.

It includes two and half error reporting tools. The first is XML validation errors from both Flash and the browser (internal browser) and the second is from MXML importer using reflection. It’s possible to run this on the web and add code completion in time.

Once this is integrated into Radiate, you’ll be able to post and share pixel perfect interactive designs online. Please post any feedback. Enjoy.

Release 2.2.0 – Property inspectors for all, multiple logins, background image, wrap with anchor

This release adds multiple login, background images, convert to image, wrap in anchor and property inspectors for nearly all components.

With multiple logins you no longer only have one login. You can add as many as you like and they are saved across each domain (see the last post for how to setup your own domain).

Property inspectors have been added for Checkbox, ColorPicker, ComboBox, DropDownList, List, RadioButton, Horizontal and Vertical Sliders, NumericStepper, TextArea and TileGroup component. One of the best and least under appreciated containers in Flex is the TileGroup. Add it and start adjusting properties. It is similar to a table or grid but you choose the amount of rows or columns.

The HTML export now supports background snapshot and convert to image. The background snapshot takes a snapshot of the component or container in the design view and embeds it into the exported HTML page. Why do this? So you can see and compare the design to the live HTML elements. This will show how accurate the HTML exporter is. After using this feature, you can adjust the HTML element styles in the HTML element styles window. This helps you achieve pixel perfect results while the HTML exporter is being improved.

The HTML export convert to image does just that. When selected, the component is converted into an image. Why do this? If you have text or other content that you want to match the design exactly, check this box. The image will no longer be interactive components or text. You can however, add your own styles in the HTML element styles window or wrap your component or image in an anchor tag.

The HTML export now supports wrap in anchor. This lets you add an HTML anchor tag around any component or image. Open the HTML properties and select the Wrap in Anchor checkbox. You can now set the URL and target.

Import is also much improved. If there are any errors during import or open of your document, you can now click on the import button and an MXML import window will appear. In this window are show revisions, show original source code and show current source code. If anything ever goes wrong, choose the show original source code or show revisions. The editor will load and notify you of any errors. Once you correct them, you can import the document again.

There are numerous other features and bug fixes in this release. Please provide feedback. You can easily send a note by clicking the contact link in the bottom corner of the app. Enjoy!

Release notes:

  • added method to update document background
  • fixed case where document background was not updated on property change
  • dispatching open event on application after code parsing
  • added username property
  • added spark and mx namespace for additional components (but no hard references included)
  • added support for alternate classes for inspectors (reuse for mx color picker and spark color picker)
  • added support to fallback on super classes for inspectors (for example, a class that extends button will use button inspector if one is not specified)
  • returns attributes not found when importing
  • includes events in values object when importing
  • fixed a few cases where Radiate.importingDocument was necessary
  • added option to make components interactive when added to the stage
  • added save only project method to Project
  • fixed numerous bugs preventing MXML import
  • Known bug: defaults are not getting set on new components
  • started work on getting all project code for exporting full project
  • fixed bug when opening html document internally. not sure how
  • started work on adding open all documents method to Project
  • fixed arrow keypresses from moving application instance
  • added removeAllComponents on import to allow for pseudo live editing
  • added make interactive option on MXML import
  • added show image when component type not found option on HTML export
  • on html export setting body width to 100%
  • fixed case where local and global export child descriptors prevented export
  • fixed convert to image not exporting
  • added margin top fix to html export
  • added table fix to center an item without knowing it’s size. need to confirm browser support (or use text-align center fallback)
  • added fix for center vertically using translate
  • added fix for background image support to work (line breaks broke background image support)
  • fixed bug where saving MXML was not working with new export child descriptor options
  • fixed errors and warnings not set when importing mxml
  • adding when attributes are not found during import or values are not compatible
  • added move below and move above buttons in layers inspector
  • fixed logout and logging back in bugs
  • added browse to open mxml file (was open document)
  • added selected component icon to properties view in Remote
  • added click to open documentation on selected component
  • added property inspector for Checkbox component
  • added property inspector for ColorPicker component
  • added property inspector for ComboBox component
  • added property inspector for DropDownList component
  • added property inspector for List component
  • added property inspector for RadioButton component
  • added property inspector for Horizontal and Vertical Slider component
  • added property inspector for NumericStepper component
  • added property inspector for TextArea component
  • added property inspector for TileGroup component
  • fixed bug where code inspector was adding html template around mxml code
  • made word-wrap button a toggle button in code inspector
  • in constraints inspector holding shift now increases or decreases by tens
  • added share button (copy url to clipboard) in documentations
  • added manual minimum and maximum to number renderer
  • added support for showing two color pickers (for properties like alternating row colors)
  • started working on export complete project in export document window
  • added more error messages on import document window
  • added error annotations to code in import document window
  • added support to show current document source and show original source
  • fixed case where import didn’t dispatch events causing nothing to import
  • added support for multiple logins from multiple domains
  • increased random password from 14 to 18 characters default
  • added remove all logins on settings screen

Getting Radiate to work with your own domain

To use Radiate on your own domain you need four things:

  • Radiate desktop application. You can download it from the download page here.
  • Radiate Vanilla theme. That’s available here
  • Radiate modified json-api plugin available here (it’s in the same link as above)
  • WordPress install. You need to be able to upload the theme and plugin to it.

Next:

  1. Add the theme to your WordPress themes directory and activate it. There are many tutorials online on how to upload and add a theme directory.
  2. Add the json-api plugin to your WordPress plugins directory and activate it. There are many tutorials on uploading and adding a plugin to your WordPress install.
  3. Go to the json-api plugin page and activate each controller
  4. Add two categories, “Project” and “Document”.
  5. Open Radiate and go to Menu > Help > Settings
  6. In the settings menu add URL to your WordPress site and path. For example, for domain the value might be, “www.example.com” and the path might be, “blog”. The path will most likely be blank if you installed WordPress in the root of your domain.
  7. Click verify or validate. If the result says “Connected” then you are now setup!
  8. Click apply or OK and then exit the Settings dialog.

You should now be set up!

Click login and create a new project.

To show your WordPress content in your design, follow this guide.