|
代写FXML MVC程序、Java编程
Applications Programming
Lab - MVC (worth 8%)
The process:
1. Create the Application class.
2. Create the view in FXML.
3. Create the controller in Java.
4. Modify the model to Support JavaFX properties.
5. Implement the event handlers.
Tutor demo
Main class: StadiumApplication
Make an application that sells seats in a stadium. The seats are divided into different groups and
each seat group has a different price and capacity. In this simple application, the stadium has only
one group of "front" seats. There are 300 front seats with a price of $400 per seat. The user
interface is shown below:
The user enters a number Into the Sell TextField and presses "Sell". The figures are updated to
reflect the sale, and the Sell TextField is reset to zero.
Your tutor will code the solution.
Note: Your tutor may demonstrate bindings with code like this:
income.bind(sold.multiply(price));
Another way to create bindings is through the Bindings class:
income.bind(Bindings.multiply(sold, price));
Read the documentation for the Bindings class here.
Student Specification
Main class: StoreApplication
Make a graphical user interface for the program you developed in the earlier classes lab: a store.
The store has one product and a cash register. The product is "Sticky Tape". Initially there are 200
items of this product in stock, and they sell for $2.99 each. The user interface is as follows:
The user can input the number of items to sell. Clicking the "Sell" button will sell that number of
items and reset the Sell TextField to zero. All figures are updated to reflect the sale. The stock is
shown as "XYZ items" where XYZ is replaced by the stock property from the model. The price is
displayed with a dollar sign to two decimal places, and so is the cash in the cash register.
Step 1. Open the lecture notes. You will need them as a reference. You may also refer to
the tutor demo (downloadable from ED) and the lecture demo (downloadable from
Canvas/Modules/ Subject Documents).
Step 2. Create a new JavaFX project in NetBeans IDE called "Lab9_2021AUT". If you
have a preferred IDE, you may use it instead, as long as it supports Java 8 and allows
projects to include non-Java files such as XML, CSS and PNG files.
NOTE: NetBeans will offer to automatically create a main class for you. Do not accept the
offer since you will create the classes later by hand. But if you do accept the offer, please
note:
1. The suggested class name should be changed to StoreApplication
2. The class should NOT be Placed inside the suggested package, so you will need to
delete the package name.
Step 3. Copy and paste the following code as a template for your StoreApplication class:
public class StoreApplication extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("store.fxml"));
// Add code here to load the root node from the FXML file
// and show it
}
}
Don't forget to import the required classes.
Step 4. Create an fxml file called "store.fxml" in the same directory as your StoreApplication
class. Add code to this file to define the layout exactly as shown in the screenshot above.
Note: everything in the left column is a label. The right column consists of Text nodes for
Product, Stock, Price and Cash and a TextField for Sell. The Sell button is aligned right.
Step 5. Define a controller Class called StoreController and declare the name of this
controller class in your store.fxml file to link it to this controller. Use the following code as a
template for your StoreController class:
public class StoreController {
@FXML private Button sellBtn;
@FXML private Text stockTxt;
@FXML private Text priceTxt;
@FXML private TextField amountTf;
@FXML private Text cashTxt;
}
For each of these @FXML fields, modify the corresponding XML definition for this node in the
store.fxml file to include an fx:id attribute that links it to the corresponding field above. Note
that amountTf is the text field appearing after the Sell label.
Run your application to make sure it still works. Fix any errors reported.
Step 6. Create the model classes for Store, Product and CashRegister. You can use the
solutions from last week's lecture which are included below.
Copy the following code into a new interface called ProductObserver
public interface ProductObserver {
void HandleSale(double amount);
}
Copy the following code into a new class called CashRegister
public class CashRegister implements ProductObserver {
private double cash;
public CashRegister() {
cash = 0.0;
}
public void add(double money) {
cash = cash + money;
}
@Override
public void handleSale(double amount) {
add(amount);
}
}
Copy the following code into a new class called Product
public class Product {
private LinkedList<ProductObserver> observers = new LinkedList<ProductObserver>();
private String name;
private int stock;
private double price;
public Product(String name, int stock, double price) {
this.name = name;
this.stock = stock;
this.price = price;
}
public void sell(int n) {
stock = stock - n;
Double money = n * price;
for (ProductObserver observer : observers)
observer.handleSale(money);
}
public void restock(int n) {
stock = stock + n;
}
public boolean has(int n) {
return stock >= n;
}
public void addProductObserver(ProductObserver observer) {
observers.add(observer);
}
@Override
public String toString() {
return stock + " " + name + " at $" + price;
}
}
Copy the following code into a new class called Store:
public class Store {
private CashRegister cashRegister;
private Product product;
Public Store() {
cashRegister = new CashRegister();
product = new Product("Sticky tape", 200, 2.99);
product.addProductObserver(cashRegister);
}
}
Step 7. Modify the controller and your model classes to expose JavaFX properties according
to the JavaFX property patterns. Refer to the 4 patterns from the lecture:
1. Pattern #1: Immutable property
2. Pattern #2: Read Write property
3. Pattern #3: Read Only property
4. Pattern #4: Immutable property with mutable state
For example, the name of a product never changes so it is an immutable property. It looks
like this:
public class Product {
private String name;
...
public final String getName() { return name; }
}
Step 8. Now bind each Text node in your view to the model:
1. For the Product name, use an FXML property binding expression, i.e. ${.....}.
NOTE! Some students have reported that FXML binding expressions don't work on a
Mac. If that is the case, you have permission to do the bindings in Java code rather
than FXML code.
For example, the lecture Demo example (which you can download from Canvas /
Modules /Subject Documents), you saw this code:
nameTf.textProperty().bindBidirectional(customer.getAccount().nameProperty());
However, in this case, you want to do a unidirectional binding:
nameTf.textProperty().bind(customer.getAccount().nameProperty());
Replace nameTf by the node in your scene representing the product name. Because
you want to refer to this from your Java code, you'll need to inject the node into your
controller:
@FXML private Text nameTxt;
You should also modify customer.getAccount().nameProperty() to refer to the name
property of the product.
2. For the Stock, do a binding in Java code so that the string " items" appears after the
stock number (see the lecture notes for an example)
3. For the Price and Cash, do a binding in Java code so that the price is displayed as
currency with a dollar sign and 2 decimal places.
Run your application to verify that all of the current product data is displayed.
Step 9. Set the initial contents of amountTf to just the number 0.
Step 10. In FXML, add an attribute on your Button node to specify the name of a Java
method to handle the button click. Name this method handleSell. Write a corresponding
method in your controller class that is linked to this action (see the lecture notes for an
example). In this method, write code to perform the sale, but ONLY if there is enough stock.
After performing the sale, set the contents of amountTf back to 0. Test your application to
ensure that the button works. When you click it, the sale happens, and the data is
automatically updated in the view.
Step 11. This is an assessed lab. Copy and paste the source codes and fxml codes to ED.
Step 12. Peer marking submission on Canvas. The instruction is specified here.
NOTE: After you Submit the source files to ED, you will not receive your mark immediately. It is
not possible for ED to mark a GUI automatically since a user is required to use a mouse to
drive the program. Therefore, this lab will be manually marked by peer marking. You should
submit a JAR file to Canvas by the due date to participate the peer marking. Late submission
will be excluded from peer marking activities and result 50% mark deduction.
Marking Scheme
All leaf nodes are shown 10%
All nodes are laid out correctly in a grid 10%
The Sell button is correctly aligned right 5%
The product name, stock, price and cash values are shown 20%
The stock, price and cash values are formatted correctly 20%
After clicking Sell, the stock is correctly updated in the view 10%
After clicking Sell, the Cash is correctly updated in the view 10%
After clicking Sell, the sell amount is reset to 0 10%
Clicking Sell does nothing if there is not enough stock 5%
请加QQ：99515681 或邮箱：99515681@qq.com WX：codehelp
|
