This unit is a workshop to discuss how to hook up different content types in the presentation tier - linking from one view to the next by the content's relationships. |
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.
Now for some brainstorming and workshopping ideas of exactly how we're going to present this Super Hero information to the user.
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.
Type webskins do not have a specific database record associated with them; it's effectively a view on the type itself rather than a content item. However, they still have an |
getContentObjects()
There are a couple of dopplegangers for this functionality in core, buried in FourQ and the database gateways. Both are awkward, and offer little more than arguments for the where and order by clauses. All are now deprecated and replaced with getContentObjects() from FarCry 6.0.1. |
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:
cfqueryparam
for all filter valuesThe arguments are:
Property filters are arguments in the form propertyname_comparison=value
. Supported comparisons are:
qLatestNews = application.fapi.getContentObjects(typename="dmNews",lProperties="objectid,title",publishDate_lt=now(),expiryDate_gt=now(),orderBy="publishDate desc") qLockedHTML = application.fapi.getContentObjects(typename="dmHTML",locked_eq=1) qNotActiveUsers = application.fapi.getContentObjects(typename="dmUser",userstatus_in="inactive,pending") |
|
displayname
with "Super Group List"<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" /> |
<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" /> |
You can reference the type skin or list view on the URL with the following convention: |
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.
<!--- @@displayname: Related Content Tag ---> <cfimport taglib="/farcry/core/tags/webskin/" prefix="skin" /> <skin:relatedContent objectid="#stobj.objectid#" filter="superHero" webskin="displayTeaserStandard" renderType="unordered" /> |
You can override a view in your project by creating a view of the exact same name. Reload the application, and the view should be replaced with the template you have created inside your project. For example, displayLabel is a view defined in the core framework for all content types. To override this for a content type called superGroup in you project you would create a template called ./webskin/superGroup/displayLabel.cfm. |
title
and the description
fields<cfsetting enablecfoutputonly="true" /> <cfoutput> <h1>#stobj.title#</h1> #stobj.description# <img src="#application.url.webroot##stobj.imgHeadquarters#" alt="#stobj.title#" class="thumbnailLeft" /> </cfoutput> <cfsetting enablecfoutputonly="false" /> |
<!--- import tag library ---> <cfimport taglib="/farcry/core/tags/webskin/" prefix="skin" /> <cfoutput><h2>The Heroes</h2></cfoutput> <skin:relatedContent objectid="#stobj.objectid#" filter="superHero" webskin="displayLabel" rendertype="unordered" /> |
<cfsetting enablecfoutputonly="true" /> <!--- @@displayname: Mugshot Teaser for superHero ---> <!--- tag libraries ---> <cfimport taglib="/farcry/core/tags/webskin/" prefix="skin"> <skin:buildLink objectID="#stobj.objectid#"> <cfoutput><img src="#application.url.webroot##stobj.imgHero#" class="thumbnailLeft" /></cfoutput> </skin:buildLink> <cfsetting enablecfoutputonly="false" /> |
Based on what was done for Super Groups we want to do something very similar here.
Check the last step of the lab for some hints on building your webskin. |
imgPower
property in an image tag (<img>) and use that webskin on the displayBody view of the superHero:
<cfsetting enablecfoutputonly="true" /> <!--- @@displayname: Power Icon ---> <cfimport taglib="/farcry/core/tags/webskin" prefix="skin" /> <skin:buildLink objectid="#stobj.objectid#"> <cfoutput><img src="#application.url.webroot##stobj.imgPower#" alt="#stobj.title#" title="#stobj.title#" /></cfoutput> </skin:buildLink> <cfsetting enablecfoutputonly="false" /> |
<cfsetting enablecfoutputonly="true"> <!--- @@displayname: Hero Body ---> <cfimport taglib="/farcry/core/tags/webskin" prefix="skin" /> <cfoutput> <h1>#stObj.title#</h1> <div><b>Secret Hideout</b>: #stobj.secretHideout#</div> <div> <b>Super Groups</b>: <skin:relatedContent objectid="#stobj.objectid#" filter="superGroup" webskin="displayLabel" rendertype="none" /> </div> <div class="thumbnailLeft"> <skin:relatedContent objectid="#stobj.objectid#" filter="superPower" webskin="displayTeaserIcon" /> </div> <div class="thumbnailLeft"> <img src="#application.url.webroot##stobj.imgHero#" alt="#stobj.title#" title="#stobj.title#" /> </div> <br class="clear" /> #stobj.biography# <cfif len(stobj.sidekickID)> <h2>Side Kick</h2> <skin:view typename="superHero" objectid="#stobj.sidekickID#" webskin="displayTeaserMugshot" /> </cfif> </cfoutput> <cfsetting enablecfoutputonly="false"> |
<cfsetting enablecfoutputonly="true"> <cfimport taglib="/farcry/core/tags/webskin" prefix="skin" /> <cfoutput> <h1>#stObj.title#</h1> <img src="#application.url.webroot##stobj.imgPower#" alt="#stobj.title#" title="#stobj.title#" class="thumbnailLeft" /> <p>#stobj.description#</p> <h2>Heroes with this Power</h2> <skin:relatedContent objectid="#stobj.objectid#" filter="superHero" webskin="displayTeaserMugshot" /> </cfoutput> <cfsetting enablecfoutputonly="false"> |
Based on what was done to link back to Super Heroes from Powers, try building a similar feature linking Super Heroes to the Groups they might belong to.
skin:pagination
tag; a marvel to beholdskin:breadcrumb
and discuss options for "homing" your content types with nav aliases