Creating a Scene

In this Lesson

You will

  • Learn about Soiree Scenes
  • Create the first scene for the Party Pool product.

Concepts

A scene is a Soiree item that describes some portion of the user experience. The complete user interface for a Soiree solution is provided by one or more Scenes.

A scene contains

  • Elements
    Elements are the visible components in the user interface. They include text fields, images, buttons, and their many friends.
  • Flow control
    Flow control is used to move from scene to scene or to control which components are displayed within a single scene.
  • Event handling
    Event handling is used to send events to the business logic that is running behind the scene.

Scene definitions are device specific.

  • Scenes may be created for iOS, Android, or the desktop. You cannot create a single scene and have it displayed in all three environments. Why? Because Soiree does not attempt to play the least-common-denominator game where you create a user interface that only contains components which can be displayed on all device types (which is a bit like playing dominos without all the dots). Soiree scenes provide components that exploit the capabilities and expected behaviors of the target platform.

Scenes are delivered as platform specific applications.

  • Soiree provides a client for each supported platform. Each Soiree client is capable of displaying the scene definitions for its platform.
    • iOS solutions are delivered as a native Objective-C app.
    • Android solutions are delivered as native Java app via the Android SDK.
    • Desktop solutions are delivered as Java Swing application.

All Scenes, regardless of the target platform, are created using the Soiree Scene Editor.

  • You create scenes for all supported platforms using a single set of skills.
  • Soiree does the heavy lifting of taking the scene definitions to each platform.
It's a Code Free Zone
With Soiree you never write any user interface code. You will feel like the captain of your own ship when you tell the Scene Editor Make it so!

In these introductory lessons you will be using the desktop client. The skills you learn in these lessons will carry over to the other lessons that provide advanced platform specific instructions.

What you will be creating

In these lessons you will be creating a solution for a company that provides party management. The solution will maintain a list of parties as well as some party details such as guest lists and a menu of food to be served.

In this lesson you will be creating a scene that could be used to display a list of parties.

Create a Scene

In this lesson you will create a Scene using the Scene Wizard.

  1. Open the Scene Wizard.
    There are three ways to start a Soiree Item Wizard
    • Right click on the src folder or a package in the src folder then select New, Scene.

      scene

    • Left click on the src folder or a package in the src folder then press CTRL+N (Windows) or Command+N (OS X) to open the Wizard selection window. Expand the Soiree section and select Scene.

      scene

    • Right click on the src folder or a package in the src folder then select New, Other. This will open the Wizard selection window.

      scene

  2. When the New Scene wizard opens select the Desktop platform.

    scene

  3. Select the device type.

    scene

  4. Enter the scene details and then press Finish. You can copy the values from the text shown below.
    • Package: com.example.party.scene
    • Name: PartyDefinition
    • Description: Maintains the party definitions
    • Default Menu Item Name: Party Definitions

    scene


  5. The scene item will be created and opened in the scene editor. Review the following image to get acquainted with the various parts of the editor. We will be using some of the editor’s features in the steps that follow.

    scene

  6. Download an image for the scene.
    • Right Click on the Party Fish
    • Select Save Image As… from the pop-up menu.


    Party fish


  7. Download a font for the scene.
    • Click on the font image to download the font.


    Daniel Font


    Daniel Font License

  8. Add the party fish to the Scene’s image catalog
    • Open the Image catalog in the Scene editor.

      scene

    • Drag the downloaded image file into the image catalog.

      scene

  9. Shortcut
    You do not have to open the image or font catalog before dragging files into them. Example: drag an image file over the Images tab and pause there briefly. The catalog will open and you may then complete the drag operation by dropping the file into the view.
  10. Add the font to the Scene’s font catalog
    • Open the Font catalog in the Scene editor.

      scene

    • Drag the downloaded font file into the font catalog.

      scene

  11. Design a scene that can display multiple rows of information.
    The first scene you create will be used to display a list of parties.

    Watch this 2 minute video which illustrates how to design the scene.

    Use the Scene editor to create the design that was presented in the video.

    • Use the image and font that you downloaded to create the top portion of the scene. As you are dragging the image onto the canvas you must
      press the ALT key to select the creation of an “Image” component.
    • Use a Vertical Styled Grid for the repeating rows section.
    • Use a Single Line Label in the header of the styled grid.
    • Use Single Line Text Values (from the Data section) in the row of the styled grid.

    In the lessons that follow you will be running this scene using the desktop client.