Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to ColdBox MVC at Japan CFUG

21 views

Published on

A presentation on the basics of ColdBox MVC given at the Japan ColdFusion User Group

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Intro to ColdBox MVC at Japan CFUG

  1. 1. IntroductionTo….
  2. 2. WHO AM I? • Luis Majano • Computer Engineer • Born in El Salvador ->Texas • CEO of Ortus Solutions • Adobe Community Professional • ColdFusion (CFML) Advocate • Adobe Advisory Committee • Lucee Language Committee • Sandals -> ESRI -> Ortus @lmajano @ortussolutions
  3. 3. What is MVC Benefits of MVC What is ColdBox How it works Demo
  4. 4. What is MVC? • One of the most common UI design patterns • Separates logic into three tiers or layers • Model • View • Controller • Separation of concerns is KEY • Time to evolve your spaghetti code M C V
  5. 5. What’s the problem? CFMTemplate Queries If statements URL/Form Cleanups CFC calls HTML/JS/CSS Embedded CFC calls Embedded Queries Tags More Queries More CFC calls Includes?Includes Spaghetti Hell
  6. 6. What is the problem? • CFM page for each URL in the application • Pages execute from top to bottom • Typically 100's of lines of code per page • I have seen 1000’s • Mix of business logic and display code • Maybe some code reuse via <cfinclude> or custom tags or basic CFCs CFMTemplate Queries If statements URL/Form Cleanups CFC calls HTML/JS/CSS Embedded CFC calls Embedded Queries Tags More Queries More CFC calls Includes?Includes
  7. 7. Spaghetti Apps
  8. 8. Spaghetti Fun Comments <!—- Do not remove the following lines or things break —> <!— Dont’ know what this variable does, but don’t touch it —-> <!—- Remove at your own risk —-> <!—- I have no idea where this variable is set —>
  9. 9. Downsides • Hard to maintain, especially as application evolves • Hard to distribute work to teams • Code duplication • Violates the D.R.Y. principle • Can't build an API from the business logic • Can't perform automated tests on the business logic • At the end: it costs time -> money!
  10. 10. Benefits of MVC • Separation of Concerns • Same model – different views (GUIs) • Increase Maintainability • IncreaseTestability • Increase Decoupling • Better Abstractions
  11. 11. A FUNDAMENTAL CHANGE IN APPROACH OR UNDERLYING ASSUMPTIONS. PARADIGM SHIFT: MODERNIZE…
  12. 12. WHAT IS COLDBOX • HMVC = Hierarchical MVC • Conventions Based Framework • Non-intrusive • Includes: • Modules • REST • Dependency Injection • Caching • Logging • IntegrationTesting • Addresses most infrastructure concerns when doing web applications
  13. 13. TRUSTED BY INDUSTRY LEADERS Since 2006
  14. 14. MVC CONCEPTS Event
 Handlers (C) Request Context (Form, Url, Request) Layouts 
 & 
 Views (V) Models (M) Config (App,Router) Interceptors (Event 
 Driven Programming)
  15. 15. HOW IT WORKS? • Single page index.cfm (front controller) • Executions via form/url with param called event • Request Context (Simulates Client Request) • form/url » RC • PRC » Private Struct • Handlers Controls what happens next? • Layout/View • Relocation • Data http://localhost/index.cfm?event=users.index http://localhost/users/index Traditional *Routing ColdBox Event: users.index
  16. 16. REQUEST CONTEXT Request Collection (RC) REMOTE URL FORM • FORM/URL/Remote = RC • FORM variables take precedence • Private Request Collection (PRC) = request scope • Abstractions • Best practice to separate what’s client and what’s your app • Live inside the Request Context Object • coldbox.system.web.context.RequestContext • This object lives in the REQUEST scope • Used for REST, Headers, Sending Files, and much more
  17. 17. COLDBOX MVC LAYERS Domain Model Layer
  18. 18. ANATOMY OF A ROUTED URL • Package = A Directory in the handlers folder • Handler = A handler CFC in the handlers folder • Action =The method to execute in the handler, defaults to index • This combination is called a ColdBox Event http: //localhost/{package}/{handler}/{action}?querystring event=package.handler.action Event Route
  19. 19. App Structure handlers layouts models modules views config modules_app Tracked by CommandBox Custom ColdBox.cfc Router.cfc includes css,js,images,etc
  20. 20. HANDLER CODE component name=“users”{ property name=“myService” inject=“MyService”;     function index( event, rc, prc ){         return “Hello from ColdBox Land”;     }     function login( event, rc, prc ){         prc.data = myService.getData();         event.setView( view=“handler/login”, layout=“login” ); }     function list( event, rc, prc ){ var data = getModel( “myService” ).list(); return data; }     function create( event, rc, prc){         var oUser = populateModel( myService.new() );        myService.save( oUser );         relocate( “user.index” );     } } models/MyService.cfc variables.myService Every action has 3 arguments: Request Context + Struct References Handlers can return HTML natively Set a view + layout for rendering Get Models instead of injection Complex data returns as JSON by default Objects can be populated from FORM/URL automatically
  21. 21. MODEL CODE component extends="cborm.models.VirtualEntityService" singleton{     function init(){ super.init( entityName="User" );         return this;     } function list(){ return queryExecute( "select * from users order by lname" );     } array function getTopVisitedContent( numeric max=5 ){         return newCriteria() .list( max = arguments.max, sortOrder = "hits desc", asQuery = false );     } } WireBox Persistence
  22. 22. LAYOUT CODE <cfoutput> #html.doctype()# <body> <div id=“header”>#renderView(‘header’)#</div> <div id=“content”>#renderView()#</div> <div id=“footer”>#renderView(‘footer’)#</div> </body> </cfoutput> HTML Helper object Render NamedViews RenderView set by Handler
  23. 23. RENDERING ENGINE Event, RC, PRC, HTML Footer Header Content Layouts
  24. 24. VIEW CODE <cfoutput> #html.startForm(action=“user.login”)# <h1>Login: #encodeForHTML( rc.name )#</h1> #prc.messages# #html.textfield( name=“username”, label=“Username:”, wrapper=“div” )# #html.passwordField( name=“password”, label=“Password:”, wrapper=“div” )# #html.submitButton(value=“Log In”)# #html.endForm()# </cfoutput> Helper Forms are easier! Access to RC scope Access to PRC scope
  25. 25. DemoTime Let’s build a Contacts API

×