Hi, I spend the last few days creating a proof-of-concept that FlexJS and the Falcon compiler can support limited "live" editing of MXML. I've never used Design View in FB, but when tweaking the UI for Flex apps, I often find myself in a cycle of: edit some values in the mxml, save it, reload the app, make more edits, etc. Each time, the app has to be reloaded to see the changes. "Live" editing allows you to see certain changes without reloading the app. The POC handles a few scenarios that involve MXML states.
It is kind of hard to demo, but I think these are the steps: 0. Download Apache FlexJS 0.5.0 (or the 0.6.0 nightly) and install it as an SDK in FB. 1. Download this FB project: http://home.apache.org/~aharui/MXMLLiveEditing/DataBindingTest.fxp 2. Download this FB project: http://home.apache.org/~aharui/MXMLLiveEditing/MXMLLiveEditAgent.fxp 3. Import both projects into FB. 4. Run MXMLLiveEditAgent. 5. In the MXMLLiveEditAgent UI, select the MyInitialView.mxml file from the DataBindingTest project. 6. Hit the Watch button. 7. Run DataBindingTest. 8. Make and save a change to MyInitialView.mxml When the file is saved, a few seconds later, the changes should be reflected in DataBindingTest. This POC has a white list of properties, so you can edit width, height, x, y, label, text and style properties. And you can edit state-bound properties like height.showAll in the TextArea tag. Remember that styles in FlexJS are like HTML styles, so you can add, for example, style="marginLeft:90" to one of the tags. This is just for tweaking the visuals of your app. You can't edit binding expressions or event handlers or add or remove new components. If you do the POC will fail. A more robust version would probably detect such changes and tell you to refresh the app. Also, if you save illegal XML, the POC will fail. A more robust version would also watch the output SWF to see if it changes in order to know the MXML edit didn't have syntax errors. The way this works is that there is a plugin added to MyInitialView that communicates with the MXMLLiveEditAgent. The MXMLLiveEditAgent is monitoring the last-modified date on the file. When it changes, it loads the MXML and compares it to the last copy and transmits changes to the plugin that applies them to the app. Certain scenarios like state-bound properties and state-bound components can be handled in because the Falcon compiler converts a lot of the MXML into data structures that the plugin can find and modify. It isn't clear that you could do this in the regular Flex SDK without finishing up Falcon compiler support in the regular Flex SDK. Also, none of this really requires FB. You can unzip the FXP files, build everything yourself and edit the MXML with a text editor and it still all works. Future work (hopefully by other volunteers) would be to handle changes to CSS syntax, watch multiple files at once, and swap out the LocalConnection to use sockets so you could "live" edit an mobile app on a device, or have an IDE communicate directly with the running app. Anyway, let me know what you think. I'm off to work on other things. Thanks, -Alex
