Win a copy of Programmers Guide to Apache Thrift this week in the Open Source forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Devaka Cooray
  • Knute Snortum
  • Paul Clapham
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Bear Bibeault
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Ron McLeod
  • Piet Souris
  • Frits Walraven
Bartenders:
  • Ganesh Patekar
  • Tim Holloway
  • salvin francis

GUI Swing Design  RSS feed

 
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
i want to create a GUI for a virtuel shop with Swing and tried several different things and it just doesnt work like i designed it.
I have worked daily about 3h and tried stuff but always getting to the point where i think it doesnt work like that and start over.
Can sdy drop some key information what Layouts, structure to use to succeed?

I post a picture of how i want to make it look.

Design.jpg
[Thumbnail for Design.jpg]
 
Marshal
Posts: 64471
225
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Welcome to the Ranch

I can think of several ways to do it.
  • 1: Find out about Cay Horstmann's GBC class, which makes using the constraints much easier. Then give the whole frame a GridBag layout. Your component 1 might want location 0, 0, xspan 2, yspan 5. Component 2 would have location 0, 5, xspan 2 and yspan 3. Then component 3 would have location 1, 8, xspan 1 and yspan 2. Use insets to separate the components from one another.
  • 2: If component 1 is a panel with buttons on, give that a grid layout 3, 4.
  • 3: Alternatively, create a panel for the left ⅓ of the display, a second panel for the middle and another for the right. They can each have different layouts.
  • 4: Find out about MigLayout.
  • 4: Find out about group layout, as used as a default by the Netbeans GUI builder (I think, “Matisse”).
  •  
    Saloon Keeper
    Posts: 10206
    216
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    When determining what layout to use, knowing what you want the window to look like at a specific point in time is much less important than knowing how you want the window to react to a resize.

    First figure out which components should soak up or yield surface area when the window becomes larger or smaller, and how components should move relative to each other. Then, if a set of controls that are close together move and resize in a similar fashion, they probably belong together in a panel with some layout manager.
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    It is fullscreen application so i think it should be realtive to the size of the screen
     
    Campbell Ritchie
    Marshal
    Posts: 64471
    225
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    That mean it will look different on a desktop with a 3440×1440px screen from a smartphone with a 750×1334px screen.

    Remember what Stephan said about changes to the size of the frame; it needs to look good in both sizes.
     
    Stephan van Hulst
    Saloon Keeper
    Posts: 10206
    216
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    The best way to get a consistent look is to test your application by resizing the window a lot, even if you intend it to be run in full screen mode.
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Can we learn walking before climbing to Olymp?
    I have never swinged in my life before.
    How can I connect a for example BorderLayout.WEST panel with the left boarder?
    Center,West and East are clumping in mid.
     
    Campbell Ritchie
    Marshal
    Posts: 64471
    225
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Ivan Gortschakow wrote:Can we learn walking before climbing to Olymp? . . .

    You will have to try a simpler example then, with only a few Components. If you turn up and ask, “How do I get this layout?” we shall tell you. We shall presume you know something about layouts already.
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Of course. I ve been reading reading and watching documentations since sunday on a daily basis.
    I have no idea why but after i deleted everything i had and strated over it somehow worked.
    But like i said. Everything is clumping mid.
    Somehow i have to bind the West and East Panels on ContentPanes Boarders and the center Panel has to fill the rest.
    The mid Panel is the painted blue thing
    123.jpg
    [Thumbnail for 123.jpg]
     
    Rancher
    Posts: 3040
    22
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    The key to any complex layout is to break the layout down logically into smaller panels and to use the appropriate layout manager for each panel.

    You just identified 3 logical groupings (west, center and east).

    So the place to start is with a BorderLayout. It has LINE_START, CENTER and LINE_END constraints.

    See the Swing tutorial on Layout Managers for more information and examples.

    Note the panels you add to the west, east will expand in height if the frame height is increased.

    You can prevent this by using a "wrapper panel". Something like:

     
    Campbell Ritchie
    Marshal
    Posts: 64471
    225
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Follow RC's suggestions. But don't try to do everything at once. Start with your number buttons and get them working. By the way, but “.” on the bottom left and “0” at the bottom centre. Then add one component at a time.

    How are you creating the number buttons?
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Rob Camick wrote:The key to any complex layout is to break the layout down logically into smaller panels and to use the appropriate layout manager for each panel.

    You just identified 3 logical groupings (west, center and east).

    So the place to start is with a BorderLayout. It has LINE_START, CENTER and LINE_END constraints.

    See the Swing tutorial on Layout Managers for more information and examples.

    Note the panels you add to the west, east will expand in height if the frame height is increased.

    You can prevent this by using a "wrapper panel". Something like:




    I did that.  Im looking for the function to attach east and west panel to the boarders.
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Campbell Ritchie wrote:Follow RC's suggestions. But don't try to do everything at once. Start with your number buttons and get them working. By the way, but “.” on the bottom left and “0” at the bottom centre. Then add one component at a time.

    How are you creating the number buttons?



    I thought it would be the best to finish the design and focus at the logic second
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator


    It is just the question of attching the sidepanels to the boarder. I have no other problems at the moment
     
    Campbell Ritchie
    Marshal
    Posts: 64471
    225
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Ivan Gortschakow wrote:. . . I thought it would be the best to finish the design and focus at the logic second

    Nonononononononono. The display is simply a display. You need to get the logic designed and working before trying to draw a GUI. Remember that the logic should work completely independently of the GUI. Then you can add the GUI to it.
     
    Ivan Gortschakow
    Greenhorn
    Posts: 9
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Campbell Ritchie wrote:

    Ivan Gortschakow wrote:. . . I thought it would be the best to finish the design and focus at the logic second

    Nonononononononono. The display is simply a display. You need to get the logic designed and working before trying to draw a GUI. Remember that the logic should work completely independently of the GUI. Then you can add the GUI to it.


     
    The logic is programmed in some minutes.
    My struggle is the design becuase i have never done that before.
    Beside the Keypad already works.
     
    Rob Camick
    Rancher
    Posts: 3040
    22
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Im looking for the function to attach east and west panel to the boarders.



    What? I just gave it to you.

    Did you read the tutorial and download the demo code for the BorderLayout?

    If you have a problem then forget about your application and post a SSCCE that demonstrates the problem.

    So you create a frame. Add a JLabel to the west and a second JLabel to the east. Do they display at the borders?

    If not, then you have a simple 15 line program to post in the forum so we can see exactly what you are doing.

    If it works, then you replace the label with a panel containing more components.
     
    She said she got a brazillian. I think owning people is wrong. That is how I learned ... tiny ad:
    ScroogeXHTML - small and flexible RTF to HTML converter library
    https://coderanch.com/t/710903/ScroogeXHTML-RTF-HTML-XHTML-converter
    • Post Reply Bookmark Topic Watch Topic
    • New Topic
    Boost this thread!