Flexifields Rails Plugin Published on Github

I have recently published a Ruby on Rails plugin on Github. The requirement came about because I have been doing a lot of work with the Adva CMS rails application (look into the adva system at github). Adva uses engines to modularise the various CMS functional areas. Being a content management system, adva has a data model for Content and a sub-class of this for an Article. Articles or Content have three attributes that can store text each with an implicit label: title, body and excerpt. I needed more explicitly labelled attributes to store extra text for a 'flavor' of Article - take a Recipe as an example of a flavor of Article and let us say that a CMS admin wants to define extra attributes for prep_time, cooking_time and serves_portions so that a CMS editor can supply these extra texts outside of the main body of the recipe in a consistent way. Note that the names of these extra attributes are not known at design time so the data model can't be extended to include these attributes. I decided to write a plugin (well its turned out to be a mini-engine for rails 2.3 because I decided not to require the plugin user to use generators to copy the models and routes into the main rails app) that adds the ability to have extra attributes as a has_one association off of any model. Each flavor is modelled as a Flexifield Definition and each label for a given flavor is modelled as a Flexifield Definition Entry. Using this plugin I can have different flavors of Article that can store up to 16 differently labelled texts per Article record.

http://github.com/guyboertje/has_flexiblefields/tree/master

The next steps will be to look into using it in Adva. In adva the administrative routes/pages all point to files below an admin folder. So adding support for CRUD on the labels (called FlexifieldDefEntries) via the standard Adva admin forms will require a few folder and route changes.

Also, on the adva group and IRC, we debated whether it made more sense to create a separate engine for each flavor of Article - I argued that I was not modelling a Recipe or Car Review entity but an Article entity that is specialised, hence the extra attributes and not a new engine. It could also be argued that these flavors of Article require that certain common (to each flavor) bits of text are removed from needing to be (randomly placed) in the body and are stored separately.

An Adobe Flex Demo

Below is a link to a flex application that I created. Please note, it is a demo, not production ready code. I would welcome comments.

Warranty Submission Demo

You need to drag (or dbl click) something from the upper middle tree before you can drag from the upper right tree. For the final design the contents of the right most tree will change dependent on the product being claimed for.

There are a few very interesting things going on in it.

• Drag and drop - drag from any entry in the top half and drop into the bottom half
  
• Central property editor grid that is a single point of edit, normally a column in a grid has the same item editor down all rows but this component has different editors for each row.
  
• Local storage of edits - your changes are remembered.
• Different tab navigator - actually a skinned radio button bar acting on a single box

There is some basic skinning and embedding of fonts. Although this was a Flex 2.0.1 design originally, I have recompiled it for Flex 3.

Ajax (sort of) File Upload using LiveQuery/jQuery

I was building an Ajax only app, the kind that loads a minimal start page and stuffs empty divs with GET responses that are generated by partials just after the page loads. I needed to upload files.

There are many pages on the net explaining how to achieve this using a hidden iframe. To sum up the page uses a form not an XmlHttpRequest to POST the form and the results are loaded in the iframe which is the target for the POST response.

Most folks will not be that interested in the response. I was because the form created or edited a record and the file upload was a picture - part of the record. I needed to get the response, a 'show' partial of the record with a thumbnail out of the iframe and into a visible div.

There are not that many solutions out there (there is a jQuery forms one). I was using LiveQuery to maintain bound events on dynamic content anyway so I decided to use it again. This is what I came up with.

<script>
  $(document).ready(function(){
...
    $('iframe').livequery('load', function() {
      var ifbodyhtml = $(this).contents().find('body').html()
      if(ifbodyhtml.length > 0) {
        $('#showcontact').html( ifbodyhtml )
      }
      return false
    })
  });
</script>
...
      <div id="showcontact">

      </div>
      <iframe id="uploadtarget" name='uploadtarget' src='about:blank'></iframe>

When the page loads the jQuery $(document).ready() function loads various divs with content, one of which is the form in the 'showcontact' div.

The form has a target attribute of 'uploadtarget', so the LiveQuery is set to trap the load event of the iframe. This runs when the page is loaded and the iframe has no content so I've filtered that out. The response is taken from the iframe and put into the div.

That's it.