Results 1 to 10 of 10
  1. #1
    xtrem06000 is offline Member
    Join Date
    Jan 2012
    Posts
    5
    Rep Power
    0

    Default Complex component layout and drawing.

    Hello, i would like to realise a single component that has 5 buttons. The component look something similar to this button plus four buttons that i make from dividing the outer ring in four parts like if there was a cross or an X across it.
    I have images for all buttons, and for different buttons state and I tried to make a component with 5 JButtons in a JPanel with BorderLayout and GridBagLayout, but i cannot achieve the same visual representation as the button in the tutorial due to the rectangular shape of JButton.
    I would like to have some advice on how to realise this kind of complex component.
    Thank you.
    Last edited by xtrem06000; 01-20-2012 at 08:20 AM.

  2. #2
    Eranga's Avatar
    Eranga is offline Moderator
    Join Date
    Jul 2007
    Location
    Colombo, Sri Lanka
    Posts
    11,372
    Blog Entries
    1
    Rep Power
    20

    Default Re: Complex component layout and drawing.

    What you can do is add round images into the button and hide the borders of it. Even though you have be careful to set the button size much similar to the image. Otherwise the click-able area may confused.
    Last edited by Eranga; 01-20-2012 at 09:20 AM. Reason: added more

  3. #3
    xtrem06000 is offline Member
    Join Date
    Jan 2012
    Posts
    5
    Rep Power
    0

    Default Re: Complex component layout and drawing.

    This is what i did.
    Here is the code for one of my rounded button

    Java Code:
    btnUp.setIcon(new ImageIcon(getClass().getResource("/resources/btn-up-arrow.png")));
    btnUp.setBorderPainted(false);
    btnUp.setContentAreaFilled(false);
    btnUp.setFocusPainted(false);
    btn.setHorizontalTextPosition(SwingConstants.CENTER);
    btnUp.setIconTextGap(0);
    btnUp.setMargin(new Insets(0,0,0,0));
    btnUp.setPressedIcon(new ImageIcon(getClass().getResource("/resources/btn-up-arrow-pressed.png")));
    I did the same for the 4 rounded button of the outer ring, and add it to a BorderLayout, north, south, east, west position but the space between buttons is too big. I also tried with a GridBagLayout with the same result. I wonder if using JLayeredPane would give better result. But i'm scared that some part of some buttons won't be clickable anymore if another buttons is superimposed over it. I have to try to see. Thanks if someone has suggestion.
    Last edited by Eranga; 01-23-2012 at 06:31 AM. Reason: code tags added

  4. #4
    Eranga's Avatar
    Eranga is offline Moderator
    Join Date
    Jul 2007
    Location
    Colombo, Sri Lanka
    Posts
    11,372
    Blog Entries
    1
    Rep Power
    20

    Default Re: Complex component layout and drawing.

    Could you please show me a screen shot of the UI. Or else post the code you have, so I can have a look at it.

    BTW, please use code tags when you are posting code segments in the forum. Unformatted codes are really hard to read.

  5. #5
    xtrem06000 is offline Member
    Join Date
    Jan 2012
    Posts
    5
    Rep Power
    0

    Default Re: Complex component layout and drawing.

    Hi, i will try to post UI screenshot and code later. For the moment i think i've got the trick. I will not cut the image for all my buttons, but just let the whole image on JPanel background, then create transparent JButton over it. On the button click, i will repaint the whole JPanel background with another whole image showing the state of the clicked button.

  6. #6
    Eranga's Avatar
    Eranga is offline Moderator
    Join Date
    Jul 2007
    Location
    Colombo, Sri Lanka
    Posts
    11,372
    Blog Entries
    1
    Rep Power
    20

    Default Re: Complex component layout and drawing.

    Seems ok, but lot of resources are utilized. Dealing with a single buttons is the best, and all you have to do is create transparent images in different sizes which suite to your buttons.

  7. #7
    xtrem06000 is offline Member
    Join Date
    Jan 2012
    Posts
    5
    Rep Power
    0

    Default Re: Complex component layout and drawing.

    Ok i tried with the technique from my last post and it is much easier to make the component this way. After in terms of performance it may not be very efficient as you pointed out.
    Attached Thumbnails Attached Thumbnails Complex component layout and drawing.-btn.png  
    Last edited by xtrem06000; 01-24-2012 at 08:40 AM.

  8. #8
    Eranga's Avatar
    Eranga is offline Moderator
    Join Date
    Jul 2007
    Location
    Colombo, Sri Lanka
    Posts
    11,372
    Blog Entries
    1
    Rep Power
    20

    Default Re: Complex component layout and drawing.

    Is it works as you expected, and in a better way than previous?

  9. #9
    xtrem06000 is offline Member
    Join Date
    Jan 2012
    Posts
    5
    Rep Power
    0

    Default Re: Complex component layout and drawing.

    It is working yes, but i will try again to make separate buttons. It is more efficient, but harder to do. Thanks for advice.

  10. #10
    Eranga's Avatar
    Eranga is offline Moderator
    Join Date
    Jul 2007
    Location
    Colombo, Sri Lanka
    Posts
    11,372
    Blog Entries
    1
    Rep Power
    20

Similar Threads

  1. Complex Multilayer Component Layout
    By alan93 in forum AWT / Swing
    Replies: 8
    Last Post: 12-03-2011, 02:16 PM
  2. How complex is too complex for a single class?
    By manji51 in forum AWT / Swing
    Replies: 7
    Last Post: 07-08-2011, 07:20 PM
  3. drawing only the most recently added component?
    By billycro in forum New To Java
    Replies: 10
    Last Post: 07-03-2011, 08:55 PM
  4. Replies: 13
    Last Post: 12-06-2010, 05:57 AM
  5. Component Layout method help!!!
    By brandnew956 in forum New To Java
    Replies: 5
    Last Post: 04-14-2010, 08:19 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •