UNIT 07 - Webskins II

Objectives

Building the Presentation Tier

Up until this point we've been dealing with individual content types in isolation, with the exception of library references. What we want to look at now is how to bring these different content types together in the presentation tier for users to effectively interact with them.

Walkthrough: Wireframe Workshop

Now for some brainstorming and workshopping ideas of exactly how we're going to present this Super Hero information to the user.

1. Discuss how the different content types will interact

2. Draw out wireframes for:

   • Super Groups

   • Super Heroes

   • Super Powers

Super Groups

Super Heroes

Super Powers

Type Webskins (aka List Views)

A "type" or "list" webskin is a special type of view that is bound to the content type and not a specific content item. They're often used to list multiple objects of a specific type. For example, the listing of Super Groups in the next walkthrough.

Type webskins should be prefixed with displayType. Any webskin with this prefix will be available to attach to a navigation folder in the site overview tree.

Building Queries with getContentObjects()

Of course you can always write your own SQL statement if you have to, but rather than building a query in your view or writing a specific function for your content type, consider using the mighty getContentObjects() – it's awesome.

application.fapi.getContentObjects() massively improves on older methods by:

• using dynamic arguments for filtering

• handling filters on date columns that can have null values

• automatically filtering results by their status

• using cfqueryparam for all filter values

The arguments are:

• typename (req)

• lProperties (default=objectid)

• status (default=request.mode.lValidStatus)

• orderBy (default=unordered)

• property filters*

Property filters are arguments in the form propertyname_comparison=value. Supported comparisons are:

• eq, neq (equality filters)

• in, notin (list filters)

• like (standard DB like comparison)

• isnull (boolean value to specify whether to return null properties or not)

• gt, gte, lt, lte (standard comparisons, null dates always pass these filters)

Examples getContentObjects() in Action

Walkthrough: List of Super Groups (typewebskin)

1. Create a new webskin in /webskins/superGroup and call it "displayTypeBody"

2. Update the displayname with "Super Group List"

3. Generate a listing of Super Groups, using something similar to the code below:

   ./myproject/webskins/superGroup/displayTypeBody.cfm

   <cfsetting enablecfoutputonly="true" /> <!--- @@displayname: Super Group List ---> <!--- tag libraries ---> <cfimport taglib="/farcry/core/tags/webskin/" prefix="skin" /> <!--- get query of super groups ---> <cfset stlocal.qGroups = application.fapi.getContentObjects(typename="superGroup",orderBy="title") /> <cfoutput><h1>Super Groups</h1></cfoutput> <cfloop query="stlocal.qGroups"> <skin:view typename="superGroup" objectid="#stlocal.qGroups.objectid#" webskin="displayTeaserStandard" /> </cfloop> <cfsetting enablecfoutputonly="false" />

4. Build out a displayTeaserStandard (called from the listing above) for Super Groups to show in this list:

   <cfsetting enablecfoutputonly="true" /> <!--- @@displayname: Super Group Teaser ---> <!--- tag libraries ---> <cfimport taglib="/farcry/core/tags/webskin/" prefix="skin" /> <cfoutput> <div class="featurebox"> <div class="thumbnailLeft"> <skin:buildLink objectid="#stobj.objectid#"> <img src="#application.url.webroot##stobj.imgHeadQuarters#" alt="#stobj.title#" title="#stobj.title#" /> </skin:buildLink> </div> <br class="clear" /> </div> </cfoutput> <cfsetting enablecfoutputonly="false" />

5. Reload the COAPI Metadata

6. Login to the webtop and open the Site overview tree; we're going to hook our type view into the site menu structure

7. Locate the "Hero Hotline" navigation folder, and delete the "Hero Hotline" HTML Page **NOT THE NAVIGATION FOLDER.... THE HTML PAGE **

8. Create a new Include item: right mouse click on the Navigation folder or select Create Include from the right hand menu accordion

9. Fill in the fields for the Include, calling it "Hero Hotline"

10. Under OPTION 1, select the type "Super Group" and the type webskin "Display Type Listing"

11. Preview this page in your site

Related Content

Related content are other content items that are related to the object in question by way of array or UUID properties.

There are many ways of gathering this information. This is simplified by way of the <skin:relatedContent /> tag. Throw it the objectid, the filtering typename and the webskin you want to render on each related object and you're done.

relatedContent tag

Walkthrough: displayBody View (displayBody.cfm) of Super Groups