Introducting the LifeFlow Editor

February 3, 2008. Filed under lifeflow 20

Okay, so I have just gotten finished writing about 80% of the functionality of the new LifeFlow Editor, and damn I am excited about it. In fact, I am using it to write this article right now.

What is the LifeFlow Editor?

The LFE will grow to be a LifeFlow specific replacement for the Django Admin. Its immediate goal is to replace all common blog writing tasks, and to handle a blog specific work flow. A big part of that workflow is full support for non-published drafts.

Anyway, lets take a guided tour of the LFE, then take a look at what else is intended for it in the near future.

Buckets Upon Buckets of Writing

A screenshot of the overview screen for LifeFlow Editor

That is the overview screen for the LFE. This implements the simple workflow I find myself using when writing blog entries. You begin by clicking the new button. You then edit the blog, give a title, etc. Eventually you'll keep editing that entry for a while, and you'll get it to somewhere you are pretty comfortable with. Then you'll select it in the Rough bucket, and click on the ">>" button to advance it to the Edited bucket.

It will sit there, perfectly content, until you advance it again to the Published bucket. When you advance it to the published bucket it will immediately be published on the blog itself. If thats a mistake, you can always retreat it (the "<<" buttons) from the Published bucket to the Edited or Rough buckets.

The magic there is that there are two models in use. There is the Draft model, which has no required fields. This lets you put the draft together at your own pace, filling in pieces as you go. However, when you attempt to advance something from the Edit bucket to the Published bucket, LifeFlow attempts to convert the draft into an instance of the Entry model. Since the Entry model does have some required fields, the LF Editor will flash an Ajax error message at you telling that the draft hasn't satisfied all the requirements for becoming an Entry (at the moment the error message is quite vague, but it'll be easy enough to get it to give valuable feedback, and that is high on the priority list).

Well, you might wonder, what happens when you retreat something from the Published bucket? Well, you dissolve the instance of the Entry model and convert it to an instance of the Draft model. So there is a seamless two-way portal between the Entry and Draft models.

(Although not implemented, part of the idea behind the different buckets is to have multiple levels of users, for example authors, and editors, and website-managers. The authors could credit and edit drafts, the editors could advance drafts to the edited bucket and edit them, and the website-managers could advance them to the published bucket. This is how I envision a group blog might operate.)

Writing a Summary

A screenshot of the title & summary screen for LifeFlow Editor

This is the first screen of the entry editing portion of LFE. Here you type in your title and a summary of the article. You may notice that there are not any save buttons. Ack! Panic!

Well, actually, this is not something to panic about. LFE is smarter about saving and updating data than the Django admin is, so you don't have to explicitly tell it to save. For example when you leave the textarea that the summary is written in, then it will automatically save. When you leave the input that contains the title, it will automatically save then too.

In the other editing areas the LFE behaves this way as well. For example after selecting tags, once you leave the div that contains all the tags it will save. When you leave the textarea for writing the body of the entry, then it will save as well.

At the moment it could be a little bit more reliable in saving when you do silly things (like click into a textarea, move the mouse away, and then start typing). But as long as you leave the mouse in the area you are currently editing it will always work. In practice you probably won't ever have to think about this, but its something I will make more reliable in the future.

Selecting Tags for An Entry

A screenshot of selecting tags for LFE

This is a screenshot of how you select tags in LFE. You just click on the tags you want, and then turn orange. Then you just move the mouse of the area to save. Easy as pie.

Doing the Writing Thing

The biggest part of writing a blog entry is... writing the blog entry, so I wanted to make that part of the process as pleasant as possible.

Screenshot of using the rendering functionality

When writing an entry you can render it at any time (it intelligently uses the value of the use_markdown field for the model, which you can change using the dropdown menu at the top of the page). The rendering appears below the writing text area, and you can hide it using the Hide Rendering button.

Screenshot of using images in LFE

Another big part of writing blog entries is incorporating files into them. LFE helps facilitate that with this nifty file display widget (thus finalizing the anticipated death of meaning associated with the term widget). It displays the markdown_id for each resource (with is used along with Dynamic Blog Context to insert files into entries), and if the file is an image (based on the file extension) it will display a small version of the image to assist with using the correct images.

Although not implemented yet, I intend to make it intelligently assist with other filetypes as well. Like displaying a highlighted copy of code files, or showing a list of files contained within a zip.

![Screenshot of uploading a file in LFE][f lfe_uploading_for_real]

Uploading files is pretty easy in LFE as well. Unfortunately you can't upload files using Ajax, so you have to actually reload the page, but in practice its not bad at all, especially since images are usually uploaded in batches anyway (something which I would like to add better support for).

Upcoming Functionality

  1. Ability to create tags, flows, and series within the LFE. Implemented.
  2. Ability to delete rough drafts (so you'd have to demote things to a rough draft before deleting them, seems reasonable precaution). Implemented.
  3. More informative error messages. Implemented.
  4. Support for selecting authors (will be easy to implement, just forgot to do it...).
  5. Managing associated comments.
  6. Setting the datetime for the entry's time to publish (not that hard, I just didn't get it done quite yet).
  7. Putting the rendered text into an iframe with the CSS from the actual blog included in it.
  8. Extra support for uploaded files that are code/zip files.
  9. Oh, yeah, you can't actually login using the LFE yet, or logout, I just use the Django admin to login and them hop over to it at the moment. The logout button is just a span... yeah. This will come sooner than later.

Anything else?


Anyway, like I mentioned I used the LFE to write this post (although I had to sneak into the Django Admin to add me as an author, since I forgot to implement that yet), so its usable. Clearly its lacking some important functionality at the moment, but its actually a pretty decent tool, especially for the rendering and file management aspects. But be wary of it, because its very much still under construction, and may contain some errors since it hasn't been in usage long. Specifically it has some difficulties with converting between Draft and Entry models, which I'll take a look at tomorrow.

Look for a lot of improvements in the near future! Also, let me know what you think about it, and what you think it needs to be a valuable tool.