Integrating an Application without a Front-End Controller into Mura CMS


In the past, integrating third-party or existing applications into Mura has always been possible, but only if your application had a front end controller (e.g. written in FuseBox/Model Glue/Mach II/etc). Due to recent changes, it's it is now possible to integrate an existing ColdFusion/CFML application without a front-end controller into Mura CMS.

Note: We walk through an example of this in Mura Show #11.

What It Does

  • Allows an application to run within the context of a Mura site, from a single page
  • Enables a unified user-experience
  • Allows shared session scope with Mura CMS
  • Simplifies template maintenance and management
  • Allows the ability to leverage built-in Mura functionality
  • Provides a foundation for further Mura integration

Integrating the Application

Place the Application Files in the "Custom" Directory

For this example, let's say the application is a single level set of files with simple options that allow users to view a searchable list of resources (list.cfm), add to the list (add.cfm) and subscribe to an RSS feed (rss.cfm). The application might also use a custom tag for pagination as well as CAPTCHA protection on the add form.

Place the application folder into your Mura install [siteID]/includes/ display_objects/custom folder. While your at it, create a brand new blank index.cfm file. This is where you will create the app's new front end controller code.

Edit Application.cfm

Like most apps, the example application might have its own Application.cfm containing any application default settings. Because Mura already has its own Application.cfc, this will fire first and the second Application.cfm file will not fire. To take care of this, first open the application Application.cfm file and completely remove the Coldfusion cfapplication tag. Leave other settings such as the application datasource, etc., intact and save the file.

Note: Because this is a completely separate, possibly pre-existing application, it's assumed that it has its own separate database and datasource.

Next, open the new (blank) index.cfm and include the Application.cfm file into the index.cfm file:

<cfinclude template="Application.cfm">

Add a New Mura Page

In the Mura Admin Site Manager or Front End Toolbar, add a new page for your application (e.g. "My App"). You can now use the mura tag and dspInclude function to include the app's index file into the page you just created by typing the following into the content wysiwyg text area:

[mura ]dspInclude('display_objects/custom/myapp/index.cfm')[ /mura]

Important! Be sure to use single quotes and not double quotes. If you use double quotes they will be escaped into their html entities and the function won't work.

If you view the new page in your browser you won't see anything at this point. While you're there, go ahead and type an arbitrary Coldfusion filename such as "test.cfm" at the end of the url ( Notice how Mura ignores the test.cfm and renders the correct page. This feature comes in handy for creating the new controller.

Create a Front End Controller

In the index.cfm under the Application.cfm include, set a dynamic variable to get any filename from the end of the URL like this:

<cfset request.template=listLast(getPageContext().getRequest().getRequestURI(), "/")>

Putting these dynamic variables into the request scope helps insure the vars are available in the event that your code might be residing inside a function or a custom tag.

You can dump the var at this point if you want to test it:

<cfdump var="#request.template#">

Next create a simple cfswitch to handle the condional logic for pulling in your application list.cfm, add.cfm and rss.cfm application files:

<cfswitch expression="#request.template#"><cfcase value="add.cfm"><cfinclude template="add.cfm"></cfcase><cfcase value="rss.cfm"><cfinclude template="rss.cfm"></cfcase><cfdefaultcase><cfinclude template="list.cfm"></cfdefaultcase></cfswitch>

List.cfm is set as the default case since it's essentially the main application file. When the new page is viewed, by default the Mura page (My App) is including the index.cfm and the index.cfm is including list.cfm

Modify the Application's Links

At this point, you would still need to modify/correct all the links leading back into the application (such as pagination links, form submission links, or links to things like a CAPTCHA cfc) to reflect the app's new location within Mura. You could hard code the new links in, but since you're probably going to need this throughout, putting it into a request scope variable would not only make replacing the links easier, but also (hypothetically) allow you to copy that entire application folder into another SiteID and use it for another client.

Note: Mura has a built in renderer variable called getCurrentURL(), but because this is a custom application and not a Mura content node, a different approach is needed.

Normally in Coldfusion, #cgi.script_name# might be used to get the name of the current CF file/template. Here you would use the dynamic var set earlier #request.template# to get that. To get the entire url to make an absolute link to a file like the rss.cfm, for instance, you might find it useful to set that in a request variable (in the index.cfm above your cfswitch code) as follows:

<cfset request.appURL="http://#cgi.server_name#/#$.event('siteID')#/index.cfm/#$.content('filename')#/">

and then use it to link to the rss.cfm:

<a href="<cfoutput>#request.appURL#</cfoutput>rss.cfm">RSS</a>
  • #cgi.server_name# returns the server hostname, IP address or DNS alias name used in the site URL.
  • #$.event()# returns the current CONTEXT of the page being rendered, in this case the siteID for the page being rendered.
  • #$.content()# returns the current CONTENT of the current executing page, in this case filename of the page.

Once all the application links can find the correct files, the application should be ready to roll.

Look & Feel

You might need to tweak the site.css to fine tune the look and feel. Keep in mind that some styles are also inherited from the default.css found in the [siteID]/css directory.


Post a Comment

Required Field