Skip to content

Getting Started: Creating Hello World UI

Jump to bottom
Jeff Martin edited this page Mar 21, 2022 · 13 revisions

Getting Started: Creating a basic UI app

Create Gradle Project

Install Gradle

First you need gradle on your machine. If not there, install or download:

Then create new Java application:

  prompt> mkdir HelloWorld
  prompt> cd HelloWorld
  prompt> gradle init
    Select type of project to generate: (2) application
    Select implementation language: (3) Java
    Split functionality across multiple subprojects?: (1) no
    Select build script DSL: (1) Groovy
    Select test framework: (1) JUnit 4
    Project name (default: HelloWorld): (return)
    Source package (default: HelloWorld): (return)

Then edit app/build.gradle to include SnapKit repository and dependency:

repositories {
  ...
  maven { url 'https://jitpack.io' }
}
dependencies {
  ...
  implementation 'com.github.reportmill:SnapKit:master-SNAPSHOT'
}

Then edit app/src/main/java/HelloWorld/App.java to look like this:

package HelloWorld;
import snap.view.*;

public class App extends ViewOwner {
    
    public String getGreeting()  { return "Hello World"; }

    public View createUI()  { return new Label("Hello World"); }

    public static void main(String[] args) { new App().setWindowVisible(true); }
}

Then build and run app:

    prompt> gradle build
    prompt> gradle run

ViewOwner

The top level object in a SnapKit application is usually a subclass of snap.view.ViewOwner. This class contains the following key methods for creating UI, initializing it, updating it from app data and responding to changes:

import snap.view.*;

public class HelloWorld extends ViewOwner {

    /** Create UI here. */
    protected View createUI()  { return new Button("Hello World"); }

    /** Initial UI configuration. */
    protected void initUI()  { getUI().setName("MyButton"); }

    /** Update UI after any user input. */
    protected void resetUI()  { }

    /** Respond to UI. */
    protected void respondUI(ViewEvent anEvent)
    {
        if(anEvent.equals("MyButton"))
            System.out.println("Button was pressed");
    }

    /** Standard main. */
    public static void main(String args[])  { new HelloWorld().setWindowVisible(true); }

}

The createUI() method

In practice this method is rarely needed - most SnapKit UI is defined in UI files in the SnapBuilder application: SnapBuilder. The default implementation of createUI() looks for a file named ClassName.snp in the same directory as the ClassName.java. If found, the UI is loaded and returned by default. A '.snp' file is just an XML file with the UI description, like this:

    <RowView Padding="4,4,4,4">
        <Button Name="MainButton" Title="Press Me" PrefWidth="80" PrefHeight="24" />
    </RowView>

However, sometimes it can be useful to create the UI in code, or load base UI from a .snp file and wrap it in higher level UI, like a TabView.

The initUI() method

The initUI method is useful to load initial values into UI views like ListView or TableView or enable additional events on UI for the ViewOwner to respond to (MousePress, MouseEnter).

    protected void initUI()
    {
        // Configure ListView with color names
        ListView listView = getView("MyListView", ListView.class);
        listView.setItems("Red", "Orange", "Yellow", "Green", "Blue", "Violet");

        // Configure Label to turn blue on mouse-over
        Label myLabel = getView("MyLabel", Label.class);
        enableEvents(myLabel, MousePress);
        myLabel.addEventHandler(e -> myLabel.setFill(Color.BLUE), MouseEnter);
        myLabel.addEventHandler(e -> myLabel.setFill(null), MouseExit);
    }

The resetUI() method

This method is called every time the user interacts with the UI (after respondUI()). It is used to update values in UI, usually with a call to setViewValue("MyTextField", newValue).

    protected void resetUI()
    {
        setViewValue("NameText", customer.getName());
        setViewEnabled("SubmitButton, customer.getName()!=null);
        setViewSelItem("ColorListView", customer.getFavoriteColor());
    }

The respondUI() method

This method is called every time the user interacts with the UI, like a button press, a textfield change or a ListView selection.

    protected void respondUI(ViewEvent anEvent)
    {
        // Handle NameText change
        if(anEvent.equals("NameText"))
            customer.setName(anEvent.getStringValue());

        // Handle SubmitButton
        if(anEvenut.equals("SubmitButton"))
            saveCustomerInfo(customer);
    }
Clone this wiki locally