usage of visual edittor for jsf / seam pages

[ajanz]

which tools were used to design the pages of the seam examples?

at the moment i use eclipse with jboss tools. but i find it quite hard to design a nice page with it...or may be i do something wrong.

for example i got a panelgrid with labels that should be aligned left, and textboxes with all the same size, and one calendar which should also have the same size of the textboxes (including the little image)

using the visual editor from jboss tools, it's not really easy to design something like this. or is there a way and i don't know it? i didn't find a tutorial to give me more information.

[mareshkau]

Could you provide an tool in which you can design web page completely?, visual page editor(JBoss) can only give similar preview of page, but I don't think that it's possible to design page in vpe or others visual editors.
I think seam-examples pages where created manually, or in source part of jboss vpe :).

[maxandersen]

mareshkau - one example is netbeans visual designer which has tools for laying out components and aligning them.

[mwr0707]

one example is netbeans visual designer

I've always loved the netbeans Swing designer. In particular, the ability to "drill-down" into nested panels.

One early question that I had was how to visually add nested "f:validate..." tags. The only approach I've found is to add jsf-core to the palette and drag-and-drop f:validate... to the outline view.

[mareshkau]

Layot editing now doesn't supported in JBoss Tools Visual page editor. Just interesting (mwr0707), how difficult is your pages, that you have created in netbeans(just simple pages) or it's difficult pages with different layout? Could you provide screen shots or links to such applications?

[mwr0707]

It's been a few years, so I don't have source. But for our purposes, (and understanding that RichFaces is not going to provide everything you get with Swing/SWT) consider the JBoss server management view which appears when you double-click a configured JBoss server in Web Development perspective. Now imagine that the Deployment panel contained another panel. The panel nesting allows you to simplify the layout configuration. In Swing, trying to layout too many components in a single GridBag is quite frustrating. On the other hand, using multiple nested panels to manage layout is very difficult to visualize by looking at the source. So the visual editor really adds great value here.

The concept is simply this:

It applies to any "visual" container:

In the visual editor window, when you double-click on a panel, the contents of the editor window "zooms" to just the panel you selected. All of the components in the enclosing container are no longer visible. The entire visual editor window shows only that panel. If this panel contains a nested panel, you can double-click on it to drill-down further, and then that panel fills the entire visual editor window. Of course, you can drill-back up to the enclosing container at any time.

In complex layouts which almost always require nested panels in Swing, this makes it very easy to select and move the desired components.

I assume that as you add layout support e.g. a4j:outputPanel, etc., users will attempt (as they would with Swing) a more visual (drag-and-drop, or click component in visual pane, then adjust properties view) style of development. Without drilldown into complex panels, it can be difficult to click on the specific component you want. This was one of my frustrations with the early Eclipse Swing visual editor as compared to netbeans.

[maxandersen]

so in xml terms you want to be able to zoom in on elements/tagpairs. Sounds like a interesting feature - feel free to open a feature request in jira.

With respect to layouts etc. I prefer much more to use template mechanism's which naturally splits up the "panels" in independent files so I don't feel the need that much.

[mwr0707]

so in xml terms you want to be able to zoom in on elements/tagpairs.

That's right. I'll submit a feature request.

Regarding templates... can they be nested too... can a template reference another template? If so, the same idea would apply. It would be nice to have some sort of "open-on" capability where a mouse action in the VPE visual pane "zooms in" to the template, and so on for further nesting. The interesting issue here is when traversing files, how does VPE remember how to zoom back out?