Blog

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

Overview

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 (http://www.mysite.com/default/index.cfm/my-app/test.cfm). 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>
Variables
  • #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.

Comments

Marc Ackermann

Hi Matt,

thanks for this very interesting and useful infos. Is there an advantage using this way for integrating an application compared to using the Remote-Connector-Plugin:

http://www.getmura.com/index.cfm/blog/new-remote-connector-plugin/

Especialy are there performance differences?

March 16, 2010, 10:10 PM
Reply
Flag as Spam
David

This seems so cool to me. But not being a strong programmer - a working example would be great to play with to get a better understanding. Any change we could get a zip of something simple?

March 18, 2010, 1:00 AM
Reply
Flag as Spam
Sean Schroeder

@Marc: The Remote Connector Plugin allows you to sync users and data between Mura and your application, no matter where it lives. Integrating it into the context this way

does not allow it to share data without creating data integration points (with something like the Remote Connector plugin).

@David: We show an example in the recently posted archive of Mura Show #11: http://connectpro64802982.acrobat.com/p81964365/

March 18, 2010, 10:13 AM
Reply
Flag as Spam
Hatem Jaber

A couple of questions:

1) Do you have to have an app.cfm file or can you use app.cfc?

2) Do you have to have an app.cfm/cfc file at all or will this work without it?

If I wanted to build a store app that allowed users to shop etc... is this the best way to integrate it?

March 20, 2010, 9:50 AM
Reply
Flag as Spam
Hatem Jaber

I should have tested this out before posting my last comment. This is really nice, the only thing that I would like to know is whether or not this is the best approach for creating custom features like displaying products or whatever.

March 20, 2010, 1:58 PM
Reply
Flag as Spam
Jens-Michael Lehmann

for some reaon it seems to filter out the form scope of my application when I embedd it as suggested above. Anyone got a simmilar experience?

March 23, 2010, 6:06 AM
Reply
Flag as Spam
Brendan

I'm trying to integrate an application using this method, but I'm having a few problems.

Firstly, it seems that this code is not enough to make the application work, I still need to include several other lines of code from the app's original index file.

Secondly, when I do that, the application will load, but it completely ignores Mura, so the navigation bar disappears, as does the CSS for the current Mura theme (the CSS for the original app doesn't load either, it just loads raw text).

What do I need to do to fix this?

September 23, 2010, 1:17 PM
Reply
Flag as Spam
Jocuri cu Printese

Do you have to have an app.cfm/cfc file at all or will this work without it?

If I wanted to build a store app that allowed users to shop etc... is this the best way to integrate it?

I should have tested this out before posting my last comment. This is really nice, the only thing that I would like to know is whether or not this is the best approach for creating custom features like displaying products or whatever.

October 4, 2010, 6:38 AM
Reply
Flag as Spam
Post a Comment

Required Field