Code Stylist is a desktop code-generator for designing Web applications, in this article we will use Code Stylist to make a Micro App that can run inside the OpenMicroBlogger microblogging engine.

Download it from http://codestylist.com

Plug-ins are included with Code Stylist, that makes it easy to create something unique: jQuery/jEditable, HTML_Quickform and Qooxdoo are among the user-interface toolkits available.

Connect to the guest server

Click the [[ Verify Setup]] button. This will give you an empty database with a handful of built-in database tables. Code Stylist may be a little bit slow when using the guest.codestylist.com server, if you look at the Help you can find instructions for connecting to MySQL or PostgreSQL on your workstation.

Make a database table

Find the [[Tools]] menu at the top of your screen, pull down to [[Create Table]].

Set a name for your new database table, the name must be a plural word because each table is a "collection of things".

It should be lower case, and can use underscores "_" between words. e.g. my_photos ... capital_expenditures ... accounts

Use the [[Add Field]] button to add these three new fields to your table:

caption (text)

attachment (oid)

(oid is the PostgreSQL data type for a binary file)

back-end storage can be toggled between 3 modes: db-blob/file-on-disk/Amazon-S3

profile_id (integer)

associates photos with a particular Wall

Your new table will already have id and entry_id fields. The entry_id field associates each database record with the "entries" table. That table keeps track of owner, groups, permissions, content-type and other metadata.

Set permissions on the table.

Select your new table in the left-hand menu, and you will see the Permissions Editor on the right.

Click the green [[ + ]] button to create a new access list rule.

Set the name to "everyone" (everyone includes any visitor to the site)

Click the green [[ + ]] button again to create another rule.

Name this group "members" (members is a group that includes any registered visitor)

Generate templates

Click the [[Create]] button

(choose a table first to skip step 1 in the wizard)

Choose the table that this page will use as a data source.

Select a dynamic template, we will use "new.html" and "index.html" to generate dynamic pages for our App.

The new.html template generates an input form, and index.html makes a list of records.

Mark the checkbox next to each field that should appear on the page:

Drag fields up and down to change the order in which they appear on the page.

If the name of the page is "index.html", a corresponding index() function will be created in /controllers/photos.php, that function is responsible for passing variables to the template.

"Routes" map URLs to records or sets. http://site.com/:resource/:action is a Route, if the URL is http://site.com/photos/index then $request->resource will be 'photos' and $request->action will be 'index'.

The route data will be used to find the best representation using content-negotiation. In this case the file /views/[photos]/[index].html would be used.

The index.html page has now been created, next we will create a 2nd page called new.html -- an input form for uploading new photos.

Click [[Create]] again, and this time choose "new.html".

The URL for this page will be: http://somesite.com/photos/new or http://somesite.com/photos/new.html

Choose a "File Upload" form-control for the attachment field.

Finally, click [[Create]] one last time, and use the "index.html" template to make a public page named profile.html.

In the end, you should have three pages:

• photos/index.html (the private photo-management page)
• photos/new.html (form for adding a photo)
• photos/profile.html (the public page of photos)

Test your App

Find the [[Tools]] menu again, this time choose [[Quick Start]]

Click on Quick Microblog configuration

Set the title of your (test) Microblog, you can skip this.

Add the site's "From" e-mail address, or skip this.

Database settings, you'll need this to work to test your OpenMicroBlogger App. OMB can sit alongside your WordPress install, but it's nice and extra tidy when you create a separate MySQL or PostgreSQL database for it.

This App name will appear in the OpenMicroBlogger admin menu.

Select photos/index.html from the pop-up menu is the list of photos with links to edit/remove/add

photos/profile.html is the list of photos with captions

DONE! OK I admit that was a lot of work, but hey, now you're a Microblog App designer, soon to be a publisher.

The folder you just created now contains a completely configured OpenMicroBlogger, with your App installed.

Put it up for sale

Register and upload your App at OpenAppStore.com

Price your App from $2-5 and take home 80% of revenues by check or to your PayPal account. 10% goes to http://megapump.com which handles credit card sales. Another 10% goes to the hostmaster of the OpenMicroBlogger instance.