PROJECT: CRM Book

Overview

CRM Book is a desktop application targeted for salespeople. The user interacts with it using a CLI, and it has a GUI created with JavaFX. It is written in Java, and has about 10 kLoC.
This application allows salespeople to organize their Leads, Contacts, and Accounts that suits their liking, as well as address problems that symptomatic in the sales industry, such as identifying duplicates.

Summary of contributions

  • Major enhancement: added the ability to change the theme of CRM Book

    • What it does: allows the user to change the color theme of CRM Book according to his preference. CRM Book will save this change in user preference and display the chosen theme in subsequent runs.

    • Justification: This feature improves the user experience significantly because the user can change the color theme to adapt to different light intensity of the surrounding. For example, change to dark theme when the room is dark. This would prevent eye fatigue. Alternatively, the user can choose to use a theme based on his own likings.

    • Highlights: This enhancement affects all parts of UI. It required an in-depth understanding of CSS and FXML. In addition, the feature is implemented in such a way that it would be very easy for future developers to include more themes.

    • Credits: The new themes are built based on the dark theme of AddressBook - Level 4.

  • Minor enhancement: added 10 different color styles for tags.

  • Minor enhancement: enabled auto-complete of command keywords.

  • Code contributed: [Functional code] [Test code] [Unused code]

  • Other contributions:

    • Documentation:

      • Enabled auto-publishing of docs

      • Enabled Coveralls

    • Enhancements to existing features:

      • Created and updated the icon of CRM Book (Pull requests #32)

      • Updated the header of CRM Book (Pull requests #31)

      • Updated UI to include a welcome page (Pull requests #158)

    • Community:

Contributions to the User Guide

Given below are sections I contributed to the User Guide. They showcase my ability to write documentation targeting end-users.

Change theme: changetheme [since v1.4]

Changes color theme of CRM Book to the user specified theme. Currently, there are three themes, namely dark, light and blue. The blue theme is the default theme. When user opens CRM Book for the first time, blue theme will be on display. If the user changes the theme, it will be saved in user preferences so that CRM Book will display the user preferred theme in subsequent runs.
Format: changetheme THEME
Example: changetheme light

Contributions to the Developer Guide

Given below are sections I contributed to the Developer Guide. They showcase my ability to write technical documentation and the technical depth of my contributions to the project.

Auto-Complete feature

Current Implementation

To allow fast typing of commands, auto-complete of commands is implemented.

Auto-complete is implemented through the TextFields feature of ControlsFX.

//In CommandBox.java
TextFields.bindAutoCompletion(commandTextField, Messages.AUTOCOMPLETE_FIELD);

All the command words are included in the AUTOCOMPLETE_FIELD string array.

//In Messages.java
public static final String[] AUTOCOMPLETE_FIELD = {
    //all command keywords
    };

In addition to all the command words, a COMMAND_AUTO_COMPLETE string, with both command word and prefixes, is also included for add command.

//In AddCommand.java
public static final String COMMAND_AUTO_COMPLETE = COMMAND_WORD + " " + PREFIX_NAME + " "
        + PREFIX_PHONE + " " + PREFIX_EMAIL + " " + PREFIX_ADDRESS + " " + PREFIX_TAG;

Design Considerations

Aspect: Implementation of Auto-complete

  • Alternative 1 (current choice): All the commands that contain the typed input are shown. ie. When "a" is typed, both "add" and "clear" will be shown.

    • Pros: Allow new user to quickly learn the different command words.

    • Cons: When there are a lot of commands, efficiency of auto-complete decreases as user would have too many options to choose from.

  • Alternative 2: Only commands with the same sequence as the typed input are shown. ie. When "a" is typed, only "add" will be shown.

    • Pros: Higher efficiency of auto-complete.

    • Cons: New user might find this difficult to use as they are unfamillar with the command words.

Color Tag feature

Current Implementation

To allow easy identification of different tags, a color tag feature is introduced.

A string array is declared in PersonCard.java to include a set of colors for tags.

//In PersonCard.java
private static final String[] TAG_COLORS =
        { "blue", "cyan", "green", "magenta", "orange", "pink", "red", "yellow", "teal", "brown" };

These colors are defined, with their background color and text color spelled out, in the all the different theme CSS files.

A hash code of the tag name is used to select a color for the tag such that it would remain consistent between different runs of the software.

//In PersonCard.java
private String getTagColorFor(String tagName) {
    return TAG_COLORS[Math.abs(tagName.hashCode()) % TAG_COLORS.length];
}

//In PersonCard.java
private void initTags(Person person) {
    person.getTags().forEach(tag -> {
        Label tagLabel = new Label(tag.tagName);
        tagLabel.getStyleClass().add(getTagColorFor(tag.tagName));
        tags.getChildren().add(tagLabel);
    });
}

Design Considerations

Aspect: Implementation of color tags

  • Alternative 1 (current choice): Assign a color from a predefined list based on tag name

    • Pros: No additional commands are needed to generate a color for the tags.

    • Cons: User cannot choose a color for the tag.

  • Alternative 2: Allow user to set a color for the tag

    • Pros: Allows more freedom for user customization.

    • Cons: Takes more time to implement color tags.

Change Theme feature

Reason for implementation

CRM Book users are expected to spent long period of time on the software and under different light settings. Change theme allows users to switch between light and dark theme. This would prevent eye fatigue.

Current implementation

The sequence diagram below shows the interactions of change theme command within the logic component.

ChangeThemeLogicComponentSequenceDiagram

The sequence diagram below shows the interactions between different components of CRM Book for change theme command.

ChangeThemeHighLevelSequenceDiagrams

Every change theme command will post a ChangeThemeRequestEvent to EventCenter. When this event is handled, the UI will be updated to display the chosen theme. In addition, the themeFilePath in user prefs is updated with the chosen theme file path. Currently, there are three themes, namely blue, light and dark. The CSS files of these themes are referenced in Theme class as strings. The following piece of code demonstrates how the CSS files are referenced in Theme class:

//in Theme.java
    public static final String DEFAULT_THEME_FILE_PATH = "/view/BlueTheme.css";
    public static final String DARK_THEME_FILE_PATH = "/view/DarkTheme.css";
    public static final String LIGHT_THEME_FILE_PATH = "/view/LightTheme.css";

There is a method in Theme class to convert theme name into theme file path.

//in Theme.java
    public String convertThemeToFilePath() {
            switch (this.theme) {
            case DARK_THEME:
                return DARK_THEME_FILE_PATH;
            //other cases
            }
        }

This method is used to check if the chosen theme is equals to the current theme by comparing the file path of the chosen theme with the file path in user prefs.

If the chosen theme is not equals to the current theme, the ChangeThemeRequestEvent will be handle in MainWindow class.

//in MainWindow.java
public void handleChangeTheme(String theme) {
        String fullPath = getFullPath(this.themeFilePath);
        primaryStage.getScene().getStylesheets().remove(fullPath);

        switch (theme) {
        case Theme.LIGHT_THEME:
            this.themeFilePath = Theme.LIGHT_THEME_FILE_PATH;
            break;
        case Theme.DARK_THEME:
            this.themeFilePath = Theme.DARK_THEME_FILE_PATH;
            break;
        case Theme.BLUE_THEME:
            this.themeFilePath = Theme.BLUE_THEME_FILE_PATH;
            break;
        default:
            //this will not happen
        }

        prefs.getGuiSettings().setThemeFilePath(this.themeFilePath);
        fullPath = getFullPath(this.themeFilePath);
        primaryStage.getScene().getStylesheets().add(fullPath);
    }

This method updates the theme file path in the primary scene in 3 steps:

  1. Removes the current theme file path from primary scene.

  2. Updates the theme file path

  3. Adds the new theme file path into primary scene.

In addition, the updated theme file path is written into user prefs.

A switch case statement is used to update the new theme file path. This implementation allows easy extension of the feature; i.e. when a new theme is created, it can be easily added as a case.