February 22, 2020
Hot Topics:

Painting Web Applications

  • By Sean Kelly
  • Send Email »
  • More Articles »

One of the best features of the Plone Content Management System (CMS) is the fact that you can define content types easily by using the Archetypes schema language. With Archetypes, you list the attributes of a content type and it takes care of all the details of persisting objects to Plone's object database, displaying objects in a web page, and providing edit forms and validation for users to create and update objects. When such objects reflect the entities of a business process, you create a new web application using only the schema language. For more information on working with the Plone Content Management System see the first article in this series The Plone Content Management System

But, you can simplify things one step further by drawing a class diagram instead of using the schema language. You'll have a nearly full-fledged web application—writing zero lines of code.

Using UML

In the dark ages of object-oriented programming, developers could not communicate with each other because they were cursed and all spoke a different language—a different modeling language, that is. But, thanks to the Unified Modeling Language (UML), developers finally got a common diagramming lingua franca that enables them to share object oriented designs. Today, numerous tools let you draw UML diagrams and export those diagrams to code generation systems, metadata repositories, and more.

If you don't yet have a UML drawing tool, go ahead and download version 0.24 of ArgoUML. ArgoUML is free and open source software that works on Windows, Mac OS X, Linux, and a variety of other Java-capable platforms. The screen shots in this article all come from ArgoUML, so even you have another UML tool, you might want to use ArgoUML just to follow along.

You'll need one other tool: ArchGenXML. ArchGenXML is what bridges the UML model with Archetypes. For this article, you'll use version 1.5.2. Go ahead and install it, but keep that tool off to the side for right now. The first thing you need to do is prepare your class diagram. You're about to re-create the DVD catalog application from the last article, but this time by painting it instead of coding it.

Preparing Your Tool

When you first start ArgoUML, you'll be presented with a empty model with two diagrams ready to use: a class diagram and a use case diagram:

Ignore the use case diagram; you won't be using it. For now, click on the name of the model (untitledModel) on the left side and give it a proper name down in the "name" box in the "Properties" section that appears after you click it: DVDCollection.

Next, you'll need to set up definitions for tagged values. Tagged values are annotations you can apply to parts of your model. ArchGenXML looks for annotations that tell it how to generate certain parts of the Archetypes schema and class definitions. If you do a lot of modeling for Archetypes/Plone, you might even find it useful to create an otherwise empty model that has all the possible tagged value definitions already set up—thereby avoiding this tedious step in the future.

To add a new tag definition, make sure your model DVDCollection is selected in the left side, and the "Properties" section is showing at the bottom of the window. Click the "New Tag Definition" button, and then fill in its name. Click the "New Tag Definition" button again to create another one, and fill in its name. Repeat until you've entered tag definitions for all of the following tag names:

  • archetype_name
  • content_icon
  • index
  • multiValued
  • required
  • typeDescription
  • vocabulary
  • widget:description
  • widget:format
  • widget:label
  • widget

Painting Classes

In the last article, you defined—in code—a DVD class that represented a single DVD in your collection. Now, you'll paint that class. Click "Class Diagram 1" in the left-side of the window to make your one (and only) class diagram active. Now, click the "New Class" button in the toolbar:

Click anywhere on the canvas to place your new class. Down in the Properties section of the window, enter the name for the class: DVD. Provide some documentation that tells what the class represents, and then annotate that class with some tagged values.

Click the "Documentation" section. Here, you can fill in class-level details about the author and version number of the class (you can do this for the whole model as well). For now, just fill in a comment in the "Documentation" block, something like "A DVD represents a single DVD video in the collection." This text will appear in the tool-tip help when you finally generate the web application, so watch out for typos!

Next, click on the "Tagged Values" section. You'll now annotate the class using the some of the tag definitions you set up earlier. If you're using ArgoUML, the documentation you just entered has automatically appeared as one of your tagged values. You just need to add three more: content_icon to tell what icon to use on-screen to represent objects of the DVD type, archetype_name to specify the user-friendly name of the type, and typeDescription to provide an on-screen description of the type (similar to way the documentation is used to show a tool-tip for the type, and, in fact, should almost always be the same text).

To add a tagged value, click in the blank area under the "Tag" column. A menu will appear with your tag definitions; click to select one. Then, click to the right of that tag and enter the value as text. The following screen shot shows how the tagged values for the DVD class should be set up:

Page 1 of 3

This article was originally published on April 20, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date