Click here to close now.

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
Wearable technology was dominant at this year’s International Consumer Electronics Show (CES) , and MWC was no exception to this trend. New versions of favorites, such as the Samsung Gear (three new products were released: the Gear 2, the Gear 2 Neo and the Gear Fit), shared the limelight with new wearables like Pebble Time Steel (the new premium version of the company’s previously released smartwatch) and the LG Watch Urbane. The most dramatic difference at MWC was an emphasis on presenting wearables as fashion accessories and moving away from the original clunky technology associated with t...
The WebRTC Summit 2014 New York, to be held June 9-11, 2015, at the Javits Center in New York, NY, announces that its Call for Papers is open. Topics include all aspects of improving IT delivery by eliminating waste through automated business models leveraging cloud technologies. WebRTC Summit is co-located with 16th International Cloud Expo, @ThingsExpo, Big Data Expo, and DevOps Summit.
SOA Software has changed its name to Akana. With roots in Web Services and SOA Governance, Akana has established itself as a leader in API Management and is expanding into cloud integration as an alternative to the traditional heavyweight enterprise service bus (ESB). The company recently announced that it achieved more than 90% year-over-year growth. As Akana, the company now addresses the evolution and diversification of SOA, unifying security, management, and DevOps across SOA, APIs, microservices, and more.
GENBAND has announced that SageNet is leveraging the Nuvia platform to deliver Unified Communications as a Service (UCaaS) to its large base of retail and enterprise customers. Nuvia’s cloud-based solution provides SageNet’s customers with a full suite of business communications and collaboration tools. Two large national SageNet retail customers have recently signed up to deploy the Nuvia platform and the company will continue to sell the service to new and existing customers. Nuvia’s capabilities include HD voice, video, multimedia messaging, mobility, conferencing, Web collaboration, deskt...
SYS-CON Media announced today that @WebRTCSummit Blog, the largest WebRTC resource in the world, has been launched. @WebRTCSummit Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @WebRTCSummit Blog can be bookmarked ▸ Here @WebRTCSummit conference site can be bookmarked ▸ Here
SYS-CON Events announced today that Cisco, the worldwide leader in IT that transforms how people connect, communicate and collaborate, has been named “Gold Sponsor” of 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. Cisco makes amazing things happen by connecting the unconnected. Cisco has shaped the future of the Internet by becoming the worldwide leader in transforming how people connect, communicate and collaborate. Cisco and our partners are building the platform for the Internet of Everything by connecting the...
Temasys has announced senior management additions to its team. Joining are David Holloway as Vice President of Commercial and Nadine Yap as Vice President of Product. Over the past 12 months Temasys has doubled in size as it adds new customers and expands the development of its Skylink platform. Skylink leads the charge to move WebRTC, traditionally seen as a desktop, browser based technology, to become a ubiquitous web communications technology on web and mobile, as well as Internet of Things compatible devices.
SYS-CON Events announced today that robomq.io will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. robomq.io is an interoperable and composable platform that connects any device to any application. It helps systems integrators and the solution providers build new and innovative products and service for industries requiring monitoring or intelligence from devices and sensors.
Docker is an excellent platform for organizations interested in running microservices. It offers portability and consistency between development and production environments, quick provisioning times, and a simple way to isolate services. In his session at DevOps Summit at 16th Cloud Expo, Shannon Williams, co-founder of Rancher Labs, will walk through these and other benefits of using Docker to run microservices, and provide an overview of RancherOS, a minimalist distribution of Linux designed expressly to run Docker. He will also discuss Rancher, an orchestration and service discovery platf...
SYS-CON Events announced today that Akana, formerly SOA Software, has been named “Bronze Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Akana’s comprehensive suite of API Management, API Security, Integrated SOA Governance, and Cloud Integration solutions helps businesses accelerate digital transformation by securely extending their reach across multiple channels – mobile, cloud and Internet of Things. Akana enables enterprises to share data as APIs, connect and integrate applications, drive part...
SYS-CON Events announced today that Vitria Technology, Inc. will exhibit at SYS-CON’s @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Vitria will showcase the company’s new IoT Analytics Platform through live demonstrations at booth #330. Vitria’s IoT Analytics Platform, fully integrated and powered by an operational intelligence engine, enables customers to rapidly build and operationalize advanced analytics to deliver timely business outcomes for use cases across the industrial, enterprise, and consumer segments.
SYS-CON Events announced today that Solgenia 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, and the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Solgenia is the global market leader in Cloud Collaboration and Cloud Infrastructure software solutions. Designed to “Bridge the Gap” between Personal and Professional Social, Mobile and Cloud user experiences, our solutions help large and medium-sized organizations dr...
SYS-CON Events announced today that Liaison Technologies, a leading provider of data management and integration cloud services and solutions, has been named "Silver Sponsor" of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York, NY. Liaison Technologies is a recognized market leader in providing cloud-enabled data integration and data management solutions to break down complex information barriers, enabling enterprises to make smarter decisions, faster.
Cloud is not a commodity. And no matter what you call it, computing doesn’t come out of the sky. It comes from physical hardware inside brick and mortar facilities connected by hundreds of miles of networking cable. And no two clouds are built the same way. SoftLayer gives you the highest performing cloud infrastructure available. One platform that takes data centers around the world that are full of the widest range of cloud computing options, and then integrates and automates everything. Join SoftLayer on June 9 at 16th Cloud Expo to learn about IBM Cloud's SoftLayer platform, explore se...
@ThingsExpo has been named the Top 5 Most Influential M2M Brand by Onalytica in the ‘Machine to Machine: Top 100 Influencers and Brands.' Onalytica analyzed the online debate on M2M by looking at over 85,000 tweets to provide the most influential individuals and brands that drive the discussion. According to Onalytica the "analysis showed a very engaged community with a lot of interactive tweets. The M2M discussion seems to be more fragmented and driven by some of the major brands present in the M2M space. This really allows some room for influential individuals to create more high value inter...
The world's leading Cloud event, Cloud Expo has launched Microservices Journal on the SYS-CON.com portal, featuring over 19,000 original articles, news stories, features, and blog entries. DevOps Journal is focused on this critical enterprise IT topic in the world of cloud computing. Microservices Journal offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. Follow new article posts on Twitter at @MicroservicesE
SYS-CON Events announced today the IoT Bootcamp – Jumpstart Your IoT Strategy, being held June 9–10, 2015, in conjunction with 16th Cloud Expo and Internet of @ThingsExpo at the Javits Center in New York City. This is your chance to jumpstart your IoT strategy. Combined with real-world scenarios and use cases, the IoT Bootcamp is not just based on presentations but includes hands-on demos and walkthroughs. We will introduce you to a variety of Do-It-Yourself IoT platforms including Arduino, Raspberry Pi, BeagleBone, Spark and Intel Edison. You will also get an overview of cloud technologies s...
SYS-CON Events announced today that SafeLogic has been named “Bag Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. SafeLogic provides security products for applications in mobile and server/appliance environments. SafeLogic’s flagship product CryptoComply is a FIPS 140-2 validated cryptographic engine designed to secure data on servers, workstations, appliances, mobile devices, and in the Cloud.
Containers and microservices have become topics of intense interest throughout the cloud developer and enterprise IT communities. Accordingly, attendees at the upcoming 16th Cloud Expo at the Javits Center in New York June 9-11 will find fresh new content in a new track called PaaS | Containers & Microservices Containers are not being considered for the first time by the cloud community, but a current era of re-consideration has pushed them to the top of the cloud agenda. With the launch of Docker's initial release in March of 2013, interest was revved up several notches. Then late last...
After making a doctor’s appointment via your mobile device, you receive a calendar invite. The day of your appointment, you get a reminder with the doctor’s location and contact information. As you enter the doctor’s exam room, the medical team is equipped with the latest tablet containing your medical history – he or she makes real time updates to your medical file. At the end of your visit, you receive an electronic prescription to your preferred pharmacy and can schedule your next appointment.