1. What's in a website? Content!

So you have the developer studio installed in part 1 of this tutorial and you have a runtime project, now holding some themed variant of the "basic website kit". Gentlemen, please start your engines now. And by engines I mean the embedded OpenWGA server. You can do so by again double-clicking the "runtime.xml" in your runtime project and hit the "Start" button in the runtime editor that appears.

Alternatively you may want to use this little thingy in the toolbar:. Clicking on the little arrow on it lists all runtime projects in the workspace and lets you start/stop/restart the embedded server with each one.

After some short time your server should be up and running. We're now going to look at your new website from a new perspective: The perspective of a web content author. Open the runtime editor by double-clicking the "runtime.xml" again. Here you should see your newly created website in the list.

Select it there, then click the link "Content Manager" on the right.

Your browser should come up and load your website, not directly this time but inside the OpenWGA authoring application, called "Content Manager". Might look like this:

What do we see: We see your website right in the middle, just like we know it. We see some panels around it, the most prominent one being the one to the right. It offers us to "Edit Content", meaning the page we currently see on the site.

We're gonna try this, shall we? Just click the "Edit Content" button on the right. Immediately a dialog is coming up, saying that a "draft copy" will be created and offering to change the title of the page we are going to edit.

(Please ignore these typos for now. I'm going to have a word with our label editor...)

So what does "draft copy" mean? It means that the system is going to create a copy of the page which at the moment will be visible just for us, not for your average website user. On this copy we will be able to work with the page contents safely and without compromising the public website. Nobody (except maybe other authors) will see this copy until we are going to "publish" it. On that event it will replace the currently visible version. Until then we also may decide to dump our working copy instead and keep everything as it is.

On clicking "Create draft copy" here you will see the interface altering a litte bit. It will look like this:

What happenend? The available actions in the right panel have changed. You now see an action "Publish content" which you can hit once you are satisfied with your work and it should get public. I will not be going into further detail about the other points here, as this would lead too far now.

Instead have a look at the website. You suddenly see little red and green buttons on it. These are "Edit Icons", marking positions where the page can be edited. As you might assume there is a fundamental difference between the icons of both colors:

• Red edit buttons let you edit the "real content" of the page, i.E. the text that is contained in it or other data embedded to it. Clicking it will open an editor right at the place where the content to edit is displayed on the page (go on, try it!). The right panel will now show controls you would expect from some text processing application, allowing you to format your content. Also it will give you "save" and "cancel" buttons. Have a guess what they do.
  
  
• Green edit buttons let you modify the structure of the page. Pages of the "basic website kit" are built from so called "content management modules", little website parts which are arranged accross the page in a way that suits your needs. They can offer text modules (like the ones you edit by the red edit buttons), images to embed or "containers" to contain and layout yet other modules, to name just some examples.
  

It shows that there are two sections on this page where modules may be arranged: "left" on the left part of the page, where this little Walt Disney quote is shown, and "content" on the center of it, holding the actual text. Both currently contain a single "Richtext" module, offering a text field which is formattable, so this is a pretty basic page. To get an impression about what is possible, select "left" or "content" on the module hierarchy and click on the "Add" button to browse through the array of available modules.

Content modules are great! By using those an author can produce pretty terrific results with little effort. He can have some basic page with just some formatted text like we have here. But he can also create a more complex layout without any coding. Have a look at this page from the openwga.com site for an example:

You can find the full online version of this page here. An author can create these pages just by arranging container and content modules in some hierarchy that matches the order of display. Have a peek at the module configuration of this page. You may be able to identify the seen elements easily in this hierarchy:

Again, we're not going to dive much deeper into this, as this would bring us too far away from what we actually want to do. Just one more thing to clarify: Content modules do NOT make up the complete layout of the page! They are available only to layout those inner "content" parts of the page that are in the responsibility of the author. If they are available, and where, is up to the actual design of the website. We're gonna have a look at that later in the tutorial.