Once I have some more of it decoupled I'll work on folding that code back in. I'll provide another update when that happens.
It looks like the screenshots didn't go through. http://imgur.com/a/aKp2U The first is codepen with html, css and js window and rendering on the bottom. The second image is Radiate with rendering on the top and page html, layout html and css on the bottom. The rendering area is not showing the rendering of the html as it normally does since I'm doing a refactor. The third image is the Live MXML Editor showing a rendering area on top and a problems view and mxml editor on bottom. The live editor code is here, https://github.com/monkeypunch3/Radii8/blob/master/Radii8Desktop/src/LiveMXMLEditor.mxml. The setup instructions are here if anyone wants to try and get it working, https://cwiki.apache.org/confluence/display/FLEX/Setting+up+the+Radii8+Development+Environment. Note: It looks like developers on Windows are getting a less than stellar experience than if you run it on a Mac. In the browser it's always just worked but I found out that Native menus are only a Mac thing so a bunch of errors were popping up when launching it on the desktop. Hopefully, the next update will alleviate those issues. If you wanted you could adapt the MiniInspector <https://github.com/monkeypunch3/flexcapacitor/blob/master/MainLibrary/src/com/flexcapacitor/utils/MiniInspector.as> class to work with FlexJS. You add it to your project in declarations and then at runtime when you hold down cmd and click it finds the object under the mouse pointer. It finds the top most item in the display list and isolates it. Then you click on the label and it gives you a property and value text inputs. You can then change the values at runtime. Any changed values are traced to the console so you can update your MXML as you change values in the runtime swf. http://imgur.com/a/3ipJE On Thu, Apr 28, 2016 at 1:44 PM, Alex Harui <aha...@adobe.com> wrote: > Sounds very promising. > > It might be time to check the MXMLLIveEditing code into a repo, maybe the > radii8 repo. That will make it easier for folks to share and help > delineate what code has been donated to the ASF and what is intended for > your IDE product and hasn't been donated to the ASF. You have the latest > copy and committer rights so please do that if you agree. > > Thanks, > -Alex > > > From: jude <flexcapaci...@gmail.com<mailto:flexcapaci...@gmail.com>> > Reply-To: "dev@flex.apache.org<mailto:dev@flex.apache.org>" < > dev@flex.apache.org<mailto:dev@flex.apache.org>> > Date: Thursday, April 28, 2016 at 7:19 AM > To: "dev@flex.apache.org<mailto:dev@flex.apache.org>" <dev@flex.apache.org > <mailto:dev@flex.apache.org>> > Subject: Re: [FLEXJS] POC MXML "Live" Editing > > I've been digging into the MXML live agent and have some feedback and > updates to some of the comments. I've been studying the examples that check > for changes in the MXML / XML and have some progress there but it seems > it's been built mainly for Flex JS. I'm converting some of those changes > over to also work with Flex. I've attached a screenshot: > > [cid:ii_injc0ghn0_1545978fb7d04745] > > What I have working (some of this is old news): > * updating the view with MXML live > * checking if the xml is valid (i'm using an internal browser control in > AIR to load the xml parser and get a row and line number of any errors) > * converting a XML node into a class instance (i have dictionary of > supported classes) > * checking the attributes to see if they are a valid style, event or > property > * providing errors if they are not valid and annotations > > Based on your example what I have partially working is (see the > screenshot): > * getting the attribute that was changed (working) > * getting the value that it was changed to (working) > * getting the list of attributes that were removed (working) > > Still to do: > * getting the instance that is related to the xml node > * verifying that the attribute is a member of the class created from the > xml node > * updating just the instance instead of rerendering the document on each > change > > Once I get the last few items working it's possible to make code > completion work in the text editor. I'd also be able to provide inline > documentation for each component and class member so new developers can > learn as they go. > > Once that's working we can do the following: > > * make an online MXML renderer in the browser like http://codepen.io for > testing, education and sharing > * connect that to a list of community examples online > * make a default html page and swf that is strictly to render MXML (no > editor) > * create a sort of live design rendering for IDE's based on the MXML > > As for a sort of http://www.jsfiddle.net / http://codepen.io< > http://codepen.io/bengroulx/pen/QNZbZx> editor I have something like that > working for rendering HTML / CSS editor now in Radiate and rendering MXML > in the LiveMXMLEditor. In the screenshot you can see the MXML rendering. > You can switch to the HTML markup below. The template, HTML markup and CSS > is all generated from the HTMLDocumentExporter but it can be modifed in > real time. It's then reassembled into an HTML page and passed to the > internal browser. In the screen shot there is a live editing checkbox below > (see screenshot) and changes are rendered live in an HTML tab (not shown > since I'm refactoring it - centering is troublesome). > > [cid:ii_ink1s9k11_1545c0d84274a54d] > > > Still to do is decouple the DocumentImporter classes from the Radiate.as > class. Right now it's pulling in a lot of extra classes. The desktop > application is around 6MB. I'm hoping to get it down to 2MB or less. > > After that we can make a simple application.swf with default linked in > classes or references that will interpret the plain text MXML at runtime > from a URL or directly from an HTML page: > > <html> > <object id="mxmlRenderer" source="renderer.swf" width=100% height=100%/> > <!-- mxml here --> > <s:Application id="application" style="display:none"> > <s:Label text="hello world"/> > </s:Application> > </html> > > or something like: > > - http://www.domain.com/render_page.html?page=myApp.mxml< > http://www.domain.com/page.html?page=myApp.mxml> > > where myApp.mxml is a plain text file. > > After that is setup anyone can make a FlexJSDocumentImporter using > MXMLDocumentImporter as a reference and it should all just work since it > uses reflection. You could have a sortof codepen.io<http://codepen.io> > for FlexJS. You'd have a basic rendered view, problems view, editor with > code completion and linked documentation. > > If anyone wants to help they're welcome to join in. If you don't have time > but want to help I'm considering setting up a Patreon which would help move > things along. > > This is different than the POC because that watches a file. For it to run > in the browser we'd have to make some adjustments which is what the > DocumentTranscoder classes are about. > > I'm providing this update because people on this list have asked for > updates. > > Disclaimer: > Radii8 = donated project to Apache Flex. hosted at apache > Radiate (name subject to change) = project based on Radii8 with product > releases, blog updates, etc. hosted at github and radii8.com< > http://radii8.com> (domain name subject to change). > > FYI My goal has been to promote and build the Flash, Flex Platforms and > web development tool chain with projects like I've described above. > > On Sat, Jan 16, 2016 at 9:43 AM, Alex Harui <aha...@adobe.com<mailto: > aha...@adobe.com>> wrote: > I made the change I suggested below and updated the fxp file at [1]. See > if it makes things better for you. I think there is always the > probability that at the moment the editor tries to save the file that the > watcher will have the file locked to check its modification date, but that > shouldn't lock the file forever. Hitting save again should save the file. > > It would be much more robust if an IDE/editor integrated the agent code so > it didn't require polling. It might also be possible to write an ANE that > watches for changes in a way that doesn't lock the file. > > -Alex > > [1] http://home.apache.org/~aharui/MXMLLiveEditing/MXMLLiveEditAgent.fxp > > On 1/15/16, 11:46 PM, "Alex Harui" <aha...@adobe.com<mailto: > aha...@adobe.com>> wrote: > > >Worked for me on Windows 7. Maybe try slowing down the watch interval? > > > >If you want to dig into it more, the mxmlFile object is kept around > >between timer events. Maybe it needs to be created in each interval so it > >doesn't leave a lock on the file. > > > >Thanks, > >-Alex > > > >On 1/15/16, 5:56 PM, "omup...@gmail.com<mailto:omup...@gmail.com> on > behalf of OmPrakash Muppirala" > ><omup...@gmail.com<mailto:omup...@gmail.com> on behalf of > bigosma...@gmail.com<mailto:bigosma...@gmail.com>> wrote: > > > >>Hmm, I followed all the steps. But when I changed the width of the label > >>in MyInitialView.mxml and try to save the file, I am getting this error: > >> > >>Could not write file: > >>C:\p\flexroot\workspace\DataBindingTest\src\MyInitialView.mxml. > >>C:\p\flexroot\workspace\DataBindingTest\src\MyInitialView.mxml (The > >>process > >>cannot access the file because it is being used by another process) > >> > >>Looks like the watch is causing this issue. When I close that AIR app, I > >>am able to save the file fine. > >> > >>This is on Windows, btw. > >> > >>Thanks, > >>Om > >> > >> > >> > >> > >>On Fri, Jan 15, 2016 at 12:27 PM, OK <okrue...@edscha.com<mailto: > okrue...@edscha.com>> wrote: > >> > >>> Alex Harui wrote > >>> > Anyway, let me know what you think. I'm off to work on other things. > >>> > >>> Hey Alex, > >>> I've just followed your instructions and tested your POC by using > >>>FlexJS > >>> 0.6.0.... and it just works! > >>> Awesome, very impressive! > >>> IMO a live editing feature would be a big plus. In competition to other > >>> transpiling JS frameworks this could be a key feature. > >>> > >>> Thanks, > >>> Olaf > >>> > >>> > >>> > >>> > >>> > >>> > >>> > >>> -- > >>> View this message in context: > >>> > >>> > http://apache-flex-development.2333347.n4.nabble.com/FLEXJS-POC-MXML-Liv > >>>e > >>>-Editing-tp51278p51291.html > >>> Sent from the Apache Flex Development mailing list archive at > >>>Nabble.com. > >>> > > > > >
