{"id":1133,"date":"2014-02-25T11:56:39","date_gmt":"2014-02-25T06:26:39","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1133"},"modified":"2014-02-25T11:56:39","modified_gmt":"2014-02-25T06:26:39","slug":"creating-database-mobile-application-with-coldfusion-splendor","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/creating-database-mobile-application-with-coldfusion-splendor\/","title":{"rendered":"Creating database mobile application with ColdFusion Splendor"},"content":{"rendered":"<p>In my previous post,\u00a0<a title=\"Simplify Mobile Application Development Using ColdFusion\" href=\"http:\/\/ramkulkarni.com\/blog\/simplify-mobile-application-development-using-coldfusion\/\" target=\"_blank\">Simplify Mobile Application Development Using ColdFusion<\/a>, I posted a video that showed how easy it is to create mobile application with CFMobile features of ColdFusion Splendor (Server) and ColdFusion Thunder (IDE). In that video I created a simple app called &#8216;Simple Expense Tracker&#8217;. But the code was not optimal, because the main purpose of the video was to show you features of CFMoible. I also mentioned that I will post a better example of the same app.<\/p>\n<p>So In this post I will show you how to create a database application, where user interface code is\u00a0separated\u00a0from the data access code. I will also use JQuery for DOM access and Bootstrap for UI.<!--more--><\/p>\n<p>The application is called &#8216;Expense Tracker&#8217;. Here are a couple of screenshots of the application &#8211;<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1135\" data-permalink=\"http:\/\/ramkulkarni.com\/blog\/creating-database-mobile-application-with-coldfusion-splendor\/2014_02_24_image1\/\" data-orig-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1.png?fit=320%2C480\" data-orig-size=\"320,480\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Expense Tracker Example\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1.png?fit=200%2C300\" data-large-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1.png?fit=320%2C480\" class=\"alignnone size-medium wp-image-1135\" style=\"border: 1px solid black;\" alt=\"Expense Tracker Example\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1-200x300.png?resize=200%2C300\" width=\"200\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1.png?resize=200%2C300 200w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image1.png?w=320 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" data-recalc-dims=\"1\" \/><\/a><a href=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1136\" data-permalink=\"http:\/\/ramkulkarni.com\/blog\/creating-database-mobile-application-with-coldfusion-splendor\/2014_02_24_image2\/\" data-orig-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2.png?fit=320%2C480\" data-orig-size=\"320,480\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Add Expense Dlg\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2.png?fit=200%2C300\" data-large-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2.png?fit=320%2C480\" class=\"size-medium wp-image-1136 alignleft\" alt=\"Add Expense Dlg\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2-200x300.png?resize=200%2C300\" width=\"200\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2.png?resize=200%2C300 200w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/02\/2014_02_24_image2.png?w=320 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" data-recalc-dims=\"1\" \/><\/a><\/p>\n<p>This application uses following features of CFMobile. Though tags and code may look familiar to CFML developers, notes that all the features work on the client side and once packaged, CF server does not come into play (because CFML is translated to JavaScript code).<\/p>\n<ul>\n<li>Easy data access using cfquery\/queryExecute<\/li>\n<li>Client side OOP using cfcomponent<\/li>\n<li>CFML Custom tags<\/li>\n<li>Error handling using try-catch<\/li>\n<li>Interoperability between cfclient code and JavaScript<\/li>\n<\/ul>\n<p>Let&#8217;s see the main page, index.cfm &#8211;<br \/>\n<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<table>\n<tbody>\n<tr>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\">  1\n  2\n  3\n  4\n  5\n  6\n  7\n  8\n  9\n 10\n 11\n 12\n 13\n 14\n 15\n 16\n 17\n 18\n 19\n 20\n 21\n 22\n 23\n 24\n 25\n 26\n 27\n 28\n 29\n 30\n 31\n 32\n 33\n 34\n 35\n 36\n 37\n 38\n 39\n 40\n 41\n 42\n 43\n 44\n 45\n 46\n 47\n 48\n 49\n 50\n 51\n 52\n 53\n 54\n 55\n 56\n 57\n 58\n 59\n 60\n 61\n 62\n 63\n 64\n 65\n 66\n 67\n 68\n 69\n 70\n 71\n 72\n 73\n 74\n 75\n 76\n 77\n 78\n 79\n 80\n 81\n 82\n 83\n 84\n 85\n 86\n 87\n 88\n 89\n 90\n 91\n 92\n 93\n 94\n 95\n 96\n 97\n 98\n 99\n100\n101\n102\n103\n104\n105\n106\n107\n108\n109\n110\n111\n112\n113\n114\n115\n116\n117\n118\n119\n120\n121\n122\n123\n124\n125\n126\n127\n128\n129\n130\n131\n132\n133\n134\n135\n136\n137\n138\n139\n140<\/pre>\n<\/td>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #bc7a00;\">&lt;!DOCTYPE html&gt;<\/span>\n<span style=\"color: #008000; font-weight: bold;\">&lt;html&gt;<\/span>\n\t<span style=\"color: #008000; font-weight: bold;\">&lt;head&gt;<\/span>\n\t    <span style=\"color: #008000; font-weight: bold;\">&lt;meta<\/span> <span style=\"color: #7d9029;\">name=<\/span><span style=\"color: #ba2121;\">\"viewport\"<\/span> <span style=\"color: #7d9029;\">content=<\/span><span style=\"color: #ba2121;\">\"width=device-width, initial-scale=1.0\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t    <span style=\"color: #008000; font-weight: bold;\">&lt;link<\/span> <span style=\"color: #7d9029;\">href=<\/span><span style=\"color: #ba2121;\">\"css\/bootstrap.min.css\"<\/span> <span style=\"color: #7d9029;\">rel=<\/span><span style=\"color: #ba2121;\">\"stylesheet\"<\/span> <span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/link&gt;<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;script <\/span><span style=\"color: #7d9029;\">src=<\/span><span style=\"color: #ba2121;\">\"js\/jquery-2.0.3.min.js\"<\/span> <span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/script&gt;<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;script <\/span><span style=\"color: #7d9029;\">src=<\/span><span style=\"color: #ba2121;\">\"js\/bootstrap.min.js\"<\/span> <span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/script&gt;<\/span>\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;script <\/span><span style=\"color: #7d9029;\">src=<\/span><span style=\"color: #ba2121;\">\"js\/app.js\"<\/span> <span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/script&gt;<\/span>\n\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/head&gt;<\/span>\n\n\t<span style=\"color: #008000; font-weight: bold;\">&lt;body<\/span> <span style=\"color: #7d9029;\">style=<\/span><span style=\"color: #ba2121;\">\"margin-left:5px;margin-right:5px\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;nav<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"navbar navbar-default navbar-static-top\"<\/span> <span style=\"color: #7d9029;\">role=<\/span><span style=\"color: #ba2121;\">\"navigation\"<\/span> <span style=\"color: #7d9029;\">style=<\/span><span style=\"color: #ba2121;\">\"vertical-align:central\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;h4<\/span> <span style=\"color: #7d9029;\">style=<\/span><span style=\"color: #ba2121;\">\"float:left\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>Expense Tracker<span style=\"color: #008000; font-weight: bold;\">&lt;\/h4&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;button<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"button\"<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"btn btn-default navbar-btn\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"deleteAllBtn\"<\/span> <span style=\"color: #7d9029;\">style=<\/span><span style=\"color: #ba2121;\">\"float:right\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>Delete All<span style=\"color: #008000; font-weight: bold;\">&lt;\/button&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;button<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"button\"<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"btn btn-default navbar-btn\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"addBtn\"<\/span> <span style=\"color: #7d9029;\">style=<\/span><span style=\"color: #ba2121;\">\"float:right\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>Add<span style=\"color: #008000; font-weight: bold;\">&lt;\/button&gt;<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/nav&gt;<\/span>\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"expenseListDiv\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span>\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal fade\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"addDlg\"<\/span> <span style=\"color: #7d9029;\">tabindex=<\/span><span style=\"color: #ba2121;\">\"-1\"<\/span> <span style=\"color: #7d9029;\">role=<\/span><span style=\"color: #ba2121;\">\"dialog\"<\/span> <span style=\"color: #7d9029;\">aria-hidden=<\/span><span style=\"color: #ba2121;\">\"true\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal-dialog\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t    \t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal-content\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t      \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal-header\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t        \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;button<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"button\"<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"close\"<\/span> <span style=\"color: #7d9029;\">data-dismiss=<\/span><span style=\"color: #ba2121;\">\"modal\"<\/span> <span style=\"color: #7d9029;\">aria-hidden=<\/span><span style=\"color: #ba2121;\">\"true\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span><span style=\"color: #999999; font-weight: bold;\">&amp;times;<\/span><span style=\"color: #008000; font-weight: bold;\">&lt;\/button&gt;<\/span>\n\t\t        \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;h4<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal-title\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>Add Expense<span style=\"color: #008000; font-weight: bold;\">&lt;\/h4&gt;<\/span>\n\t\t      \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span>\n\t\t      \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal-body\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t      \t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;table<\/span> <span style=\"color: #7d9029;\">width=<\/span><span style=\"color: #ba2121;\">\"100%\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t      \t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;tr&gt;<\/span>\n\t\t      \t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;<\/span>Date:<span style=\"color: #008000; font-weight: bold;\">&lt;\/td&gt;<\/span>\n\t\t      \t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;&lt;input<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"date\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"dateTxt\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/td&gt;<\/span>\n\t\t      \t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/tr&gt;<\/span>\n\t\t      \t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;tr&gt;<\/span>\n\t\t      \t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;<\/span>Amount:<span style=\"color: #008000; font-weight: bold;\">&lt;\/td&gt;<\/span>\n\t\t      \t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;&lt;input<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"text\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"amtTxt\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/td&gt;<\/span>\n\t\t      \t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/tr&gt;<\/span>\n\t\t      \t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;tr&gt;<\/span>\n\t\t      \t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;<\/span>Desc:<span style=\"color: #008000; font-weight: bold;\">&lt;\/td&gt;<\/span>\n\t\t      \t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;&lt;input<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"text\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"descTxt\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;&lt;\/td&gt;<\/span>\n\t\t      \t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/tr&gt;<\/span>\n\t\t      \t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/table&gt;<\/span>\n\t\t      \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span>\n\t\t      \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;div<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"modal-footer\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t        \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;button<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"button\"<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"btn btn-default\"<\/span> <span style=\"color: #7d9029;\">data-dismiss=<\/span><span style=\"color: #ba2121;\">\"modal\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>Cancel<span style=\"color: #008000; font-weight: bold;\">&lt;\/button&gt;<\/span>\n\t\t        \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;button<\/span> <span style=\"color: #7d9029;\">type=<\/span><span style=\"color: #ba2121;\">\"button\"<\/span> <span style=\"color: #7d9029;\">class=<\/span><span style=\"color: #ba2121;\">\"btn btn-primary\"<\/span> <span style=\"color: #7d9029;\">id=<\/span><span style=\"color: #ba2121;\">\"saveBtn\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>Save<span style=\"color: #008000; font-weight: bold;\">&lt;\/button&gt;<\/span>\n\t\t      \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span>\n\t\t   \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span>\n\t\t  \t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span><span style=\"color: #408080; font-style: italic;\">&lt;!-- \/.modal-dialog --&gt;<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/div&gt;<\/span>\n\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/body&gt;<\/span>\n<span style=\"color: #008000; font-weight: bold;\">&lt;\/html&gt;<\/span>\n\n<span style=\"color: #008000; font-weight: bold;\">&lt;cfclient&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;cftry&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">expMgr<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">new<\/span> <span style=\"color: #0000ff;\">cfc.ExpenseManager<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">expenses<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">expMgr.getExpenses<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfcatch<\/span> <span style=\"color: #19177c;\">type<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"any\"<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"e\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">alert<\/span>(<span style=\"color: #19177c;\">e.message<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfcatch&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cftry&gt;<\/span>\n\n\t <span style=\"color: #008000; font-weight: bold;\">&lt;cf<\/span><span style=\"color: #7d9029;\">_expenseList<\/span> <span style=\"color: #7d9029;\">parentDiv=<\/span><span style=\"color: #ba2121;\">\"expenseListDiv\"<\/span> <span style=\"color: #7d9029;\">expenses=<\/span><span style=\"color: #ba2121;\">#expenses#<\/span> <span style=\"color: #7d9029;\">action=<\/span><span style=\"color: #ba2121;\">\"displayAll\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"displayAddExpenseDlg\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##addDlg\"<\/span>).<span style=\"color: #0000ff;\">modal<\/span>() <span style=\"color: #008000;\">&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"saveExpense\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfscript&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">dateStr<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">trim<\/span>(<span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##dateTxt\"<\/span>).<span style=\"color: #0000ff;\">val<\/span>());\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">amtStr<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">trim<\/span>(<span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##amtTxt\"<\/span>).<span style=\"color: #0000ff;\">val<\/span>());\n\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #19177c;\">dateStr<\/span> <span style=\"color: #666666;\">==<\/span> <span style=\"color: #ba2121;\">\"\"<\/span> <span style=\"color: #666666;\">||<\/span> <span style=\"color: #19177c;\">amtStr<\/span> <span style=\"color: #666666;\">==<\/span> <span style=\"color: #ba2121;\">\"\"<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0000ff;\">alert<\/span>(<span style=\"color: #ba2121;\">\"Date and amount are required\"<\/span>);\n\t\t\t\t<span style=\"color: #19177c;\">return<\/span>;\n\t\t\t}\n\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #666666;\">!<\/span><span style=\"color: #0000ff;\">isNumeric<\/span>(<span style=\"color: #19177c;\">amtStr<\/span>))\n\t\t\t{\n\t\t\t\t<span style=\"color: #0000ff;\">alert<\/span>(<span style=\"color: #ba2121;\">\"Invalid amount\"<\/span>);\n\t\t\t\t<span style=\"color: #19177c;\">return<\/span>;\n\t\t\t}\n\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">amt<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">Number<\/span>(<span style=\"color: #19177c;\">amtStr<\/span>);\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">tmpDate<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">new<\/span> <span style=\"color: #0000ff;\">Date<\/span>(<span style=\"color: #19177c;\">dateStr<\/span>);\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">desc<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">trim<\/span>(<span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##descTxt\"<\/span>).<span style=\"color: #0000ff;\">val<\/span>());\n\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">expVO<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">new<\/span> <span style=\"color: #0000ff;\">cfc.ExpenseVO<\/span>(<span style=\"color: #0000ff;\">tmpDate.getTime<\/span>(),<span style=\"color: #19177c;\">amt<\/span>,<span style=\"color: #19177c;\">desc<\/span>);\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">expAdded<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">false<\/span>;\n\n\t\t\t<span style=\"color: #19177c;\">try<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #0000ff;\">expMgr.addExpense<\/span>(<span style=\"color: #19177c;\">expVO<\/span>);\n\t\t\t\t<span style=\"color: #19177c;\">expAdded<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">true<\/span>;\n\t\t\t}\n\t\t\t<span style=\"color: #0000ff;\">catch<\/span> (<span style=\"color: #19177c;\">any<\/span> <span style=\"color: #19177c;\">e<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0000ff;\">alert<\/span>(<span style=\"color: #ba2121;\">\"Error : \"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">e.message<\/span>);\n\t\t\t\t<span style=\"color: #19177c;\">return<\/span>;\n\t\t\t}\n\t\t<span style=\"color: #008000;\">&lt;\/cfscript&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##addDlg\"<\/span>).<span style=\"color: #0000ff;\">modal<\/span>(<span style=\"color: #ba2121;\">\"hide\"<\/span>) <span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #19177c;\">expAdded<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #19177c;\">true<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;cf<\/span><span style=\"color: #7d9029;\">_expenseList<\/span> <span style=\"color: #7d9029;\">parentDiv=<\/span><span style=\"color: #ba2121;\">\"expenseListDiv\"<\/span> <span style=\"color: #7d9029;\">expenses=<\/span><span style=\"color: #ba2121;\">#expVO#<\/span> <span style=\"color: #7d9029;\">action=<\/span><span style=\"color: #ba2121;\">\"append\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"deleteAll\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfscript&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #666666;\">!<\/span><span style=\"color: #0000ff;\">confirm<\/span>(<span style=\"color: #ba2121;\">\"Are you sure you want to delete all?\"<\/span>))\n\t\t\t\t<span style=\"color: #19177c;\">return<\/span>;\n\n\t\t\t<span style=\"color: #19177c;\">try<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #0000ff;\">expMgr.deleteAllExpenses<\/span>();\n\t\t\t}\n\t\t\t<span style=\"color: #0000ff;\">catch<\/span> (<span style=\"color: #19177c;\">any<\/span> <span style=\"color: #19177c;\">e<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0000ff;\">alert<\/span>(<span style=\"color: #ba2121;\">\"Error : \"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">e.message<\/span>);\n\t\t\t\t<span style=\"color: #19177c;\">return<\/span>;\n\t\t\t}\n\t\t<span style=\"color: #008000;\">&lt;\/cfscript&gt;<\/span>\n\n \t\t<span style=\"color: #008000; font-weight: bold;\">&lt;cf<\/span><span style=\"color: #7d9029;\">_expenseList<\/span> <span style=\"color: #7d9029;\">parentDiv=<\/span><span style=\"color: #ba2121;\">\"expenseListDiv\"<\/span> <span style=\"color: #7d9029;\">action=<\/span><span style=\"color: #ba2121;\">\"removeAll\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n<span style=\"color: #008000; font-weight: bold;\">&lt;\/cfclient&gt;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>From line# 5-7 we include Bootstrap and JQuery files. We also include our application specific JS file (app.js) on line# 9. Then from line# 12-54 we create HTML user interface, which include top navigation bar, div to contain expense list and modal dialog for getting inputs for adding new expense item.<\/p>\n<p>&lt;cfclient&gt; block starts from line# 56 till the end of the file. Note that you could move this content to another cfm file and use cfinclude (in cfclient) in index.cfm to include that content.<\/p>\n<p>On line# 60 we create an instance of ExpenseManager CFC and then call getExpenses method on it. This method returns array of ExpenseVO CFCs. On line# 68, we call a custom tag &lt;cf_expenseList&gt; and pass a few attributes, including id of the div in which to show expense list and array of ExpenseVO objects that we got above. Then we have UI handler functions &#8211;\u00a0displayAddExpenseDlg,\u00a0saveExpense and\u00a0deleteAll.<\/p>\n<p>Here is the code in ExpenseManager.cfc &#8211;<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<table>\n<tbody>\n<tr>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\"> 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59\n60\n61\n62\n63\n64\n65\n66\n67\n68\n69\n70\n71\n72\n73\n74\n75\n76\n77\n78\n79<\/pre>\n<\/td>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\">component client<span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"true\"<\/span>\n{\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.dsn <span style=\"color: #666666;\">=<\/span> <span style=\"color: #ba2121;\">\"expense_db\"<\/span>;\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> init()\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> dbCreated <span style=\"color: #666666;\">=<\/span> localStorage.dbCreated;\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #666666;\">!<\/span>isDefined(<span style=\"color: #ba2121;\">\"dbCreated\"<\/span>))\n\t\t\tlocalStorage.dbCreated <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">false<\/span>;\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #666666;\">!<\/span>dbCreated)\n\t\t{\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">try<\/span>\n\t\t\t{\n\t\t\t\tcreateTable();\n\t\t\t\tlocalStorage.dbCreated <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">true<\/span>;\n\t\t\t}\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">catch<\/span> (any e)\n\t\t\t{\n\t\t\t\talert(<span style=\"color: #ba2121;\">\"Error : \"<\/span> <span style=\"color: #666666;\">+<\/span> e.message);\n\t\t\t}\n\t\t}\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> createTable()\n\t{\n\t\tqueryExecute(\n\t\t\t<span style=\"color: #ba2121;\">\"create table if not exists expense (id integer primary key, <\/span>\n<span style=\"color: #ba2121;\">\t\t\texpense_date integer, amount real, desc text)\"<\/span>,\n\t\t\t[],\n\t\t\t{<span style=\"color: #ba2121;\">\"datasource\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #008000; font-weight: bold;\">this<\/span>.dsn});\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> addExpense (expVO)\n\t{\n\t\tqueryExecute(\n\t\t\t<span style=\"color: #ba2121;\">\"insert into expense (expense_date,amount,desc) values(?,?,?)\"<\/span>,\n\t\t\t[expVO.expenseDate,expVO.amount,expVO.description],\n\t\t\t{<span style=\"color: #ba2121;\">\"datasource\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #008000; font-weight: bold;\">this<\/span>.dsn}\n\t\t);\n\n\t\t<span style=\"color: #408080; font-style: italic;\">\/\/get auto generated id<\/span>\n\t\tqueryExecute(\n\t\t\t<span style=\"color: #ba2121;\">\"select max(id) maxId from expense\"<\/span>,\n\t\t\t[],\n\t\t\t{<span style=\"color: #ba2121;\">\"datasource\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #008000; font-weight: bold;\">this<\/span>.dsn, <span style=\"color: #ba2121;\">\"name\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #ba2121;\">\"rs\"<\/span>}\n\t\t);\n\n\t\texpVO.id <span style=\"color: #666666;\">=<\/span> rs.maxId[<span style=\"color: #666666;\">1<\/span>];\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> getExpenses()\n\t{\n\t\tqueryExecute(<span style=\"color: #ba2121;\">\"select * from expense order by expense_date desc\"<\/span>,\n\t\t\t[],\n\t\t\t{<span style=\"color: #ba2121;\">\"datasource\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #008000; font-weight: bold;\">this<\/span>.dsn, <span style=\"color: #ba2121;\">\"name\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #ba2121;\">\"rs\"<\/span>});\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> result <span style=\"color: #666666;\">=<\/span> [];\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (rs.length <span style=\"color: #666666;\">==<\/span> <span style=\"color: #666666;\">0<\/span>)\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> result;\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">for<\/span> (i <span style=\"color: #666666;\">=<\/span> <span style=\"color: #666666;\">1<\/span>; i <span style=\"color: #666666;\">&lt;=<\/span> rs.length; i<span style=\"color: #666666;\">++<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> expVO <span style=\"color: #666666;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">new<\/span> ExpenseVO();\n\t\t\texpVO.id <span style=\"color: #666666;\">=<\/span> rs.id[i];\n\t\t\texpVO.expenseDate <span style=\"color: #666666;\">=<\/span> rs.expense_date[i];\n\t\t\texpVO.amount <span style=\"color: #666666;\">=<\/span> rs.amount[i];\n\t\t\texpVO.description <span style=\"color: #666666;\">=<\/span> rs.desc[i];\n\t\t\tresult.append(expVO);\n\t\t}\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> result;\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> deleteAllExpenses()\n\t{\n\t\tqueryExecute(<span style=\"color: #ba2121;\">\"delete from expense\"<\/span>,[],{<span style=\"color: #ba2121;\">\"datasource\"<\/span><span style=\"color: #666666;\">:<\/span><span style=\"color: #008000; font-weight: bold;\">this<\/span>.dsn});\n\t}\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>CFC is written completely in CFScript syntax. Note that this CFC is marked as client side CFC with attribute client=&#8221;true&#8221;.<br \/>\nIn the constructor of this CFC (init method), we create database table, if it is not already created. Notice new query function, queryExecute, in the createTable function on line#27. This function takes sql statement as the first argument, array of parameter values as the second argument and then key-value pairs of attributes, that you would use in cfquery tag, as the third argument. getExpenses function returns array of ExpenseVO objects. This is how ExpneseVO CFC looks &#8211;<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<table>\n<tbody>\n<tr>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\"> 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14<\/pre>\n<\/td>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\">component client<span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"true\"<\/span>\n{\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.id;\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.expenseDate;\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.amount;\n\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.description;\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> init(expDate, amt, desc)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.expenseDate <span style=\"color: #666666;\">=<\/span> expDate;\n\t\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.amount <span style=\"color: #666666;\">=<\/span> amt;\n\t\t<span style=\"color: #008000; font-weight: bold;\">this<\/span>.description <span style=\"color: #666666;\">=<\/span> desc;\n\t}\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Now let&#8217;s look at the custom tag expenseList.cfm, remember this custom tag is used in index.cfm to display list of expenses &#8211;<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<table>\n<tbody>\n<tr>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\">  1\n  2\n  3\n  4\n  5\n  6\n  7\n  8\n  9\n 10\n 11\n 12\n 13\n 14\n 15\n 16\n 17\n 18\n 19\n 20\n 21\n 22\n 23\n 24\n 25\n 26\n 27\n 28\n 29\n 30\n 31\n 32\n 33\n 34\n 35\n 36\n 37\n 38\n 39\n 40\n 41\n 42\n 43\n 44\n 45\n 46\n 47\n 48\n 49\n 50\n 51\n 52\n 53\n 54\n 55\n 56\n 57\n 58\n 59\n 60\n 61\n 62\n 63\n 64\n 65\n 66\n 67\n 68\n 69\n 70\n 71\n 72\n 73\n 74\n 75\n 76\n 77\n 78\n 79\n 80\n 81\n 82\n 83\n 84\n 85\n 86\n 87\n 88\n 89\n 90\n 91\n 92\n 93\n 94\n 95\n 96\n 97\n 98\n 99\n100\n101\n102\n103\n104\n105\n106\n107\n108\n109\n110\n111\n112\n113\n114\n115\n116\n117\n118\n119\n120\n121\n122\n123\n124\n125\n126\n127<\/pre>\n<\/td>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008000; font-weight: bold;\">&lt;cfclient&gt;<\/span>\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Handle only tag start ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #19177c;\">thisTag.executionMode<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #ba2121;\">\"start\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">processTagStart<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"processTagStart\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">variables.action<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #ba2121;\">\"\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #666666;\">not<\/span> <span style=\"color: #0000ff;\">structKeyExists<\/span>(<span style=\"color: #19177c;\">attributes<\/span>,<span style=\"color: #ba2121;\">\"parentDiv\"<\/span>) <span style=\"color: #666666;\">or<\/span> <span style=\"color: #19177c;\">attributes.parentDiv<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #ba2121;\">\"\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #0000ff;\">structKeyExists<\/span>(<span style=\"color: #19177c;\">attributes<\/span>,<span style=\"color: #ba2121;\">\"action\"<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">variables.action<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">attributes.action<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #0000ff;\">structKeyExists<\/span>(<span style=\"color: #19177c;\">attributes<\/span>,<span style=\"color: #ba2121;\">\"expenses\"<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- <\/span>\n<span style=\"color: #408080; font-style: italic;\">\t\t\t\tDisplays list of expenses in a given div element<\/span>\n<span style=\"color: #408080; font-style: italic;\">\t\t\t\tIf attribute.expenses is an array then create HTML table and display in the parent DIV<\/span>\n<span style=\"color: #408080; font-style: italic;\">\t\t\t\tIf attribute.expenses is not an array then assume it to be ExpenseVO and append to <\/span>\n<span style=\"color: #408080; font-style: italic;\">\t\t\t\t\tthe existing table<\/span>\n<span style=\"color: #408080; font-style: italic;\">\t\t\t ---&gt;<\/span>\n\n\t\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #19177c;\">variables.action<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #ba2121;\">\"displayAll\"<\/span> <span style=\"color: #666666;\">and<\/span> <span style=\"color: #0000ff;\">isArray<\/span>(<span style=\"color: #19177c;\">attributes.expenses<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">displayExpensesArray<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfelseif<\/span> <span style=\"color: #19177c;\">variables.action<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #ba2121;\">\"append\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">appendExpense<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #19177c;\">variables.action<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #ba2121;\">\"removeAll\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">removeAllExpenses<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Display array of expenseVO objects ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"displayExpensesArray\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">expenses<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">attributes.expenses<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">parentDiv<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">attributes.parentDiv<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #19177c;\">expenses.length<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #666666;\">0<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- No expneses added to database yet ---&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>).<span style=\"color: #0000ff;\">append<\/span>(<span style=\"color: #ba2121;\">\"&lt;b<\/span><span style=\"color: #008000;\">&gt;<\/span>No expenses found<span style=\"color: #008000; font-weight: bold;\">&lt;\/b&gt;<\/span>\")&gt;\n\t\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Create table ---&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>).<span style=\"color: #0000ff;\">children<\/span>().<span style=\"color: #0000ff;\">remove<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">tblEml<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #0000ff;\">createHTMLtable<\/span>()).<span style=\"color: #0000ff;\">appendTo<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Add table rows ---&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfloop<\/span> <span style=\"color: #19177c;\">array<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"#expenses#\"<\/span> <span style=\"color: #19177c;\">index<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"expense\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #19177c;\">tblEml<\/span>).<span style=\"color: #0000ff;\">append<\/span>(<span style=\"color: #0000ff;\">createTableRow<\/span>(<span style=\"color: #19177c;\">expense<\/span>))<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfloop&gt;<\/span>\n\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Append one expense item to the existing list ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"appendExpense\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">expenseVO<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">attributes.expenses<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">parentDiv<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">attributes.parentDiv<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!---First check if we need to create the table ---&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">tblElm<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #ba2121;\">\" table\"<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfif<\/span> <span style=\"color: #19177c;\">tblElm.length<\/span> <span style=\"color: #666666;\">eq<\/span> <span style=\"color: #666666;\">0<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Table does not exist. Create one ---&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>).<span style=\"color: #0000ff;\">children<\/span>().<span style=\"color: #0000ff;\">remove<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">tblElm<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #0000ff;\">createHTMLtable<\/span>()).<span style=\"color: #0000ff;\">appendTo<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfif&gt;<\/span>\n\n\t\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- append expenseVO ---&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #19177c;\">tblElm<\/span>).<span style=\"color: #0000ff;\">append<\/span>(<span style=\"color: #0000ff;\">createTableRow<\/span>(<span style=\"color: #19177c;\">expenseVO<\/span>))<span style=\"color: #008000;\">&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Create HTML text for displaying expnese in a table row ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"createTableRow\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfargument<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"expenseVO\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfoutput &gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;cfsavecontent<\/span> <span style=\"color: #19177c;\">variable<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"tmpStr\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;tr&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;<\/span>#<span style=\"color: #0000ff;\">dateToStr<\/span>(<span style=\"color: #19177c;\">expenseVO.expenseDate<\/span>)#<span style=\"color: #008000; font-weight: bold;\">&lt;\/td&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;<\/span>#<span style=\"color: #19177c;\">expenseVO.amount<\/span>#<span style=\"color: #008000; font-weight: bold;\">&lt;\/td&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;td&gt;<\/span>#<span style=\"color: #19177c;\">expenseVO.description<\/span>#<span style=\"color: #008000; font-weight: bold;\">&lt;\/td&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/tr&gt;<\/span>\n\t\t\t<span style=\"color: #008000;\">&lt;\/cfsavecontent&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfoutput&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #19177c;\">tmpStr<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- removes all expense rows from the table ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"removeAllExpenses\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #008000; font-weight: bold;\">var<\/span> <span style=\"color: #19177c;\">parentDiv<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">attributes.parentDiv<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>).<span style=\"color: #0000ff;\">children<\/span>().<span style=\"color: #0000ff;\">remove<\/span>()<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #0000ff;\">$<\/span>(<span style=\"color: #ba2121;\">\"##\"<\/span> <span style=\"color: #666666;\">+<\/span> <span style=\"color: #19177c;\">parentDiv<\/span>).<span style=\"color: #0000ff;\">append<\/span>(<span style=\"color: #ba2121;\">\"&lt;b<\/span><span style=\"color: #008000;\">&gt;<\/span>No expenses found<span style=\"color: #008000; font-weight: bold;\">&lt;\/b&gt;<\/span>\")&gt;\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Creates HTML table to display expenses ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"createHTMLtable\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfsavecontent<\/span> <span style=\"color: #19177c;\">variable<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"tmpStr\"<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;table<\/span> <span style=\"color: #7d9029;\">width=<\/span><span style=\"color: #ba2121;\">\"100%\"<\/span><span style=\"color: #008000; font-weight: bold;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;tr&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;th&gt;<\/span>Date<span style=\"color: #008000; font-weight: bold;\">&lt;\/th&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;th&gt;<\/span>Amount<span style=\"color: #008000; font-weight: bold;\">&lt;\/th&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;th&gt;<\/span>Description<span style=\"color: #008000; font-weight: bold;\">&lt;\/th&gt;<\/span>\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/tr&gt;<\/span>\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">&lt;\/table&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;\/cfsavecontent&gt;<\/span>\n\n\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #19177c;\">tmpStr<\/span><span style=\"color: #008000;\">&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #408080; font-style: italic;\">&lt;!--- Converts date in milliseconds to local string ---&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;cffunction<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"dateToStr\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfargument<\/span> <span style=\"color: #19177c;\">name<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"dateAsNumber\"<\/span> <span style=\"color: #19177c;\">type<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"numeric\"<\/span> <span style=\"color: #19177c;\">required<\/span><span style=\"color: #666666;\">=<\/span><span style=\"color: #ba2121;\">\"true\"<\/span> <span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfset<\/span> <span style=\"color: #19177c;\">tmpDate<\/span> <span style=\"color: #666666;\">=<\/span> <span style=\"color: #19177c;\">new<\/span> <span style=\"color: #0000ff;\">Date<\/span>(<span style=\"color: #19177c;\">dateAsNumber<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t\t<span style=\"color: #008000;\">&lt;cfreturn<\/span> <span style=\"color: #0000ff;\">dateFormat<\/span>(<span style=\"color: #19177c;\">tmpDate<\/span>,<span style=\"color: #ba2121;\">\"mm\/dd\/yyyy\"<\/span>)<span style=\"color: #008000;\">&gt;<\/span>\n\t<span style=\"color: #008000;\">&lt;\/cffunction&gt;<\/span>\n<span style=\"color: #008000; font-weight: bold;\">&lt;\/cfclient&gt;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>This custom tag takes three attributes &#8211; 1.\u00a0parentDiv : is the id of div element in which you want to display list of expenses. 2. action : valid values are\u00a0displayAll, append and removeAll. displayAll action removed all expenses in the div before adding new expenses. append just adds to existing list. 3. expenses : is an array of ExpneseVO objects to display in the list. Notice use of cfsaveconent tag on line# 86 and 107. This tag makes creating HTML content with dynamic values very easy, otherwise you would create the content by appending strings. Another advantage of using cfsavecontent is that you get code assist for all the tags within cfsaveconent in the ColdFusion Builder.<\/p>\n<p>Lastly, here is our app specific JS file app.js. It really does not have much content-<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<table>\n<tbody>\n<tr>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\">1\n2\n3\n4\n5<\/pre>\n<\/td>\n<td>\n<pre style=\"margin: 0; line-height: 125%;\">$(<span style=\"color: #008000;\">document<\/span>).ready(<span style=\"color: #008000; font-weight: bold;\">function<\/span>(){\n\t$(<span style=\"color: #008000;\">document<\/span>).on(<span style=\"color: #ba2121;\">\"click\"<\/span>,<span style=\"color: #ba2121;\">\"#addBtn\"<\/span>, displayAddExpenseDlg);\n\t$(<span style=\"color: #008000;\">document<\/span>).on(<span style=\"color: #ba2121;\">\"click\"<\/span>,<span style=\"color: #ba2121;\">\"#saveBtn\"<\/span>, saveExpense);\n\t$(<span style=\"color: #008000;\">document<\/span>).on(<span style=\"color: #ba2121;\">\"click\"<\/span>, <span style=\"color: #ba2121;\">\"#deleteAllBtn\"<\/span>, deleteAll);\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Note that handler functions\u00a0displayAddExpenseDlg,\u00a0saveExpense and\u00a0deleteAll are declared in index.cfm in cfclient block.<\/p>\n<p>You can <a href=\"http:\/\/ramkulkarni.com\/temp\/2014-02-25\/ExpenseTracker_project.zip\" target=\"_blank\">download the entire project\u00a0<\/a>. You can also <a href=\"http:\/\/ramkulkarni.com\/temp\/2014-02-25\/ExpenseTracker_795139.apk\" target=\"_blank\">download the Android APK<\/a> file, \u00a0install it and see how it works.<\/p>\n<p>-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous post,\u00a0Simplify Mobile Application Development Using ColdFusion, I posted a video that showed how easy it is to create mobile application with CFMobile features of ColdFusion Splendor (Server) and ColdFusion Thunder (IDE). In that video I created a simple app called &#8216;Simple Expense Tracker&#8217;. But the code was not optimal, because the main &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/creating-database-mobile-application-with-coldfusion-splendor\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Creating database mobile application with ColdFusion Splendor&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[32,23,78,17,1],"tags":[22,93,79],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-ih","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1133"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1133"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1133\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1133"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}