Thank you Jude for the comprehensive answer. It's much clearer now. I will try the mxml import.
Btw, I am surprised that you say Form does not have a visual representation. Maybe we are not talking of the same thing. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Form.html Maurice ________________________________________ De : jude [flexcapaci...@gmail.com] Envoyé : vendredi 18 juillet 2014 09:29 À : dev Objet : Re: [POLL] Accept Radii8 Code Donation Comments inline... On Thu, Jul 17, 2014 at 3:20 AM, Maurice Amsellem < maurice.amsel...@systar.com> wrote: > Nice piece of work and clean UI. > > I have some questions to Judah that I didn't ask when he first announced > Radii8 some time ago: > > How is this going to be used in an "real" application development workflow > ? > I see a couple of scenarios. In *one* case, you would use this to get a quick mockup or layout for your Flex project. For example, I had a form with two inputs and a submit button. I opened Radiate and dragged an HGroup, two labels and two inputs to the stage along with a submit button. I set some properties and styles to get the look I was going for. I then opened the code panel and copied the MXML code to my main Flex project. I then closed Radiate without saving the document (or just closed the document). I later received a new mockup from the client asking for an updated form. I repeat the same process as before or import the code back in but this time I saved the document and I can open it in Radiate later. If I have a lot of panels or forms I could keep them saved and go back and modify or retrieve them as needed. Sort of used as a library of visual layouts. Right now, we can't use Flash Builders design view with Flex 4.13. And to me, in some cases it may be more efficient to visually create the mockup or layout than to write the code, run debug, and confirm all this is not always the case. There's a basic MXML importer in it now. It's not robust but you can pass in MXML and it will build the UI from it. So for people that want to type code it wouldn't be difficult to make it render live as you type. This is the *second* case, for example, there is a panel or view that has a code editor that shows the generated code. For MXML if you type in that text area right now nothing happens. It could be wired up to render the MXML live in the design view as you type. FYI It does render the code live when HTML code is active and you are showing a preview. In the code view are three tabs for MXML, HTML and Android XML. In the HTML code, if you click the preview button it will create an iframe behind the scenes and pass the generated HTML into it. This will give you the preview obviously. BTW there is a Show Background Image option that shows a snapshot of the actual design in the background of the HTML preview. Anyway, if you type in the code editor (text area) it will update the HTML preview live. The HTML should be a pixel perfect representation of the Flex rendition but because HTML is the spawn of satan and it may not look the same across browsers. So that is why you are able to modify the HTML on the fly. You may find you need to add CSS style or property exceptions, overrides or additions. The purpose of that panel would allow you to modify the generated CSS. But we are talking about MXML. So to get back on track, you would be able to type MXML or copy and paste it into the code editor and have it render. That's the second use case. The *third* is to have a desktop version that points to an actual Flex project application. You would have Flash Builder or another editor open. It would pull in the project and list the applications or MXML documents. When you clicked on the MXML file it would import it. You could then modified the layout and saved the changes. Flash Builder would prompt you to reopen the latest version of the file. In the same situation you could setup sections that are the only places that can be edited. Similar to Dreamweaver regions, you would delimit a section of MXML layout that can be edited. All other code would remain unchanged. So something like this: <!--- DESIGN AREA: DO NOT EDIT BELOW THIS LINE--> <s:Group id="area"><s:Graphic > ...</s:Graphic></s:Group> <!--- DESIGN AREA: DO NOT EDIT ABOVE THIS LINE--> The *forth* is to be able to pull in a SWF, live or in the debug or release folder of a project, make changes to the layout and then create an edit decision list from the changes. For example, I post a SWF online. A designer views the SWF and sees there are changes that need to be made. She opens Radiate desktop or online and the SWF is loaded into the program. She changes the font size, the color and moves some images around. What seems like a few small changes but actually maybe 30 different actual steps. She has no access to the project MXML or needs to. After she's made modifications she exports or emails the EDL to the developer. It contains a list of only the final changes: <moved> <Button id="submitButton" x="50" y="50"/> </moved> <modified> <Label id="headerLabel" fontSize="25"/> </modifed> You would get that list of changes and apply them to the MXML yourself. The fifth use case is if you want to create an HTML website or webpage. You do your design as usual or import MXML and then switch to the HTML tab. You can copy the HTML code and use it where you need it. Or you can provide or point to your own HTML page or template and put comments where the generated code should go and it will insert the markup and CSS into those designated locations. > > 1) consider I have created my first UI using Radii8 and exported the MXML > code to Flex, > I will then probably manually add some custom code (bindings, inline > scripts, etc...). > Then how do I get back to Radii8 to make a change ? > This may have already been answered by the comments above. There is a simple importer that imports MXML. It ignores information it does not understand but it can export that information back out again. Or it can create a list of changes that you've made after you've imported the MXML or imported the debug SWF itself. > > 2) the component palette seem to include only a subset of Flex SDK > components. > Some key components/containers are missing: From, FormItem, DataGrid, > Panel ,TitleWindow, ... > And some components don't even exist (s:LinkButton ?) > > Is there a plan to support them ? > Yes. The problem I had with some of them had to do with a few reasons. The selection rectangle of some components were misaligned and I couldn't figure out why. I later found a hidden Flex class that showed how to get the correct selection size and location. This was in a recent update and I had only used it on the components that were not working. It may work for all components but I didn't get to it yet. The other reason is that some components had to have data in their data provider to render correctly. Another reason is that some components do not have a visual representation such as Form. I would like to add a declarations view that show things like Form, RadioButtonGroup and so on. The LinkButton was a component I thought Flex would benefit from. Actually, there is an mx LinkButton component. But I intended to create a hyperlink component that is the same as a hyper link <http://www.google.com> in HTML except in this hyperlink you can go to a URL or treat it as a s:Button with click events and so on. > > 3) what is the purpose of the HTML / Android export ? who is going to use > it ? > I would like to use it because sometimes I need to create an HTML or PHP page from a Flex design or layout. I don't like the other HTML tools out there and I do like HGroup, VGroup and TileGroup layouts. As a web developer I sometimes have to do non Flex projects or do a static mobile site, so it is part of that. You may never need it. Some of the same reasons as Flex JS.
