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
Related
I'm working on a POS system for a fast food restaurant. I've developed Adding, updating and deleting products using a MySQL Database. Now I need to create the POS GUI (using SWING) which the cashier uses to create the bill. The interface I have in mind is like what MacDonald's uses, there's a set of buttons with the product images. (I have stored BLOBS of products successfully)
example image :
I have no idea on how to accomplish this, it would be awesome if its possible to generate a set of dynamic Jbuttons which gets the image of a product along with the name and price. Is this the best way to accomplish this? and how do I achieve this? A few details to put me on the correct path will be greatly appreciated!
Thanks.
You have at least four containers, the top row, the bottom row and each row containing a separate container in the middle (for the buttons).
The basic layout for the rows might be a GridLayout, each row would probably use a BorderLayout with the nav buttons in the WEST and EAST positions. CENTER container could use a GridLayout, but won't give you the look you're after. You could use a FlowLayout and even a GridBagLayout, but you'd need to ensure the size of the buttons where correct for your needs
On the left I see a JTable and two JPanels, containing the buttons, held together with a GridBagLayout.
On the right I see a JList. See How to Use Lists for more details. You'll probably also want to have a look at Concepts: Editors and Renderers and Writing a Custom Cell Renderer for details about how you could customise the look of the cells and How to Write a List Selection Listener for details about how to determine when the user changes the selection
Together, they are probably maintained by a GridBagLayout within a single container for ease of use
Along the button is probably another container using a GridBagLayout.
Altogether, they are probably held together by a GridBagLayout
Have a look at Laying Out Components Within a Container, How to Use GridBagLayout, How to Use BorderLayout and How to Use FlowLayout for more details
You will need to look into the GridLayout.
In your case, it might be a little bit more complex since you have multiple grids, some of which seem to be nested within each other.
You should be able to allocate the grid dynamically and then leave it to the layout manager to distribute things evenly over the page.
Depending on the complexity of your layout, it might also be a good idea to look into the GridPane provided by JavaFX.
Hi I look for you this problem and I find this solution ;
http://www.javasrilankansupport.com/2012/06/create-dynamic-jbutton-with-image-and.html
I want to make an app, which will work as interface to several servers.
Why: In web iface provided by default (and we cannot change it) are few things we miss, few could be done better and for sure automation of some stuff would make the job easier.
What do I have: almost finished classes for communication with web interface of a server app.
GUI description:
For some kind of version 0.1: text field for username, radio button to select server and one "go" button. Then several (4-12) action buttons to operate on data, 2x text area with results, one label with some text data - I can manage this.
Then I need to view the data - grid MxN which will load the data, expected size: 7-15 columns, usually 10 rows or less, but rarely it can go over 1k (or even more, but I don't need all to be visible to the user in that case).
What I need: simply an advice.
I wish to start with a simple version (and I'm working on that already, but I'm stuck on too many things - 95% cos and absolutely new to GUI and 5% cos I'm new to java).
I've checked many tutorials, but they're all simple.
Real questions:
1) Verify. In MVC controller should handle all user actions - is it done by view's method which is something like button.addActionListener(param); anotherButton.addActionListener(paramp; ...?
1b) I've seen all implemented via one (nested) class, which was then checking source or smth - is that ok? There will be a lots of buttons etc.
2) How to implement the data grid, when I need to take actions on click / dbl click?
4) First row is header, the rest should be scroll able - should it be in the grid or outside (its own grid):
4a) How to make sure header's size (width) will be the same as in data (I don't want to set up straight size)
4b) I failed to create anything scrollable so far, but thats my bad I guess. How to ensure header will hold on a place and the rest can be scrolled?
5) How should be "data update" implemented? I've got JPanel from which I remove grid component and then I make new one and add data into it (simple, but perhapss there is another way). One of first enhancements will be sorting - use the same way I used for new content?
Thanks a lot for any answer, I know this is not very specific, but example I've found are too simple.
I plan a lots of enhancements, but thats in the future and I don't mind to rework GUI/Controller several times, at least, I'll practise, but I don't want to finish one part of the code and realise I've got to rewrite half of a controller and 1/4 of a view to make it possible.
Note: I plan to use this at work as my tool (if things go right, I could make 25-50% of my work by few clicks :-)
So I really mean this).
Note#2: I'm not new to programing, but I've never created GUI (which is why I've got GUI with menu bar with 2 items and 3 components and almost done web-iface connections).
Note#:3 dragable data header, tabbed data view - thats the plan for the future :-)
MVC in Swing is examined here; use nested classes for ease in prototyping and creating an mcve for future questions; as the need arises, nested classes can be promoted to separate classes having package-private access.
Use JTable; its flyweight implementation of renderers is good for organizing data by row and column.
Item three does not exist, but "always remember to translate cell coordinates" if you plan to drag columns or sort rows.
Use a JScrollPane to keep the table header stationary.
Update the TableModel, and the listening view will update itself in response.
If you are interested not only from the event/messaging architecture, but also on handling mouse/keyboard input, hovering detection, widgets, temporary menus, form re-sizing with widget alignment, dragging and dropping etc. I can advice you to look at this question and my answer with helpful resources.
Iam studying about JTree right now.
But i don´t know how to render content of choosen JTrees node in e.g. bottom part of my application.
Lets say i would make application with content - see my picture.
I know how to make JTree, but how to manage - if i click on e.g. SUV just bottom part of my application will change the content, JTree remains and upper part as well. still just bottom part changes its content. e.g. suv - info about SUV, CABRIO - info abou cabrio.
Do I need another JPanels for upper part which will be stable?
Do I need another JPanels for botton part which will not be stable?
I really need help with this issue, or some link, where can i find answer on my question
Thanks
You need two separate components:
A JTree
A separate JPanel
You need to add a TreeSelectionListener to the JTree. That will let you know when the user has selected one of the values in the JTree, and you can use that selection to change the contents of the JPanel.
You'll need another JPanel for your area labeled, "This part remains the same". You will probably want to put the two JPanels in a JSplitPane with a VERTICAL_SPLIT.
I'm intentionally leaving out some of the implementation details because it looks like you're completing a homework assignment.
I have a GUI setup that looks like this:
It displays a document and enables user to edit it by adding/removing JTextAreas and text in them.
I have a problem when trying to open the document. Document itself is made up of layers of JPanels on top of each other. There are never more than 6 layers of JPanels at a single point in the GUI.
Since I don't know what the height of the JTextArea will be, I have to make it relative to the parent (in other words, not specify it).
Because the layout manager (MigLayout) doesn't know the exact size of the component (it's relative to the parent), it first asks its parent for the parent's size. That size is again unknown and the parent's parent is asked and so on (until a level 1 or 2 JPanel). In the end it has to ask a lot of components for their size (a method checkParent(Container) within MigLayout was called over 100 000 times just for the example above).
What I need to do is set the height of the JTextArea (or the JPanel that it resides in) only when the document is being opened, so the layout manager doesn't have to ask JTextAreas parent, causing a recursive hell.
After the document is opened I have to reset the height to default (so the height adjusts when the text is added/removed).
I have absolutley no idea how to do this, or if this is the way to go, I'm only sure that the thing I described above is the problem.
Several notes:
this is not a MigLayout bug, I have been to the forums(link below)
check this out (the last post)
I can't put a JScrollPane into the JTextArea as its task isn't only to hold the information, but to display exactly how much room it takes
I can easily get the heights of the JTextAreas when saving the document, thus having them at my disposal when opening it again
EDIT:
The document referenced in this question is not "the document" as thingy used in JTextAreas and similar, but "a document" as in custom class in my program (which I didn't mention because it is irrelevant, unless it's understood as "the document").
Because your Document models a hierarchical structure, you need a tree. Because your interface requires both a control and a view for each node, you need a table. Outline, seen here, might be a suitable choice. Your DocumentTreeModel would hold a reference to the document's root Element, just as the example's FileTreeModel holds a reference to the root File. Your RowModel would include a JLabel, a JCheckBox and a JTextArea.
As a way of learning Java, I'm writing this little application for grade schoolers to practice basic math. The idea is that the kid does any number of math problems, as long as they are in the app, it just continues to throw problems at them until they click a 'Done' button. When they decide to be done, I want a new JFrame to come up that will show them all of the problems they attempted, along with their answer, and whether they got the problem right or wrong.
The advice that I am looking for is what is the best way for me present these results. I looked into the GridLayout and the GroupLayout, but I don't think that these are exactly right. I did something similar in VBA for Excel, and there I just ran a for loop with one iteration for every problem they attempted. Each iteration would add a row of labels to the frame with the elements of the problem displayed in the various labels. I tried this in Java, but I'm not even able to get the labels to even display.
So before I get all specific and start posting my code, I want to ask a bigger question, which is "what is the best method to create a view like this?" Often, I go off in one direction only to waste time before somebody suggests a totally different (and better) approach.
Thanks!
(edit: here's an image of how I did this in Excel. I'm trying to repeat basically the same thing in Java)
One simple way to make that design would be to use a mix of components. You could have a bunch of JLabels and JPanels stacked in a vertical FlowLayout. The grid you have described would be best designed in a JTable, something like the below:
If you like tables like Excel then, Java provides JTable class to create tables, if you want.
Tutorial : http://docs.oracle.com/javase/tutorial/uiswing/components/table.html