Java代写|javafx作业|CS作业: 这是一个涉及javafx GUI库的作业，是比较典型的java图形界面编程题目
- Build the GUI for our Chess Game as an exercise in interfaces, abstract classes, the JavaFX EventHandling Pattern as well as the Observer Pattern.
- Hone problem-solving skills by developing a program with less guidance and more self-directedlearning.
If you did not successfully complete Assignment 2, a solution will be posted for use
Your goal is to build a GUI that looks and feels like a chessboard.
The scenes root is a BorderPane (Do a Web search: Java API BorderPane). The centre of the
BorderPane is a GridPane (Do a Web search: Java API GridPane). The contents of the GridPane as well
as the two bordering VBoxs on the left and right are Button objects.
All coming examples assume: Button sampleButton = new Button(...);
Right VBox
for Black
Taken Pieces
LeftVBox forWhiteTakenPieces
Centre GridPane for the board itself
- The Button objects for the chessboard have alternating fx-background-color of white andgrey whilst the Button objects for the taken pieces all have a fx-background-color of grey butalso have a fx-border-color of white.
Example: sampleButton.setStyle(-fx- background-color: grey;);
- The Button objects for the chessboard have text showing their coordinate location (a greatway to check you have things oriented in the correct directions)
- The Button objects of both the chessboard and the taken pieces have a minimum size set to(90,90). This in turn means that our Scene object has a starting size of (900,720). Check mymath to make sure you understand why.
Example: sampleButton.setMinSize(90,90);
- The Button objects of both the chessboard and the taken pieces have optional imagesattached when an actual piece is located on that square. Note: Images are provided (below)
Image icon;icon = new Image("nameOfFileContainingAnImage);sampleButton.setGraphic( new ImageView( icon )); // Show a piecesampleButton.setGraphic( null ); // Remove a piece
Background Preparations
You need a project that is both a new JavaFX project but also one that contains your previous code aswell as the images we will use for the chess pieces.
- Create a new NetBeans project called assign4. Make sure that you create a JavaFX Application.
- Call the application Assign4. (i.e. public class Assign4 extends Application).
- Make sure you create this class within a chess package (just like in previous assignments)
- At this point, you should have Source-Packages->chess->Assign4.java
- Drag-and-drop the files from Assignment 2 into the Source-Packages
- You can even copy in Assign2.java and re-run it to make sure the classes all still run.
- Include the images for our chess pieces within this project. The images to be used are availablefrom an open-source project by Steven M. Vascellaro Stevoisiak from Long Island, New York. We aregoing to use his images, but in keeping with Open Source Copyrights, you will cite him within yourprogram. You can even look at his code, although Im confident it wont help you much in thisassignment.
Reference: https://github.com/Stevoisiak/JavaFX-Online-Chess
The icons that we are going to use are part of the assets in Stevens project. To get them, youhave to Clone or Download his project and then incorporate them within your Netbeans project.
- Clone or Download. The project will download as a ZIP file.
- Unzip the project.
- Navigate to the assets/pieces folder. Check out the images there.
- Copy-paste the assets/pieces folder to your Netbeans project:a. Right-Click on the package (chess).b. Select Newc. At the bottom, select Otherd. On the left panel called Categories , move the slider to the bottom, and select Othere. On the right panel called File Types , move the slider to the bottom, and select Folderf. Click on Nextg. Set the Folder name to chess. imagesh. Click on Finishi. Using two side-by-side windows (Windows Explorershowing your unzipped folder and Netbeans showingyour project), drag-and-drop the files onto thechess.images folder.
Part 1: Extending the Base Code
You want to see your GUI but first we have to make a couple of modifications to your existing code, tosupport its inclusion with the GUI.
The new attribute imageName will associate a Piece object with the correct filename of the image tobe used to display it. Study the names of the files that youve just downloaded. Look for a way toconstruct the file name from the other instance variables.* Use Strings toLowerCase()method at the end to ensure that all characters are lower-case. Filenames are very finicky.
- Do not hardcode the filenames. Do not write code like this: if (….) imageName = black_pawn.png etc
The other change to our base code is in the ChessBoard class. In Assignment 2, there was a singleArrayList that contained both black and white taken pieces. I am suggesting that you divide theminto two separate lists. It is a suggestion. There are different ways of managing this, but I think that thisis an achievable path with less aggravation.
Piece
-colour: ChessColour
-name:ChessPieces
-shortName: char
-imageName:String
+Piece(ChessColour, ChessPieces)
+getColour():ChessColour
+getName():ChessPieces
+getShortName():char
+getImageName():String
+isLegalMove( ... As before) :boolean
+toString():String
ChessBoard
-board:Square[][]
-activeColour: ChessColour
-fullMove:int
-whiteTakenPieces:ArrayList<Piece>
-blackTakenPieces:ArrayList<Piece>
... As before
Part 2: ChessBoard GUI (Without the TakenPieces)
Another suggestion: Get the main board working first. Ignore the taken pieces to begin. You will haveto re-arrange your scene graph for Part 3, but it may help avoid getting overwhelmed. It also teachesyou the practices of incremental software development. You are free to use anonymous inner classesbut I will be showing the use of non-public classes for the event handlers.
The UML is different than the rest given in this course. It is not mandatory that you follow it exactly. Thegreyed-out instance variables in SquareEventHandler are suggestions; they are meant as clues onhow to build your program. When a user clicks on a Button, your code must somehow associate thatButton with a Square in the ChessBoard and use that information to move a piece around.
Notes:
- Im suggesting that you make SquareEventHandler a non-public class, in the same file asAssign4. Thats how Im setting up the SUBMIT program
- All of the steps below involve changing code in these two classes. You dont have to modify theother classes anymore, for this part.
Steps
- Build the view only. Forget about event-handling. In fact, just build the black-and-white squareswith their coordinates showing. Doing so will establish that you have the square a1 at thebottom-left. You could even start smaller and just build the 8×8 squares, all in the same colour.
- Now add in the display the pieces on the squares. Go back to Page 2 for sample code.
- Now add in the simplest version of your EventHandler. Simply print out the coordinateof the Button/Square being clicked.
- Now add in the complete logic for moving a piece. Youre going to be surprised by how easy itis. Play your chess game, including taking a few pieces.
Assign
-board:ChessBoard
+start(PrimaryStage)
Application
+start(PrimaryStage )
SquareEventHandler
-board:ChessBoard
-boolean:firstClick
-firstSquare:Square
-secondSquare:Square
-firstButton:Button
-secondButton:Button
+SquareEventHandler(ChessBoard)
+handle(ActionEvent)
EventHandler<T>
<<interface>>
handle(<T>)
Part 3: TakenPieces
The final stage is to add in two Panes for the taken pieces, white pieces on the left and black pieces on
the right. The grid of squares is moved to the centre. The code for this change should be developed in
two stages:
- The View: In the start() method of your Application, you must rearrange your Scene Graph sothat your Scene uses a BorderPane as your outermost root branch. Use the methodssetRight(), setLeft() and setCenter(). The left-and-right sides each shouldhave 16 vertically-arranged Buttons (for a maximum of 16 taken pieces). It is suggested thatyou store the references to these buttons as instance variables (for use by the methodonChange()). Refer to annotations on the first pages diagram for the suggested scene graph.
- The Controllers/Behaviour: The chessboards behaviour is driven by a user actually clicking onbuttons. The lists of taken pieces are different: Their displays are updated by your code,whenever a piece is taken and added to the lists of taken pieces. For this reason, the UMLbelow guides you to use ObservableLists to which a ListChangeListener isregistered: Whenever a piece is added to an ObservableList, this change is automaticallyrelayed to the registered ListChangeListener (which can cause the change in display).
Assign
-board:ChessBoard
-whiteTakenSquare:Button[]
-blackTakenSquare:Button[]
+start(PrimaryStage)
Application
+start(PrimaryStage )
SquareEventHandler
-board:ChessBoard
-boolean:firstClick
-firstSquare:Square
-secondSquare:Square
-firstButton:Button
-secondButton:Button
+SquareEventHandler(ChessBoard)
+handle(ActionEvent)
EventHandler<T>
<<interface>>
handle(<T>)
ChessBoard
-board:Square[][]
-activeColour: ChessColour
-fullMove:int
-whiteTakenPieces:ArrayList<Piece>
-blackTakenPieces:ArrayList<Piece>
-ObservableList<Piece>:whiteTakenPieces
-ObservableList<Piece>:blackTakenPieces
+addTakenObserver(ListChangeListener:listener)
....
ListChangeListener<
+onChange(c:Change)
Detailed Instructions (Because this is difficult)
- In the ChessBoard class, add the two instance variables shown.a. Initialize them by wrapping them around the ArrayList.
Example ObserverList<xyz> obsList = FXCollections.observableList( new ArrayList<xyz>);
b. Write the addTakenObserver() method. The method registers the (same)
supplied listener on both the ObserverableLists.
c. Make a very minor but important change to your previous code in the move() method:
Instead of adding taken pieces to the ArrayList, add them to the
ObserverableList.
- In the Assign4 class, implement the ListChangeListener.a. The class will now both extend Application and implement ListChangeListenerb. The onChanged() method must be implemented. Start by simply printing a messageto the console that a change has occurred. This minimal implementation will verify thatthe method is called every time a piece is taken.c. Wait. Dont forget. All the code is written, but nothing will work unless you have actuallyregistered ListChangeListener with the ObservableLists (in theChessBoard)? You must call ChessBoards addTakenObserver() method(within the start() method).d. Run the program and play the game such that you take a piece. Verify that the messageis printed.
- Complete the implementation of the onChanged() method. An almost-complete samplesolution is below. All you have to do is fill in the code to change the display of images on thebutton.
while (c.next()) {if (c.wasAdded()) { // In our application, should be nothing elseint index = c.getFrom(); // In our application, will be 1List
// Put in code to add a graphic image to a button// in either the left or right pane.// Ask for help after you have tried to figure it out yourself.
}}}