Efficient Coding with CFBuilder 2

byKris Korsmo

EFFICIENT CODING WITH CFBUILDER 2

Familiarize you with the IDE on a basic levelShow you a few of the more advanced featuresShow you some tricks and hidden gems (thanks

Charlie)Discuss diff erent developer workflowsDemonstrate creating a simple application

THE GOALS OF THIS PRESENTATION

Live in Seattle areaBegan coding w/ BASICWashington State UniversityUsing ColdFusion since 2004Adobe Certified CF8Seattle CFUG memberWife and three kids737 Pilot when not coding

ABOUT ME

kriskorsmo.com | [email protected] | @kriskorsmo

This presentation is geared toward Folks with limited experience using an Eclipse-based IDE Beginner to intermediate-level code writers People interested in an effi cient workflow People who want to use best practices

I will make no assumptions If you have questions I’ll do my best to answer as we

go, but I may need to speed along at some point If I don’t know the answer to your question I’ll do my

best to find it. I’d rather be honest in not knowing than give you an answer that’s incorrect

There should be time for more questions at the end

WHO THIS IS FOR


An Eclipse-based IDE Eclipse is an open-source IDE Not only a text editor IDE = Integrated Development Environment – combines a

lot of features all in one to help you write code better, faster and easier (although everyone has different preferences)

Tailored by Adobe specifically for CFCan be installed as standalone or as plugin

WHAT IS COLDFUSION BUILDER 2?


Views show a single aspect of your application – fi les, data, code snippets, etc. - and can be added to any perspective

Perspectives are groups of related views which together help you work effi ciently on one aspect of your application (writing code, debugging, etc.)

VIEWS & PERSPECTIVES


PERSPECTIVES


There are many different perspectives – six in this case – but others are available

COLDFUSION PERSPECTIVE


Extremely useful if you’re just getting started with CFB

You can easily bookmark help topics by right-clicking and selecting “Add Bookmark”

Handy HTML, JavaScript and CSS references

This is where the CF10 documentation lives

HELP VIEW


Shows fi le structureArrows are Forward and Back, not

Up/Down in fi le structure Right click and choose “Go Into” to

navigate fi le structureClick to navigate up fi le structureClick to collapse fi le structureClick to link a fi le to the editor –

keeps the fi le you’re working on in the editor displayed in navigation view.

Click to focus on a task – this is a Mylyn (Tasktop) feature

NAVIGATOR VIEW


Click to open RDS configuration dialog

Click to refresh the selected folderClick to open RDS Query ViewerClick to go to RDS Data HomeClick to go into selected levelClick to go up a level

RDS DATA VIEW


RDS makes it easy to visualize your data and to add it to the code in your editor.

RDS FILE VIEW

Click to open RDS configuration dialog

Click to refresh the selected folderClick to create a new fi le Click to delete a fi leClick to create a new folderClick to delete a folderClick to go to RDS File View HomeClick to go into selected levelClick to go up a level


Allows you to see the files on your remote server

SNIPPETS VIEW


Click to refresh snippets viewClick to insert the selected snippetClick to create a new snippetClick to edit the selected snippetClick to delete the selected snippetClick to create a new packageClick to delete the selected packageYou can use system variables to

automatically populate values such as the current date and fi lename

Allows you to store frequently-used bits of code in an organized fashion.

$${DATE} $${MONTH} $${TIME} $${DATETIME} $${CURRENTFILE} – Current fi le name ( just the fi le) $${CURRENTFOLDER} – Current folder (The path to the containing

folder) $${CURRENTPATH} – Current path (ful l fi le name) $${CURRENTPRJPATH} – Just the folder $${USERNAME} – Current user $${MONTHNUMBER} – Month as a number $${DAYOFMONTH} – Day of month as a number $${DAYOFWEEKNUMBER} – Day of week (the week starts on Sunday) $${DATETIME24} – DateTime24 – a 24 hour clock version of datetime. $${YEAR} – Current year. $${YEAR2DIGIT} – Current two digit year

SNIPPETS SYSTEM VARIABLES


TASKS VIEW


Shows the descript ion of the task, the resource, path & location Double-cl icking the task opens the resource in the editor, and highl ights

the l ine(s) of code that need to be addressed

OUTLINE VIEW


Makes it very easy to fi nd code Most useful when working on CFCs

because it makes it simple to locate functions by name

Clicking a section of code (such as the function shown here) will move the cursor to that function in the editor

You can expand and collapse individual items or use the buttons at the top to expand or collapse all

Clicking the alphabetical sort is very useful because it groups functions by name, essentially eliminating comments

Click to hide private functions

Displays the contents of your log fi les without having to log into the ColdFusion Administrator

TAIL VIEW


SERVICES VIEW


Shows functions, arguments, data type, etc. and allows you to right click to insert cfi nvoke or createObject();

SERVER VIEW


NEW

• Add, stop, start, restart or delete a server• Launch the Server Monitor• Launch the ColdFusion Administrator

STA

RT

RE

STA

RT

DELE

TE

INO

P

GIT REPOSITORIES VIEW


www.eclipse.org/egit/

Doesn’t ship with CFBuilder Not comprehensive Will do what most of us need Not supported by Adobe

• Collapse All• Link to Editor• Add Local Repository• Clone Repo and Add to View• Create New Repository• Refresh View • Link to Selection• Hierarchical Branch Layout• Display Latest Branch

Commit• Branch• Merge

Basic Functionality:

GIT HISTORY


Can be done by navigating to Window > Preferences

CUSTOMIZING CFBUILDER


Type “formatter” in the fi lter text

CODE FORMATTING


You can create a custom CFML dict ionary (XML fi le) and make it avai lable to use for Code Ass ist and Tag wizard within ColdFusion Bui lder.

Within the ColdFusion Bui lder insta l lat ion, navigate to the fo l lowing locat ion: \plugins\com.adobe.ide.coldfusion.dictionary_XXX\dictionary

Create a fo lder cal led "Custom" within the Dict ionary directory. Create an XML fi le to descr ibe the custom tags and funct ions. For example, in the XML fi le, you descr ibe each tag

within <tag></tag> elements, and enclose a l l the tag elements within <dict ionary></dict ionary> elements as fo l lows:

CODE LIBRARIES


<dictionary> <tags>  <tag endtagrequired="false" name="cfoanz" single="true" xmlstyle="false"> <parameter name=“beerRequired" required=“true" type=“Boolean"> <values default="true"> <value option="true"/> <value option="false"/> </values> </parameter> </tag> </tags> </dictionary>

http://eclipsecolorthemes.org/ Manually edit colors and fonts Downloadable themes Create your own theme Plugin is available Requires a lot of work & doesn’t look great Only changes the editor, not the entire IDE

Adobe Source Code Pro font New font designed specifically for coding http://sourceforge.net/projects/sourcecodepro.adobe/ Differentiates similar characters

O vs 0 l vs 1

THEMING & FONTS


Function Shortcut<cfdump> Ctrl + t, d

 Ctrl + t, m

<cfscript> Ctrl + t, s

Wrap in hash marks (##) Ctrl + t, h

<cfoutput> Ctrl + t, o

<cftry> (both try and catch) Ctrl + t, t

Move current line up, down Alt + ↑, Alt + ↓

Find matching tag* Ctrl + Alt + m

Select enclosing tags* Ctrl + Alt + b

Move to next/previous attribute* Ctrl + ], Ctrl + [

Format Code Ctrl + Shift + f

See all shortcuts Ctrl + Shift + l

USEFUL KEYBOARD SHORTCUTS

* Courtesy of Charlie Arehart’s “Hidden Gems in ColdFusion Builder 2” – carehart.org


CFC GeneratorCF WheelsApptacularModel GlueMach IICFLibBuild your own

EXTENSIONS


E-Git http://marketplace.eclipse.org/egit

GitHub Mylyn Connector http://bit.ly/TW43r1

Maven http://bit.ly/TW3tt6

Cloud Bees Jenkins http://bit.ly/P3Wp0w

Android Developer Tools http://developer.android.com/tools/sdk/eclipse-adt.html

Eclipse Marketplace within the IDE Help > Eclipse Marketplace

PLUGINS


CFBuilder Dreamweaver

Sublime IntelliJ

Text Editor Good Good Great Good

Code Completion Great Good Great Good

Debugging Built-in In-browser In-browser In-browser

Database Info Yes Yes No No

Version Control Via Plugin Via Plugin Via Plugin Built-in

Console Yes None Yes Yes

Extensible Yes Yes Yes Yes

Theming / Fonts Fair Poor Great Fair

Documentation Good Good Fair Great

CFBUILDER VS. OTHER EDITORS


DEVELOPER WORKFLOW

Typical Development Process

Best Practices Development Process


Write Code

Test Locally

FTP to Production

Server

Write Code

Commit Frequently

Push to Repository

Chec

ks fo

r Upd

ates

We’ll start with only a databaseGenerate an application using ApptacularUse code snippets to add grid functionalityCommit and push to repositoryRun unit tests

DEMO APPLICATION


QUESTIONS


Thank You!

All CF.Objective(ANZ) attendees will receive a 20% discount on web hosting with Ayera Technologies. Use the Discount code CFOANZ2012 or mention my name in the referral section.

Documents

Efficient Coding with CFBuilder 2