Simple GUI demo



This demo shows how to render a musical score in a JavaFX app and how to playback it, including a playback cursor, all based on Zong!.

It can be found in the "demos" project within the folder com.xenoage.zong.demos.simplegui.

It consists of the following files:

    • This class contains the main method and is the JavaFX Application subclass
    • Zong! is initialized (see below)

    • This class holds the current score document (ScoreDoc), its Layout and a layouter for the playback cursor (PlaybackLayouter)
    • The PlaybackLayouter modifies the current layout so that the current playback position is shown
    • Registering this class as a PlaybackListener, it gets notified about the playback progress and can update the layout accordingly
    • The onClick method shows a message with details about the clicked element (for example a clicked note or rest)
  • MainWindow.fxml
    • The FXML code of the main window
    • The Java controller of the main window
    • The renderLayout method uses the JfxLayoutRenderer class (JavaFX renderer) or the AwtLayoutRenderer class (AWT/Java2D renderer) to create a displayable image of the document layout. In your app, you can choose the renderer you prefer. For each platform (also Android and HTML5/JS), there is a special renderer available.

Initialize Zong!

At the beginning of the application, Zong! has to be initialized. In this demo app, this is done at the very beginning in the main method.


See the description on the page about the minimal demo.

Log.init(new DesktopLogProcessing(appName + " " + appVersion));

Zong! can log messages, warnings and errors. See the Log class for more details.

To enable logging, call the init method with the appropriate logger (in our case the DesktopLogProcessing, which is the logger for Java SE desktop applications).

The log file can be found in the directory named appName within the default directory of the operating system to store application data. For example, it the app name is "SimpleGuiDemo", the directory is

  • "/home/Username/.SimpleGuiDemo/" (Linux and Solaris)

  • "/Users/Username/Library/Application Support/SimpleGuiDemo" (Mac OS X)

  • "C:/Users/Username/AppData/Roaming/SimpleGuiDemo" (Windows)

In this directory you will find the file "data/app.log", which contains the log.

Err.init(new GuiErrorProcessing());

Err is Zong!'s error processor. We initialize it using GuiErrorProcessing, which displays JavaFX dialogs to report errors and warnings.

If we do not initialize this class, it is auto-initialized but only reports the errors to the console.