Hello Scene

Hello Scene is a partially completed solution introducing you to Soiree scenes.

Installation Instructions

If you are not yet familiar with installing Soiree hors d’oeuvres please read How to install an hors d’oeuvre.

Install Hello Scene into a new Java project named Hello Scene before continuing with this guide.

Testing the Installation

After installing Hello Scene please do the following

  1. Start the Derby database
    Right click on the startderby-helloscene.xml file and select Run As … Ant Build

  2. Start the Soiree Server (SxServer)

    The start server button remembers the last selection. The next time you want to start the same server you may simply press
  3. Start the desktop client for the Hello Scene solution

    The start desktop client button remembers the last selection. The next time you want to start the desktop client for the same solution you may simply press
  4. The desktop client should start and display the following

Enhancing the Solution

  1. Double click the Hello scene file. It will be opened in the Soiree scene editor.

  2. Add some image resources to the scene’s Images library
    • Select all of the files in the images folder

    • Drag them over the Images tab in the Scene editor and continue to hold the drag button and hover there for a moment

    • When the images library opens then drop the images into the image library

  3. Drag the green (non-highlighted) Hello button to the design canvas. Notice the element selection window above the drag image. Pressing the alt button while you are dragging will change the element selection. Ensure the Image Button option is selected and then drop the image into the canvas.

  4. Right click on the image button and drag the following images into the Appearance section for Hover Image and Press Image

  5. Set the tool tip text to “Say Hello”

  6. Create another image button by dragging the (non-highlighted) Goodbye button.

  7. Set the Brighten On Hover option to Yes and the Press Image to the highlighted Goodbye image.

  8. Set the tool tip text to “Say Goodbye”

  9. Configure the Confirm Click option as shown here

  10. Create a second layer.

    A blank design canvas will be created for layer 2.
  11. Pin the first layer. This keeps it visible while we design other layers.
    • Right click layer 1
    • Select Pinned from the context menu

  12. Re-select the layer layer 2 thumbnail

  13. Notice the elements in layer 1 are visible but not selectable. You may only select elements in the active layer (which is now layer 2).

  14. Create the two image buttons in layer 2 as shown here using the images in the scene’s image library.

  15. Right click the close layer 2 button and drag the layer 2 thumbnail to the Close area of the Left Click event.

  16. Right click the scene transition button and configure it to transition to the Hello2 scene.

    Scene Transition
    A scene transition will close the active scene and open the ‘Transition to’ scene.
  17. Drag a Single Line element from the element palette to the design canvas.

  18. Double click the text element in layer 2 and change its content to Layer 2 is open.

  19. Drag the label to center it above the buttons

  20. Select the layer 1 thumbnail to make it active

  21. Right click the Hello button and configure it to open layer 2 by dragging the layer 2 thumbnail to the open area.

  22. Right click the Goodbye button and configure it to close all layers.

  23. Save the scene definition by pressing Press CTRL+S (Windows) or Command+S (OS X) or File … Save from the menu.
  24. Start the desktop client:
  25. Play with the scene you created.
    • Watch the Hello and Goodbye buttons change their appearance when you hover over them or press down on them.
    • The tool tip text should appear when you hover over the Hello and Goodbye buttons.
    • The Hello button will open layer 2
    • The Goodbye button will confirm the selection before closing the desktop client.

Create a New Scene

  1. Right click on the example1.scene package and select New … Other…

  2. Select Scene from the Soiree section and then press Next

  3. Select Desktop

  4. Select Standard Desktop Application and then press Next

  5. Enter the following values and then press Finish

  6. Drag and Single Line Text Label and Button to the design canvas

  7. Select the daniel.ttf font file

  8. Drag the font file over the Fonts tab in the Scene editor and continue to hold the drag button and hover there for a moment

  9. When the fonts library opens then drop the font into the font library

  10. Right click on the label you added in the design canvas

  11. Set the text to Hello Scene and set the font to Daniel

  12. Select the label in the design canvas and hover over a corner until a resize indicator appears.

  13. Drag the corner of the label to make it larger and then center the label in the scene

  14. Double click the button you added to the design canvas

  15. Change its label as shown here

  16. Resize the button to fit the text and center it on the label

  17. Right click the button and configure it transition to the Hello scene.

  18. Save and close the Splash scene definition

Configure the solution to use the new scene

In this exercise you will modify the solution to display the Splash scene when the client starts.

  1. Double click the HelloWorld solution

  2. Expand the Initial and Home Scene section and set the Initial Scene to the Splash scene you created.

  3. Save the HelloWorld solution

Test the new scene

  1. Start the desktop client:
  2. The Splash scene will be displayed
  3. Press the Come on in button and you will see the Hello scene.

Stop the Database and SxServer

  1. Close any running desktop clients by pressing the Goodbye button or the close button on the window.
  2. Stop SxServer:
  3. Stop the Derby database
    • In the ant folder – right click on stopderby.xml and select Run As … Ant Build from the context menu

That’s all for this guide.