Create a Notepad with Javafx2 - The Layout

There are many things that a FX Application can do. Its features can be experienced when we start creating Applications and diving into the limitless creative abilities and features offered. Our motive here is also simple here. 

Lets start by creating a simple Application - Notepad. Yes, one of simplest yet a very useful application. 

There are many ways of creating a Notepad. I'll be using the following.

The detailed breakup of layout is shown below.

Let us know start writing the fxml code for all that we decided above. The code will be very simple and will contain only the layout of the application and nothing beyond that. The rest is parked for a later discussion. For now lets create the layout. 

Create a notepad.fxml file and start filling up as we have mentioned in the prototype above.

Now, creating a window will be handled in the Java code. Let's start by creating a BorderPane. BorderPane lays out children in top, left, right, bottom, and center positions.

Enter the following lines in your fxml file.

<BorderPane xmlns:fx="http://javafx.com/fxml">
        <top>
        </top>
<center>
<TextArea>
</TextArea>
</center>
</BorderPane>

The code is simple. We are adding a BorderPane. We need a top and center placement and hence the elements 'top' and 'center'. 
Now we have to fill up top placeholder. Looking back at the  requirement we are supposed to add a MenuBar. Easy. Javafx helps us with this as well. 

       <top>
<MenuBar>
<menus>
<Menu text="File">
<items>
<MenuItem text="New"></MenuItem>
<MenuItem text="Open..."></MenuItem>
<MenuItem text="Save"></MenuItem>
<MenuItem text="Save As..."></MenuItem>
</items>
</Menu>
<Menu text="Edit">
<items>
<MenuItem text="Undo"></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
</items>
</Menu>
</menus>
</MenuBar>

</top>

Adding a MenuBar is simple. The entire container that holds your Menu is called a MenuBar. A MenuBar will contain Menu's which in turn will have different submenus called items. Fill up whatever Menu and items you need and complete the code.

Here is the fxml code that I have written.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SeparatorMenuItem?>
<BorderPane xmlns:fx="http://javafx.com/fxml">
<top>
<MenuBar>
<menus>
<Menu text="File">
<items>
<MenuItem text="New"></MenuItem>
<MenuItem text="Open..."></MenuItem>
<MenuItem text="Save"></MenuItem>
<MenuItem text="Save As..."></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
<MenuItem text="Page Setup..."></MenuItem>
<MenuItem text="Print"></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
<MenuItem text="Exit"></MenuItem>
</items>
</Menu>
<Menu text="Edit">
<items>
<MenuItem text="Undo"></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
<MenuItem text="Cut"></MenuItem>
<MenuItem text="Copy"></MenuItem>
<MenuItem text="Paste"></MenuItem>
<MenuItem text="Delete"></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
<MenuItem text="Find..."></MenuItem>
<MenuItem text="Find Next"></MenuItem>
<MenuItem text="Replace..."></MenuItem>
<MenuItem text="Go To..."></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
<MenuItem text="Select All"></MenuItem>
<MenuItem text="Time/Date"></MenuItem>
</items>
</Menu>
<Menu text="Format">
<items>
<MenuItem text="Word Wrap"></MenuItem>
<MenuItem text="Font..."></MenuItem>
</items>
</Menu>
<Menu text="View">
<items>
<MenuItem text="Status Bar"></MenuItem>
</items>
</Menu>
<Menu text="Help">
<items>
<MenuItem text="View Help"></MenuItem>
<SeparatorMenuItem></SeparatorMenuItem>
<MenuItem text="About Notepad"></MenuItem>
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<TextArea>
</TextArea>
</center>
</BorderPane>


Fxml code is easy to understand. 
Remember to note the import statements like 
<?import javafx.scene.control.Menu?>

The fxml above is to be loaded by Java code as already mentioned in previous blogs. 
Here is the Java code for us. 

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Launcher extends Application {

 @Override
 public void start(Stage primaryStage) {

  try {
   // loading the fxml
   Pane pane = FXMLLoader.load(getClass().getResource(
     "/fxml/notepad.fxml"));
   
   // creating and initializing the scene.
   Scene scene = new Scene(pane);
   primaryStage.setScene(scene);

   // setting the height and width of stage.
   primaryStage.setWidth(1024);
   primaryStage.setHeight(768);

   // setting the App title
   primaryStage.setTitle("Untitled - Notepad");

   // display the stage
   primaryStage.show();

  } catch (IOException e) {
   e.printStackTrace();
  }
 }

 public static void main(String[] args) {
  launch(args);
 }
}

After we have finished, run the application. This is what we get as an output. Not much but we have managed at least the layout. looking at the code it cannot become simpler than this. 

So here we are with the layout of the App. Next we will try to add some css to  the application.