flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jude <flexcapaci...@gmail.com>
Subject Re: [POLL] Accept Radii8 Code Donation
Date Fri, 18 Jul 2014 07:29:04 GMT
Comments inline...

On Thu, Jul 17, 2014 at 3:20 AM, Maurice Amsellem <
maurice.amsellem@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:

<s:Group id="area"><s:Graphic > ...</s:Graphic></s:Group>

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:

  <Button id="submitButton" x="50" y="50"/>
  <Label id="headerLabel" fontSize="25"/>

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.

  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message