Java fx lists design doc - Hamster339/Piping-Tool-Java GitHub Wiki

Introduction

This document will outline and explain the approach to adding the lists to the UI screen.

screen layout

Each list is represented with a JavaFX vBox added to the scene.

The structure of the box is as follows:

<list box>  
    <Tile vBox>  
        <Title Text> list title <\titletext>  
    </Tile vBox>  
     
    <Tune vBox>  
        <Tune Text> name of tune <\tune text>  
    </Tune vBox>  
   .... (another vBox for each tune added)  
  
</list box>
  • Each tune has been placed in a new vBox to add padding around each tune name as you cant add padding to text nodes in JavaFX

CSS

The style of the whole screen is defined in an external CSS file called appStyle.css

as each node is created the style sheet is applied to it with an id, that is used in the CSS file to change the properties.

FXML

It is possible to define the layout of the lists in an FXML file. While originally it was decided not to do this, it has since been decided to use this for all page elements that are unchanging, such as the new list button or the contents of the new list and new tune forms. The lists themselves will be dynamically added via java code.

⚠️ **GitHub.com Fallback** ⚠️