Blog

Mura CMS 7: New Display Object Conventions

May 3, 2016

Display objects have been modified heavily in Mura CMS 7.0. They're easier to manage, and more powerful and extensible than before. Here's a quick guide to what's new (look for full documenation on this coming soon). 

Display objects are now exclusively managed (when editing your site) from the front-end, and are not accessible via the back-end admin any longer.

The reason for this is two-fold: 1) Adding display objects to a page changes the layout of that page, so editing display objects from the back end in a non-visual manner was a matter of "set it, then check to see how it looks", which was a pretty poor workflow, and 2) managing the development of Mura CMS in both paradigms (front-end and back-end) added a lot of overhead and complexity, and reduced our ability to be creative with Mura CMS functionality. 

There's a new directory based format: 

You can register a new display object directory with:

<cfscript>
  $.siteConfig()
.registerDisplayObjectDir(
dir='/siteid/path/to/objects'
);
</cfscript>

Register directories override core display objects: 

/path/to/custom/objects 

/{siteid}/includes/themes/{theme}/display_objects 

/{siteid}/includes/display_objects

You can even only override a single file within a display object.

/path/to/custom/objects/{object_dir}/index.cfm

/{siteid}/includes/themes/{theme}/display_objects/ {object_dir}/config.xml.cfm

/{siteid}/includes/display_objects/{object_dir}/ configurator.cfm

Deprecated Display Objects

  • Feeds
  • Related content
  • Folder specific listing objects 
  • Gallery specific listing objects 
  • Calendar specific listing objects

There are three primary files in a new display object directory:

  • config.xml.cfm
  • configurator.cfm
  • index.cfm

Example config.xml.cfm:

<displayobject
name="Example Display Object"
contentTypes="Page/Blog,Page/Article"
condition="($.content('title')=='example')"
displayObjectFile="index.cfm"
iconClass="mi-bullseye"
/>

The Name Attribute sets the name to be used

<displayobject
name="Example Display Object"
...
/>

The contentTypes Attribute sets what content type the it will be available for use

<displayobject
...
contentTypes="*"
/>

"*" = all content types

The condition Attribute sets an expression to be evaluated for conditional use

<displayobject
...
condition="($.content('title')=='example')"
/>

The displayObjectFile Attribute sets the actual runtime display object file

<displayobject
...
displayObjectFile="index.cfm"
/>

Default= "index.cfm"

The iconClass Attribute allows for the assignment of a custom icon

<displayobject
...
iconClass="mi-bullseye"
/>

Basic config.xml.cfm:

<displayobject
name="Example Display Object"
contentTypes="*"
/>

You can nest custom class extensions and image sizes

<displayobject
name="Example Display Object"
contentTypes="*">
<extensions>...</extensions>
<imagesizes>...</imagesizes>
</displayobject>

Example display object rendering file:

<cfset objectParams.render="server">
<cfset objectParams.async="true">
<cfparam name="objectParams.text" default="">
<cfoutput>
#esapiEncode('html',objectParams.text)#
</cfoutput>

Example configurator.cfm:

<cfparam name="objectParams.text" default="">
<cfset objectParams.render="server">
<cfset objectParams.async="true">
<cf_objectconfigurator>
<cfoutput>
<div class="mura-control-group">
<label class="mura-control-label">Example Display Object</label>
<input type="text" name="text"
class="objectParam span12"
  value="#esapiEncode('html_attr',objectparams.text)#">
</div>
</cfoutput>
</cf_objectconfigurator>

Display objects can be configured to be rendered in the client via js templates

<cfset objectParams.render="client">

Display objects can be configured to not request data from server

<cfset objectParams.async="false">

You can also place a "model" directory in within your display object directory and Mura will automatically register it with the bean factory

/display_object_dir
/model
/entities/widget.cfc
/services/widgetService.cfc
/event_handlers/widgetHandler.cfc

The directory name is the display object key

#$.displayObject(
object='directoryName',
objectParams={...}
)#

You can now register your own custom display object directory

<cfscript>
$.siteConfig()
.registerDisplayObjectDir(
dir='/siteid/custom/path/'
);
</cfscript>

Display look up locations are cached

If you make a change to your display object location you will need to do an application reload

More Mura CMS 7 Info

Please take a few minutes to read the two other blog posts in this series, as they'll give you a quick overview of what's new and how things work: 

Mura CMS 7 Release Candidate Available for Download

Comments

Post a Comment

Required Field