EFFICIENT CODING WITH CFBUILDER 2 by Kris Korsmo THE GOALS OF THIS PRESENTATION Familiarize you with the IDE on a basic level Show you a few of the more advanced features Show you some tricks and hidden gems (thanks Charlie) Discuss different developer workflows Demonstrate creating a simple application ABOUT ME Live in Seattle area Began coding w/ BASIC Washington State University Using ColdFusion since 2004 Adobe Certified CF8 Seattle CFUG member Wife and three kids 737 Pilot when not coding kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo WHO THIS IS FOR This presentation is geared toward Folks with limited experience using an Eclipse-based IDE Beginner to intermediate-level code writers People interested in an efficient 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 kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo WHAT IS COLDFUSION BUILDER 2? 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 CF Can be installed as standalone or as plugin kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo VIEWS & PERSPECTIVES Views show a single aspect of your application – files, data, code snippets, etc. - and can be added to any perspective Perspectives are groups of related views which together help you work efficiently on one aspect of your application (writing code, debugging, etc.) kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo PERSPECTIVES There are many different perspectives – six in this case – but others are available kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo COLDFUSION PERSPECTIVE kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo HELP VIEW 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 CF 10 documentation lives kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo NAVIGATOR VIEW Shows file structure Arrows are Forward and Back, not Up/Down in file structure Right click and choose “Go Into” to navigate file structure Click to navigate up file structure Click to collapse file structure Click to link a file to the editor – keeps the file you’re working on in the editor displayed in navigation view. Click to focus on a task – this is a Mylyn (Tasktop) feature kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo RDS DATA VIEW RDS makes it easy to visualize your data and to add it to the code in your editor. Click Click Click Click Click Click to to to to to to open RDS configuration dialog refresh the selected folder open RDS Query Viewer go to RDS Data Home go into selected level go up a level kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo RDS FILE VIEW Allows you to see the files on your remote server Click Click Click Click Click Click Click Click Click to to to to to to to to to open RDS configuration dialog refresh the selected folder create a new file delete a file create a new folder delete a folder go to RDS File View Home go into selected level go up a level kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo SNIPPETS VIEW Allows you to store frequently-used bits of code in an organized fashion. Click to refresh snippets view Click to insert the selected snippet Click to create a new snippet Click to edit the selected snippet Click to delete the selected snippet Click to create a new package Click to delete the selected package You can use system variables to automatically populate values such as the current date and filename kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo SNIPPETS SYSTEM VARIABLES $${DATE} $ $ { M ON T H } $${TIME} $${DATETIME} $ $ { C UR R E N T FI L E } – C u r r e n t f i l e n a m e (j u s t t h e f i l e ) $ $ { C UR R E N T F OL D E R } – C u r r e n t f o l d e r (T h e p a t h t o t h e c o nt a i ni ng f o l d e r ) $ $ { C UR R E N T PA T H } – C u r r e n t p a t h (f u l l f i l e n a m e ) $ $ { C UR R E N T PR JPA T H } – J u s t t h e f o l d e r $ $ { US E R N A ME } – C u r r e n t u s e r $ $ { M ON T H N UM BE R } – M o n t h a s a n u m b e r $ $ { D A YO FM O N T H } – D a y o f m o n t h a s a n u m b e r $ $ { D A YO F WE E KN UM BE R } – D a y o f w e e k (t h e w e e k s t a r t s o n S u n d a y ) $ $ { D A T E T I M E 2 4 } – D a t e T i m e 2 4 – a 2 4 h o u r c l oc k v e r si o n o f d a t e t i m e . $ $ { YE A R } – C u r r e n t y e a r . $ $ { YE A R 2 DI G I T } – C u r r e n t t w o d i g i t y e a r kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo TASKS VIEW S h o w s t h e d e s c ri p ti o n o f t h e t a s k , t h e r e s o u rc e , p a t h & l o ca ti o n D o ub l e - cl i cki ng t h e t a s k o p e n s t h e r e s o ur c e i n t h e e d i to r , a n d h i g hl ig ht s t h e l i ne (s ) o f c o d e t h a t n e e d t o b e a d d r e s s e d kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo OUTLINE VIEW Makes it very easy to find 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 kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo TAIL VIEW Displays the contents of your log files without having to log into the ColdFusion Administrator kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo SERVICES VIEW Shows functions, arguments, data type, etc. and allows you to right click to insert cfinvoke or createObject(); kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo SERVER VIEW • Add, stop, start, restart or delete a server • Launch the Server Monitor • Launch the ColdFusion Administrator INOP DELETE RESTART START NEW kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo GIT REPOSITORIES VIEW Basic Functionality: www.eclipse.org/egit/ • • • • • • • • • • • 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 Doesn’t ship with CFBuilder Not comprehensive Will do what most of us need Not supported by Adobe kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo GIT HISTORY kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo CUSTOMIZING CFBUILDER Can be done by navigating to Window > Preferences kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo CODE FORMATTING Type “formatter” in the filter text kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo CODE LIBRARIES Y o u c a n c r e a t e a c u s t o m C F M L d i c t i o n a r y (X M L f i l e ) a n d m a k e i t a v a i l a b l e t o u s e f o r C o d e A s s i s t a n d Ta g wi z a r d wi t h i n C o l d F u s i o n B u i l d e r . Wi t h i n t h e C o l d F u s i o n B u i l d e r i n s t a l l a t i o n , n a v i g a t e t o t h e f o l l o wi n g l o c a t i o n : \plugins\com.adobe.ide.coldfusion.dictionary_ XXX\dictionary C r e a t e a f o l d e r c a l l e d " C u s t o m " wi t h i n t h e D i c t i o n a r y d i r e c t o r y . Create an XML file to describe the custom tags and functions . For example, in the XML file, you describe each tag wi t h i n < t a g > < / t a g > e l e m e n t s , a n d e n c l o s e a l l t h e t a g e l e m e n t s wi t h i n < d i c t i o n a r y > < / d i c t i o n a r y > e l e m e n t s a s f o l l o ws : <dictionary> <tags> <!-- cfoanz beerRequired= “Boolean" --> <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> kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo THEMING & FONTS 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 kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo USEFUL KEYBOARD SHORTCUTS Function Shortcut <cfdump> Ctrl + t, d <!--- comment ---> 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 * Courtesy of Charlie Arehart’s “Hidden Gems in ColdFusion Builder 2” – carehart.org kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo EXTENSIONS CFC Generator CF Wheels Apptacular Model Glue Mach II CFLib Build your own kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo PLUGINS 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 kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo CFBUILDER VS. OTHER EDITORS 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 kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo DEVELOPER WORKFLOW Typical Development Process Write Code Test Locally FTP to Production Server Best Practices Development Process Write Code Unit Testing Commit Frequently Selenium Push to Repository Push to Production Server kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo DEMO APPLICATION We’ll start with only a database Generate an application using Apptacular Use code snippets to add grid functionality Commit and push to repository Run unit tests kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo QUESTIONS 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. kriskorsmo.com | kriskorsmo@gmail.com | @kriskorsmo