Page Comparison

...

1. Build out a full page display for Super Hero using the displayBody view: create a webskin ./webskin/superHero/displayBody.cfm (this will become embedded inside the common displayPageStandard.cfm layout template located in ./webskin/types)
   • Output details of the Super Hero including their mugshot, secret hideout, biography, etc.
   • Using <skin:relatedContent />, list their:
     • Super Groups
     • Super Powers
   • Use a simple <skin:view .. /> call to display their Side Kick (calling their displayTeaserMugShot webskin), if they have one

     Tip
     Check the last step of the lab for some hints on building your webskin.

2. Build out a displayTeaserIcon webskin (./webskin/superPower/displayTeaserStandarddisplayTeaserIcon.cfm) for the Super Power that displays the imgPower property in an image tag (<img>) and use that webskin on the displayBody view of the superHero:

   Code Block
   title ./myproject/webskin/superPower/displayTeaserStandarddisplayTeaserIcon.cfm
   <cfsetting enablecfoutputonly="true" /> <!--- @@displayname: Power Teaser ---> <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#" /><br /></cfoutput> </skin:buildLink> <cfsetting enablecfoutputonly="false" />

3. Your page should look something like:
   
4. Your final code might look something like this:

   Code Block
   title ./myproject/webskin/superHero/displayBody.cfm
   <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">

...