Tutorial Making your GUI match the client styling

Hi there,
Recently @Arbiter told me that he wants more script bot GUIs to look like the one I used on the BatMineAIO. The GUI on that script bot is styled after the script bot selector on the client, and looks like this:

So I thought I'd go over how I made this GUI step by step and touch on the key parts that make it look the way it does and how to make it match the currently set theme. Follow step by step as I build a very similar GUI. Fee free to copy this all you want.

Step 1 - GUI basics:
First off, let's get a basic GUI class going.

Code (Text):

1. public class StyledGUI extends Stage{
2.     public StyledGUI(String title, final AbstractScript script){
3.         super(StageStyle.UNDECORATED);
4.         this.setTitle(title);
5.         JFrame frame = ClientUI.getFrame();
6.         initStyle(StageStyle.TRANSPARENT);
7.     }
8. }

Explanation by line:
1. We extend Stage because that is what JFX uses, (this is similar but also very different from a JFrame)
2. This is our constructor declaration: It takes in a String for the title, and reference back to the calling script bot (used later)
3. This is is a call to the Stage constructor. We use StageStyle.UNDECORATED since we are going to add our own close button and don't want the default OS title bar
4. Set the title of the window. This will change the name of window displayed on your task bar.
5. Grab the main client's frame for use later.
6. Initialize the window so that it will allow transparency.

Step 2 - Adding Open and Close functionality:
Let's add a bit more to this constructor

Code (Text):

1. public class StyledGUI extends Stage{
2.     public StyledGUI(String title, final AbstractScript script){
3.         super(StageStyle.UNDECORATED);
4.         this.setTitle(title);
5.         JFrame frame = ClientUI.getFrame();
6.         initStyle(StageStyle.TRANSPARENT);
7.  
8.        setOnCloseRequest(new EventHandler<WindowEvent>(){
9.             @Override
10.             public void handle(WindowEvent event) {
11.                 script.stop();
12.             }
13.         });
14.  
15.         Platform.runLater(new Runnable() {
16.             @Override
17.             public void run() {
18.                 getIcons().add(SwingFXUtils.toFXImage((BufferedImage)frame.getIconImage(), null));
19.                 setX(frame.getX() + (frame.getWidth()/2) - 290);
20.                 setY(frame.getY() + (frame.getHeight()/2) - 176  + 40);
21.                 setScene(createScene());
22.             }
23.         });
24.     }
25. }

Explanation by line:
8-13. This will add a listener to the window so that when it is closed, it will automatically stop your script bot, pretty dandy right?
15-17. This is what will actually allow your GUI to "open" and be displayed
18. This will grab and set your window icon to the fun little RuneMate ClapTrap robot.
19-20. These lines set the x,y location of the window to be centered on the Runemate Client. the +/- mystery numbers at the end are to account for the header on the client and the height/width or our window
21. This is what will cause the actual scene/window to be generated. We push this into a different method so the code doesn't get cluster fucked.

Step 3 - Adding our basic scene:
Add this method below the constructor.

Code (Text):

1. public int dispose = 0;
2. BorderPane root = new BorderPane();
3. private Scene createScene(){
4.     Scene scene = new Scene(root);
5.     scene.setFill(null);
6.     root.setMinWidth(580);
7.     root.setMinHeight(349);
8.  
9.     FadeTransition ft = new FadeTransition(Duration.millis(500), root);
10.     ft.setFromValue(0.0f);
11.     ft.setToValue(1.0f);
12.     ft.play();
13.     return scene;
14. }

Explanation by line:
1. A variable that will be used to track the state of the GUI later
2. Create a BorderPane, this will be our top level container.
3. Now the method declaration
4. Create a new Scene, this will be needed later when we want to add some styling.
5. This is also needed to make the GUI transparent.
6-7. Set the minimum width and height for the window
9-12. This will make the window fade in when it is opened, the same way that the script bot selector does.
13. Now of course we need a return silly, it wouldn't work otherwise.

At this point we have a GUI that is now openable! If you do follow the next step right away, just remember that it may be difficult to close the window since it is Undercoated and currently completely invisible.

Step 4 - Open the GUI in the script bot:
Add this to the field variables of your script bot

Code (Text):

1. StyledGUI gui;

Add this snippet to the onStart of you script bot.

Code (Text):

1. AbstractScript THIS = this;
2. Platform.runLater(new Runnable() {
3.     @Override
4.     public void run() {
5.         gui = new StyledGUI("Sample GUI v1.0", THIS);
6.         gui.show();
7.         }
8.     });
9.  
10.     while(gui == null || gui.dispose == 0)Execution.delay(500);
11.     if(gui.dispose == 2){
12.         stop();
13.         return;
14.     }

1. We need a final copy of the current script bot in order to pass it in an anonymous function.
2-3. We need to open the GUI on the JFX window thread, Note this will be non-blocking
4. Create a new GUI object, passing it our title, and the final copy of the local script bot.
5. This will actually open the window! Yay!
7. Now we wait for the gui to close, before we advance. The gui will set the dispose variable accordingly, 0 = start script bot, 2 = end
8-11. This will make sure we stop if the window was closed, but the start button was not clicked.

More to Come...