Introducing the “Welcome to Xojo” Bundle!

New to Xojo and looking for guidance? We've put together a terrific bundle to welcome you! Xojo Bundle

This bundle includes six back issues of the magazine -- all of year 21 in printed book and digital formats -- plus a one-year subscription (beginning with 22.1) so you'll be learning all about Xojo for the next year. It's the perfect way to get started programming with Xojo. And you save as much as $35 over the non-bundle price!

This offer is only available for a limited time as supplies are limited, so hurry today and order this special bundle before the offer goes away!

Article Preview

Buy Now

Issue 2.5


From Scratch: Building The TanGram UI

Issue: 2.5 (May/June 2004)
Author: William Leshner
Author Bio: William Leshner has been programming for twenty years and programming Macs for ten. He has spent a good deal of the last several years building REALbasic applications, utilities, and plugins, including KidzMail and SQLitePluginPro.
Article Description: No description available.
Article Length (in bytes): 16,509
Starting Page Number: 40
Article Number: 2520
Resource File(s):

Download Icon 2520.zip Updated: 2013-03-11 19:07:58

Related Web Link(s):


Excerpt of article text...


This is the second of six articles in which we are building a puzzle game called TanGram. As you may recall from the last article, Tangram is a game in which some number of polygonal shapes are dragged around and arranged to make pictures. The finished application will have a number of pre-made puzzles to challenge the player. Also, a player will be able to create and save puzzles to challenge friends and family members. In this article we will build the basic TanGram user interface and we will begin to implement some of that UI. We will see how to make shapes from Object2D objects, how to get those shapes to draw in a Canvas, and how to respond to mouse clicks in order to drag those shapes around in the Canvas. Let's get started.

Laying Out The Interface

The TanGram interface is quite simple; there is one window. Within that window is a large Canvas for dragging shapes around, a small Canvas for displaying puzzles to be solved, and a couple of buttons -- one to show the puzzle solution and one to go to the next puzzle. In order to make things look pretty, I have placed the small puzzle Canvas inside an ImageWell. The larger Canvas will draw a white background and a rectangle around itself in order to distinguish its boundaries. You can see a snapshot of the finished UI in Figure 1.

...End of Excerpt. Please purchase the magazine to read the full article.