I am trying to arrange two set of buttons for a calculator GUI. Each one uses a GroupLayout to make them. One set is the numbers (and "."), the other is for operation buttons. This basically works but if one of the buttons has double length (for example the equals button on my operations set) it throws the other buttons out of line.
I will use the operations set as an example. There are two columns and four rows of buttons. The final row only has one button - the equals. I want to make this double length stretching across both columns. At the moment it simply pushes the second column along to the end of it when I want the second column to sit on top of it.
Here's the code for the layout - operLayout is the name of the layout for the operations, left and right brackets on the first row, + and - on the second, * and / on the third and equals on the last row. Each button has a minimumSize set elsewhere (they are all the same except equals is twice as long).
operLayout.setAutoCreateGaps(true);
operLayout.setAutoCreateContainerGaps(true);
operLayout.setVerticalGroup(operLayout
.createSequentialGroup()
.addGroup(
operLayout.createParallelGroup(GroupLayout.Alignment.BASELINE).addComponent(leftBracket)
.addComponent(rightBracket))
.addGroup(operLayout.createParallelGroup().addComponent(add).addComponent(subtract))
.addGroup(operLayout.createParallelGroup().addComponent(multiply).addComponent(divide))
.addGroup(operLayout.createParallelGroup().addComponent(equals)));
operLayout.setHorizontalGroup(operLayout
.createSequentialGroup()
.addGroup(
operLayout.createParallelGroup().addComponent(leftBracket).addComponent(add)
.addComponent(multiply).addComponent(equals))
.addGroup(
operLayout.createParallelGroup().addComponent(rightBracket).addComponent(subtract)
.addComponent(divide)));
I understand why this is happening but I'm not sure how to sort it out. Is there a simple way? Or should I change the way I'm doing it? Thanks
Put the equals component in its own parallel horizontal group.
First of all, make sure you use consistent indentation when you're using GroupLayout. I have found this absolutely vital in keeping track of what's going on.
The reason you're seeing the behavior you report is because the equals sign is part of the same horizontal parallel group as the first column of buttons. So when you make it double wide, it pushes the second column of buttons to the right. This is exactly what you're telling it to do because you're telling it to stay in the first parallel group (column).
In order to get the behavior you want, you have to layout that button separately, in parallel to the other buttons. You do this by putting it in its own parallel group. You probably want to put an alignment on this group also in order to get the best behavior. I think GroupLayout.Alignment.CENTER is what you want.
Also note that you don't need to create a new group if it's only going to have one component in it. Just add that component instead.
operLayout.setVerticalGroup(operLayout.createSequentialGroup()
.addGroup(operLayout.createParallelGroup(GroupLayout.Alignment.BASELINE)
.addComponent(leftBracket)
.addComponent(rightBracket))
.addGroup(operLayout.createParallelGroup()
.addComponent(add)
.addComponent(subtract))
.addGroup(operLayout.createParallelGroup()
.addComponent(multiply)
.addComponent(divide))
.addComponent(equals));
operLayout.setHorizontalGroup(operLayout.createParallelGroup()
.addGroup(operLayout.createSequentialGroup()
.addGroup(operLayout.createParallelGroup()
.addComponent(leftBracket)
.addComponent(add)
.addComponent(multiply))
.addGroup(operLayout.createParallelGroup()
.addComponent(rightBracket)
.addComponent(subtract)
.addComponent(divide)))
.addComponent(equals));
Related
I've been working on a Pokemon-themed quiz game in Java (modeled after Sporcle, if you're familiar). Pretty much everything works how I want it to, except for the layout of the different components of the program.
I've never been very good with the different layout managers, and I don't know how to get them to do what I need.
Here's what the window looks like right now:
Now, I'll play around with font sizes later, but the tables themselves look exactly how I want them to. The problem is, I want them to be under the text fields and buttons and stuff. Here's the portion of the code where I add all the components to my JPanel:
panel.add(label,FlowLayout.LEFT); //adding the "big question text"
panel.add(answerfield); //adding the JTextField
panel.add(correctAnswerTracker); //adding the "x / 151" text
for(int x = sPanes.length-1; x >=0; x--) //as you keep adding to left, it gets pushed over, so doing it backwards results in the correct order
panel.add(sPanes[x],FlowLayout.LEFT);
//each table is in a scrollPane, and all my scrollPanes are in the array sPanes, so I'm looping through that to add the tables
panel.add(startStopButton); //button that says "Start"
panel.add(exit); //button that says "Exit
panel.add(timer); //the timer
As you can see, the statements to add the text field, and correct answer tracker are all written before the add statement for the tables, and yet the tables are at the top. Additionally, there's the issue of my tables in that loop being added in the backwards order, so I had to reverse the direction of the loop iterations to get the tables to appear in the correct order. I've tried using stuff like setLocation and setBounds to get my components more where I want them, but nothing happened. Also, everything just appears in a row below the tables (and I know that's what FlowLayout does), but how would I go about customizing exactly where things appear?
Wrap a panel with BorderLayout around ones with FlowLayout. Put all the content that should be above the tables in a panel and add it with BorderLayout.NORTH. Put all the content that should be below the tables in another panel and add it with BorderLayout.SOUTH. Then put the tables in their own panel just as your are now, and add it with BorderLayout.CENTER.
Either use a LayoutManager or setLayout(null). In the latter case, you can move your components around by calling setBounds on them. I've been doing that lately too (not using a LayoutManager), it's quite liberating.
I'm trying to figure out how to manage this layout in order for it to work. I have some ideas, but rehauling the whole thing is quite a bit of work to do.
This is how it looks like (in JTextAreas: "component name (parent (parent))"):
I have explaind the structure at the end of the question, if you feel the need to know.
This GUI is supposed to be very dynamic. You should be able to add and remove chapters, pages, questions and answers.
The GUI in the image above is made using nested JPanels (up to six layers on the thickest parts!) which most don't have thier size specified so they can adjust to the changes in the document. However, a lot of time is consumed (about a second per page) when drawing the document because the program keeps recalculating sizes of all the JPanels until they fit. So, unless I can specify the initial size (MigLayout) of a component, this method won't cut it for me.
Only alternative I have come up with is trying to put it all in one layer using MigLayout, which is doable, but I don't know how well does it work with the dynamic part of the whole thing. Removing and readding all the components (document could have over a hundred pages!) doesn't really seem as an option. Since most of the components are nested one onto another and are to move as one, this makes this solution even more difficult.
Also, all widths are fixed, while all of the heights within a page are flexible.
I really don't know how to go about this. Should I modify one of the existing ideas to work, or are there maybe libraries which are used in this type of situations? Is there another way?
Any ideas?
Also, as promised, this is the structure explained:
So, the thing important here is the JPanel inside a tab. It contains the DOCUMENT.
Document itself is made up out of random number of CHAPTERS. Each CHAPTER contains random number of PAGES. PAGES have MARINGS and CONTENT. On the image, pink and red parts are the MARGNIS, while everything within is CONTENT(green). CONTENT contains a single TITLE(blue). TITLE is made out ofa single JTextArea. After the TITLE, CONTENT can contain a random number of QUESTION(orange). QUESTION contains a JLabel(number) and JTextArea in one row, and below is a it's ANSWER PANEL. ANSWER PANEL contains up to five ANSWERS(yellow). Each ANSWER has a JCheckBox, JLabel (letter) and a JTextArea all in the same row.
Here I have some things marked out:
You seem to have the design you need. Break down each section and apply the required layout to achieve that section. Each section should be a self contained component.
So to my mind, start by modelling the data. You need a Document model, which contains a list of Chapters, which contains a list of Pages, which is made up of a list of Titles, which is is made up of a list of questions.
I would then provide a view for each level of the model. This will allow you to concentrate on the individual needs of each view, in isolation and reuse the code logic. It also means if you need to make changes, they will be more easy to make and reflected through the entire program
You seem to have the right idea for the Document/Chapters, being laid out within tabs.
I'd follow through. Each Page would be a self contained component, possibly using something like a GridLayout.
Each Content section would be its own component, consisting of the title editor and then the questions.
Here I'd use a BorderLyout, placing the title editor at the north position and the question panel in the center. You could then use something like a GridLayout for the questions pane.
As for the margins, you can achieve hese through the use EmptyBorders
I have a list of entities where each entity render into widget based on JPanel. Widgets have dynamic behaviour - once placed on panel it can be changed by underlying entity. This happens automaticaly. Moreover some widgets can be resized by different actions, on button click for example.
The question is how to organise them into something like JList but without rubber stamp technics. In other words I wanna JList where each item rendered with cellrenderer stay "alive".
Right now I have implemented quick-and-dirty component based on JPanel with vertical BoxLayout, it uses JList's renderer component and it's model... but my implementation is too dirty...
Um.. yeah, using JTable is not suitable too.
Do you have some ideas?
If you don't want rubber stamping to take place then you'll have to create your own JList implementation that uses actual components.
You could try and work around the rubber stamping effect by caching each component for each row in your renderer and bind values into it and return that instance when JList asks the renderer for it. This is pretty risky because if you have 20 rows being displayed you'll have to cache 20 instances in your renderer, and only when the row isn't visible can you reuse one. That would mean if you had 5 unique configurations (A,B,C,D,E) of components you might have 10 of type A, 5 of type B, 2 of type C, and 3 of type D, and 0 of type E being displayed. However, you can't simply reuse one of those components without knowing if its being displayed or not. So you'd have to take into account if the row is being displayed and if it's the right type for the row you are rendering. And you'll have to clean up after the row is hidden.
Another option is make a single component for the row that encapsulates all X variations you have and put those on a CardLayout. Then you can simply cache one per row being displayed, and simply swap the card being displayed upon rendering that row. I think that might be the simplest option for you.
The harder part is going to be routing events click mouse clicks, keyboard events, etc to those active components to have them respond like normal components. Re-rendering the buttons when the user clicks them, and so forth is going to be challenging. Not impossible, but tedious.
Finally, variable row height JList is a pain. Especially in your calculations to figure out if a row is displayed or not because you can't simply do easy math like: int rowHeight = jlist.getHeight / model.size(). It doesn't work. You have to calculate each row's height and them up to figure out if a row is visible or not.
Doing what you're talking about is a lot of work, and very tricky coding to work around some of the assumptions of JList to make it work. In the end you might find it easier just to implement your own List control that makes different design decisions. Either way its going to require you are good at Swing to get it to work.
Ok. I don't find any implementation of such component. Let it be first one.
https://github.com/wertlex/JActiveList
P.S. I don't think this is proper way implementation... but it works.
use JList and ActionListener XD
In order to be able to display a sentence on a, say, JPanel with a GridLayout(1,0) [i.e., only one line/row] and then be able to draw a syntax tree (or similar) above it, I want to display the sentence as a row of Strings, which each include one word.
The single Strings should then be either selectable (as in a JList), or I should at least be able to get their Location on the JPanel via getLocation().
Up to this point I have tried the following options, and had the following issues:
- Single Strings as JLabels: The JLabels are stretched out to fill the JPanel width, re-sizing them to fit the single String they're displaying seems complicated. I would want to be able to do this, however, to make the sentence look like a sentence and not like a badly layed out table.
- JList: All the functionality I want, but I'm unaware of an option to re-size the "cells" of a single String (cf. JLabel above). Also, I'm having difficulties restricting display of the JList to a single line/row (cf. another of my questions).
- JTextArea: I couldn't get my head round how to get the Location of the single Strings that I had appended to the JTextArea.
I'm aware that drawString() might be an option, but I'm afraid to use it since I don't want to mix AWT and Swing. Also, I would need to calculate the int values for x and y for every single String. And I'm not sure whether I'd be able to get their Locations at all (although I could of course save their ints in a Map or Vector since I have to calculate them anyway).
Thankful for any suggestions! Thanks!
I would use JTextArea and method modelToView()/viewToModel() to get x,y for position in nthe string and position in the string for coordinates x and y.
Also use Utilities class getWordStart() getWordEnd() getRowStart() getRowEnd() methods.
EDIT: As noted by camickr in the comments, setSize() is not an appropriate way to lay out Components (as this is automatically done by the respective LayoutManager, I have removed the respective code from my answer.
Triggered by StanislavL's answer, I have found a solution to do it via JTextField, albeit by using one for each String rather than just one (as suggested by StanislavL).
I can now easily getLocation() for each JTextField. Simple, really!
I'd like to thank StanislavL for his answer, without which I'd never have though about this, and camickr for his comment.
In my Java app I am trying to create a very simple form with a label and a set of controls on each row of the form. Imagine something like this crude ASCII diagram:
Result 1: (*) pass ( ) fail
Result 2: ( ) pass (*) fail
Error Count: [10______]
Explanation: [Operator overload___]
Annoyingly the JRadioButtons don't line up with the rest of the controls as they have a large amount of padding all around, pushing them to the right a couple of pixels and adding a lot of space between lines. I end up with something like this:
Result 1: (*) pass ( ) fail
Result 2: ( ) pass (*) fail
Error Count: [10______]
Explanation: [Operator overload___]
How can I get the radio buttons to stop having so much empty space so they can line up nicely with everything else? If it matters this is using the GTK L&F; I haven't tried running the program under Windows.
It looks like there are two culprits:
The mini-JPanel containing the two radio buttons has a FlowLayout which defaults to adding 5 pixels of padding around each component.
Doing radioButton.setBorder(null) eliminates another pixel's worth of space around the buttons. It also screws up the dotted line drawn around them when they have focus, though.
Use a GridBagLayout, and make sure to anchor cells (each label and checkbox would have its own cell) towards the left or towards the right as needed. The labels would be right-justified, the checkboxes would be left-justified.
Since customizing GridBagLayouts by hand is a hassle, I recommend using the NetBeans GUI builder and adjusting them using its graphical "customize" tool.
Another solution can be to change margin (radionbuttons's setMargin method). This should do the job. The only downside is that margins/insets will be different for different LAFs.