Alpha Five Blogging EngineA complete blogging engine hosted and

developed entirely within an Alpha Five web server.

By Jeff Cogswelljeffcogs@gmail.com

Looks just like the current Alpha Five blog but uses Alpha Five itself! Note the .a5w extension.

Grid showing single record. Uses free form layout

Text displays full HTML but isn’t editable here since this page is for the people reading the blog.

CSS coded to look like the current blog.

Scroll down to see the AJAX-powered comment mechanism.

Click submit and comment instantly appears without a page refresh, thanks to AJAX.

There’s also a page for viewing the entries. This uses a grid as well. Each record in the grid shows up as a date, clickable title, excerpt, and “read more” link.

This is one record in the table.

To add entries, you log in using the Alpha Five security system.

Once in, you can add and edit the entries, view the blog, or log out.

Editing an entry is easy thanks to the Rich Edit control of Alpha Five, along with some custom JavaScript to add a couple more buttons.

Some custom JavaScript and HTML enhances the functionalityof the Rich Text editor, including a “View Source” for editing the HTML and an “Insert Image”.

Clicking Toggle HTML/Source lets you view and edit the actual HTML source in the Rich Text editor.

Clicking Insert Image lets you select an image URL.

If you view the blog list or entry while logged in, you have an additional toolbar that takes you to the Manage Entries screen or log out.

The toolbar appears on the page for viewing an entry as well – but again, only if you’re logged in. Server-side Xbasic code makes this possible.

A Few Tricks Behind the Scenes

The page for viewing an entry uses three grids – one master, and two linked grids.

The master grid displays a single record.

The first linked grid lists all of the comments for this entry.The second

linked grid is only a form for adding an additional comment.

The only trick required here is updating the comments grid when a new comment is added. This meant saving the grid object into a variable, and then, in the afterGridSubmit function, calling the object’s refresh() method, which uses AJAX to automatically refresh the comments grid, all without leaving or reloading the page.

The entry list page displays either the Excerpt field (if the blogger filled it in) or the first 1000 characters of the Full Text field with the HTML stripped out (if the blogger didn’t provide an excerpt.) Making this work requires some server-side code.

Displaying either the excerpt of a computed excerpt requires some server-side code. The code tests whether the excerpt is present. If not, the code strips out the HTML using Alpha Five Xbasic’s regular expression engine, truncates the string to 1000 characters, and adds an ellipsis.

This, of course, requires using a control type of Custom, and putting the preceding code in the Custom Control Properties definition property.

But in order for the Excerpt custom control property’s function to be able to access the Text field, the Text field had to be present. Including the Text field in the field list but checking “Hide Row” didn’t allow the function to access the field’s data. The simple solution here, then, is to have the text field visible but display nothing.

Making this happen required a custom control as shown in the next slide.

The page for viewing the entry requires that full HTML be displayed. Using a label control doesn’t work because it doesn’t display HTML as it replaces < and > with the entities &lt; and &gt; respectively. Using a Rich Text Editor isn’t appropriate due to the editing nature. The solution is to simply display HTML.

The text is sent to the browser verbatim without being HTMLized. Easy! One simple line of code.

In the page for editing an entry, which pops up the detail grid in its own window, adding a couple buttons above the Rich Edit control required some simple tricks as well.

The Freeform Template property contains the code to make this happen. This is some simple HTML that looks identical to the HTML used in the toolbar. In this case, two “buttons” are added, each calling some custom JavaScript.

<script>function insertTextImage() { var imgurl = prompt('Image URL'); if (imgurl != null) { ENTRYMANAGEGRID_TEXT_RTEObj._rteObj._insertHTML( 'img','',{src:imgurl}) }}

function insertExcerptImage() {var imgurl = prompt('Image URL'); if (imgurl != null) { ENTRYMANAGEGRID_EXCERPT_RTEObj._rteObj._insertHTML( 'img','',{src:imgurl}) }}

</script>

This custom JavaScript for inserting the image is in the a5w page itself and simply calls the Rich Text Editor object’s insertHTML method. There are two such routines, one for the Text field and one for the Excerpt field.

The custom JavaScript for toggling the HTML/source is right in the control’s Custom Layout HTML itself:

<ul class="GlassBlueNavSysTBSH" style="padding-bottom:3px;"> <li class="GlassBlueNavSysTBSHF" style="float:left">

<a class="GlassBlueNavSysTBSHButtonOn" href="#" onclick="ENTRYMANAGEGRID_TEXT_RTEObj.toggleDesignMode()"> Toggle HTML/Source </a> </li> <li class="GlassBlueNavSysTBSHL" style="float:clear"><a class="GlassBlueNavSysTBSHButtonOn" href="#" onclick="insertTextImage()">Insert Image</a> </li></ul>{Text}

Done!

All this comes together for a very simple yet complete and powerful blog engine that runs completely under Alpha Five v10. There are a few other things that could be added, for example:

• A way to upload images directly to the server; this could be integrated right into the “Add Image” button. That way the blogger can reference images stored on the server itself.

• A comment editor list that the blogger, when logged in, can access to edit and remove comments.

• A comment approval mechanism. In this case, comments wouldn’t automatically appear, but would be flagged as needing attention by the blogger.

• A mechanism that lets people commenting receive an email update when new comments are added.

• Additional security so a blogger can only edit entries that he or she created, and can only choose his or her own name in the dropdown list for author name.

• An RSS version that generates RSS. This would be a fascinating test of the grid – display all records, but with no HTML formatting, and with each field carefully coded to display itself in XML format.