Tag Archive: Web Design


I recently updated a Mura CMS site I maintain, by adding a new “portal of portals” section. The main portal listed a series of guest authors that are writing articles for our site. Each author block in the portal list was actually its own portal or article pages. This is all common practice in Mura and in my opinion, one of the areas where it excels at adding content.

All the pages in this section are a two-column, 70/30 layout, with the main content on the left and some author specific information in the right. Both the author article portal list and each article all have the same content on the right, so I made an “authors info” component for that information. This content is a set of the author’s favorite Web sites. To make that content easy for my Editors to maintain, I extended the author’s portal template in the Class Extension Manager, and added new attributes to collect the link information. In my case, I added 10 fields to collect up to 5 links in the form of a Text/URL combination. My attributes are named Link1Text, Link1Url, Link2Text, Link2Url and so on.

So I now have one common “authors info” component in mu Mura admin that I include in the right side of my two column layout. The code view of that component looks like this:

<div class="span-7 last sidebar">
   <img alt="About the Author" src="/xyzsite/assets/Image/sidebars/sidebar_authorsinfo.gif" />

   <p style="font-style: italic;">"Take a look at some of my favorite sites"</p>
   <ul>
	[mura]dspInclude('display_objects/custom/ali/dsp_authorsInfo.cfm')[/mura]
   </ul>

<!--- static content to link users to other author sections --->
   <hr width="50px" />
   <p>See all of our authors pages:</p>
   <ul>
	<li> <a href="/index.cfm/articles/author/Author-A/">Author A</a> </li>
	<li> <a href="/index.cfm/articles/author/Author-B/">Author A</a> </li>
	<li> <a href="/index.cfm/articles/author/Author-C/">Author A</a> </li>
	<li> <a href="/index.cfm/articles/author/Author-D/">Author A</a> </li>
	<li> <a href="/index.cfm/articles/author/Author-E/">Author A</a> </li>
   </ul>
</div>

To pull the links and information into the component, I made a custom Mura display file (a CMF file) that I include in my template. That file started like this:

/xyzsite/includes/display_objects/custom/xyz/dsp_authorsInfo.cfm

<cfloop from="1" to="5" index="x">
   <cfset txt = $.content('Link'&x&'Text')/>
   <cfset lnk = $.content('Link'&x&'Url')/>

   <cfif (len(txt) GT 0) AND (len(lnk) GT 0)>
      <cfoutput>
           <li><a href="#lnk#">#txt#</a></li>
      </cfoutput>
   </cfif>
</cfloop>

In my Extended Attributes I have fields that collect a link and the text to hyperlink for up to 5 links. So here I run a loop from 1 to 5, set my link and text values, and then if both have content I add them as a list item.

When i saved all of this and reloaded an author’s portal page, I saw my links loaded as expected. However, when I opened an actual article written by that author, all I saw at the on the right was “Take a look at some of my favorite sites” then nothing. That is because my extended attributes are part of the main portal page and not the article sub-page. If you look at the code, I am loading Mura’s “content” object. The Mura Programer’s Guide explains that the “…Content scope wraps the CURRENT front end request’s contentBean”. So when I look at the portal page, where the custom link attributes are defined, they are available in the content scope.

So, if I can only get the currently loaded page’s info in the content bean, then how can I get the content from other pages? In my case, the Programmer’s Guide led me to a very simple solution: call the parent object using the getParent() method of the $.content() method. Doing this will return the data from the current’s page’s parent page as a contentBean. With that knowledge I updated my custom display file as so:

/xyzsite/includes/display_objects/custom/xyz/dsp_authorsInfo.cfm

<cfloop from="1" to="5" index="x">
<cfsilent>
   <cfset page = ListLast(cgi.PATH_INFO,'/') />

   <cfif  (page IS 'Author-A')
       OR (page IS 'Author-B')
       OR (page IS 'Author-C')
       OR (page IS 'Author-D')
       OR (page IS 'Author-E')
   >
     <!--- user is on a author portal page where the link values are available --->
     <cfset txt = $.content('Link'&x&'Text')/>
     <cfset lnk = $.content('Link'&x&'Url')/>
   <cfelse>
     <!--- user is on a article page, so grab info from the parent --->
     <cfset parentBn = $.content().getParent() />
     <cfset txt = parentBn.getValue('Link'&x&'Text')/>
     <cfset lnk = parentBn.getValue('Link'&x&'Url')/>
   </cfif>

   <cfif (len(lnk) GT 0) AND (lnk CONTAINS 'mysitedomain.com')>
       <cfset openIn = "_self" />
   <cfelse>
       <cfset openIn = "_blank" />
   </cfif>
</cfsilent>
   <cfif (len(txt) GT 0) AND (len(lnk) GT 0)>
       <cfoutput>
          <li><a href="#lnk#" target="#openIn#">#txt#</a></li>
       </cfoutput>
   </cfif>
</cfloop>

As you can see, at the top I updated my code to determine if the right side component was being loaded on an author’s page, by looking at a CGI var. If so, I set my links the same way I did originally. If not, then I assume the right side component is being loaded on a nested article page, so I first get my parent page’s contentBean, then set my links that way. In addition, I added some code to determine my link’s target value.

This all seems to work well. I would like to dig a little deeper and find out if I can dynamically find out how many attributes my page has. That way I wouldn’t need to hard code the 1 to 5 loop, and could easily add more link pairs in the future.

Adobe Browser Lab logo

Adobe just launched a cool new Flex based product called BrowserLab (formerly meer meer). BrowserLab (http://browserlab.adobe.com) is a Flex application that allows you to load a web page in a variety of popular Web browsers. You can load them in a side by side view, but my favorite is the onion skin mode which overlays one browser version on top of another. Another sweet feature is that this tool is FREE! It only requires you to have an Adobe user account.

Screen shot

I did notice, while on my Mac, that IE 7 WinXP took a lot longer to generate than the others. I assume this is just an early issue that will be addressed soon. There is also an area to load other browser definitions. I haven’t looked into that much, but I hope that means that Adobe will publish some spec on how to load non-standard browser definitions into the application.

This is an amazing tool and I can’t believe it took this long to have this resource available to the mass populous (again for FREE!!). Thank you Adobe! You can also get product updates by following the BrowserLab Twitter page.

PS – I love the logo too! Very clever. I’ll be on the look out for a sticker and/or T-shirt with this one!

Flash and Flex Developers' MagazineIf you’re into developing for Flash, Flex or AIR you have to check out this magazine. The Flash & Flex Developer’s magazine is chocked full of technical articles and tutorials that will get your mind cooking on some new F/F development.

The latest issue has some great stuff inside including an article for developers new to Flex and some really neat tutorials with using Yahoo! Maps in Flex

I have been picking up issues for a bit now, and I have yet to be disappointed. Check it out for yourself at: http://www.ffdmag.com/

Adobe XDNot sure when this was announced, but following a tweet from Rich Tretola (@richtretola), I found Adobe INSPIRE, described as “a publication from the Adobe Experience Design team.” It’s a pretty neat Flex based e-zine deal that talks about all sorts of next step RIA work Adobe is working on.  The topics are similar to the RIA Buzz newsletter that they send out. One article to check out is the on on multitouch interface technology mashed up with Flex. Very cool stuff.

https://xd.adobe.com