Piccolo

Learn
  About Piccolo
  Piccolo Patterns
  Getting Started
     .Java: Out of the Box
     .NET: Out of the Box
     The Interface
     User Interaction
     Special Effects
     Fisheye Calendar
     Graph Editor
  API Documentation
  Piccolo in Comparison
  Publications
  Developer FAQ
  Mailing Lists
Play
Team
Press
Contribute
Applications
Contact Us

Download
Getting Started

Here you will find both basic and advanced tutorials to help you get started using Piccolo.  All tutorials provide examples in both Java and C#.  This section assumes you have read Piccolo Patterns and have a basic understanding of the concepts presented there.

Piccolo.Java: Out of the Box

This tutorial will help you figure out where to begin.  It will guide you from downloading Piccolo to writing and compiling your first zoomable user interface.

1. Get the Pre-Requisites

In order to write your first Piccolo.Java application, you will need to make sure that you have the following:

  • Java 2 Platform, Standard Edition (J2SE)
  • - To run any Piccolo.Java code, you must have the Java 2 Platform  installed on your machine. If you do not have the Java 2 Platform, you should first download the J2SE installer and install the Java 2 Platform.

  • Eclipse IDE
  • - This tutorial assumes that you are using Eclipse as your development environment.  Eclipse is not required to write Piccolo.Java applications, but we do recommend using it. Once you have installed the Java 2 Platform, you can download and install eclipse.

  • Piccolo classes
  • -Of course, you will need Piccolo.Java. You can download the Jar files or the full source code from the download page.

Setting up the Environment

These steps will help you setup the Eclipse environment to begin Piccolo.Java development.

2. Add Piccolo to Eclipse

  1. Open the Eclipse IDE.

  2. Choose File > New Project, and create a new Java project named "piccolo".

  3. Locate the file "Piccolo-1.1.zip," which you downloaded in step 1.  Extract the zipped package using WinZip or another compression utility.

  4. Renamed the extracted "Piccolo-1.1" folder to the name (my choice was "piccolo") of the eclipse project that you created in step a.

  5. Locate the Eclipse workspace folder. This folder is located inside the folder that holds your Eclipse installation.

  6. Drag the renamed "piccolo" folder into the workspace folder, replacing the existing "piccolo" folder in the workspace.

  7. Last of all go into Eclipse and right-click on the "piccolo" project and choose "Refresh" from the popup menu.

  8. Piccolo's classes should now be visible in eclipse.

Building Your First ZUI

These steps will guide you through writing your first zoomable user interface with Piccolo.Java.

4. Create a new Java project in Eclipse.

Here you will create a new Eclipse java project.

  1. In Eclipse choose File > New Project and create another "Java Project". This time name the project "Hello World".

5. Add References to Piccolo

These steps will add references to the Piccolo project so that you can use Piccolo's classes in your own project.

  1. Right click on your new "Hello World" project and choose "Properties".
  2. In the properties panel click on the "Java Build Path" list item on the left.
  3. Now click on the "Projects" tab and choose the "Add..." button. Check to add the "piccolo" project that you created earlier.
  4. Now your "Hello World" project is setup to use classes from the "piccolo" project.

6. Subclass PFrame

Next we will subclass the Piccolo class PFrame.

  1. Select your "Hello World" project and then choose File > New > Class.
  2. Name the new class "HelloWorld".
  3. Choose the Superclass edu.umd.cs.piccolox.PFrame.
  4. Check the box labeled "public static void main(String[] args)" so that a main method will be created for your class.
  5. Click the Finish button to create you new class.

7. Write the Code

Now we will write our first Piccolo code.

  1. At the top of the screen add the following import statement so that we can use the PText class.
    import edu.umd.cs.piccolo.nodes.PText;
    
  2. PFrame will call the "initialize" method when it is created. This is a good place to add our Piccolo nodes, so override this method like this:
    	public void initialize() {	
    		PText text = new PText("Hello World");
    		getCanvas().getLayer().addChild(text);
    	}
    
    Last of all override main method so that a new instance of your "HelloWorld" class gets created by main. The final code should look like this:
    import edu.umd.cs.piccolo.nodes.PText;
    import edu.umd.cs.piccolox.PFrame;
    
    public class HelloWorldExample extends PFrame {
    	
    	public void initialize() {	
    		PText text = new PText("Hello World");
    		getCanvas().getLayer().addChild(text);
    	}
    
    	public static void main(String[] args) {
    		new HelloWorldExample();
    	}
    }
    
    That's it! You've just written your first zooming application. The first line creates a new PText node and initializes it to the string "Hello World". And, the second line adds the new node to the main layer of the canvas.  Zooming and panning are there for free.
8. Run the Code

Now let's see Piccolo in Action

  1. Right-click on your "HelloWorld" class and choose Run As > Java Application
  2. You should see the text "Hello World"
  3. Click anywhere in the window with the left mouse button and drag to pan the camera around.
  4. Click anywhere in the window with the right mouse button and drag to the right to zoom in on the point.  Drag to the left to zoom out.

The reason this works is because the zoom and pan event handlers are installed by default.  See the Defining User Interaction tutorial for more details.