Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Maureen O'Gara, Nancy Y. Nee, Tad Anderson, Daniel Kaar

Related Topics: ColdFusion

ColdFusion: Article

Completing The Real Estate Sample Application

Managing property listings through Flash Forms PART 2

In Part 1 of this tutorial (CFDJ, Vol.7, issue 12), you built a search interface for the Real Estate sample application. In Part 2, you'll learn how to populate a form by binding the fields to a datagrid, and then edit, add, and remove records from the database. You will add functionality to the one-screen interface you started to build in Part 1 using ColdFusion and Flash Remoting.

Requirements
To complete this tutorial you will need to install the following software and files:

ColdFusion MX 7.01
For a trial download go to www.macromedia.com/cfusion/tdrc/index.cfm? product=coldfusion&promoid=devcenter_tutorial_product_090903. To buy go to www.macromedia.com/software/coldfusion/buy/ ?promoid=devcenter_tutorial_coldfusion_090903. To get the updater go to www.macromedia.com/support/coldfusion/downloads_updates.html#mx7.

To install the sample application for Part 2, unzip the files, copy the realestate folder to your Web root, create a data source called realEstate in the ColdFusion Administrator, and then browse to http://localhost/realestate/index.cfm or http://localhost:8500/realestate for ColdFusion standalone installations. See the full instructions in the Readme file.

Prerequisite Knowledge

  • Part 1 of this tutorial
  • Basic knowledge of ColdFusion components and Flash Forms
  • Ability to set up a data source and write simple SQL statements
Completing the Real Estate Management System Sample Application
In this tutorial, you'll populate the Add/Edit panel with the record details for the user's search so that the user can edit, remove, and add new records from the same panel (see Figure 1).

Code the following functionality:

  1. Populate the edit form by binding fields to the selected record in the datagrid.
  2. Create a ColdFusion component to add, update, and delete records from the database.
  3. Create a Flash Remoting service CFC.
  4. Call the service and get results.
Populating the Edit Form
The bottom-right panel contains a form with an input for every attribute of a property listing: address, price, number of bedrooms, bathrooms, amenities, and so forth. Most of the fields are text input fields, but there are also controls for selects, radio buttons, check boxes, a text area, and a date field.

When a user opens the application (you can try it by going to http://localhost:8500/realestate/index.cfm), he or she selects search criteria and the application returns the search results. The user clicks one of the records in the datagrid and expects the detail panel in the bottom-right corner to display the details of the selected record. Where will the necessary information come from?

In Part 1 of this tutorial, the search returned query results that contained all of the columns in the "listing" table in the database. However, only a few of those columns - namely Price, Type, Bedrooms, Bathrooms, and Footage - appeared in the datagrid.

"What a waste of bandwidth!" you may have thought. Not really so, because you will need the additional columns to populate the entire form.

Populate each field from a column of the query returned by the search. The query that populates the datagrid is "stored" in the datagrid. To get the data corresponding to the selected row in the grid, access the cfgrid by its name (listingGrid) and its special property (selectedItem); the name and property specify the row the user selected.

Then, with dot notation, select the specific column you need, which is different for each input. The complete path is this: listingGrid.selectedItem.columnName. Use this path for all of the columns of the query, even if they were not defined as datagrid columns with the cfgridcolumn tag.

Binding Each Field Type
Now that you know how to get the data for each property listing attribute, you are ready to display it. Just below the search results, add a new panel (note that Part 1's sample files already contain this panel) that contains the add/edit form:

<cfformgroup type="panel" label="Add / Edit Properties">
</cfformgroup>

Within this panel, you will add, one by one, all the fields corresponding to each property listing attribute, such as address, number of bedrooms, and so forth. Each field has a different length or type, so you will use different controls or variations of the same controls as user inputs. There are some differences in the way you populate each control.

Populating text input controls (<cfinput type="text">), textarea controls (<cftextarea>) and datefield controls (<cfinput type="datefield">) is straightforward if you simply use their bind property:

bind="{listingGrid.selectedItem.columnName}"

Checkbox values can be true or false. The column that populates the checkbox control must be a Boolean type so that you can write:

value="{listingGrid.selectedItem.columnName}"

Select and radio button controls are a different challenge. Neither of them have a bind or similar attribute that you can use to bind them directly. Instead, you must make the controls acquire the right choice when the selected record in the datagrid changes.

In ActionScript, controls fire events when certain things happen. For example, the datagrid fires an onChange event each time the user selects an item. You can make your cfgrid call a function or run a piece of ActionScript code every time that event fires. To tell the datagrid what to do in that event, use the onChange attribute:

<cfgrid name="listingGrid" onchange="listingGridChanged()">

You can call any function you want, either a built-in function such as alert('Datagrid selection changed!') or a custom function.

If you choose to call a custom function, such as listingGridChanged(), you must declare it in a <cfformitem type="script"> block:

<cfformitem type="script">
public function listingGridChanged():Void {
     //select item in dropdowns
     //select item in radio button group
}
</cfformitem>

To avoid repeating the same code for every select control, create a helper function to select a specific item in the select control. This function looks for the option value that matches the desired item and then selects it:

public function selectOption(select: mx.controls.ComboBox, optionToSelect:String):Void {

    //go through every record to find the right one
    for (var i:Number = 0; i< select.length; i++) {
      if (select.getItemAt([i]).data == optionToSelect){
        select.selectedIndex = i;
        break;
      }
    }
}

More Stories By Nahuel Foronda

Nahuel Foronda is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where he has been creating award-winning applications and offering training for the last five years. He also maintains a blog, called AS Fusion (http://www.asfusion.com), where he writes about Flash, ColdFusion and other web technologies.

More Stories By Laura Arguello

Laura Arguello is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where she has been creating award-winning applications and offering training for the last five years. She also maintains a blog, called AS Fusion (http://www.asfusion.com), where she writes about Flash, ColdFusion and other web technologies.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
The Internet of Things is a misnomer. That implies that everything is on the Internet, and that simply should not be - especially for things that are blurring the line between medical devices that stimulate like a pacemaker and quantified self-sensors like a pedometer or pulse tracker. The mesh of things that we manage must be segmented into zones of trust for sensing data, transmitting data, receiving command and control administrative changes, and peer-to-peer mesh messaging. In his session at @ThingsExpo, Ryan Bagnulo, Solution Architect / Software Engineer at SOA Software, focused on desi...
"At our booth we are showing how to provide trust in the Internet of Things. Trust is where everything starts to become secure and trustworthy. Now with the scaling of the Internet of Things it becomes an interesting question – I've heard numbers from 200 billion devices next year up to a trillion in the next 10 to 15 years," explained Johannes Lintzen, Vice President of Sales at Utimaco, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
"For over 25 years we have been working with a lot of enterprise customers and we have seen how companies create applications. And now that we have moved to cloud computing, mobile, social and the Internet of Things, we see that the market needs a new way of creating applications," stated Jesse Shiah, CEO, President and Co-Founder of AgilePoint Inc., in this SYS-CON.tv interview at 15th Cloud Expo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Gridstore™, the leader in hyper-converged infrastructure purpose-built to optimize Microsoft workloads, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Gridstore™ is the leader in hyper-converged infrastructure purpose-built for Microsoft workloads and designed to accelerate applications in virtualized environments. Gridstore’s hyper-converged infrastructure is the industry’s first all flash version of HyperConverged Appliances that include both compute and storag...
"People are a lot more knowledgeable about APIs now. There are two types of people who work with APIs - IT people who want to use APIs for something internal and the product managers who want to do something outside APIs for people to connect to them," explained Roberto Medrano, Executive Vice President at SOA Software, in this SYS-CON.tv interview at Cloud Expo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
Today’s enterprise is being driven by disruptive competitive and human capital requirements to provide enterprise application access through not only desktops, but also mobile devices. To retrofit existing programs across all these devices using traditional programming methods is very costly and time consuming – often prohibitively so. In his session at @ThingsExpo, Jesse Shiah, CEO, President, and Co-Founder of AgilePoint Inc., discussed how you can create applications that run on all mobile devices as well as laptops and desktops using a visual drag-and-drop application – and eForms-buildi...
We certainly live in interesting technological times. And no more interesting than the current competing IoT standards for connectivity. Various standards bodies, approaches, and ecosystems are vying for mindshare and positioning for a competitive edge. It is clear that when the dust settles, we will have new protocols, evolved protocols, that will change the way we interact with devices and infrastructure. We will also have evolved web protocols, like HTTP/2, that will be changing the very core of our infrastructures. At the same time, we have old approaches made new again like micro-services...
Code Halos - aka "digital fingerprints" - are the key organizing principle to understand a) how dumb things become smart and b) how to monetize this dynamic. In his session at @ThingsExpo, Robert Brown, AVP, Center for the Future of Work at Cognizant Technology Solutions, outlined research, analysis and recommendations from his recently published book on this phenomena on the way leading edge organizations like GE and Disney are unlocking the Internet of Things opportunity and what steps your organization should be taking to position itself for the next platform of digital competition.
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
As the Internet of Things unfolds, mobile and wearable devices are blurring the line between physical and digital, integrating ever more closely with our interests, our routines, our daily lives. Contextual computing and smart, sensor-equipped spaces bring the potential to walk through a world that recognizes us and responds accordingly. We become continuous transmitters and receivers of data. In his session at @ThingsExpo, Andrew Bolwell, Director of Innovation for HP's Printing and Personal Systems Group, discussed how key attributes of mobile technology – touch input, sensors, social, and ...
In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect at GE, and Ibrahim Gokcen, who leads GE's advanced IoT analytics, focused on the Internet of Things / Industrial Internet and how to make it operational for business end-users. Learn about the challenges posed by machine and sensor data and how to marry it with enterprise data. They also discussed the tips and tricks to provide the Industrial Internet as an end-user consumable service using Big Data Analytics and Industrial Cloud.
Building low-cost wearable devices can enhance the quality of our lives. In his session at Internet of @ThingsExpo, Sai Yamanoor, Embedded Software Engineer at Altschool, provided an example of putting together a small keychain within a $50 budget that educates the user about the air quality in their surroundings. He also provided examples such as building a wearable device that provides transit or recreational information. He then reviewed the resources available to build wearable devices at home including open source hardware, the raw materials required and the options available to power s...
Things are being built upon cloud foundations to transform organizations. This CEO Power Panel at 15th Cloud Expo, moderated by Roger Strukhoff, Cloud Expo and @ThingsExpo conference chair, addressed the big issues involving these technologies and, more important, the results they will achieve. Rodney Rogers, chairman and CEO of Virtustream; Brendan O'Brien, co-founder of Aria Systems, Bart Copeland, president and CEO of ActiveState Software; Jim Cowie, chief scientist at Dyn; Dave Wagstaff, VP and chief architect at BSQUARE Corporation; Seth Proctor, CTO of NuoDB, Inc.; and Andris Gailitis, C...
There's Big Data, then there's really Big Data from the Internet of Things. IoT is evolving to include many data possibilities like new types of event, log and network data. The volumes are enormous, generating tens of billions of logs per day, which raise data challenges. Early IoT deployments are relying heavily on both the cloud and managed service providers to navigate these challenges. In her session at Big Data Expo®, Hannah Smalltree, Director at Treasure Data, discussed how IoT, Big Data and deployments are processing massive data volumes from wearables, utilities and other machines...
"There is a natural synchronization between the business models, the IoT is there to support ,” explained Brendan O'Brien, Co-founder and Chief Architect of Aria Systems, in this SYS-CON.tv interview at the 15th International Cloud Expo®, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Media announced that Splunk, a provider of the leading software platform for real-time Operational Intelligence, has launched an ad campaign on Big Data Journal. Splunk software and cloud services enable organizations to search, monitor, analyze and visualize machine-generated big data coming from websites, applications, servers, networks, sensors and mobile devices. The ads focus on delivering ROI - how improved uptime delivered $6M in annual ROI, improving customer operations by mining large volumes of unstructured data, and how data tracking delivers uptime when it matters most.
In this Women in Technology Power Panel at 15th Cloud Expo, moderated by Anne Plese, Senior Consultant, Cloud Product Marketing at Verizon Enterprise, Esmeralda Swartz, CMO at MetraTech; Evelyn de Souza, Data Privacy and Compliance Strategy Leader at Cisco Systems; Seema Jethani, Director of Product Management at Basho Technologies; Victoria Livschitz, CEO of Qubell Inc.; Anne Hungate, Senior Director of Software Quality at DIRECTV, discussed what path they took to find their spot within the technology industry and how do they see opportunities for other women in their area of expertise.
While great strides have been made relative to the video aspects of remote collaboration, audio technology has basically stagnated. Typically all audio is mixed to a single monaural stream and emanates from a single point, such as a speakerphone or a speaker associated with a video monitor. This leads to confusion and lack of understanding among participants especially regarding who is actually speaking. Spatial teleconferencing introduces the concept of acoustic spatial separation between conference participants in three dimensional space. This has been shown to significantly improve comprehe...
The Industrial Internet revolution is now underway, enabled by connected machines and billions of devices that communicate and collaborate. The massive amounts of Big Data requiring real-time analysis is flooding legacy IT systems and giving way to cloud environments that can handle the unpredictable workloads. Yet many barriers remain until we can fully realize the opportunities and benefits from the convergence of machines and devices with Big Data and the cloud, including interoperability, data security and privacy.
Performance is the intersection of power, agility, control, and choice. If you value performance, and more specifically consistent performance, you need to look beyond simple virtualized compute. Many factors need to be considered to create a truly performant environment. In his General Session at 15th Cloud Expo, Harold Hannon, Sr. Software Architect at SoftLayer, discussed how to take advantage of a multitude of compute options and platform features to make cloud the cornerstone of your online presence.