Building Flex Degrafa Tic Tac Toe - Part 1

This is the first of a several part tutorial that is going to explain how the Tic Tac Toe application was built using Flex and Degrafa. If you haven't checked out the introduction to the game we are going to build check out the Introduction to Tic Tac Toe using Degrafa and Flex. In this first part I am going to go over how to do some basic drawing using Degrafa and creating the game grid.

Below you can play with the game and check out the board we are going to be creating. Grab a buddy and challenge him to a game of tic tac toe. Then we are going to bust out the code for this. We are going build this from the ground up so there may be little bit of repetition starting off but I promise we will actually get to Degrafa. If you want, you can grab the Tic Tac Toe Source Code to look at the complete code.

First things first, we are going to build few components today, most of which are simply going to be containers that we fill out later. The first component that we are going to build is the main view component, named GameView. This component is based on a Canvas. The start of this component can be seen below - nothing fantastic. The component is being built in com.pfp.tictactoe.views. Each one of those is a folder, of course.

Now we are going to add this component to the main application. This is the only component that is going to be in the main application for now. This gives us a main application that looks like the following:

Ok, we are almost there. We are now going to create two more components. The next component is based on Canvas again. This time we are going to name the component GameBoard, which is going to hold two major pieces: the game grid, which we will build today and the game pieces (this will take care of showing X or O), which we will build in a later part. This again goes in the com.pfp.tictactoe.views package. The start of this component is below; we also update GameView to have this component in it.

Updated GameView.

Well now we can get into the meat of this tutorial. We are going to start building one more component. This one will have all our degrafa drawing code for the grid, hence the name of the component is GameGrid, as seen above in our GameBoard component. Once more we base this off of Canvas. So once more we have the component in the com.pfp.tictactoe.views and the start of the component below.

For nearly all of the drawing done with Degrafa we need to use a Surface. In the surface we can add any drawing commands that we want. There are a few main pieces that are used inside the surface. These include strokes, fills, and geometry paths. Now there are several other items that can be used but we are focusing on the aforementioned. Starting off we simply add the surface to our component canvas.

Running the application should work at this point but will not be very exciting. In order to spice things up a little we need to start adding some code to actually draw something. The first item we are going to add is a GeometryGroup, which holds the pieces of geometry we are going to draw. Additionally, we add four PolyLine components to our geometry group. In each one of these lines we need to add the points of where to draw the lines. Ok let's take a moment and look at the current code.

You will notice above that the data is pairs of numbers, these are the x,y coordinates of the points for the line. It will start at the first point and go to the second. You can use as many points as you would like but I simply wanted to draw four lines. We are still missing one very important item which tells the line what to look like. We can do this by adding a stroke definition to use. This is done by adding a strokes parameter to our Surface tag. The following code shows the strokes parameter that goes into our Surface tag.

Above you can see that I created a LinearGradientStroke which defines a linear gradient. I give it an id so I can use it multiple times, a weight (line thickness), and add two GradientStop tags. Each stop defines a color and a ratio. There are several variables for the stops - check out the documentation for more.

Once we have defined the stroke we want to use we can set a parameter on all of our PolyLine tags to set the stroke. This is done below.

This pretty much takes care of our grid. You can now run your version. You may notice we are missing one tiny item, the drop shadow. This is added inside our GeometryGroup tag. A filters tag is added after the lines, this is defining the filters parameter for the group. And inside we will add a simple DropShadowFilter with some parameters set. Resulting in the final code for our GameGrid below.

Well that wraps up part uno of the Tic Tac Toe series. I hope this helped everyone get a handle on Degrafa somewhat. I know it moved pretty quickly so I would advise anyone who would like to look at a little bit more Degrafa stuff to check out the Degrafa Samples. If anyone has any questions on Degrafa, the Tic Tac Toe application, or Flex in general just leave a comment. Sorry about the syntax highlighting for the Degrafa code, I will have to update our highlighting files to include Degrafa.