Lab 3 - Development Environment

During this lab you will finally work as developers (during previous labs you already have tried managers/system analysts roles). But in order to develop something you must first set up the development infrastructure.

Complete the development infrastructure

JAVA and your favourite IDE (Intellij IDEA or Eclipse) should already be familiar to you from the previous lab. Now, you will install another tool (i.e. Git) that will help the team during the development of the POS System.

Installation

• Git*
  • Download
    • For Windows select: Run Git from the Windows Command Prompt
      • During installation you are asked how to deal with file endings. Choose "Checkout Windows-style, commit Unix-style line endings".
    • On OS X Git is preinstalled
  • SourceTree - if you like to use a GUI we recommend this classic tool.
  • Plugin for your favourite IDE:
    • If you are using Eclipse, you may consider using the EGit plugin. It can also be easily installed from the Eclipse Marketplace and may be already included in some Eclipse installations. This is an alternative to using SourceTree.
    • If you are using IntelliJ IDEA, it has already the Git integration enabled.
  • You can also run git from the command line
    • Small introduction

* (if you wish, you are allowed to use other code versioning systems, but if you are not yet proficient with another VCS we encourage the use of Git. Using another VCS may also mean that you will not be able to receive any support regarding it from your supervisor.)

Empty Demo Application

(for your own examination - not for submission)

Before you start developing the current homework application, it is a good idea to test everything with a demo application. Follow this tutorial to develop a demo application and to learn how to work with gradle and git. The tutorial shows how to create a Gradle project from zero, how to link it to Bitbucket, use the issue tracker, and resolve merge conflicts.

Your Tasks (must be submitted)

In the demo task, you saw how to set up a new java gradle project. In your homework, you will modify an existing application. During the first lab, you forked the course project. Now it is time to clone your forked project with git and modify some code.

The application is a point-of-sale application that is not quite finished. During the next labs, your task is to finish this application. In this and the following homeworks you should keep your issue tracker up to date. All commits should be linked to tasks in the issue tracker and all finished tasks should be closed.

For this homework you have to

• Task 1: resolve a merge conflict with git (see git task)
• Task 2: add a new tab introducing your team (UI should be written in fxml file)
• Task 3: customise the look of the application
• Task 4: start implementing the functional requirements

Introduction

Gradle

Import the project into your favourite IDE as a gradle project. First thing you will notice, is that the IDE will create 3 separate projects. We are using a multi-project layout. We have one application that can run in two different ways, as a GUI application and as a command line application. The root project contains code that is used by both sub-projects. The two sub-projects contain the GUI and command line specific code. This means that we have three different build.gradle files. Look how the build.gradle files of the sub-projects specify different main classes. Try out which tasks are specified for the root, GUI and command line projects.

You can run the graphical user interface with: gradlew :SaleSystemGUI:run

and the command line interface with: gradlew :SaleSystemCLI:run

In the commands of the form gradlew :A:b the first ":" stands for root, "A" is the selected project and b the selected task.

Javafx

You are already familiar with javafx from the course Object-Oriented Programming. Until now, you have probably created UI objects in code. Javafx makes it possible to separate UI completely from other code. If you look into SalesSystemGUI/src/main/resources/ee/ut/math/tvt/salesystem/ui you see two .fxml files. This is where the user interface files are defined. The file is in FXML format, which is a special kind of XML. It is not the easiest format to edit. Luckily there is another option.

You are provided with 2 different ways to edit the .fxml file:

• editing .fxml directly (read more)
• opening .fxml file in Scene builder (read more - Eclipse, read more - IntelliJ)

Scene Builder

The other option is using Scene builder. Right click on the .fxml file and choose "Open with" --> "Other" --> "Scene Builder" (under external programs). Scene builder opens the .fxml file and displays the corresponding UI. Now you can drag around elements as well as drag and drop new elements. If you click save, the changes are applied to the .fxml file.

One disadvantage of Scene Builder is that the generated FXML is not very clean. This can of course be manually fixed in the .fxml file.

Task 1: Git task (1p)

For this task, you should create a merge conflict. You should also keep track of the task by creating an issue and linking it to the commits.

Creating a merge conflict means that two members of your team will make changes to the same file at the same time. Both students commit their changes. First student will be able to push his changes to the remote repository. Second student will have to pull these changes and merge them with his own changes.

This task should be simple if you have completed the demo tasks above.

Choose a file that you will use for this task. The merge conflict should contain at least the following:

1. changes by both students on an existing line of code
2. adding a line of code by both students at the same place in file
3. changing a line that is only changed by one student

E.g. for a file that contains the following 4 lines:

  This is
  an
  example
  file

Student 1 could commit these changes

  This is changes
  an
  interesting
  example
  file

And student 2 could commit

  This is another change
  an
  simple
  example
  file green

Your task: Create a task in the issue tracker. Link all commits to this task and close the task with the commit where you merge the code. And of course: solve the merge conflict.

Task 2: Team tab (3p)

The team tab should present the following information

• Team name
• Team contact person
• Team members
• Team logo (random image)

You should create a file called application.properties that will hold team information. All information displayed in the team tab should be read from the application.properties file. For the team logo the path to the image should be read from application.properties (the image may (but does not have to) be located on the internet). This file should be stored in the resources folder. Make sure that you created UI object of this tab using .fxml file. The application.properties file should be located in the main project. It should also be possible to ask for team information (excluding the image) from the CLI application.

Task 3: Customising the look (1p)

Look into DefaultTheme.css (located in src/main/resources/ee/ut/math/tvt/salesystem/ui). The look of the application is defined here. The look of the application can be defined in a css file. To use this css file add the following line to the start method in SalesSystemUI.

scene.getStylesheets().add(getClass().getResource("DefaultTheme.css").toExternalForm());

Run the application. You will see that most of the application has a different look now. Look through the application and check if everything is consistently coloured. If not, make appropriate changes. (Tip: you will probably have to change the newly added TeamTab.fxml. Look through other fxml files and try to figure out which properties define the look of the tab)

Task 4: Start implementing (4p)

In this task, you will start implementing the requirements for the POS System. Implement all the functional requirements related to the warehouse. Keep the issue tracker up to date! Refer to issues in all commits.

Submission of results (1p)

Your results must be submitted using your Bitbucket repository. You should keep track of your tasks using the Bitbucket issue tracker. Every commit should be linked to a task by using “see #<issue number>” and “close #<issue number>” in the commit messages. When all tasks regarding this homework are done, create a tag named "homework-3" and add a link to the readme file in your repository, this will count as a submission (1p). You can create a tag by typing git tag -a homework-3 and then pushing the tag by git push --tags.

NOTE: In the assessment lab you must be able to show full solutions for Tasks 1, 2, and 3, and partial solution of Task 4.