I'm busy with an asignment where i have to make a graphical interface for a simple program. But i'm strugling with the layout.
This is the idea:
What is the easiest way to accomplish such a layout?
And what method do you use to make layouts in java. Just code it, or use an IDE like netbeans?
And what method do you use to make layouts in java. Just code it, or use an IDE like netbeans?
NetBeans for GUI developers is like a calculator for grade schoolers: you really shouldn't use it until you know how to do things without it, but then it will save you a lot of time.
(I'd love to answer your primary question, but the firewall I'm behind is blocking the picture.)
Well considering how simple the layout is I would suggest you use a BorderLayout with NORTH set to the top section in a container and the JTable in the CENTER of the BorderLayout. For the Top it appears to be a simple BorderLayout again with NORTH as the Instruction: south as the black box (possibly in a container with a FlowLayout). The center of the top pane appears to be 2 Containers of GridLayouts with 2 rows and 2 columns, so put thos in another container with a GirdLayout.
So in pseudo:
Container(BorderLayout)
{
#NORTH
Container(BorderLayout)
{
#NORTH
Label(Instruction);
#CENTER
Container(GridLayout(2,1))
{
Container(GirdLayout(2,2))
{
Label() TextField()
Label() TextField()
}
Container(GirdLayout(2,2))
{
Label() TextField()
Label() TextField()
}
}
#SOUTH
Container(FlowLayout())
{
JButton() //shaded thing?
}
}
#CENTER
{
JTable
}
}
I build everything by hand. Like Christian, I've had bad experiences with GUI builders; they always either refused to configure a couple of components quite right, or they generated huge amounts of unnecessary code which made later maintenance impractical, or both.
I used to do build a lot of UIs using GridBagLayout, but for years, I've never seen an office-environment UI that couldn't be built with nested BorderLayouts, GridLayouts, and the occasional BoxLayout or FlowLayout. About 98% of the stuff I've seen is doable with nested BorderLayouts.
In your case, the layout organization will be as bmeck says. Speaking from memory, using CENTER for the JTable (remember to put it in a JScrollPane!) and NORTH for everything else ensures that if you resize your JFrame, the JTable will get all of the extra space, and that should be exactly what you want. For the top labels and fields, the nested GridLayouts should ensure that each "column" of labels and fields will take up equal horizontal space. (They'll get only enough vertical space to be completely visible, and no more, since the JTable is taking up everything else.)
Everything else is just a matter of adding borders and setting the GridLayout padding reasonably.
For myself gui-builders for swing or swt never worked that well that's why i code layouts myself using layout managers.
Your question doesn't mention which gui-system you are using but i assume you want to use swing. If that's the case I would recommend to use GridBagLayout for your layout. It is not that easy to use in the beginning but as soon as you know how it works you can do most layouts in the way you want it to be and i think it is also the layoutmanager of choice for the layout you want to do.
I've used GUI layout generating tools for super rapid development (maybe get the first 2 or 3 iterations of an interface out of the way). I've ultimately found that using a simple fixed layout (no layout manager) with these tools is the best approach. Once we are starting to hone in on a design, we switch to manual layout.
Whenever I've tried to use GUI generators to create code for layout managers, I've almost always been bitten eventually where the layout would just stop working and I spent more time debugging the impossible to read auto-generated code than if I'd done the layout by hand anyway. For what it's worth, when we are doing the early phase of layouts, we use the Jigloo plugin for Eclipse. It's very inexpensive, and does a good job.
I'm a big fan of MiGLayout. I've found that it is incredibly easy to use for simple layouts, and is capable of doing extremely complicated layouts. All without the need to resort to nested panels, etc... JGoodies Forms is also good, but harder to use.
I wrote an article a while back on layout managers:
http://developer.java.sun.com/developer/onlineTraining/GUI/AWTLayoutMgr
It describes how nesting (as bmeck above demonstrates) can be used very effectively for many UI designs.
Try table layout. Works great.
https://tablelayout.dev.java.net/
Use GroupLayout
:)
All the alignments are pretty easy to do
I used to love Motif's XmForm for this sort of thing. In Java, I usually put Boxes inside of boxes. So I have a vertical box. First row of the box contains a JLabel for the Instruction. Second row contains something for the label/result stuff, possibly some sort of grid. Third row contains whatever that blacked out thing, Fourth row contains the JTable. Then I'd spend some time to try to figure out how to do the lable/result stuff. Then I'd probably end up saying "dammit", and doing it as a GridBagLayout.
Related
Simple as the title says. They just won't appear. I don't know why. BTW, The table is added on a panel that has setLayout(null); So, I don't know if that affects it. I just really don't know where the problem is coming from. I'm completely clueless.
DELETED
Change DisplayTab.add(table); to DisplayTab.add(scrollPane); and make use of appropriate layouts
Avoid using null layouts, pixel perfect layouts are an illusion within modern ui design. There are too many factors which affect the individual size of components, none of which you can control. Swing was designed to work with layout managers at the core, discarding these will lead to no end of issues and problems that you will spend more and more time trying to rectify
I am developing desktop GUI application using java swing. And I want to show several "subwindow" on the same window(JFrame). And I want the layout is similar to iGoogle such that user can add and remove new subwindow. To be simple, I assume all the "subwindows" have the same size and similar content(all are showing chart). By the way, the maximum number of "subwindow" would not be a huge number. I think it is less than 8.
if there is no drag and drop, can I just use grid layout to
implement it?
if there is drag and drop, what is the easy way to
do it?
Thank You very much.
FYI: iGoogle http://www.google.com.hk/ig
I don't know what iGoogle is, but it sounds like you should be using internal frames. See the section from the Swing tutorial on How to Use Internal Frames.
If all the "sub windows" will be equal size and not draggable, I'd just use a simple layout. seems like a good case to use TableLayout. In a simple case where you know the max amount of slots, you could have 8 corresponding JPanels and add them to Container using the table layout (making sure to revalidate()) as the user requests them. if a user closes one, you just remove it from the container and revalidate. Hope that helps. if you don't need docking functionality, don't even go down that road is my advice.
EDIT:
you could also still implement drag and drop by using your own mouse handlers.
I have been trying to set up a Java form in NetBeans with 15 - 20 visual components (buttons, textfields, etc.) and I have been using the Free Design layout paradigm on the MAC.
According to what I've read, the Free Design layout gives me various alignment guides, but does not try to force my alignments to specific row and column delimiters. However, I'm finding that when I do this, the width of my form may arbitrarily change, or some of the components I've already placed will move around radically when I make even small adjustments to other component positions.
Is there some way to anchor all these components, once placed, or is there a better layout paradigm that gives me the freedom to place components where I wish to?
IMHO, Matisse works best when you know what you want before you start. It doesn't seem to do so well with iterative changes.
Here are a few rules I follow when using Matisse in freeform mode. They don't make it wonderful, just less painful:
Build top-to-bottom and left-to-right. Most jumping happens when you go back an try to insert something.
Build it in one pass.
When you make progress, save it. There are conditions where Matisse will drop its undo list. Don't count on Ctrl-Z to bail you out. I use a local mercurial repo to track my changes.
Keep it small. The more elements, the more likely it is to blow up. Build it out of smaller components. For example, if you have a date field with a button to open a calendar
make that a component.
Add the component to the palette,
use that in the larger component.
Maybe it's time to look into other LayoutManagers, like GridBag or something else that will give you what you want. The built-in choice by NetBeans sounds like a poor one for your needs.
If you choose a null LayoutManager you'll get absolute positioning.
But along with it comes absolute responsibility: No help in repositioning any elements.
I've found Using GroupLayout directly works really well. It can be confusing at first because horizontal and vertical layout are done separately, but once you get used to it it's not that difficult. You can definitely get things to align, and stick together when resizing. It's far better then using nested panels, GridBags, and that kind of thing.
MigLayout might work too, but GroupLayout is included in the JDK.
You may want to look at the absolute layout. It allows you to put the component exactly where you want it, without all the jumping around.
GridBag Layout is my favorite, and specially in Matisse (Netbeans GUI). You have like a wizard to graphically manage all the properties.
Will take you few examples to get things perfect as you want, but when you do, you will never look back.
Take a look at Sun Tutorials GridBag Layout
I strongly, strongly recommend MigLayout (And getting away from GUI layout tools). Any time you think you are saving by using a GUI tool quickly evaporates the second you run into layout manager behavior. Real UI's are coded, not built with drag and drop.
I found that it took me about 3 hours of fiddling to get used to MigLayout - after that break in period, I found it to be incredibly intuitive and powerful.
I've created a small gui app in Netbeans. As I was adding in some buttons and text areas the mainPanel resized itself. Now it is really wide [probably 4x as wide as I want] but when I try to drag the edge in it won't resize back down. If I drag it out, making it bigger, it takes that change. I would just like to return the mainPanel back to a reasonable size. Not sure what I'm doing wrong here. I've tried to change the min size, max size, and preferred size settings for the mainPanel with no success. I've even tried to change the menuBar & statusPanel settings at the same time as the mainPanel [thinking that one of them was making the others too big] without success.
Any ideas?
Netbeans does do really stupid things like that sometimes, and I generally get around them using either of these two methods:
First thing to try is to change the layout used. Try the Grid Bag Layout, or any of the others and see if you get better results.
If that doesn't work, then probably the easiest thing to do is to change stuff in the code. You will notice that Netbeans automatically adds a call to initComponents(); in the constructor (you have to switch to Code view from Design view). And if you look at initComponents, it will have a whole heap of auto-generated code to create the GUI. Do NOT edit this, because it's just a matter of time before Netbeans overwrites your changes. What I do is to create a new method initComponentsFix, and call that immeidtaely after initComponents in the constructor. In initComponentsFix, I would add the code to resize the component to the preferred size, and any other things you you want to fix.
BTW I empathise with you - Netbeans' GUI editor is still in need of much work. However, it's code auto-generation is still very useful, so I wouldn't recommend coding the GUI the good ol' fashioned way. That's why I'm advocating using it up until you start felling its limitations, after which you "take control".
There is also a third way, which I would not recommend, is to edit the file that Netbeans stores the Design view in, which is basically shares the same file name as your frame's class' source code, except with a .form extension.
This file is XML, and is pretty easy to edit. I don't recommend this because it is sorta going around the back door, but as a last resort, you can still try it.
I am creating a GUI program using MVC which should look like this..
alt text http://img137.imageshack.us/img137/6422/93381955.jpg
I have created a Window and Panel class. I am thinking of creating the Input and Display tabs in the Panel class and then creating two more classes, InputPanel and DisplayPanel. So the InputPanel will contain the stuff in this picture under the Input tab and same for the Display tab. Is there a better way to design this?
Also, since there are 3 sections in the Input tab (Name and sentence, crime, button), should I create 3 panels or just 1 panel containing all those?
Thanks
To answer your specific question about using three panels instead of 1, I would suggest two. There's rarely a need to create a panel just to create a single widget. So, one widget for the name and sentence, one for the crime.
As for the question about "is there a better way to design this"?... It sounds like you are learning, so I suggest you don't focus too much on the perfect way to do it. Stick with your original design then after the task is done ask yourself what worked* and what didn't. With that information you'll be able to decide for yourself whether what you did was the right design.
There usually isn't a "best" when designing GUI code -- there are many ways to solve the problem. What you've described sounds like a perfectly good way to attack the problem
(*) "worked" in this context means, was it easy to code? Did it allow you to achieve the layout you desired? Does it make the code maintainable over time if, for example, a requirement comes down to reorganize the GUI?.
Bryan gave good advices, I will just add that ergonomics isn't an exact science, although experience helps there.
Tabs are nice, eg. to separate settings, or group in a same panel (toolbox for example) different sets of tools (layers, colors, brushes...).
But they might not be adapted to all workflows. But we are lacking information about the role of the Display tab. Is it supposed to list all crimes in a table? Can't the table, if any, be below the controls?
As hinted by Bryan, it is better to design the GUI, then to test it, like would do a real user. Do you find the workflow easy to understand? (make somebody else to test it!) Does the usage feels natural? Is it fast to use?
Then you can adjust the design in light of these observations.
You were right to create InputPanel and DisplayPanel as seperate classes.
As for further splitting those panels? Yes you should further split them up, but not into separate classes. You should add jPanels inside of your InputPanel, and DisplayPanel, and group the controls within those internal jPanels.
Please let me know if you would like me to clarify what I mean.