├── .gitignore ├── Chapter_1.adoc ├── Chapter_10.adoc ├── Chapter_11.adoc ├── Chapter_12.adoc ├── Chapter_13.adoc ├── Chapter_14.adoc ├── Chapter_2.adoc ├── Chapter_3.adoc ├── Chapter_4.adoc ├── Chapter_5.adoc ├── Chapter_6.adoc ├── Chapter_7.adoc ├── Chapter_8.adoc ├── Chapter_9.adoc ├── Introducing AngularJS to Java Developers ├── License.txt ├── Preface.adoc ├── Wingdings_numbers.docx ├── build.sh ├── build_orig.sh ├── deploy.sh ├── gitIntro ├── Fish.java ├── Pet.java └── PetMaster.java ├── images ├── Cover.png ├── JavaKidsCover.png ├── fig_10_01.png ├── fig_10_02.png ├── fig_10_03.png ├── fig_10_04.png ├── fig_10_05.png ├── fig_10_06.png ├── fig_10_07.png ├── fig_10_08.png ├── fig_10_09.png ├── fig_10_10.png ├── fig_10_11.png ├── fig_10_12.png ├── fig_10_13.png ├── fig_11_BufferedStream.png ├── fig_11_commandline.png ├── fig_11_debug_serialize.png ├── fig_12_DownloadUpload.png ├── fig_12_EditConfigIDEA.png ├── fig_12_lastfm.png ├── fig_12_nick_videos.png ├── fig_12_nyc.jpg ├── fig_12_uri.png ├── fig_12_url.png ├── fig_13_Group.png ├── fig_13_HelloWorld.png ├── fig_13_PingPong.png ├── fig_13_Rectangle.png ├── fig_13_ball_moved.png ├── fig_13_ball_moved_down.png ├── fig_13_paddles_and_ball.png ├── fig_13_serve_ball.png ├── fig_13_table_coordinates.png ├── fig_13_table_paddles_and_ball.png ├── fig_13_undecorated.png ├── fig_14_CentralRepo.png ├── fig_14_CloneURL.png ├── fig_14_Cloning.png ├── fig_14_DistrRepo.png ├── fig_14_Fork.png ├── fig_14_Forking.png ├── fig_14_GitPull.png ├── fig_14_GitPush.png ├── fig_14_IDEA_vcs1.png ├── fig_14_IDEA_vcs2.png ├── fig_14_PullRequest.png ├── fig_14_PullRequest_YF.png ├── fig_14_ToyStore.png ├── fig_14_add_surface.png ├── fig_14_conflict.png ├── fig_14_git_add_all.png ├── fig_14_git_commit.png ├── fig_14_git_init.png ├── fig_14_git_nothing_to_commit.png ├── fig_14_git_status.png ├── fig_14_git_status_changed.png ├── fig_14_github_new.png ├── fig_14_github_pushed.png ├── fig_14_github_setup.png ├── fig_14_merge.png ├── fig_14_new_branch.png ├── fig_1_01.png ├── fig_1_02.png ├── fig_1_04.png ├── fig_1_05.png ├── fig_1_06.png ├── fig_1_07.jpg ├── fig_1_07.png ├── fig_1_07_.png ├── fig_1_08.png ├── fig_1_10.png ├── fig_1_11.png ├── fig_1_12.png ├── fig_1_3_3.png ├── fig_1_3_4.png ├── fig_2_00.png ├── fig_2_000.png ├── fig_2_01.png ├── fig_2_02.png ├── fig_2_02_1.png ├── fig_2_03.png ├── fig_2_03_1.png ├── fig_2_04.png ├── fig_2_05.png ├── fig_2_06.png ├── fig_2_07.png ├── fig_2_08.png ├── fig_2_09.png ├── fig_2_10.png ├── fig_2_11.png ├── fig_2_12.png ├── fig_2_14.png ├── fig_2_15.png ├── fig_2_5_1.png ├── fig_2_5_2.png ├── fig_2_Jar.png ├── fig_2_install_idea_mac.png ├── fig_3_01.png ├── fig_3_02.png ├── fig_3_03.png ├── fig_3_04.png ├── fig_3_05.png ├── fig_3_06.png ├── fig_3_07.png ├── fig_3_08.png ├── fig_3_09.png ├── fig_3_13.png ├── fig_3_14.png ├── fig_3_16.png ├── fig_3_17.png ├── fig_3_18.png ├── fig_3_19.png ├── fig_3_20.png ├── fig_3_21.png ├── fig_3_22.png ├── fig_3_23.png ├── fig_3_24.png ├── fig_3_25.png ├── fig_3_26.png ├── fig_3_27.png ├── fig_3_instances.png ├── fig_4_01.png ├── fig_4_02.png ├── fig_4_03.png ├── fig_4_04.png ├── fig_5-01-1.png ├── fig_5-01-2.png ├── fig_5-03.png ├── fig_5-04.png ├── fig_5_01.png ├── fig_5_02.png ├── fig_6-01.png ├── fig_6-03.png ├── fig_6-04-1.png ├── fig_6_02.png ├── fig_6_04.png ├── fig_6_05.png ├── fig_6_06.png ├── fig_6_07.png ├── fig_6_MultiTask.png ├── fig_7_01.png ├── fig_7_02.png ├── fig_7_03.png ├── fig_7_04.png ├── fig_7_05.png ├── fig_7_06.png ├── fig_7_07.png ├── fig_7_08.png ├── fig_7_09.png ├── fig_7_10.png ├── fig_7_11.png ├── fig_7_12.png ├── fig_7_13.png ├── fig_7_14.png ├── fig_7_15.png ├── fig_7_16.png ├── fig_7_17.png ├── fig_7_18.png ├── fig_7_19.png ├── fig_7_20.png ├── fig_8-01-1.png ├── fig_8-01-2.png ├── fig_8_01.png ├── fig_8_02.png ├── fig_8_03.png ├── fig_8_04.png ├── fig_8_05.png ├── fig_8_06.png ├── fig_8_07.png ├── fig_9_01.png ├── fig_9_02.png ├── fig_9_03.png ├── fig_9_04.png ├── fig_9_IOException.png ├── fig_practice.png ├── fig_reading.png ├── fig_smartie.png ├── fig_student.png ├── helloworld.png └── practice.png ├── stylesheets └── asciidoctor.css └── thewholebook.adoc /.gitignore: -------------------------------------------------------------------------------- 1 | .preview* 2 | .metadata* 3 | *.sublime-workspace 4 | .DS_Store 5 | ._* 6 | out 7 | *.pdf* 8 | *.mobi 9 | *.epub -------------------------------------------------------------------------------- /Chapter_1.adoc: -------------------------------------------------------------------------------- 1 | :toc-placement!: 2 | :imagesdir: . 3 | 4 | == Writing Your First Program 5 | 6 | People communicate with each other using different languages. These days people often spend more time communicating with computers, smartphones and tablets than with each other. We casually say to each other, “I’ve installed a cool application that can do this and that”. In other words, people use applications to communicate with computers. So someone has to write these applications. Those who write computer applications are known as programmers or software developers. 7 | 8 | Programmers write applications like games, calculators, and text editors using different programming languages. Without applications, computers, smartphones, and game consoles would have very limited use for most people. Computing devices usually come with an Operating System (OS) installed such as Windows, Mac OS, iOS, and Android, but imagine an iPhone that has no applications at all or a laptop that can only show the OS logo. Who would want such a device? 9 | 10 | Programmers create applications using different programming languages such as Java, Python, C++, JavaScript, C, and many others. Some of the languages are good for producing small programs that require very little memory space and can be embedded in computer chips. Some programming languages are great for programming Web applications that run inside the Web browsers. Some programming languages are great for running on the server and handling thousands of users’ requests. There are languages that are fine tuned for creating beautiful graphics. Similar to human languages, programming languages have a set of words (a.k.a. keywords) and the rules for using them (the syntax). 11 | 12 | In this book you’ll learn the syntax of the Java programming language, which can be used for programming most types of applications. And for many years the Java programming language has been one of the world’s most popular computer languages. In fact, as I write this, estimates are that there is an estimated 10 million professional Java programmers in the world, but what makes it so popular? 13 | 14 | For one thing, the same Java program can run on different devices: from desktop computers running Windows or MacOS to handheld devices such as smartphones and tablets. As a matter of fact, Java programs don’t care what device they’re running on because they run inside a kind of virtual hardware called a virtual machine. We’ll talk about the Java Virtual Machine a bit later in this chapter. 15 | 16 | Java can be embedded in tiny microchips that control various home appliances or industrial devices like the ones that power smart homes where the heat or light can be programmed remotely from your phone. These Internet-connected things can be programmed in Java. 17 | 18 | Programming languages can have some general characteristics and we say that Java is an object-oriented language. Its program elements (_classes_) represent objects from the real world. For example, you can create a class called `Car` and give it attributes that real cars have, like doors, wheels, and so on. Next, you can create another class based on the `Car` class, like `Tesla`, with all the features of the `Car` class (doors, wheels) plus an electric motor. 19 | 20 | And the software required to write Java is free. With so many million of professional Java programmers in the world, you’ll find lots of sample program online so if you’re run into a problem, you can either find the solution by searching or ask in one of the popular online forums like http://stackoverflow.com[Stack Overflow], and someone will probably answer your question! 21 | 22 | But enough talk. Let’s start learning Java. 23 | 24 | 25 | === Installing Java on Your Computer 26 | 27 | To start programming in Java you need to download the Java Development Kit (JDK) from the company called Oracle, which makes releases and updates of Java versions. The full name of the software to download is Java SE Development Kit. We'll download the Java SE 8, which was the latest version of Java available while writing this book. Just visit 28 | http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html[Oracle's Web site]. Accept the license agreement and select the proper link depending on the Operational System (OS) installed on your computer. 29 | 30 | NOTE: While Java programmers need JDK installed, the users of your applications need to have Java Runtime Environment (JRE) installed on their machines. JRE is included in JDK, but can be downloaded separately as well. 31 | 32 | [[FIG1-1]] 33 | .Selecting the Java SE version 34 | image::images/fig_1_01.png[] 35 | 36 | If you use Windows OS, download the file named jdk-8-windows-i586.exe. Since I work with Apple computers running Mac OS X, the file _jdk-8-macosx-x64.dmg_ is my Java installer. Run your installer program, agree with all default answers (just press the button Next) and you're almost ready to go. 37 | 38 | In Mac OS, Java is installed in the folder _/Library/Java/JavaVirtualMachines/jdk1.8.0.jdk_ (there could other digits after zero, which indicates the update number). On Windows computers it'll be installed under 39 | _c:\Program Files\Java\jdk1.8.0_, where _c:_ is the name of your hard drive or SSD. If you use Mac OS, your installation is complete. 40 | 41 | ==== For Windows Users Only 42 | 43 | If you use Windows, you'll also need to add Java to the environment variable `Path`. Click on the menu Start, Control Panel, System and search for _Environment Variables_. You'll see all system variables that exist in your OS As shown on the screenshot <>. If you have administrator's rights onto your Windows PC, you can set user variables that will apply only when a certain user logs into your PC, or system variables that will apply to all users. 44 | 45 | 46 | [[FIG1-4]] 47 | .Windows OS - System Variables 48 | image::images/fig_1_04.png[] 49 | 50 | Press the lower button _Edit_ and add the _bin_ directory from your JDK at the beginning of the `Path` variable value. For example, add _c:\Program Files\java\jdk1.8.0\bin;_ if this is where your JDK is installed: 51 | 52 | [[FIG1-5]] 53 | .Adding the bin directory Path variable 54 | image::images/fig_1_05.png[] 55 | 56 | Now the Windows installation of JDK is complete! I'm sure you're eager to start writing your first program now so let's do it. 57 | 58 | === Three Main Steps in Java Programming 59 | 60 | If you have an idea _what_ to program, typically you'll need to perform the following three steps: 61 | 62 | . _Write_ the program in Java and save it in a file. 63 | 64 | . _Compile_ the program to translate it from Java language into a special _byte code_ that JVM understands. 65 | 66 | . _Run_ the program. 67 | 68 | ==== Command Window 69 | 70 | In this chapter we'll compile and run the Hello World program in the Command window if you use Microsoft Windows or from Terminal if you're on Mac OS. 71 | 72 | In Windows, to open the Command window click on the _Start_ menu and enter the letters _cmd_ in the field that reads _Search programs and files_ . On a Mac, open the Spotlight window by clicking on the looking glass icon at the top right corner of the screen, type the word Terminal and hit the Return on the keyboard. 73 | 74 | First, create a folder named _practice_ by entering the following command: 75 | 76 | _mkdir practice_ 77 | 78 | This will be the place where we'll store all of our Java programs. 79 | 80 | ==== Step 1 – Write the Program 81 | 82 | Starting from Chapter 2, we will use a special application called Integrated Development Environment (IDE) to write, compile, and run programs. But to get a better understanding of how things work, let's use any plain text editor (e.g. Notepad, TextEdit et al.) to type the code for our first Java program. Afterwards, save the code in a text file with a name ending in _.java_. 83 | 84 | [[FIG1-8]] 85 | .Typing the code 86 | image::images/fig_1_08.png[] 87 | 88 | For example, if you want to write a program called `HelloWorld`, enter its code in a text editor. 89 | Here is the program that prints the words _Hello World!_ on your computer's screen: 90 | 91 | [source, java] 92 | ---- 93 | public class HelloWorld{ 94 | 95 | public static void main(String[] args){ 96 | 97 | System.out.println("Hello World!"); 98 | 99 | } 100 | } 101 | ---- 102 | 103 | Save the above code with the name _HelloWorld.java_ in the folder _practice_. Keep in mind that you are not allowed to use blank spaces in Java file names. 104 | 105 | I’ll explain how and why this program works a little later in this chapter. For now, if you followed each step correctly, the program will print the words _Hello World_ on the screen that we will go over in step 3. 106 | 107 | Programmers often use the words _the source code_ to refer to a program. So it's safe to say the we wrote the source code of the program Hello World. Unless you're an experienced Java programmer, you can't just assume that this program is written correctly. Let's proceed to Step 2 to find out. 108 | 109 | ==== Step 2 – Compile the Program 110 | 111 | Now you need to use Java compiler to turn the source code of Hello World program into byte code that JRE understands. The program named _javac_ is Java compiler, which is installed on your computer as a part of the JDK and can be located in the _bin_ folder in your JDK. 112 | 113 | [[FIG1-10]] 114 | .Compiling the source code 115 | image::images/fig_1_10.png[width=400, height=550] 116 | 117 | 118 | Change the directory to _practice_ with the command _cd practice_. If you have never used the command _cd_ before, read the online instructions on how to do it on http://www.wikihow.com/Change-Directories-in-Command-Prompt[Windows] or on http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line[Mac OS]. Now compile the program using the following command: 119 | 120 | _javac HelloWorld.java_ 121 | 122 | You won’t see any confirmation message that your program `HelloWorld` has been compiled successfully. Having no messages means there no problems occurred during compilation. Type a command _dir_ on Windows or _ls_ on Mac and you'll see the list of files in folder _practice_. This is how it looks in my Terminal window: 123 | 124 | [[FIG1-11]] 125 | .HelloWorld compiled successfully 126 | image::images/fig_1_11.png[] 127 | 128 | First, I've entered the _pwd_ command to make sure I'm in the _practice_ folder. You should see a new file named `HelloWorld.class`. This proves that your program has been successfully compiled. Your original file `HelloWorld.java` can also be found there, and you can modify this file later to print _Hello Mom_ or something else. 129 | 130 | If the program has syntax errors, for example you forgot to type the last curly brace, Java compiler will print an error message. Now you’d need to fix the error, and recompile the program again. If you have several errors, you may need to repeat these actions more than once until the file `HelloWorld.class` is created. 131 | 132 | 133 | ==== Step 3 – Run the Program 134 | 135 | Now let’s run the program. In the same Command or Terminal window enter the following: 136 | 137 | _java HelloWorld_ 138 | 139 | After running this command, you'll see the text _Hello World!_ printed in the Terminal window as shown in <>. Have you noticed that this time you’ve used the program _java_ and not _javac_? This is how you start JRE by providing it the name of the application to run (`HelloWorld` in this case). 140 | 141 | [[FIG1-12]] 142 | .Running HelloWorld 143 | image::images/fig_1_12.png[] 144 | 145 | Keep in mind that Java does not treat capital and small letters the same, which means that if you originally named the program `HelloWorld` with a capital `H` and a capital `W`, do not try to start the program `helloworld` or `helloWorld` – the JRE will signal an error. The file name should match the class name as well. Typically, each file of your application contains the code of one class. 146 | 147 | Now let’s have some fun trying to guess how to modify the code of the program that prints Hello World. I’ll explain how this program works in the next chapter, but for now attempt to guess what has to be done to say hello to your pet, friend or print your address. Go through all three steps to see if the program still works after your changes. If you don't have a pet, you can always say hello to my puppy - his name is Sammy. Are you up for the challenge to write a program that prints Hello Sammy! on the screen? 148 | 149 | [[FIG1-07]] 150 | .Sammy is 4 months old here 151 | image::images/fig_1_07_.png[] 152 | 153 | In the next chapter you'll learn how to write, compile and run your programs in a more convenient environment than just a text editor and a Command window. 154 | -------------------------------------------------------------------------------- /Chapter_10.adoc: -------------------------------------------------------------------------------- 1 | :toc-placement!: 2 | :imagesdir: . 3 | 4 | == Creating a Tic-Tac-Toe Game 5 | 6 | In this chapter we'll return to GUI programming and will develop a Tic-Tac-Toe game using JavaFX and Scene Builder. 7 | 8 | This game may go by different names around the world, but it comes down to placing X's and O's on the game board. If you're not familiar with this game, read its description in http://en.wikipedia.org/wiki/Tic-tac-toe[this Wikipedia article]. 9 | 10 | Every game implements a set of rules or a strategy that has to be applied depending on the player’s actions. Let’s come up with a simple algorithm for the Tic-Tac-Toe game. Our version of this game will implement the following rules: 11 | 12 | * The game will be played by two players on a 3x3 board. 13 | * Two players can play this game. One will play with the symbol X, and the other will use O. 14 | * The winner must have a full row, column, or diagonal of X's or O's. 15 | * After each move, the program has to check if there is a winner. 16 | * The winning combination of squares has to be displayed in different colors. 17 | * After the winner is found or there are no empty squares left, the players may select the menu Actions | Play to play again. 18 | * In a new game the first player plays with X's. 19 | 20 | [[FIG10-1]] 21 | image::images/fig_10_01.png[] 22 | 23 | The content of this chapter is based on the materials covered in Chapter 7 and 8. While developing the game you'll learn how to add menus, dynamically change styling of GUI components and apply an animation effect. 24 | 25 | === Developing the Game: Step by Step 26 | 27 | In Chapter 7 we went through the procedure of creating a new IDEA project, and now you'll need to do it again. Create a new project selecting JavaFX as a project type. Press Next, and on the next popup window enter _TicTacToe_ as a project name. Press the button Finish and IDEA will generate a new project for you. Rename (right-click | Refactor | Rename) the file _sample.fxml_ into _tictactoe.fxml_ and _Main.java_ into _TicTacToe.java_. Accordingly, the `TicTacToe` class should load the file _ticktacktoe.fxml_, and the window title should read `Tic-Tac-Toe`: 28 | 29 | [source, java] 30 | ---- 31 | public class TicTacToe extends Application { 32 | 33 | @Override 34 | public void start(Stage primaryStage) throws Exception{ 35 | Parent root = FXMLLoader.load(getClass().getResource("tictactoe.fxml")); 36 | primaryStage.setTitle("Tic-Tac-Toe"); 37 | primaryStage.setScene(new Scene(root, 300, 325)); 38 | primaryStage.show(); 39 | } 40 | 41 | public static void main(String[] args) { 42 | launch(args); 43 | } 44 | } 45 | ---- 46 | 47 | Rename the generated package from _sample_ into _mygame_. Inside the _tictactoe.fxml_ change the reference to controller to be `fx:controller="mygame.Controller"`. Now you're ready to design the GUI for Tic-Tac-Toe in Scene Builder. 48 | 49 | ==== Developing the GUI part in Scene Builder 50 | 51 | Similarly to the examples from Chapter 7, we'll separate the GUI design from implementation. So right-click on the file _tictactoe.fxml_ and select the menu option Open in SceneBuilder. This is how the IDEA-generated file _tictactoe.fxml_ looks like in Scene Builder: 52 | 53 | [[FIG10-2]] 54 | .Opening the generated tictactoe.fxml in Scene Builder 55 | image::images/fig_10_02.png[] 56 | 57 | First of all, the `` is not a good candidate to serve as a root container for our game, which has to have a menu on top. The `` is a better choice when you need to have some GUI components to be located on the top of the window. Our game will have a menu on top and a 3x3 grid of squares in the center of the window. 58 | 59 | Let's delete the `GridPane` from the Hierarchy panel at the bottom left and drag-drop the `BorderPane` there. The Scene Builder's Window should look like this: 60 | 61 | [[FIG10-3]] 62 | .The BorderPane is a root container 63 | image::images/fig_10_03.png[] 64 | 65 | JavaFX menus are created as a hierarchy of nested components. A `Menu` container can contain one or more `MenuItem` components and other `Menu` components. You can also create a `MenuBar` or a `ContextMenu` that includes one or more `Menu` components. I'll show you how to create a menu bar with two menus _Actions_ and _Help_ for our Tic-Tac-Toe game. 66 | 67 | A menu bar is usually located at the top of a window. In Scene Builder drop the `MenuBar` component from the Controls panel onto `Insert TOP` line in the `BorderPane` at the bottom left panel. Press a little plus sign to expand the `MenuBar` in the Hierarchy panel. You'll see that it'll have the default menus named File, Edit and Help. 68 | 69 | [[FIG10-4]] 70 | .Dropped the MenuBar on Top of the BorderPane 71 | image::images/fig_10_04.png[] 72 | 73 | We're not going to edit anything in the TicTacToe game, so right-click on Edit and select Delete option. Rename the menu File into Actions using the Properties panel of Scene Builder.The `Menu` File was created with the `MenuItem` Close - rename it into Quit. 74 | 75 | Now we'll add menu items to the menus Actions and Help. Drop a `MenuItem` component from the panel Menu onto the menu Actions in the Hierarchy panel. Scene Builder will automatically create an Unspecified Action. Rename it to Play. You can use drag and drop to change the order of the menu items. 76 | 77 | Drop another `MenuItem` component onto the menu Help. Scene Builder by default creates two menu items: About and Unspecified Action. Rename the latter to be How to Play. The Hierarchy panel should look as follows: 78 | 79 | [[FIG10-5]] 80 | .The menu bar with 2 menus and 4 menu items 81 | image::images/fig_10_05.png[] 82 | 83 | Now drop a `GridPane` from the Containers panel onto the center of the BorderPane. By default, Scene Builder creates a 2x3 grid. Right-click at the column tab "1" and add a column to change the grid dimensions to be 3x3. 84 | Change the preferred height of each row to 100 by selecting each row and entering 100 in the Pref Height field on the right panel named Layout: RowConstraints. This is what we've got so far: 85 | 86 | [[FIG10-6]] 87 | .The menu bar on top and the grid in center 88 | image::images/fig_10_06.png[] 89 | 90 | Save this layout in Scene Builder and run the TicTacToe class in IDEA. You'll see a window with a menu on top. The grid won't be visible yet, because it has no content. Click on the menu Actions, and the window will look like this: 91 | 92 | [[FIG10-7]] 93 | .Running TicTacToe with an empty grid 94 | image::images/fig_10_07.png[] 95 | 96 | The grid has 9 cells and we want to add 9 buttons - each button will represent a square on the Tic-Tac-Toe board. You can add the buttons to the grid in Scene Builder as we did in the Calculator in Chapter 7. But it'll be faster to do it manually by editing the content of the file _tictactoe.fxml_ in IDEA's editor. Modify the content of this file to look as follows: 97 | 98 | [source, xml] 99 | ---- 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 |
129 | 130 | 131 |
143 | 144 | ---- 145 | 146 | Note that each button has an id. We'll need them while processing button clicks in the controller class. Run the TicTacToe class and the window will look pretty close to the final version of our Tic-Tac-Toe game. 147 | 148 | [[FIG10-8]] 149 | .Running TicTacToe - the first square has a focus 150 | image::images/fig_10_08.png[] 151 | 152 | Do yo see this thin border around the top left square? It occurs because by default the firs grid cell _has a focus_, which means that this particular GUI component is ready to receive input. But we don't want to suggest the player starting the game from the top left corner, do we? We want to remove this little border, and it's time to create a special style for a button that will not show the focus. 153 | 154 | Let's create a new file named _tictactoe.css_. In IDEA, right click on the package name _mygame_ and use the menu File | New | File. It'll create an empty file. Type the following in there: 155 | 156 | [source, css] 157 | ---- 158 | .button{ 159 | -fx-focus-color: transparent; 160 | -fx-background-insets: -1, 0, 1, 1; 161 | } 162 | ---- 163 | 164 | From Chapter 7 you may remember that this means that every button in our application will have these attributes. Web designers call the styles created for certain types of GUI element _type selectors_. Hence the attributes defined in the `.button` section of CSS will apply only for buttons. If we wanted to style menus, we'd need to add a section `.menu` to the CSS file. Labels would be styled in the `.label` section, and so on. 165 | 166 | When I did my search on line to figure out how to remove the focus border, the online documentation suggested that adding the rule `-fx-focus-color: transparent;` would do the trick. But it didn't. Every programmer knows, that not everything works by the book. By doing a little more online research I figured out that adding `-fx-background-insets: -1, 0, 1, 1;` is needed too. 167 | 168 | Don't be scared that not everything works as it should the first time around. Luckily, each programming language has an online community of people who are willing to share their findings and answer the questions of the rookies. One of the best resources for asking questions and getting help is the Web site http://stackoverflow.com/[StackOverflow]. 169 | 170 | Now we need to add a line to the `main` method of the TicTacToe class to load the file `tictactoe.css`. We did something like this in Chapter 7 while styling the Sign In application. We'll also need to do small changes in the `main` method to store the reference to a `scene` in a separate variable. We also want to set fix the size of the game board by invoking _setResizable(false);_ on the stage object. After these modifications, the class `TicTacToe` will look like this: 171 | 172 | [source, java] 173 | ---- 174 | public class TicTacToe extends Application { 175 | 176 | @Override 177 | public void start(Stage primaryStage) throws Exception{ 178 | Parent root = FXMLLoader.load(getClass() 179 | .getResource("tictactoe.fxml")); 180 | primaryStage.setTitle("TicTacToe"); 181 | Scene scene = new Scene(root, 300, 275); 182 | scene.getStylesheets().add(getClass() 183 | .getResource("tictactoe.css").toExternalForm()); 184 | primaryStage.setResizable(false); 185 | primaryStage.setScene(scene); 186 | primaryStage.show(); 187 | } 188 | 189 | public static void main(String[] args) { 190 | launch(args); 191 | } 192 | } 193 | ---- 194 | 195 | Run the TicTacToe class now and the focus is gone: 196 | 197 | [[FIG10-9]] 198 | .Running TicTacToe - the first square has no focus 199 | image::images/fig_10_09.png[] 200 | 201 | The GUI is ready. The name of the Java class that will play the role of the controller was specified in the file _tictactoe.fxml_ as `fx:controller="mygame.Controller"`. Now let's program the application logic in the controller class. 202 | 203 | ==== Handling Button Clicks in Controller 204 | 205 | There are different ways of programming computer games. In some games you play against another player, in others - against the computer. Our version of TicTac-Toe will have two players. The first one will place X's on the blank buttons and the other one will place O's. Hence we need to keep track of the player's number. 206 | 207 | When the player will click on the button, the event handler should place the appropriate label on the button. The code of the class `Controller` will take care of this functionality: 208 | 209 | [source, java] 210 | ---- 211 | public class Controller { 212 | private boolean isFirstPlayer = true; 213 | 214 | public void buttonClickHandler(ActionEvent evt){ 215 | 216 | Button clickedButton = (Button) evt.getTarget(); 217 | String buttonLabel = clickedButton.getText(); 218 | 219 | if ("".equals(buttonLabel) && isFirstPlayer){ 220 | clickedButton.setText("X"); 221 | isFirstPlayer = false; 222 | } else if("".equals(buttonLabel) && !isFirstPlayer){ 223 | clickedButton.setText("O"); 224 | isFirstPlayer = true; 225 | } 226 | } 227 | } 228 | ---- 229 | The method `buttonClickHandler` will handle events generated when the player clicks on a button. Note that we check if the button's label is blank, then the program displays either X or O depending on which player clicked on the button. To let the GUI know about this event handler we need to add the attribute `onAction="#buttonClickHandler"` to each `