User's Guide

Building the visual part

Now that you've survived building the reusable parts, let's put them to work in a view that has a left-hand window as CardDeck and a right-hand window as Discard. Create a new visual part called PlayingCardDeckListView in your CardGameApp.

Creating the user interface

In the Composition Editor view of your new visual part add another window part and add a Multiple Select List to each of the window parts. Attach each edge of the lists to the corresponding edge of the parent as follows:

  1. Open the settings for the list.
  2. Select the framingSpec property in the Name column and the ... button in the Value column.
  3. In the Framing Spec window, select the Top radio button.

    1. Select XmATTACHFORM for Attachment type.
    2. Enter 0 for Offset.

    Repeat these two steps, specifying XmATTACHFORM and 0 for the Bottom, Left, and Right radio buttons.

  4. Select OK in the Framing Spec window and close the Properties window.

Repeat the above steps for the other list.

Add a Pop-up menu part to the free form surface. Add Menu Choice parts and a Separator part and change their labels so that the menu looks like this:
Menu

Connect the menu attribute of the Multiple Select List part of the left-ahd window to the self attribute of the pop-up menu.

Adding the reusable parts

Add a PlayingCardDeck part that will be used to hold the initial card deck by doing the following:

  1. Select Add Part from the Options menu.
  2. In the Add part window, enter PlayingCardDeck for the class name.
  3. Select OK.
  4. Click the mouse pointer on an empty area of the free-form surface.

Add a CardDeck part to create an empty card deck to use as as discard deck by doing the following:

  1. Select Add Part from the Options menu.
  2. In the Add part window, enter CardDeck for the class name.
  3. Select OK.
  4. Click the mouse pointer on an empty area of the free-form surface.
  5. Change the name of the CardDeck to Discard.

Completing the connections

Complete the connections as follows:

Your connections should look like this in the Composition Editor.
Connections to menu

Selecting the attribute to display

Now that the connections are complete we must select which attribute of the Card part we want to display in the list. Whenever a list part needs to repaint itself it displays this attribute for every object in the list. For our purposes we will use the fullName attribute of the Card part.

Open the settings for one of the list parts. Enter fullName for the attributeName property. Repeat these same steps for the other list.

Testing the visual part

Save your visual part and then select Test icon to test it. Try flipping the deck, turning it face-up and face-down. Try shuffling the deck while it's face-up. Flip the deck twice. The cards should be in the same order. Select several discontiguous cards from the list. Select Discard selected from the pop-up menu. The cards should be removed from the list and placed in the Discard list.

If you do not get the expected results from these tests, review the methods you implemented in the reusable parts to make sure they are correct. You should review the connections as well.


[ Top of Page | Previous Page | Next Page | Table of Contents | Index ]