LogoLogo
HomeAPIBlog
3.0.0-SNAPSHOT
3.0.0-SNAPSHOT
  • INTRODUCTION
    • Getting Started
      • Running Local Development Servers
      • Beginner Tutorial: Hello World
      • Beginner Tutorial: Hello Database
      • Tutorial: Wheels, AJAX, and You
    • Frameworks and Wheels
    • Requirements
    • Manual Installation
    • Upgrading
    • Screencasts
  • Command Line Tools
    • CLI Commands
    • wheels - commands
    • wheels generate - commands
    • wheels dbmigrate - commands
    • wheels plugins - commands
  • Working with Wheels
    • Conventions
    • Configuration and Defaults
    • Directory Structure
    • Switching Environments
    • Testing Your Application
    • Contributing to Wheels
    • Documenting your Code
  • Handling Requests with Controllers
    • Request Handling
    • Rendering Content
    • Redirecting Users
    • Sending Files
    • Sending Email
    • Responding with Multiple Formats
    • Using the Flash
    • Using Filters
    • Verification
    • Event Handlers
    • Routing
    • URL Rewriting
      • Apache
      • IIS
      • Tomcat
      • Nginx
    • Obfuscating URLs
    • Caching
    • Nesting Controllers
    • CORS Requests
  • Displaying Views to Users
    • Pages
    • Partials
    • Linking Pages
    • Layouts
    • Form Helpers and Showing Errors
    • Displaying Links for Pagination
    • Date, Media, and Text Helpers
    • Creating Custom View Helpers
    • Localization
  • Database Interaction Through Models
    • Object Relational Mapping
    • Creating Records
    • Reading Records
    • Updating Records
    • Deleting Records
    • Column Statistics
    • Dynamic Finders
    • Getting Paginated Data
    • Associations
    • Nested Properties
    • Object Validation
    • Object Callbacks
    • Calculated Properties
    • Transactions
    • Dirty Records
    • Soft Delete
    • Automatic Time Stamps
    • Database Migrations
      • Migrations in Production
    • Using Multiple Data Sources
  • Plugins
    • Installing and Using Plugins
    • Developing Plugins
    • Publishing Plugins
  • Project Documentation
    • Overview
  • External Links
    • Source Code
    • Issue Tracker
    • Sponsor Us
    • Community
Powered by GitBook
LogoLogo
On this page
  • Date Helpers
  • Media Helpers

Was this helpful?

Edit on GitHub
Export as PDF
  1. Displaying Views to Users

Date, Media, and Text Helpers

Wheels includes a plethora of view helpers to help you transform data into a format more easily consumed by your applications' users

PreviousDisplaying Links for PaginationNextCreating Custom View Helpers

Last updated 21 days ago

Was this helpful?

Wheels's included view helper functions can help you out in those tricky little tasks that need to be performed in the front-end of your web applications. Although they are called miscellaneous, they are in fact categorized into 3 categories:

  • Date Helpers

  • Media Helpers

  • Text Helpers

We also have separate chapters about Wheels form helpers in and creating your own helpers in .

Date Helpers

Wheels does a good job at simplifying the not so fun task of date and time transformations.

Let's say that you have a comment section in your application, which shows the title, comment, and date/time of its publication. In the old days, your code would have looked something like this:

<cfoutput query="comments">
    <div class="comment">
        <h2>#comments.title#</h2>

        <p class="timestamp">
            #DateFormat(comments.createdAt, "mmmm d, yyyy")#
            #LCase(TimeFormat(comments.createdAt, "h:mm tt"))#</p>
        <p>#comments.comment#</p>
    </div>
</cfoutput>

That works, but it's pretty tedious. And if you think about it, the date will be formatted in a way that is not that meaningful to the end user.

<cfoutput query="comments">
    <div class="comment">
        <h2>#comments.title#</h2>

        <p class="timestamp">(#timeAgoInWords(comments.createdAt)#)</p>
        <p>#comments.comment#</p>
    </div>
</cfoutput>

With that minimal change, you have a prettier presentation for your end users. And most important of all, it didn't require you to do anything fancy in your code.

Media Helpers

Working with media is also a walk in the park with Wheels. Let's jump into a few quick examples.

Style Sheets

<!--- layout.cfm --->
<cfoutput>
    #styleSheetLinkTag("main")#
</cfoutput>

This will generate the <link> tag for you with everything needed to include the file at public/stylesheets/main.css.

If you need to include more than one style sheet and change the media type to "print" for another, there are arguments for that as well:

#styleSheetLinkTag(sources="main,blog")#
#styleSheetLinkTag(source="printer", media="print")#

Lastly, you can also link to stylesheets at a different domain or subdomain by specifying the full URL:

#styleSheetLinkTag(    source="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/cupertino/jquery-ui.css"
)#

JavaScript Files

#javaScriptIncludeTag("jquery")#

Like with style sheets, you can also specify lists of JavaScript includes as well as full URLs:

#javaScriptIncludeTag("https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js")#

Displaying Images

<cfoutput>
    #imageTag("logo.png")#
</cfoutput>

With this simple call, Wheels will generate the <img> tag for public/images/logo.png and also set the width, height and alt attributes automatically for you (based on image dimensions and the image file name). Wheels will also cache this information for later use in your application.

If you need to override the alt attribute for better accessibility, you can still do that too:

#imageTag(source="logo.png", alt="ColdFusion on Wheels")#

Text Helpers

To illustrate what the text helpers can help you with, let's see a piece of code that includes 2 of the text helpers in a simple search results page.

<!--- Query of search results --->
<cfparam name="searchResults" type="query">

<!--- Search query provided by user --->
<cfparam name="params.q" type="string">

<cfoutput>
    <p>
       #highlight(text="Your search for #params.q#", phrases=params.q)#
       returned #searchResults.RecordCount#
       #pluralize(word="result", count=searchResults.RecordCount)#.
    </p>
</cfoutput>

That code will highlight all occurrences of params.q and will pluralize the word "result" to "results" if the number of records in searchResults is greater than 1. How about them apples? No <cfif> statements, no extra lines, no nothing.

The functions we have shown in this chapter are only the tip of the iceberg when it comes to helper functions. There's plenty more, so don't forget to check out the View Helper Functions API.

Instead of "April 27, 2009 10:10 pm," it may be more helpful to display "a few minutes ago" or "2 hours ago." This can be accomplished with a Wheels date helper called .

First, to include CSS files in your layout, you can use the function:

Including JavaScript files is just as simple with the helper. This time, files are referenced from the public/javascripts folder.

Wheels's helper also provides some simple, yet powerful functionality:

Form Helpers and Showing Errors
Creating Custom View Helpers
timeAgoInWords()
styleSheetLinkTag()
javaScriptIncludeTag()
imageTag()