\documentclass[11pt, oneside,a4paper]{article}   

\usepackage {graphicx}
\usepackage{graphics}
\usepackage{listings}
\usepackage{color}
%\usepackage{german}
\usepackage{hyperref}
\usepackage{subcaption}
\usepackage{cite}

\usepackage{amsmath}
\usepackage{amsfonts}
\usepackage{amssymb}

 
\definecolor{dkgreen}{rgb}{0,0.6,0}
\definecolor{gray}{rgb}{0.5,0.5,0.5}
\definecolor{mauve}{rgb}{0.58,0,0.82}
\definecolor{gray}{rgb}{0.4,0.4,0.4}
\definecolor{darkblue}{rgb}{0.0,0.0,0.6}
\definecolor{lightblue}{rgb}{0.0,0.0,0.9}
\definecolor{cyan}{rgb}{0.0,0.6,0.6}
\definecolor{darkred}{rgb}{0.6,0.0,0.0}

\lstset{
  basicstyle=\ttfamily\footnotesize,
  columns=fullflexible,
  showstringspaces=false,
  numbers=left,                   % where to put the line-numbers
  numberstyle=\tiny\color{gray},  % the style that is used for the line-numbers
  stepnumber=1,
  numbersep=5pt,                  % how far the line-numbers are from the code
  backgroundcolor=\color{white},      % choose the background color. You must add \usepackage{color}
  showspaces=false,               % show spaces adding particular underscores
  showstringspaces=false,         % underline spaces within strings
  showtabs=false,                 % show tabs within strings adding particular underscores
  frame=none,                   % adds a frame around the code
  rulecolor=\color{black},        % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. commens (green here))
  tabsize=2,                      % sets default tabsize to 2 spaces
  captionpos=b,                   % sets the caption-position to bottom
  breaklines=true,                % sets automatic line breaking
  breakatwhitespace=false,        % sets if automatic breaks should only happen at whitespace
  title=\lstname,                   % show the filename of files included with \lstinputlisting;
                                  % also try caption instead of title  
  commentstyle=\color{gray}\upshape
}

\lstdefinelanguage{CSS}{
  morekeywords={accelerator,azimuth,background,background-attachment,
    background-color,background-image,background-position,
    background-position-x,background-position-y,background-repeat,
    behavior,border,border-bottom,border-bottom-color,
    border-bottom-style,border-bottom-width,border-collapse,
    border-color,border-left,border-left-color,border-left-style,
    border-left-width,border-right,border-right-color,
    border-right-style,border-right-width,border-spacing,
    border-style,border-top,border-top-color,border-top-style,
    border-top-width,border-width,bottom,caption-side,clear,
    clip,color,content,counter-increment,counter-reset,cue,
    cue-after,cue-before,cursor,direction,display,elevation,
    empty-cells,filter,float,font,font-family,font-size,
    font-size-adjust,font-stretch,font-style,font-variant,
    font-weight,height,ime-mode,include-source,
    layer-background-color,layer-background-image,layout-flow,
    layout-grid,layout-grid-char,layout-grid-char-spacing,
    layout-grid-line,layout-grid-mode,layout-grid-type,left,
    letter-spacing,line-break,line-height,list-style,
    list-style-image,list-style-position,list-style-type,margin,
    margin-bottom,margin-left,margin-right,margin-top,
    marker-offset,marks,max-height,max-width,min-height,
    min-width,-moz-binding,-moz-border-radius,
    -moz-border-radius-topleft,-moz-border-radius-topright,
    -moz-border-radius-bottomright,-moz-border-radius-bottomleft,
    -moz-border-top-colors,-moz-border-right-colors,
    -moz-border-bottom-colors,-moz-border-left-colors,-moz-opacity,
    -moz-outline,-moz-outline-color,-moz-outline-style,
    -moz-outline-width,-moz-user-focus,-moz-user-input,
    -moz-user-modify,-moz-user-select,orphans,outline,
    outline-color,outline-style,outline-width,overflow,
    overflow-X,overflow-Y,padding,padding-bottom,padding-left,
    padding-right,padding-top,page,page-break-after,
    page-break-before,page-break-inside,pause,pause-after,
    pause-before,pitch,pitch-range,play-during,position,quotes,
    -replace,richness,right,ruby-align,ruby-overhang,
    ruby-position,-set-link-source,size,speak,speak-header,
    speak-numeral,speak-punctuation,speech-rate,stress,
    scrollbar-arrow-color,scrollbar-base-color,
    scrollbar-dark-shadow-color,scrollbar-face-color,
    scrollbar-highlight-color,scrollbar-shadow-color,
    scrollbar-3d-light-color,scrollbar-track-color,table-layout,
    text-align,text-align-last,text-decoration,text-indent,
    text-justify,text-overflow,text-shadow,text-transform,
    text-autospace,text-kashida-space,text-underline-position,top,
    unicode-bidi,-use-link-source,vertical-align,visibility,
    voice-family,volume,white-space,widows,width,word-break,
    word-spacing,word-wrap,writing-mode,z-index,zoom},
  morestring=[s]{:}{;},
  sensitive,
  morecomment=[s]{/*}{*/}
}

\lstdefinelanguage{XML}
{
  morestring=[s][\color{mauve}]{"}{"},
  morestring=[s][\color{black}]{>}{<},
  morecomment=[s]{<?}{?>},
  morecomment=[s][\color{dkgreen}]{<!--}{-->},
  stringstyle=\color{black},
  identifierstyle=\color{lightblue},
  keywordstyle=\color{red},
  morekeywords={xmlns,xsi,noNamespaceSchemaLocation,type,id,x,y,source,target,version,tool,transRef,roleRef,objective,eventually}% list your attributes here
}


\title{JavaFX/FXML CookBook (Nutshell Examples)}
\author{Manuel Schwarzer}

\begin{document}

\maketitle
\newpage
\tableofcontents

\newpage
\begin{abstract}
JavaFX and SceneBuilder companied are a powerful approach to set up simple or complex GUIs, which can be used unchanged on Windows, Mac or Linux. BSF4ooRexx acts therefore like a bridge between two worlds of different programming languages, ooRexx and Java. Stand-alone nutshell examples will demonstrate how a GUI can be created and how JavaFX can be used by ooRexx.
\end{abstract}

\section{Introduction}
This paper will give a brief overview about different components about JavaFX and FXML. At the beginning, more specific in Chapter 1 it will be given some information about the various software components that will be used. Furthermore, in Chapter 2, there is an installation guide to show how these components shall be installed. Moreover, in Chapter 3, there are some serious nutshell examples to reveal the true strength about JavaFX and FXML. 

\subsection{BSF4ooRexx}
BSF4ooRexx (stands for: BeanScriptingFramework for ooRexx) is on of the major parts to use JavaFX and FXML in ooRexx. BSF4ooRexx acts like a translator who translates from on language into another one. So basically it translates Java code to make it usable in ooRexx and vice versa. Furthermore, with BSF4ooRexx the whole Java-Class-Collection will be usable. How to do so will be shown later. \\
BSF4Rexx was developed to act like a bridge between different kinds of software. Mainly to cover Java methods so that these methods could be used platform independently. This goal was achieved in January 2000 by a proof-of-concept study at the University of Essen\cite{1}. After years of development BSF4ooRexx with its ooRexx package ``BSF.CLS'' was published. With this package it is possible to use Java classes like they were ooRexx classes. \cite{1}

\subsection{JavaFX/FXML}
JavaFX is a next generation client application platform for desktop, mobile and embedded systems built on Java. It is a collaborative effort by many individuals and companies with the goal of producing a modern, efficient, and fully featured toolkit for developing rich client application.\cite{2} \\
FXML in addition, is an XML-based user interface markup language created by Oracle for defining the user interface of a JavaFX application. FXML presents an alternative to designing user interfaces using procedural code, and allows for abstracting program design from program logic. \cite{3}  Furthermore, with JavaFX and especially with FXML, it is possible do use a an interface platform independently. So, if an interface is designed on a Microsoft based platform, it is possible to use the same Graphical User Interface, short GUI, written in FXML, on an other platform, which contains JavaFX as well \cite{6}. \\
These two, JavaFX and FXML, combined, will led to an easier way to design and create Graphical User Interfaces. In combination with the application  ``SceneBuilder'' ,which will be explained in the next section of this Chapter, it is getting even easier.

\subsection{SceneBuilder}
SceneBuilder is an open source application which is supported by Gluon \cite{4}. With SceneBuilder it is a lot easier to design and create many different, complex or simple, Graphical User Interfaces. Within SceneBuilder there are three different ares.\\
First, there is an area where all kinds of usable stuff, which can be placed on a GUI, is located. Second, in the middle of the screen,  between the first and the third area, there is the working area, where you can add something like a button. This can be done simply via drag and drop. Third, on the right side there is an area where you can gather information about the properties of the previously added component. All kinds of information will be shown there, for example the font size of a button, or the color of the text within the button.  These three areas can be seen in figure 1 underneath. 

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{scene_2.PNG}
\caption{Button added}
\label{Figure 1}
\end{center}
\end{figure}

With SceneBuilder it is the most efficient way to design and create a GUI, because you can add/drop components of a GUI via drag and drop, furthermore, you can use the created GUI immediately within your ooRexx source code. More details about this in Chapter 3 where a short example of a GUI creation will be shown step by step. 

\section{Installation}
In this section, it will be shown what kind of software components will be needed for this paper. In general, there are four major components that are required and two optional components. \\ First, it is required to make sure that Java itself is installed on the operating system. Second, ooRexx must be installed. After that, BSF4ooRexx can be installed. Furthermore, JavaFX and SceneBuilder are required. Last, an optional software component, which will help with the interaction between ooRexx/Java and a database will be shown. 
 
\subsection{Java}
First of all, Java itself has to be downloaded and installed.  If it is not already installed on the platform, please download it. Make sure that it matches the same bit rate as ooRexx. In this paper Java version ``1.8.0\textunderscore191 64-bit'' was used.\\ It can be found here: \\ $ \href{https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html} https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html$. Within this archive download JDK 8u191 with the required bit rate, mostly 64-bit.

\subsection{ooRexx}
If it is not already installed on your operating system, ooRexx must be downloaded and installed too. For this paper, ooRexx beta version 5.0.0 r11982 was used. The required data can be downloaded here: \\ $ \href{https://sourceforge.net/projects/oorexx/files/oorexx/} https://sourceforge.net/projects/oorexx/files/oorexx/$. It is highly recommended to install the same bit rate (32-bit or 64-bit) as the operating system has and especially as the version of Java has, otherwise some error can occur. 

\subsection{BSF4ooRexx}
After the successful installation of Java and ooRexx, the associated Bean Scripting Framework has to be downloaded and installed. The required files can be found here:  \href{https://sourceforge.net/projects/bsf4oorexx/files/} https://sourceforge.net/projects/bsf4oorexx/files/. In this paper, BSF4ooRexx version ``bsf4ooRexx-v641-20200130-bin'' was used. After following these steps, it will be possible to use Java in ooRexx and vice versa: 

\begin{enumerate}
\item  Visit https://sourceforge.net/projects/bsf4oorexx/files/
\item Download the latest version of BSF4ooRexx 
\item Unzip the downloaded archive
\item Navigate into the unzipped subdirectory ``bsf4oorexx/install/windows''
\item Double click install.cmd
\end{enumerate}

Now, it is possible to use Java classes within ooRexx. Furthermore, with BSF4ooRexx it is possible to automate business process and to interact with other applications like Microsoft Word and so on\cite{1}. But, that is not the focus of this paper. 

\subsection{JavaFX}
JavaFX is one of the main parts to generate GUIs. Nonetheless, nothing additional must be downloaded, stored or implemented. JavaFX comes with JDK 8. So, if a different version of JDK will be used, take care of the fact that, JavaFX is not always implemented by default. Nowadays, many different JavaFX approaches take place, since Oracle does not fully support JavaFX within their JDK packages any more. Since Oracle and JavaFX split up, OpenJFX and its open-source community take care of JavaFX and its latest versions \cite{7}. 

\subsection{SceneBuilder}
The last required software component is ``SceneBuilder''. It is a program that will help with the designing process of a GUI application, because the designing process will get more interactive via drag and drop functions. Moreover, not a single line of code must be written to create a GUI by yourself. To get SceneBuilder follow these steps:

\begin{enumerate}
\item  Visit \href{https://gluonhq.com/products/scene-builder/} https://gluonhq.com/products/scene-builder/
\item Download the latest version of SceneBuilder (In this scenario, version 11.0.0 is used)
\item Double click the downloaded executable file
\item Follow the instractions
\end{enumerate}

As can be seen at the homepage of Gluon, it is recommended to download version 8.5 of SceneBuilder if Java 8 is used \cite{4}. But there are some troubles between modern styling classes of SceneBuilder, like the later explained class ``JFoenix'', and the older version of SceneBuilder. In this paper SceneBuilder version 11 was used, without any complications. 

\subsection{DB Browser (SQLite)}
In this subsection, an application will be explained, which helps with creating a database. If it is needed, that apart from the used database in Chapter 3, a new database should be created, DB Browser for SQLlite is one of the easiest ways to do so. A quick guide of how to use this application will be explained underneath. 

\begin{enumerate}
\item  Visit \href{https://sqlitebrowser.org/dl/} https://sqlitebrowser.org/dl/
\item Download the latest version of DB Browser for SQLite (In this scenario, version 3.12.0-win64 is used)
\item Double click the downloaded .exe - file
\item Follow the instractions
\end{enumerate}

After the installation process was successful, open the application. It should look like figure 2. 

\begin{figure}[htbp]
\begin{center}
\includegraphics[width=\textwidth]{dbbrowser_1.PNG}
\caption{DB Browser for SQLite}
\label{Figure 2}
\end{center}
\end{figure}

Now, it is possible to create a new database or to open an existing one. For testing purpose, the included database within this paper called ``Nutshell-DB.db'' can be opened and looked at. To do so click on ``Open Database'' and navigate to the example database. Double click the database that should be opened. After that, it is possible to browse through the database's data, tables and properties.  But, for this paper, DB Browser for SQLite is not necessary, it is only an optional component, which may help to understand the nutshell example within Chapter 3 a bit more easier. 


\section{Nutshell Examples}
In this section, it will be shown how versatile JavaFX and especially FXML in combination with ooRexx can be. \\ First of all, a simple GUI will be created. This should point out how easy it is to create a GUI without any knowledge about Java. Second, this example of a GUI will be extended with a styling sheet, called CSS. Third, a useful example of how to use a database in combination with a GUI and ooRexx will be shown. Fourth, a comparison between default components of SceneBuilder and an additionally added class with components will be shown. Last, a combination of multiple windows and its handling will be explained. 

\subsection{My first GUI}
In this subsection it will be shown how a short example of a GUI will be created step by step with SceneBuilder. \\ First, SceneBuilder has to be started. After the successful start of SceneBuilder,  three working areas will be shown, like in figure 3 underneath.

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{scene_1.PNG}
\caption{SceneBuilder starting screen}
\label{Figure 3}
\end{center}
\end{figure}

As can be seen, the first area mentioned, is the left area with all different kinds of controls and containers, which will be used to design a GUI. Followed by the second area, the drag and drop area, where components like buttons be placed on. Last but not least, on the right hand side there is area number three, the properties area, which adjusts every time you click on a different component within the drag and drop area.
\\
First of all, to start a container has to be added to the working area in the middle. This can be an AnchorPane, a VBox or something else. One of these containers has to be added before other controls can be placed on. This containers are used to define a program's  ``window''. If, for example, an AnchorPane is placed on, the GUI window has the same size as the AnchorPane displayed on the properties area. Furthermore, this AnchorPane serves as a container for all components that will be placed on later. 

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{scene_3.PNG}
\caption{AnchorPane}
\label{Figure 4}
\end{center}
\end{figure}

As can be seen in figure 4, an AnchorPane was added to the drag and drop area. After this, the creative design of the GUI can be started. Several buttons, textfields, labels and so on can be added. A short example is shown in figure 5.


This GUI is one of the simplest that can be created. It has one Label which displays the headline  ``My first GUI'', one TextField where something can be written in and a button that can be clicked. As can be seen, it is possible to adjust all these kinds of components. Furthermore, no component was selected during the snapshot, so the properties area is empty.

Every time something is added or dropped to the GUI, code will be generated or deleted in the background. The source code of the GUI can be seen if the saved SceneBuilder file will be reopened via an editor. This could be a simple notepad or a more complex application like IntelliJ or Eclipse. \\
\begin{figure}[hbt!]
\begin{center}
\includegraphics[width=\textwidth]{scene_4.PNG}
\caption{My first GUI}
\label{Figure 5}
\end{center}
\end{figure}

After reopening the file, its source code will be displayed like the source code underneath. 

In SceneBuilder everything is based on drag and drop and nicely shaped objects, in the text-based editor everything is written in text, in particular, its written in XML. \\ XML stands for Extensible Markup Language and is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable \cite{5}. At this point JavaFX and XML get together to FXML, which is an XML-based user interface markup language created by Oracle \cite{3}.

\begin{lstlisting}[language = XML]
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label alignment="CENTER" layoutX="63.0" layoutY="46.0" prefHeight="44.0" prefWidth="469.0" text="My first GUI" textAlignment="CENTER">
         <font>
            <Font name="Bauhaus 93" size="48.0" />
         </font>
      </Label>
      <TextField layoutX="169.0" layoutY="159.0" prefHeight="14.0" prefWidth="263.0" promptText="Write something in here..." />
      <Button layoutX="265.0" layoutY="251.0" mnemonicParsing="false" text="Click me!" />
   </children>
</AnchorPane>

\end{lstlisting}

If these two representations of the GUI will be compared to each other, the SceneBuilder approach is more convenient and faster than writing source code by hand. The source code of the main and FXML file can be found within the Appendix.


\subsection{My first GUI with CSS}
In the previous subsection, a short example was explained. Now, this example will be extended. Every now and then it is needed that a GUI in general looks more entertaining and fancy. There are many different ways to do so. \\ One of them is to rewrite the source code, or to redesign the whole GUI in SceneBuilder. Another way, a more efficient way, is to create a so called CSS. Cascading Style Sheet, was actually invented for HTML, which is the base of the World Wide Web \cite{8}.  With CSS it is possible to redesign a web side without a change in the source code. \\ 
Nowadays, CSS is used in many different aspects. For example in this case, with CSS it is possible to redesign a GUI without major changes within the source code. To show this circumstance, only a simple CSS, wich is shown in the code section underneath, was added to ``My first GUI''.

\begin{lstlisting}[language = CSS]

.root{
    -fx-background-image: url("background.jpeg");
}

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

.label {
    -fx-font-size: 36px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
.textfield{
-fx-prompt-text-fill: rgba(255,255,255,0.5);
}

\end{lstlisting}

Additionally, it is required to add the line of code ${``stylesheet=@n\textunderscore vs \textunderscore j \textunderscore css.css''}$ in every component that should be changed. The ``new'' GUI with CSS looks like figure 6. 

\begin{lstlisting}[language = XML]

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<?language rexx?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" styleClass="root" stylesheets="@n_vs_j_css.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <!-- call Rexx program, its public routine "buttonClicked" is known afterwards -->
   <fx:script source="My_first_GUI_controller.rexx" />
   <children>
      <Label alignment="CENTER" layoutX="63.0" layoutY="46.0" prefHeight="44.0" prefWidth="469.0" stylesheets="@n_vs_j_css.css" text="My first GUI with CSS" textAlignment="CENTER">
         <font>
            <Font name="Bauhaus 93" size="48.0" />
         </font>
      </Label>
      <TextField fx:id="textField1" layoutX="169.0" layoutY="159.0" prefHeight="14.0" prefWidth="263.0" stylesheets="@n_vs_j_css.css" promptText="Write something in here..." />
      <Button fx:id="button1" layoutX="265.0" layoutY="251.0" mnemonicParsing="false" onAction="slotDir=arg(arg()); call buttonClicked slotDir;" stylesheets="@n_vs_j_css.css" text="Click me!" />
   </children>
</AnchorPane>

\end{lstlisting}

As it shown in the source code above, every component starting with the AnchorPane and ending with the Button, every component got the additional line of code mentioned above. As a result, the GUI looks more state of the art. As can be seen in figure 6. The main file can be found within the Appendix.

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{css_1.PNG}
\caption{CSS added}
\label{Figure 6}
\end{center}
\end{figure}


\subsection{SQLite - JDBC}
In this subsection, a useful way of a GUI in cooperation with a database will be shown. This database sample combines four different files. 

 \begin{itemize}
\item DB-terminal.fxml (Appendix)
\item DB-terminal\textunderscore controller.rexx
\item DB-terminal\textunderscore main.rexx
\item DatabaseHandler.CLS
\end{itemize}

To get to the point were a database can be used by a Graphical User Interface, a so called JDBC-Driver has to be installed. For this example SQLite-JDBC was used and can be downloaded here:\\ \href{https://github.com/xerial/sqlite-jdbc/releases} https://github.com/xerial/sqlite-jdbc/releases. In this example, \\ ${sqlite-jdbc-3.32.3.2.jar}$ was used. Furthermore, this variable must be declared in the class-path of your operating system. 

\newpage
To do so, follow the following steps: 

\begin{enumerate}
\item Press the Windows key on your keyboard
\item Type the word ``env''
\item Press enter
\item Click on ``Environment Variable'', like in figure 7
\item Double click on CLASSPATH, like  in figure  8
\item  The ``Edit environment variable'' window will be opened
 \item Click ``New'' and enter the path were \\ ${sqlite-jdbc-3.32.3.2.jar}$ is saved, like figure 9
\end{enumerate}

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=0.7\textwidth]{env_1.PNG}
\caption{Environment Variable}
\label{Figure 7}
\end{center}
\end{figure}


\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=0.7\textwidth]{env_2.PNG}
\caption{CLASSPATH}
\label{Figure 8}
\end{center}
\end{figure}

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{env_3.PNG}
\caption{Edit environment variable}
\label{Figure 9}
\end{center}
\end{figure}

This jar file is needed to translate between Java and the database language. In this case between Java and SQLite. Now, it is possible to use the GUI, shown in figure 10. Furthermore, a test database is need, which will be given as an extra file included in this paper, called ``Nutshell-DB.db''.  This database must also be implemented within the code of the file ``DatabaseHandler.CLS'' This will be explained later in detail, for now, this is the class which contains the program's logic of the database.

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{db_1.PNG}
\caption{Database GUI}
\label{Figure 10}
\end{center}
\end{figure}

This nutshell example should point out, how powerful and useful a GUI can be. For testing purpose, this interface shows a few database operations which will be addressed by the components of the GUI. It is recommended that after the program started, the button ``Show every Person'' should be clicked. This will led to that every person, which was previously added to the database, will be shown in the command line where you started the program. For example, if you start the program via IntelliJ, names will be displayed in the output section, like in figure 11.  

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=0.5\textwidth]{db_2.png}
\caption{Output: Person}
\label{Figure 11}
\end{center}
\end{figure}

After all names are displayed, it is much easier to experiment with the additional functions.
The first function, which will be explained, is the SELECT function. With this function it is possible to gather information from a database. So, if a number, more specific the ID of a person is written into the textfield and the button is clicked, the associated name will be displayed in the textfield. For example,  if the number 1 is entered, the name ``Hermann Maier'' will be displayed. 

The middle section, the INSERT command, of the GUI is used to implement a person into the database.  So, if a new person or member should be added, only the name must be written into the textfield. The associated ID will be added automatically. So, if a name is already written down into the textfield and after that the button is clicked, the previously written name will be transmitted to the database. For example, if a new name like ``Armin Assinger'' should be saved in the database, the name has to be written in the text field. After that, the submit button has to be clicked. Now, the database will display six names, if the button ``Show every person'' is clicked. 

The last section, the UPDATE command, is used to change a person's name. Therefore, it must be entered a new name and the associated ID from that person, which its name should be changed.  So, if the name of Hermann Maier should be changed, enter the new name for example ``Herminator'' into the first of the two textfield. Into the second one, the associated ID must be entered, in this case the number 1. After clicking the submit button, the name of Hermann Maier changed to Herminator. 


By now it should be clear what purpose ``DB-terminal.fxml'' has. This file is used for the design of the GUI and can be found within the Appendix. The next file which will be explained is the main file of the interface.  
After the explanation of ``DB-terminal\textunderscore main.rexx'' its associated controller will be explained. The main file contains the main program, which must be started to see the GUI, the source code can be found underneath. And last but not least, the class ``DatabaseHandler''. This Class is needed to connect to a database and to interact with it. Without this file a communication would not work. The source code will be explained later. 

\begin{lstlisting}

#######  DB_terminal_main.rexx #######

#!/usr/bin/env rexx
   -- change directory to program location such that relatively addressed resources can be found
parse source  . . pgm
call directory filespec('L', pgm)   -- change to the directory where the program resides

.environment~setEntry("my.app", .directory~new)
.my.app~homeDir = filespec('Location',fullPath)
.my.app~dbh = .DatabaseHandler~new

.my.app~dbh~initSettings

success = .my.app~dbh~connect
IF \success THEN CALL connectionError
else say "SUCCESS: Connected to DB"

rxApp=.RexxApplication~new -- create Rexx object that will control the FXML set up
jrxApp=BSFCreateRexxProxy(rxApp, ,"javafx.application.Application")
jrxApp~launch(jrxApp~getClass, .nil)    -- launch the application, invokes "start"

EXIT 0

connectionError:
say "Not connected to DB"

----------------------------------------------------------------------------
::REQUIRES "DatabaseHandler.CLS"
::REQUIRES "BSF.CLS"

----------------------------------------------------------------------------
::class RexxApplication -- implements the abstract class "javafx.application.Application"

::method start          -- Rexx method "start" implements the abstract method
  use arg primaryStage  -- fetch the primary stage (window)
  primaryStage~setTitle("Database Tutorial")

   -- create an URL for the FMXLDocument.fxml file (hence the protocol "file:")
  fxmlUrl=.bsf~new("java.net.URL", "file:DB_terminal.fxml")
   -- use FXMLLoader to load the FXML and create the GUI graph from its definitions:
  rootNode=bsf.loadClass("javafx.fxml.FXMLLoader")~load(fxmlUrl)

  scene=.bsf~new("javafx.scene.Scene", rootNode)    -- create a scene for our document
  primaryStage~setScene(scene)  -- set the stage to our scene
  primaryStage~show             -- show the stage (and thereby our scene)
----------------------------------------------------------------------------
\end{lstlisting}

DB-terminal\textunderscore main.rexx starts the GUI, more specific its FXML file, shown in line 41 and 43. But more important, before the GUI is displayed a new environmental variable will be created, which is shown in line 9 and 10. Furthermore,  a new ``DatabaseHandler'' is generated in line  11, which triggers the init-method from the DatabaseHandler.CLS-file. After that, the initSettings-method is called, which creates a true path to the database. After that a connection is been initialized, shown in line 12. \\ Should an error occur, ``connectionError:'' will be triggered and a message will be displayed in the output section of your program.

\begin{lstlisting}

#######  DB-terminal_controller.rexx #######

::routine selectUserName public
  use arg slotDir
  scriptContext=slotDir~scriptContext -- get the slotDir entry

  /* @get(textFieldSelect) */
  inputID = textFieldSelect~text
  say inputID
  name = .my.app~dbh~selectUserName(inputID)
  say name
  textFieldSelect~setText(name)

----------------------------------------------------------------------------
::routine insertUserName public
  use arg slotDir
  scriptContext=slotDir~scriptContext -- get the slotDir entry

  /* @get(textFieldInsert) */
  name = textFieldInsert~text
  say name
  .my.app~dbh~insertUserName(name)

----------------------------------------------------------------------------
::routine updateUserNameByID public
  use arg slotDir
  scriptContext=slotDir~scriptContext -- get the slotDir entry

  /* @get(textFieldUpdateName textFieldUpdateID) */
  name = textFieldUpdateName~text
  id = textFieldUpdateID~text
  .my.app~dbh~updateUserNameByID(name, id)

----------------------------------------------------------------------------
::routine listAllUserNameByID public
  use arg slotDir
  scriptContext=slotDir~scriptContext -- get the slotDir entry

  .my.app~dbh~getlistAllUser
  
----------------------------------------------------------------------------
   ::REQUIRES "DatabaseHandler.CLS"
   ::REQUIRES "BSF.CLS"

\end{lstlisting}

A controller file is handling all interactions between the GUI and its behavior. As already said, every method, every work order has to be declared here. Within this controller it is possible to address other files, like in this case a database class. For testing purpose, some general database function were implemented. \\
So, as shown in the source code above, the first routine in this scenario is the SELECT function of the database terminal. So, if the submit button is clicked a routine called ``selectUserName'' will be called. This routine first fetches the information within the textfield. To do so ``/* get(textFieldSelect) */ ''  will be used. This line of code will gather information from the fx:id of a GUI component. In this case, the first textfield is called ``textFieldSelect'' within the FXML file. So, as already said, with the /*get (xyz) */ command, it is possible to get access to a GUI-component and its information stored. \\ In line 9 of the source code, it is shown that this information of the textfield will be stored in a ooRexx variable, for later use. In line 11, the real database interaction happens. With the previously created variable ``inputID'' a function called ``selectUserName(inputID)'' will be called. This method is stored in DatabaseHandler.CLS and uses the inputID as an input variable. Furthermore, is uses its environment variable, that was previously initialed by the main program. All kinds of database function will be described underneath, when the DatabaseHandler will be explained. Last, the gathered information from the database will be displayed in the same textfield. 

The second routine within this file is the ``insertUserName''  routine. This routine gathers information from a textfield like the first one, but instead of displaying some names it will store new names in the database. For this case, In line 20, the textfield's information will be gathered.  The entered name will also be an input variable for another database interaction function, which will also be explained later.  

The third routine, the ``updateUserNameByID'', is a bit more complex because we need to gather information from two different textfields, that can be seen in line 30. After this, the database function ``updateUserNameByID''  with its two input variables is called. 

The last routine in this file will be called by the button ``Show every Person'', which also calls a function within the database handler underneath. So as can be seen in this scenario, many different files combined will led to a much more powerful GUI.

\begin{lstlisting}

#######  DatabaseHandler.CLS #######

::CLASS DatabaseHandler PUBLIC
::METHOD conn ATTRIBUTE
::METHOD DB_URL ATTRIBUTE
::METHOD DriverManager ATTRIBUTE
::METHOD init
  EXPOSE DriverManager
  DriverManager = bsf.import("java.sql.DriverManager")
  --------------------------------------------------------------------------
::METHOD initSettings PUBLIC
  EXPOSE  DB_URL
    DB_URL = "jdbc:sqlite:C:/users/manue/Dropbox/WU/Hauptstudium/SBWL BIS/Kurs 5 (Seminar)/Nutshell/Nutshell-DB.db"
----------------------------------------------------------------------------
::METHOD connect PUBLIC
  EXPOSE DriverManager DB_URL conn
  SIGNAL ON SYNTAX NAME connectionError
  conn = DriverManager~getConnection(DB_URL)
  SIGNAL OFF SYNTAX
  RETURN .true
----------------------------------------------------------------------------
::METHOD selectUserName PUBLIC
  EXPOSE conn
  USE ARG ID
  query = "SELECT name FROM Person WHERE ID = ?"
  prepStatement = conn~prepareStatement(query)
  prepStatement~setString(1, ID)
  queryResults = prepStatement~executeQuery
  IF queryResults~next THEN DO
      name = queryResults~getString("name")
   END
   ELSE
   name = "This ID does not exist here!"
   return name
----------------------------------------------------------------------------
::METHOD insertUserName PUBLIC
  EXPOSE conn
  USE ARG name
  query = "INSERT INTO Person (name) VALUES (?)"
  prepStatement = conn~prepareStatement(query)
  prepStatement~setString(1, name)
  prepStatement~execute
----------------------------------------------------------------------------
::METHOD updateUserNameByID PUBLIC
  EXPOSE conn
  USE ARG name, id
  query = "UPDATE Person SET name = ? Where ID = ?"
  prepStatement = conn~prepareStatement(query)
  prepStatement~setString(1, name)
  prepStatement~setString(2, id)
  prepStatement~execute
----------------------------------------------------------------------------
::METHOD getlistAllUser PUBLIC
  EXPOSE conn 
  query = "SELECT * FROM Person"
  prepStatement = conn~createStatement
  queryResults = prepStatement~executeQuery(query)
  index = 1;

    DO WHILE queryResults~next
      id = queryResults~getString("ID")
      name = queryResults~getString("Name")
      nameList.index = name;
      idList.index = id;
      say pp(idList.index nameList.index);
      index = index + 1
    END

----------------------------------------------------------------------------
::REQUIRES "BSF.CLS"

\end{lstlisting}

As already mentioned, ``DatabaseHandler.CLS''  contains all methods, which interact with a database.\\ This class consists of three different attributes and seven different methods. The first attribute is the conn  attribute which stores the information about the database's connection. The second attribute is the database's url. This url contains the information, more specific the path where the database is stored. This path can be changed and adapted. Last, the ``DriverManager'' attribute saves the information, gathered from the Java class ``java.sql.DiverManager''. This driver manager helps to interact with the database and it is written in Java. But, as it is shown in line 11, it can be used by ooRexx. Every time a class is newly initialized, first the constructor will be called. In this case, the init method is called, which initializes the driver manager. 

This initialization process can be seen in DB-terminal\textunderscore main.rexx . The first method, which is shown in line 12, is therefore to set the right path for the database. This method is called by the main program.To be able to test the nutshell program it is necessary that the path of the URL will be adapted. Write the true path, where the ``Nutshell-DB.db'' is stored, down there in line 14. The shown URL was generated for testing purpose. 

The third method shown in line 16, is the method which handles the connection to the database and stores the information about it. \\
The fourth method is the first one, which is called by a GUI component itself.  In line 24 the connection will be exposed and used. In line 25 the input variable for this method is declared. Line 27 and 28 create the query statement for the database, in this case a SELECT query is generated where the name of an associated ID will be given in return. The ``setString(1,ID)'' part is used to replace the question mark in the query with the entered ID. After that, the query will be executed. If there is a name associated with this ID the name will be given in return, if not ``This ID does not exist here!'' will be displayed.  

The fifth method, ``insertUserName'', is therefore to enter a new person in the database. The associated ID will be generated automatically. 
The sixth method, as shown in line 44 is used for the UPDATE-function. 
The last method is therefore to list all previously entered IDs and names. 


These four files listed above will be enough to interact with a database via JavaFX/FXML and ooRexx. 

\subsection{JFoenix - Class}
In this subsection it will be shown, how versatile SceneBuilder and its components are. Figure 12 demonstrates the appearance of default components of SceneBuilder and newly added components of a class called ``JFoenix''. This class contains many different components mostly with a modern design in comparison to the default ones. The two files needed, main and .fxml, can be be found within the Appendix, because there is not much which differs from the previous ones. Furthermore, to create components in JFoenix style, the class must be downloaded and stored at first. In this subsection it will be shown how it is done. Follow these few steps: \\

\begin{enumerate}
\item Download JFoenix here: \href{https://github.com/jfoenixadmin/JFoenix} https://github.com/jfoenixadmin/JFoenix (In this scenario jfoenix-9.0.10.jar is used)
\item Open SceneBuilder and Press the gear symbole, like in figure 13. Then click on ``JAR/FXML Manager''. The Library Manager will be openend.
\item Click on ``Add Library/FXML from file system" 
 \item Go to the subdirectory where jfoenix-9.0.10.jar was downloaded and double click it
 \item A window like figure 14 will be opened
\item Click "Import Components"
\end{enumerate}

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=0.7\textwidth]{jf_1.png}
\caption{Comparison between components}
\label{Figure 12}
\end{center}
\end{figure}

Now, SceneBuilder contains many new components under tab ``Custom'' on the left side. With these components it is possible to build a GUI in a more modern way. As it is shown in figure 12, four different kinds of components, which are often used in graphical user interfaces, where contrasted. \\ The first comparison is between two different kinds of buttons. The left one, the default styled one, looks very old fashioned and blank. The right one, the button within the JFoenix class, looks a bit more modern and fancy. It also displays a black colored wave within the button, at that moment it is clicked. Also the colored wave changes its direction. For example, if the cursor clicks on left side of the button, the wave comes also from the left side, if it clicks on the right side, the wave will come from the right side of the button. 

The second component, which will be compared, are CheckBoxes. A CheckBox is often used within online surveys or online shopping carts. Based on the web side or survey, some of them uses more neutral CheckBoxes like the default one, but also some of them uses the more fancy and colored style, like the right CheckBox.  

Furthermore, DatePicker are very common. As collecting data from costumers is very important for most companies, it is often seen that a web side asks for a date of birth. Like the previously mentioned components, this could be done in a more colorful way or just plain and simple.  

Last but not least, the starting window in figure 12 shows two different kinds of sliders. The left one only can be moved from the left to the right and the other way round. The right one can also be moved like this, additionally it displays the value of the slider.

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{jf_2_1.png}
\caption{SceneBuilder - Library Manager}
\label{Figure 13}
\end{center}
\end{figure}

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{jf_3.png}
\caption{Import Dialog}
\label{Figure 14}
\end{center}
\end{figure}

The main file and its associated FXML file can be found within the Appendix.

\newpage

\subsection{Multiple Windows}
In this subsection it will be shown, how to manage different windows within one GUI. The main window looks like figure 15. Within this interface it can be opened two different kinds of windows. One, figure 16, enlarges a picture and the second one, figure 17, will display a bar chart. These two types of windows were chosen to show various kinds of operation areas of GUIs itself. This nutshell example contains five different files, wich will be explained step by step underneath. Files containing:  

\begin{itemize}
\item Windows\textunderscore main.rexx 
\item first\textunderscore window.fxml (Appendix)
\item enlarge\textunderscore barChart\textunderscore controller.rexx
\item enlargePicture.fxml (Appendix)
\item openStats.fxml (Appendix)
\end{itemize}

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{mw_1.png}
\caption{Main Window}
\label{Figure 15}
\end{center}
\end{figure}


Underneath the source code of Windows\textunderscore main.rexx is shown.  This main file differs compared to other nutshell examples because it is a bit more complex. To manage different windows within a GUI a so called ``Stagehandler'' is needed. 

\begin{lstlisting}

#######  Windows_main.rexx #######

PARSE SOURCE . . fullPath
CALL directory filespec('L', fullPath)

.environment~setEntry("my.app", .directory~new)
.my.app~homeDir = filespec('Location',fullPath)
stageHandler = .StageHandler~new
.my.app~stageHandler = stageHandler

stageHandlerProxy = BsfCreateRexxProxy(stageHandler,,"javafx.application.Application")
stageHandlerProxy~launch(stageHandlerProxy~getClass, .nil)
EXIT 0

----------------------------------------------------------------------------
::CLASS StageHandler
::METHOD stage ATTRIBUTE
::METHOD scene ATTRIBUTE
::METHOD windowStage ATTRIBUTE
::METHOD FXMLLoader
::METHOD init
  EXPOSE FXMLLoader
  FXMLLoader = bsf.import("javafx.fxml.FXMLLoader")
  
----------------------------------------------------------------------------
::METHOD start
  EXPOSE stage scene FXMLLoader
  USE ARG stage

  stage~setTitle("Main Window")
  url=.bsf~new("java.net.URL", "file:first_window.fxml")
  fxml = FXMLLoader~load(url)
  scene = .bsf~new("javafx.scene.Scene", fxml)
  stage~setScene(scene)
  stage~show

----------------------------------------------------------------------------
::METHOD newWindow
  EXPOSE stage windowStage FXMLLoader
  USE ARG title, fileName
  windowStage = .bsf~new("javafx.stage.Stage")
  windowStage~setTitle(title)
  url =.bsf~new("java.net.URL", fileName)
  fxml = FXMLLoader~load(url)
  scene = .bsf~new("javafx.scene.Scene", fxml)
  windowStage~setScene(scene)
  --windowStage~initOwner(stage)
  windowStage~show
----------------------------------------------------------------------------
::REQUIRES "BSF.CLS"
\end{lstlisting}

The complexity exists because some kind of logic must be implemented, which manages the coordination between several different windows. In this case, it is the class ``Stagehandler''. A ``StageHandler'' does nothing more than to coordinate windows. In line 7 to 10 can be seen that an environment variable will be created, after the main program was started. After this, a new stage handler will be initialized, which invokes the method init. This newly initialized stage handler will be stored in the environment variable ``.my.app\~{}stageHandler'', which helps with future coordination. In line 12 and 13 a proxy of the class ``StageHandler'' will be initialized and launched, which will invoke the start method. These two steps, creating an environment variable and launching a proxy, mainly the latter, can also be found in all other main files of this paper. Only the class StageHandler differs.\\ If only a GUI with one window is requirded, it is not needed to manage different windows, so, one primary stage is enough. This difference can be seen if other main files will be compared to this one. Within the invocation of the method start, the title of the GUI will be set, the URL of the FXML will be loaded and the scene, first\textunderscore window.fxml, will be displayed. 

Within this interface it is possible to invoke two additional GUIs. So, if the button ``Enlarge'' is clicked, a newly created window, enlargePicture.fxml, will be opened. To do so, the routine ``enlargePicture'' within enlarge\textunderscore barChart\textunderscore controller.rexx will be called. The specific function of this routine will be explained later, when the controller file will be explained. The used method to generate additional windows is called ``newWindow'' in line 39. Therefore, two input variables will be required. One, the title of the new window. Second, the file name of the window which should be opened, for this example enlargePicture.fxml.  In line 42, a new stage will be initialized. This will led to the fact, that a new GUI will be created, which does not replace the main window. So, if the button is clicked, figure 16 will be displayed. 

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{mw_2.png}
\caption{Enlarged Picture}
\label{Figure 16}
\end{center}
\end{figure}

The previously opened GUI, can be moved around, so the enlarged picture is not on top of the main window. With the line of code in line 48, which is commented out now, it is possible to apply the ability that a new window can only be opened, if the previous opened was closed.  So, if this line of code is not implemented, many different windows can be opened, but, if this line of code is active, every additional window apart from the main window has to be closed to open a new one. 

Furthermore, if the button ``Open'' is clicked, the statistics interface will be opened. This interface contains a bar chart, which is also a JavaFX component within SceneBuilder. It is also possible to generate test values, after clicking the ``See Stats''  button. This circumstance is shown in figure 18 underneath. 


After explaining the main file, it is now time to explain the controller of the main window, more specific the file: enlarge\textunderscore barChart\textunderscore controller.rexx, which its source code is underneath. 

\newpage
\begin{lstlisting}

#######  enlarge_barChart_controller.rexx #######

#!/usr/bin/env rexx

::routine openStat public
  use arg slotDir
  scriptContext=slotDir~scriptContext
  URL = "file:openStats.fxml"
  .my.app~stageHandler~newWindow("Statistics", URL)
  
----------------------------------------------------------------------------
::routine enlargePicture public
  use arg slotDir
  scriptContext=slotDir~scriptContext -- get the slotDir entry
  URL = "file:enlargePicture.fxml"
  .my.app~stageHandler~newWindow("Picture", URL)
  
----------------------------------------------------------------------------
::routine openSt public
  use arg slotDir
  scriptContext=slotDir~scriptContext -- get the slotDir entry
  /*@get(barChart yAxis xAxis)*/
  barChart~getData~clear

  XYChartData = bsf.import("javafx.scene.chart.XYChart$Data")
  XYChartSeries = bsf.import("javafx.scene.chart.XYChart$Series")

  dataSeries = XYChartSeries~new
  dataSeries2 = XYChartSeries~new
  dataSeries3 = XYChartSeries~new

  yAxis~setLabel("yAxis")
  xAxis~setLabel("xAxis")

  temp1 = box("String", "July")
  tempfloat1 = box("float", 5)
  dataSeries~getData~add(XYChartData~new(temp1, tempfloat1))
  barChart~getData~add(dataSeries)

  temp2 = box("String", "August")
  tempfloat2 = box("float", 200)
  dataSeries2~getData~add(XYChartData~new(temp2, tempfloat2))
  barChart~getData~add(dataSeries2)

  temp3 = box("String", "September")
  tempfloat3 = box("float", 50)
  dataSeries3~getData~add(XYChartData~new(temp3, tempfloat3))
  barChart~getData~add(dataSeries3)
----------------------------------------------------------------------------
::REQUIRES "BSF.CLS"
----------------------------------------------------------------------------

\end{lstlisting}

The first routine within this file is the routine called ``openStat''.  This routine will be be called , whenever the button ``Open'' in the main window is clicked. Within this function a URL is generated, which will be forwarded to the stagehandler's method called ``newWindow''. As explained earlier, newWindow needs a title and a filename or a true path to the FXML file, which should be opened. More specific, the ``.my.app\~{}stageHandler'' environment variable, which stores the information about the stage handler of the GUI, will be addressed with its method ``newWindow'' and the associated input variables, in this case, the title ``Picture'' and the filename of openStats.fxml. 

The second routine within this source code is ``enlargePicture'' and is apart from the name of the file and the title of the window identical with the first routine. 

The third routine, the ``openSt'' routine, creates the values for the bar chart. If the routine to open the openStats.fxml is called, the bar chart remains blank until the button ``See Stats'' is clicked. The button will call the routine which generates the values shown between line 18 and 48.\\  First of all, there has to be some kind of access to the bar chart. This will be done by the line of code in line 21. There it is shown, that every fx:id mentioned in the associated FXML file can be addressed. \\ After that, the bar chart gets cleared. This has to be done, because otherwise some layout errors can occur. After these two lines, two Java classes have to be imported for later use. The first one is needed to generate data for the bar chart, the second one to generate bundles or series of data. For every colored bar, a new data series has to be created. If every bar of this bar chart is of the same data series, only create one series and simply add the data to that one. For only one series of data use the same ``dataSeries'' every time. \\ But, in this scenario there are three different data series to handle with. They are getting initialized between line 28 and 30. Further, the label names of the bar chart are getting added as well. 

To be able to generate series of data for Java within ooRexx, line 34 is needed. As it is shown there, XYChartData needs two input variables. One, is a string variable and the other one is, in this case, a float variable. To get these ooRexx variables into Java, they have to be boxed, as it is shown in the source code above. The remaining series of data work the same. The result of this can be seen in figure 18.  

\begin{figure}[!htbp]
\begin{center}
\includegraphics[width=\textwidth]{mw_3.png}
\caption{Open BarChart}
\label{Figure 18}
\end{center}
\end{figure}

\section{Conclusion}
This paper generates a brief overview about JavaFX combined with FXML. To show their versatile operation areas five different nutshell examples were generated. To be able to test these examples a few software components are required. First of all, Java has to be installed. Second, ooRexx and its Bean Scripting Framework BSF4ooRexx have to be implemented as well. Additionally, an application called ``SceneBuilder'' is required, which helps with the designing process of GUI. Optionally, ``DB Browser for SQLite'' can be downloaded and installed to get access to the database without any source code. The database can simply be opened within the application. 

Moreover, every source code or file, which may a bit complex are explained within this paper. Files, which repeat themselves can be found within the Appendix. 
\section{Outlook}
This paper can not refer to all kinds of aspects of JavaFX. This paper contains only a peek of JavaFX, to be able to interact and to get in touch with JavaFX. Furthermore, there is a ton of operation areas, in which JavaFX can be used on. For this circumstance visit the homepage of OpenJFX and take a look at the documentary of JavaFX. As an example, there are 3D shaped GUI applications or some application with a sound componend. Furthermore, animations can be generated with JavaFX\cite{7}.

%\subsection{}
\bibliographystyle{plain}
\bibliography{Quellen.bib}

\listoffigures

\newpage
\appendix
\section{\\ My first GUI}
% the \\ insures the section title is centered below the phrase: AppendixA
\begin{lstlisting}

#######  My_first_GUI.rexx  (Main - File) #######

#!/usr/bin/env rexx
   
parse source  . . pgm
call directory filespec('L', pgm)   -- change to the directory where the program resides

rxApp=.RexxApplication~new -- create Rexx object that will control the FXML set up
jrxApp=BSFCreateRexxProxy(rxApp, ,"javafx.application.Application")
jrxApp~launch(jrxApp~getClass, .nil)    -- launch the application, invokes "start"

----------------------------------------------------------------------------

::requires "BSF.CLS"    -- get Java support

----------------------------------------------------------------------------

::class RexxApplication -- implements the abstract class "javafx.application.Application"

::method start          -- Rexx method "start" implements the abstract method
  use arg primaryStage  -- fetch the primary stage (window)
  primaryStage~setTitle("My first GUI!")

   -- create an URL for the FMXLDocument.fxml file (hence the protocol "file:")
  fxmlUrl=.bsf~new("java.net.URL", "file:My_first_GUI.fxml")
   -- use FXMLLoader to load the FXML and create the GUI graph from its definitions:
  rootNode=bsf.loadClass("javafx.fxml.FXMLLoader")~load(fxmlUrl)

  scene=.bsf~new("javafx.scene.Scene", rootNode)    -- create a scene for our document
  primaryStage~setScene(scene)  -- set the stage to our scene
  primaryStage~show             -- show the stage (and thereby our scene)
  
----------------------------------------------------------------------------
\end{lstlisting}

Within this source code it is shown, how to start a GUI with only one interface to look at. This is a simple way to display a GUI. 
\newpage
\begin{lstlisting}[language = XML]

<!-- My_first_GUI.fxml (FXML - File) -->

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>

<?language rexx?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <fx:script source="My_first_GUI_controller.rexx" />
   <children>
      <Label alignment="CENTER" layoutX="63.0" layoutY="46.0" prefHeight="44.0" prefWidth="469.0" text="My first GUI" textAlignment="CENTER">
         <font>
            <Font name="Bauhaus 93" size="48.0" />
         </font>
      </Label>
      <TextField fx:id="textField1" layoutX="169.0" layoutY="159.0" prefHeight="14.0" prefWidth="263.0" promptText="Write something in here..." />
      <Button fx:id="button1" layoutX="265.0" layoutY="251.0" onAction="slotDir=arg(arg()); call buttonClicked slotDir;" mnemonicParsing="false" text="Click me!" />
   </children>
</AnchorPane>

\end{lstlisting}

The source code above shows the content within the FXML file. This FXML file will be called by the associated main application to display the ``My first GUI'' interface.

\newpage
\section{\\My first GUI with CSS}
% the \\ insures the section title is centered below the phrase: Appendix B
\begin{lstlisting}

#######  My_first_CSS_main.rexx  #######

#!/usr/bin/env rexx
   
parse source  . . pgm
call directory filespec('L', pgm)   -- change to the directory where the program resides

rxApp=.RexxApplication~new -- create Rexx object that will control the FXML set up
jrxApp=BSFCreateRexxProxy(rxApp, ,"javafx.application.Application")
jrxApp~launch(jrxApp~getClass, .nil)    -- launch the application, invokes "start"

----------------------------------------------------------------------------
::requires "BSF.CLS"    -- get Java support
----------------------------------------------------------------------------

-- Rexx class defines "javafx.application.Application" abstract method "start"
::class RexxApplication -- implements the abstract class "javafx.application.Application"

::method start          -- Rexx method "start" implements the abstract method
  use arg primaryStage  -- fetch the primary stage (window)
  primaryStage~setTitle("My first GUI with CSS!")

   -- create an URL for the FMXLDocument.fxml file (hence the protocol "file:")
  fxmlUrl=.bsf~new("java.net.URL", "file:My_first_GUI_CSS.fxml")
   -- use FXMLLoader to load the FXML and create the GUI graph from its definitions:
  rootNode=bsf.loadClass("javafx.fxml.FXMLLoader")~load(fxmlUrl)

  scene=.bsf~new("javafx.scene.Scene", rootNode)    -- create a scene for our document
  primaryStage~setScene(scene)  -- set the stage to our scene
  primaryStage~show             -- show the stage (and thereby our scene)
\end{lstlisting}
\newpage
\section{\\SQLite - JDBC}
% the \\ insures the section title is centered below the phrase: Appendix B
\begin{lstlisting}[language = XML]

<!-- DB_terminal.fxml -->

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<?language rexx?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<fx:script source="DB_terminal_controller.rexx" />   
<children>
      <Label layoutX="135.0" layoutY="20.0" prefHeight="54.0" prefWidth="330.0" text="Database - Terminal">
         <font>
            <Font size="37.0" />
         </font>
      </Label>
      <TextField fx:id="textFieldSelect" layoutX="136.0" layoutY="109.0" prefHeight="25.0" prefWidth="330.0" promptText="Please enter the ID you want the name from:" />
      <Button fx:id="buttonSelect" layoutX="275.0" layoutY="149.0" mnemonicParsing="false" onAction="slotDir=arg(arg()); call selectUserName slotDir;" text="Submit" />
      <TextField fx:id="textFieldInsert" layoutX="137.0" layoutY="201.0" prefHeight="25.0" prefWidth="330.0" promptText="Enter the name of a new member:" />
      <Button fx:id="buttonInstert" layoutX="276.0" layoutY="241.0" mnemonicParsing="false" onAction="slotDir=arg(arg()); call insertUserName slotDir;" text="Submit" />
      <TextField fx:id="textFieldUpdateName" layoutX="136.0" layoutY="296.0" prefHeight="25.0" prefWidth="165.0" promptText="Enter new name:" />
      <Button fx:id="buttonUpdate" layoutX="276.0" layoutY="336.0" mnemonicParsing="false" onAction="slotDir=arg(arg()); call updateUserNameByID slotDir;" text="Submit" />
      <TextField fx:id="textFieldUpdateID" layoutX="305.0" layoutY="296.0" prefHeight="25.0" prefWidth="165.0" promptText="Enter ID to change name" />
      <Label layoutX="136.0" layoutY="92.0" prefHeight="17.0" prefWidth="330.0" text="SELECT  command:" />
      <Label layoutX="137.0" layoutY="184.0" prefHeight="17.0" prefWidth="330.0" text="INSERT  command:" />
      <Label layoutX="135.0" layoutY="279.0" prefHeight="17.0" prefWidth="330.0" text="UPDATE command:" />
      <Button layoutX="36.0" layoutY="349.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="159.0" onAction="slotDir=arg(arg()); call listAllUserNameByID slotDir;" text="Show every Person" />
   </children>
</AnchorPane>

\end{lstlisting}

The XML code above is used to generate a simple terminal window for a database. 

\section{\\JFoenix - Class}
% the \\ insures the section title is centered below the phrase: Appendix B
\begin{lstlisting}[language = XML]

<!-- normal_vs_jfoenix.fxml -->

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

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXCheckBox?>
<?import com.jfoenix.controls.JFXDatePicker?>
<?import com.jfoenix.controls.JFXHamburger?>
<?import com.jfoenix.controls.JFXSlider?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label alignment="CENTER" layoutX="120.0" layoutY="14.0" prefHeight="17.0" prefWidth="236.0" text="Default Style">
         <font>
            <Font name="System Bold" size="12.0" />
         </font>
      </Label>
      <Separator layoutX="353.0" orientation="VERTICAL" prefHeight="400.0" prefWidth="7.0" />
      <Label alignment="CENTER" layoutX="361.0" layoutY="14.0" prefHeight="17.0" prefWidth="236.0" text="JFoenix Style">
         <font>
            <Font name="System Bold" size="12.0" />
         </font>
      </Label>
      <Separator layoutX="117.0" orientation="VERTICAL" prefHeight="400.0" prefWidth="7.0" />
      <Separator layoutY="39.0" prefHeight="2.0" prefWidth="600.0" />
      <Label alignment="CENTER" layoutX="7.0" layoutY="69.0" prefHeight="28.0" prefWidth="107.0" text="Button:">
         <font>
            <Font name="System Bold" size="12.0" />
         </font>
      </Label>
      <Label alignment="CENTER" layoutX="7.0" layoutY="140.0" prefHeight="28.0" prefWidth="107.0" text="CheckBox:">
         <font>
            <Font name="System Bold" size="12.0" />
         </font>
      </Label>
      <Label alignment="CENTER" layoutX="7.0" layoutY="230.0" prefHeight="28.0" prefWidth="107.0" text="DatePicker:">
         <font>
            <Font name="System Bold" size="12.0" />
         </font>
      </Label>
      <Label alignment="CENTER" layoutX="7.0" layoutY="329.0" prefHeight="28.0" prefWidth="107.0" text="Slider:">
         <font>
            <Font name="System Bold" size="12.0" />
         </font>
      </Label>
      <Separator layoutY="122.0" prefHeight="2.0" prefWidth="600.0" />
      <Separator layoutY="199.0" prefHeight="2.0" prefWidth="600.0" />
      <Separator layoutY="297.0" prefHeight="2.0" prefWidth="600.0" />
      <Separator layoutY="48.0" prefHeight="2.0" prefWidth="600.0" />
      <JFXButton buttonType="RAISED" layoutX="436.0" layoutY="71.0" ripplerFill="#171717" text="Button" />
      <JFXCheckBox layoutX="423.0" layoutY="155.0" text="CheckBox" />
      <JFXDatePicker layoutX="394.0" layoutY="232.0" />
      <JFXSlider layoutX="399.0" layoutY="336.0" />
      <JFXHamburger layoutX="46.0" layoutY="13.0" />

      <DatePicker layoutX="151.0" layoutY="232.0" />
      <Slider layoutX="151.0" layoutY="336.0" />
      <CheckBox layoutX="167.0" layoutY="155.0" mnemonicParsing="false" text="CheckBox" />
      <Button layoutX="178.0" layoutY="71.0" mnemonicParsing="false" text="Button" />

   </children>
</AnchorPane>
\end{lstlisting}
\newpage
\begin{lstlisting}
#######  normal_vs_jfoenix_main.rexx  #######

PARSE SOURCE . . fullPath
CALL directory filespec('L', fullPath)

.environment~setEntry("my.app", .directory~new)
.my.app~homeDir = filespec('Location',fullPath)
stageHandler = .StageHandler~new
.my.app~stageHandler = stageHandler

stageHandlerProxy = BsfCreateRexxProxy(stageHandler,,"javafx.application.Application")
stageHandlerProxy~launch(stageHandlerProxy~getClass, .nil)
EXIT 0
----------------------------------------------------------------------------

::CLASS StageHandler
::METHOD stage ATTRIBUTE
::METHOD scene ATTRIBUTE
::METHOD windowStage ATTRIBUTE
::METHOD FXMLLoader
::METHOD init
  EXPOSE FXMLLoader
  FXMLLoader = bsf.import("javafx.fxml.FXMLLoader")

::METHOD start
  EXPOSE stage scene FXMLLoader
  USE ARG stage
  stage~setTitle("Starting Window")
  url=.bsf~new("java.net.URL", "file:normal_vs_jfoenix.fxml")
  fxml = FXMLLoader~load(url)
  scene = .bsf~new("javafx.scene.Scene", fxml)
  stage~setScene(scene)
  stage~show
----------------------------------------------------------------------------
::REQUIRES "BSF.CLS"
----------------------------------------------------------------------------
\end{lstlisting}

As can be seen here, a ``StageHandler'' is used even though only one window is displayed. This is shown for testing purpose. Both approaches, the primary stage or stage handler, can be used. 
\newpage
\section{\\Multiple Windows}
% the \\ insures the section title is centered below the phrase: Appendix B
\begin{lstlisting}[language = XML]

<!-- first_window.fxml -->

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<?language rexx?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <fx:script source="enlarge_barChart_controller.rexx" />
   <children>
      <Label alignment="CENTER" layoutX="51.0" layoutY="29.0" prefHeight="38.0" prefWidth="498.0" text="Main - Window">
         <font>
            <Font name="System Bold" size="43.0" />
         </font>
      </Label>
      <Button layoutX="87.0" layoutY="256.0" mnemonicParsing="false" prefHeight="37.0" prefWidth="89.0" onAction="slotDir=arg(arg()); call enlargePicture slotDir;" text="Enlarge" />
      <ImageView fitHeight="90.0" fitWidth="107.0" layoutX="78.0" layoutY="155.0">
         <image>
            <Image url="@background.jpeg" />
         </image>
      </ImageView>
      <Separator layoutY="113.0" prefHeight="0.0" prefWidth="600.0" />
      <ImageView fitHeight="106.0" fitWidth="121.0" layoutX="354.0" layoutY="147.0">
         <image>
            <Image url="@chart-icon-color.png" />
         </image>
      </ImageView>
      <Button layoutX="386.0" layoutY="256.0" mnemonicParsing="false" prefHeight="37.0" prefWidth="89.0" onAction="slotDir=arg(arg()); call openStat slotDir;" text="Open" />
   </children>
</AnchorPane>
\end{lstlisting}
This is the main GUI within the nutshell example ``Multiple Windows''.

\begin{lstlisting}[language = XML]

<!-- enlargePicture.fxml -->

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

<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ImageView fitHeight="400.0" fitWidth="600.0">
         <image>
            <Image url="@background.jpeg" />
         </image>
      </ImageView>
   </children>
</AnchorPane>

\end{lstlisting}
This is the GUI which will be displayed if the button ``Enlarge'' is clicked within the nutshell example ``Multiple Windows''.

\begin{lstlisting}[language = XML]

<!-- barChart.fxml -->

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

<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.chart.StackedBarChart?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?language rexx?>

<VBox xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
            <children>
                <StackedBarChart fx:id="barChart" layoutX="14.0" layoutY="72.0" prefHeight="434.0" prefWidth="800.0">
                    <xAxis>
                        <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                        <NumberAxis side="LEFT" />
                    </yAxis>
                </StackedBarChart>
            <Slider id="updateButtonSmall" fx:id="slider" blockIncrement="1.0" layoutX="32.0" layoutY="35.0" majorTickUnit="0.05" prefWidth="300.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" />
            </children>
        </AnchorPane>
    </children>
    <fx:script source="barChartController.rex" />
</VBox>

\end{lstlisting}
That is the interface of the bar chart, which will be created.

\end{document}  