Custom interface design

I'm in the process of learning Java (my first forray into object oriented programming).  I took a program that served a need of mine but was very limited in function, decompiled it, modified it and added a lot of additional options and features.  Everything with the program is working great, but I want to change the look and feel of it.  Currently it looks like this:

http://thelcrp.net/images/PControl.jpg

I want it to look more like this mock-up I've created:

http://thelcrp.net/images/PControl4.jpg

I'm sure there is not a quick and easy answer to this.  So all I'm really expecting is to be pointed in the right direction and maybe address a couple follow-up questions.
LVL 1
HeathicusAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BreadstickCommented:
The simplest solution in your case would be to construct the desired interface with normal JButton's, then set Icon's for the button's, with setIcon(), setPressedIcon(), and setRolloverIcon().

Another option would be to draw all of your components using Java2D, and then write a MouseListener, and MouseMotionListener to handle mouse movement and clicks.
0
expertmbCommented:
it is possible to have that L&F
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

JavatmCommented:
Hi;

I see what you need :

1. Create a frame using JWindow instead of JFrame.
2. Add the background image to JWindow.
3. Customize your buttons by designing the image.
4. Use the codes bellow for customizing it :

  JButton button = new JButton(new ImageIcon("x1.gif"));
  button.setPressedIcon(new ImageIcon("x2.gif"));
  button.setRolloverIcon(new ImageIcon("x3.gif"));
  button.setDisabledIcon(new ImageIcon("x1.gif"));
  button.setFocusPainted(false);
  button.setBorderPainted(false);
  button.setContentAreaFilled(false);
  button.setMargin(new Insets(0,0,0,0));

5. Use a good layout to adjust to your needs, like border and grid.
6. A link that can give you help is :

http://www.experts-exchange.com/Q_20639614.html

Hope that helps . . .
Javatm
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JavatmCommented:
If incase that you dont know how to put a background or paint an image to a JWindow.
Here is an example on JFrame but can also be use for JWindow :

http://www.experts-exchange.com/Q_20847106.html
0
HeathicusAuthor Commented:
Thanks for the help.  I haven't figure out the JWindow yet, but I'm making progress using JFrame.

Focusing on just one jpanel for now (the Source panel in my mockup) I have my buttons added with different versions for their different states, and I've even suppressed the focus border and added tooltips.  Everything functions correctly.  But I have two more questions:

How do I limit the button area to just the edges of the .jpg file?  For instance, if I make a round button (or some other shape, such as the arrows in my mockup), how do I limit the button area to just that image instead of the rectangle around it?  Should I make the icon files as transparent .gifs instead of .jpgs?

How can I set specific size dimensions and window loactions on the jpanels (or even individual buttons) to get the exact layout I want?
0
JavatmCommented:
> How do I limit the button area to just the edges of the .jpg file?
Check-out my codes above it'll limit the edges depending on how it was made.

>Should I make the icon files as transparent .gifs instead of .jpgs?
Yes you can also do that.

> How can I set specific size dimensions and window loactions on the jpanels (or even individual buttons) to get the exact layout I want?
Exactly means you have to plan 1st. 2nd know what layout you would want to use. For Layout the hardest would be GridbagLayout. Its
the most specific layout but surely the hardest to implement. BorderLayout and GridLayout combination is what I use.

Here is a tutorial :
http://java.sun.com/docs/books/tutorial/uiswing/layout/using.html

Hope that helps .  . .
Javatm
0
JavatmCommented:
What happend ???
0
HeathicusAuthor Commented:
Sorry for the silence.  I read through the tutorial you linked to and found it very educational.  I began experimenting with various combinations (GridBagLayout for general layout, and others for the specific sections) but had to set the project aside a few days ago.  I hope to put my focus back on it within the next couple days.  But I will clean this question up soon.
0
HeathicusAuthor Commented:
I still haven't had much time to work on my program, but I want to clean this question up.  I keep trying to get back to work on it before it becomes pushed aside for good, but so far no luck.  I am taking vacation next week and I'm taking my laptop for the sole purpose of working on this.  I'm sure I'll have more questions when I get back.

I'm splitting the points and giving 100 to Javatm for all of his help (that last link was particularly helpful), and 25 to expertmb as the link he provided was very helpful as well.
0
JavatmCommented:
Thanks for accepting and hoping to help you more in the future.

http://freewebs.com/cube-j
Friend : Javatm
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Java

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.