Creating Learning Objects with Macromedia Dreamweaver MX
by Alex Cuthbert and Frances Himes September 2002
Copyright 2002 Macromedia, Inc. All rights reserved. The information contained in this document represents the current view of Macromedia on the issue discussed as of the date of publication. Because Macromedia must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Macromedia, and Macromedia cannot guarantee the accuracy of any information presented after the date of publication. This white paper is for information purposes only. MACROMEDIA MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. Macromedia may have patents, patent applications, trademark, copyright or other intellectual property rights covering the subject matter of this document. Except as expressly provided in any written license agreement from Macromedia, the furnishing of this document does not give you any license to these patents, trademarks, copyrights or other intellectual property. Dreamweaver MX, Flash MX, ColdFusion MX, Studio MX, and Sitespring are either trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Macromedia, Inc. 600 Townsend Street San Francisco, CA 94103 4152522000
Creating Learning Objects With Dreamweaver MX

Contents

Recent Developments in Learning Objects Design... 1 Defining Learning Objects...2 Separating Content From Context...2 Ensuring Interoperability...3 Designing Learning Objects... 4 Define Learning Objectives...5 Create LOs With Macromedia Dreamweaver MX: Fostering Collaborative Learning (A Development Scenario)...5 Digital Assets Package...6 Identifying Learning Objectives...6 Managing Learning Object Development With Macromedia Dreamweaver MX....6 Using Macromedia Dreamweaver MX to Support Work Flow for Curriculum Design Teams....10 Using Macromedia Dreamweaver MX Assets to Build Learning Objects..11 Curriculum Design Specialists....11 Interface Design Specialists...12 Flash Specialists...12 Database Specialists....12 Managing the Presentation Logic of Learning Objects..14 Activity Sequences....14 Image Placeholders (Fireworks Integration)...14 Cascading Style Sheets...15 Templates...17 Asset Management....18 Libraries....19 Managing the Database Logic of Learning Objects (ColdFusion Integration)..19 Accessing Databases....20 Inserting Data Into a Database...21 Displaying Records....23 Creating a ColdFusion Component...23 Using Server Behaviors...24 Additional Development Considerations...26 Conclusion..... 27 Macromedia Learning Objects Development Center...27

September 2002

Page iii
This white paper presents a model for using Macromedia Dreamweaver MX to design Learning Objects and configure those objects to create rich learning experiences. The authors use a development scenario, following a design team as it creates a series of Learning Objects. This approach illustrates how Macromedia Dreamweaver MX, and other products in the MX Studio, can be used to manage, distribute, and coordinate Learning Object design. To better demonstrate the development steps discussed in this paper, a set of digital assets is included.
Recent Developments in Learning Objects Design
Driven by the evolution of web-based learning environments, a shared vision is emerging for an economy where both interactive and individualized instruction can be assembled from reusable, sharable Learning Objects. Instructional designers, online training companies, and curriculum publishers all have a stake in making this vision a reality. In the past, curriculum designers and publishers created proprietary learning materials for one specific use, such as providing supplementary material for a textbook. Constructed at great expense and rarely reused, these materials often followed a linear approach. The learning experience was static in nature, with computer-based material secondary to the printed text. Curriculum content and presentation methods were closely interwoven and often built using proprietary software architectures. Similarly, assessment items were stored in custom database formats that made it difficult to aggregate student data across products. Communication between applications was problematic. The emergence of the web--along with the recent acceptance of standards for defining and describing learning objects--changes both the methods of development and model for distribution. The result of the convergence of the web and wireless makes it possible to deliver customized Learning Objects (LOs) through network devices and web services. New forms of technology, including the Macromedia Flash Communication Server Studio MX, streaming video, instant chat, and synchronization and conferencing tools, have advanced interactive learning both on- and off-line.

Page 1

Defining Learning Objects
Just what constitutes a Learning Object (LO) is determined by a variety of factors, including the designers assessment strategy and learning model. Standards committees, such as the Institute of Electrical and Electronics Engineers (IEEE) Learning Technology Standards Committee (LTSC)i, have created a roadmap for defining attributes for LOs. From a business perspective, defining the properties of LOs is central to the vision of an instructional object economy in which vendors provide high-quality experiences that can be shared and reused across platforms and devices. A number of LO definitions have been offered by groups and individuals involved in exploring innovative eLearning applications. There is debate about the granularity of a Learning Object, which is also known by a number of other names (shareable content object, knowledge object, reusable Learning Object, nugget, etc.). The LTSC describes LOs as any entitydigital or non-digitalthat can be used, re-used, or referenced in technology-supported learning. In its simplest form, an LO might be thought of as a small unit of instruction (smaller than a course, unit, or section) that teaches a focused concept. For the purposes of this paper, an LO as defined by Tanya Heins and Frances Himesiii consists of three fundamental elements:
instructionally sound content with a focused learning objective, learner-centered rich media environments that enable the learner to practice, learn, and receive assessment, and metadata or keywords that describe the LOs attributes, and mechanisms for communicating with management systems or other web applications.
Learning Objects contribute to the scalability and reuse of content and media assets within an organization. Instead of designing complete courses, curriculum design teams can now build reusable LOs, and multiple LOs can be configured to present different topics. But, in order to enhance learning and cost-effective practices, curriculum design teams must learn to design, build, and connect objects using a well-defined set of learning objectives.
Separating Content From Context
Focusing on learning objectives helps separate content and context. In addition, focusing on learning objectives facilitates the sharing, reuse, and continuous improvement of curriculum materials. The process of defining learning objectives has the immediate impact of making the goals and interactions of LOs visible to the curriculum designers, instructors, and learners. Further, by separating presentation, logic, and data (or instructional content), it becomes possible to share presentation methods, as well as content, across development groups, institutions, and companies.

Page 2

Page 5

Digital Assets Package
Accompanying this white paper is a set of digital assets that illustrate the instructional unit created by the design team in our development scenario. You can download and view these assets from the Macromedia website where you retrieved this white paper: http://www.macromedia.com/resources/elearning/objects/ The README file that comes with the digital assets describes the layout of the directories, as well as the steps required to configure supporting applications, such as the database system. The LearnGroup directory contains the Dreamweaver MX pages and the movie files referenced in this white paper. Note that you can view these files in Dreamweaver MX without configuring the supporting applications. In the following sections, references to files in the digital assets refer to files in the LearnGroup directory. A subset of the movie files, the interviews, ships with the primary assets. To get the complete set of interviews, you can download the additional movie file assets. These were shipped as a separate archive to reduce the download time for the main Dreamweaver MX assets.
Identifying Learning Objectives
Our design team begins by identifying learning objectives for a unit, as a precursor to building the assets, resources, and ultimately a set of LOs. The first learning objective the team sets is to enable learners to identify the challenges and opportunities of working in groups, before they actually participate in those groups. The literature on collaborative learning suggests that learner difficulties often center on a lack of experience with group work. Our design team derives this first learning objective from an analysis of this literature. The teams initial solution presents learners with a series of on-demand, video explanations. These narrative clips, each approximately 90 seconds in length, introduce a wide range of perspectives on the issues involved with group work. In one, an interview with the director of an educational research project stresses the advantages of leveraging the strengths of participants with different backgrounds for curriculum authoring partnerships. In addition to the broader goal of introducing learners to the challenges and opportunities of group work, specific goals are associated with each movie. By identifying learning objectives for the unit and for each learning interaction, it is easier to package the LOs for sharing, reuse, and modification at different levels of aggregation.
Managing Learning Object Development With Macromedia Dreamweaver MX

LO development is a multi-step process requiring different supports for distinct stages of the process. The following steps provide an outline of a typical development process:

Page 6

Identify the desired learning outcomes; Define objectives that will enable learners to develop these skills; Define leaning interactions (online learning interactions that will foster these skills); Build LOs to model these learning interactions, providing formats that support a variety of learner differences and learning preferences and styles; Test LOs with pilot group to check learning outcomes against objectives; Adjust learning behaviors and interactions within each LO as needed to accommodate wide range of learning styles; Launch the LO, then track use of and learning from LOs; Evaluate, modify, and refine LOs.
Steps 1-2: Define Learning Outcomes and Objectives
Learning objectives drive much of the design process. Macromedia Dreamweaver MX provides tools for managing these objectives and linking them to LOs. Initially, design teams use Dreamweaver MX Design Notes to specify learning objectives at the page or object level. These learning objectives become part of the metadata that defines the LO. The objectives will eventually be exported as XML metadata once the objects reach the production stage. Available options are described under the Insert->Head Tags menu in Dreamweaver MX. To attach Design Notes to individual objects on a webpage, select the object (by right-clicking for Windows or control-clicking for Macintosh), then choose Design Notes from the objects context menu. The Design Notes dialog box appears and you can enter notes about the learning objectives for the object.

Page 7

Figure 2: Design Notes dialog box in Dreamweaver MX with status and Notes fields.
To enable the use of Design Notes, set the checkboxes for Maintain Design Notes and Upload Design Notes for Sharing under the Design Notes category when you create or edit your site specification in Dreamweaver MX. You can share Design Notes between Flash and Macromedia Dreamweaver MX (see the documentation for details). Since Dreamweaver MX is flexible in terms of the level at which you choose to describe learning goals, members of your design team should agree on a convention for specifying those goals.
Steps 3-4: Define Learning Interactions and Build Learning Objects
In our development scenario, the unit on Fostering Collaborative Learning begins with a simple set of learning interactions (in this case, movies). These learning interactions then evolve into three LOs where pre- and post-surveys surround the movie narratives. The pre- and post-surveys serve both pedagogical and assessment purposes by eliciting learners ideas about collaboration. (See the preSurvey.cfm and postSurvey.cfm files in the digital assets that accompany this white paper for the complete set of survey items.)

Page 8

Step 5: Pilot Test Solutions
Before using the solution with an actual class, pilot interviews should be conducted with several learners to test the instructional fidelity of an LO via learner outcomes. Based on these interviews, the curriculum team can quickly identify ways to improve the learning interactions. In our development scenario, the longer (90- second) movie format turns out to be too complex for learners, because it introduces a wide range of ideas that were not easily distinguished.
Step 6: Adjust Learning Behaviors and Interactions
In response to this feedback from learners, our design team then generates a new set of refined learning interactions. In our development scenario, the new learning objectives for the unit are: To encourage learners to articulate their own ideas, To provide clearly bounded examples of the challenges and opportunities of collaboration, and To prompt learners to reflect on the strategies and roles they might adopt to facilitate interactions in online groups. To achieve the new objectives, the pre- and post-surveys are designed to encourage learners to make connections between their own experiences and the narratives on collaboration. In these interactions, learners reflect on the challenges and opportunities of working in groups, and complete online notes that record their initial ideas about group work. A web form, designed in Macromedia Dreamweaver MX, processes the information the learners submit and send it to a ColdFusion database. In addition, our design team creates a series of shorter movie segments, each of which focuses on just one aspect of group work. These movie segments are grouped into three categories under the headings: challenges of group work, advantages of group work, and strategies for task management. An assessment of the effectiveness of these movies is made possible by the parallel structure of the notesthose that elicit ideas before viewing the movies (the pre-survey) and those that prompt learners to reflect on and synthesize their ideas after viewing the movies (the post-survey). As a result of these revisions, a new collection of three LOs is created that (a) elicits learners ideas, (b) presents issues associated with collaboration using movie segments, and (c) prompts learners to synthesize their ideas.
View Narratives On Collaboration

Elicit Students' Ideas

Prompt For Synthesis Of Ideas
Figure 3: Schematic of the three Learning Objects aggregated into a curriculum unit.

Page 9

This revised unit introduces situations and challenges that learners would encounter in a typical project-based course requiring group work. The unit also provides valuable feedback for the curriculum designers in terms of the learners conceptions of collaboration. These perspectives shape how the students work with peers and engage with course materials.

Figure 5: Design View onto the Macromedia Dreamweaver MX workspace showing the navigation template for the Learning Objects in the development scenario.
In addition, Macromedia Dreamweaver MX supports templates and cascading style sheets that help separate the layout and navigation models from the content.

Flash Specialists

Flash specialists work closely with the curriculum designers in the building of video assets, scripting of interview questions, and construction of animations aligned with the pedagogical goals of the project. In our development scenario, the Flash specialists script interviews based on the learning objectives created by the curriculum design team. These movies appear in Macromedia Dreamweaver MX as assets arranged and connected by the interface design specialists.

Database Specialists

Database specialists construct the backend server logic where student work and dynamic media assets are stored and retrieved. Macromedia Dreamweaver MX is the optimal environment for constructing server logic because of its integration with ColdFusion, as well as its direct support for popular databases such as Microsoft Access, MySQL, and Oracle. Database specialists use the Code View in the Dreamweaver MX development space:

Page 12

Figure 6: Code view onto the Macromedia Dreamweaver MX workspace showing how session variables are set using ColdFusion markup language (CFML). (See the file submitPreSurvey.cfm in the digital assets shipped with this white paper.)
One of the challenges of the curriculum design process is to make database resources available to members of the design team who do not focus on the details of database connections. With Macromedia Dreamweaver MX, database specialists can create code snippets for easy use by design team members who need to access data stored on a server or through a web service. This is done by selecting the code in the workspace, then going to the lower right corner of the Code->Snippets panel and pressing the icon with the page and + symbol. (See Figure 6, above.) The code snippet (below) was created from a query that inserted initial survey data into a database table.
Figure 7: Code snippets organized into folders for reuse in Macromedia Dreamweaver MX.
This code snippet in the Code panel in Macromedia Dreamweaver MX can now be used in additional web forms that process the information in a related manner (e.g., requesting that learners profile information be included as well as survey responses).

Page 13

Similarly, the Application panel provides access to databases, server connections and behaviors, and ColdFusion components. Database specialists work with this panel to create code snippets that perform such functions as field type checking, managing interactions with databases, and consuming web services. These topics are covered in more detail in the section Managing the Database Logic of Learning Objects which appears on page 18.

Managing the Presentation Logic of Learning Objects
The real power of Macromedia Dreamweaver MX rests in its integrated tool set which can be used to quickly build learning interactions. These tools separate the presentation logic from the content, maintaining a consistent look-and-feel for the interface. This consistency contributes to the coherence of learning experiences resulting in more fluid and constructive interactions. Dreamweaver MX has a suite of tools that can enable these processes and help curriculum design teams organize resources, construct LOs, and build more effective activity sequences.

Activity Sequences

Activity sequences are comprised of sets of learning interactions built by linking together or aggregating several LOs. In our development scenario unit, this activity sequence consists of three steps: eliciting learners ideas, presenting perspectives on collaboration, and prompting learners to synthesize their ideas. This activity sequence serves as a model for other similar units with different instructional content. For example, learners could critique different sides of a scientific theory or compare design strategies for a manufactured product. The framework for eliciting ideas, presenting perspectives, and synthesizing those perspectives applies equally well to these situations. Many curriculum design teams create activities and, only later, realize that these activities can be modified for use in other situations. Effective use of the Dreamweaver MX tools can greatly increase the ease of modification and the potential for reuse of LOs and activity sequences. This approach reduces costs and improves the quality of the learning experiences.
Image Placeholders (Fireworks Integration)
Image placeholders reserve a region of the screen for an image that has yet to be created. This feature, accessible through the Insert menu in Macromedia Dreamweaver MX, allows interface designers to create layouts while interface components are still under development. Fireworks recognizes the image placeholders in Dreamweaver MX, and will automatically update Dreamweaver MX pages once an image is completed. Similarly, placeholders can be created for Flash movies. When a Flash movie is edited, Dreamweaver MX launches Flash. The movie will then need to be saved in Flash format (SWF) to see the corresponding changes in Dreamweaver MX. This integration between applications is another strength of the MX product line in terms of facilitating design and development.

Page 14

Cascading Style Sheets
Cascading style sheets control the look-and-feel of pages by defining the font and face elements for text items and other HTML attributes. Maintaining a consistent look-and-feel is critical for all applications. For LOs in particular, familiar navigation models make procedural aspects easier for learners. Cascading style sheets use the same hierarchical XML structure used to specify metadata for LOs. For style sheets, however, these descriptors define the formatting of page elements through specification of characteristics of a font.
Figure 8: Example of name-value pairs for a cascading style sheet (CSS). (See the file learnStyleSheet.css in the digital assets shipped with this white paper.)
Macromedia Dreamweaver MX facilitates the process of maintaining a consistent look-and-feel across an application by bundling page elements into libraries and templates (which are affected by style sheets). While cascading style sheets (CSS) can be attached as internal or external resources, most design teams use external resources to share style sheets and update elements across an entire project. The need for consistent navigation and a uniform look-and-feel leads to the creation of style sheets and templates. Style sheet specifications are stored in files that typically end in.css. These files appear in the Site Panel in Macromedia Dreamweaver MX along with the other files associated with that site. Interface design specialists build style sheets and make them accessible to other team members through the CSS Styles panel in the Design Window:

Page 15

Figure 9: Cascading style sheet (CSS) styles for the LearnGroup site.
Interface design specialists create style sheets after the content is developed. To see how content is developed and how templates and style sheets are then applied, look the file learning_objects/LearnGroup/design pieces/preSurvey (contentOnly).cfm and compare that with the final product in learning_objects/LearnGroup/preSurvey.cfm. In Figure 9, by selecting the icon with a plus (+) symbol in the row at the lower right of the panel, the user can attach the style sheet LearnStyle.css to the current page. This icon brings up a dialog for locating the CSS file. The styles defined in the CSS file that you select will appear in the CSS Styles panel. These styles can then be applied to text in the Macromedia Dreamweaver MX workspace by selecting the text and double-clicking on the CSS style:
Figure 10: CSS Style dialog box with the Type category selected. (This dialog box appears when a style is applied to a page element.)

Page 16

Templates
Webpages can be saved as simple HTML pages or as templates. Templates in Macromedia Dreamweaver MX are collections of interface components and behaviors. Templates are used to maintain a consistent look-and-feel across an instructional unit, while allowing regions of the webpage to be edited.

Figure 11: Macromedia Dreamweaver MX navigation template with one main editable region used throughout. (See the templates/navigationTemplate.dwt file in the digital assets shipped with this white paper.)
Templates help separate the media content from the presentation logic. With templates, interactions in a LO can be abstracted in a way that makes it possible to apply those interactions to a variety of content materials. Within the Fostering Collaborative Learning unit that our design team is developing, templates can be created at different levels of granularity. For example, a navigation template can be created for use across all the pages in the instructional unit. For pages that presented different perspectives on collaboration, designers created a uniform layout for presenting the videos. Designing page elements at different levels of granularity helps curriculum design teams not only to share resources, but to divide tasks effectively. Templates make it possible for one subgroup of team members to focus on the layout and presentation of the material and another subgroup to develop subject-matter questions and guidance independent of the presentation logic. For example, the graphic design specialists created a layout for grouping the movies. To see how this graphical output looked before it was converted to a template, check out the digital assets designpieces/ template(from designer).html. The layout specialists took the graphic designers output and integrated it with the navigation template to create the layout that appears in Figure 12.

Page 17

Figure 12: Design View in Macromedia Dreamweaver MX of the narratives on the advantages of collaboration. (See the file viewVideos.cfm in the digital assets shipped with this paper for the final product with the actual titles and sizes of the segments.)
Selecting any movie segment will load the clip below the buttons that appear in Figure 12. Note that you can view the videos without configuring the supporting applications (i.e., ColdFusion) by individually selecting the movies in the movies directory (in the learning_objects/LearnGroup directory in the digital assets). You may need to download a copy of the QuickTime player from http://www.apple.com or get the QuickTime plug-in for your browser.

Asset Management

Macromedia Dreamweaver MX helps curriculum design teams manage images, Flash movies, sound clips, URLs, layout color combinations, and other assets. These assets can be viewed for a particular site or category by selecting the Assets tab in the Files window.

Page 18

Figure 13: Asset tab showing the navigation template used in our development scenario.
Different members of a curriculum design team tend to focus on different assets. To provide customized access to assets, Macromedia Dreamweaver MX has a Favorites list for frequently used assets. The ability to collect and differentiate between different types of assets helps curriculum design team members share and organize their design elements.

Libraries

In Macromedia Dreamweaver MX, libraries are used to store individual design elements, such as Flash movies or images. Like templates, library items are linked resources. When an original item is changed, all the pages that use that library item are updated automatically by Dreamweaver MX. The ability to include elements by reference means that changes can be made to one file and seen by all the pages in which those elements are embedded.
Managing the Database Logic of Learning Objects (ColdFusion Integration)
Another advantage of Dreamweaver MX is the tight coupling between the layout and design tools and a wide range of database systems. The primary benefits of using a database to store content are that you can:
more easily separate the content from the presentation updated
2 limit the number of places where changes need to be made when the content is
The integration of Macromedia Dreamweaver MX and ColdFusion makes it possible for design teams to integrate dynamic content into webpages. In addition, designers can encapsulate content as well as separate database and presentation logic.

Page 19

Macromedia Dreamweaver MX supports the latest versions of ColdFusion. Dreamweaver MX also includes the Macromedia HomeSite+, which consists of ColdFusion Studio plus HomeSite 5. Dreamweaver MX makes it easy to connect page elements with content by providing the facilities for integrating ColdFusion Components (CFCs) and web services. Database specialists can use Dreamweaver MX to create code snippets and server behaviors that make it possible for designers with limited database knowledge to integrate server-based resources into dynamic pages.

Accessing Databases

Macromedia Dreamweaver MX and ColdFusion support a wide range of databases and scripting languages. (The development scenario and assets shipped with this white paper use a MySQL database and ColdFusion components to manage database connections.) When creating a new page in Dreamweaver MX, the designer must specify the category of the page and, for dynamic pages, must select the scripting language (see below):

Figure 14: New Document dialog box in Macromedia Dreamweaver MX.
The Bindings panel (Windows->Bindings) walks the designer through the steps needed to use the dynamic data on the page. The Databases tab (Windows>Databases) provides a view of the tables, views, and stored procedures that are available through databases accessible for a dynamic page. In the example below, the application has a database called groupintro with two tables for storing the pre- and post-survey data (the preSurvey and postSurvey tables, respectively):

Page 20

Figure 15: Databases tab in Macromedia Dreamweaver MX with tables from example application.
The database panel (above) shows the database tables and, if expanded, the column names and field types for specific tables. You can select these column names and drag them into the Macromedia Dreamweaver MX workspace when constructing queries.
Inserting Data Into a Database
In our development scenario, one of the revisions was the addition of a pre- and post-survey. The preSurvey.cfm form that provides learners with an overview of the unit also prompts them to explain their ideas about small group collaboration. The script submitPreSurvey.cfm processes input from this survey and inserts the responses into the presurvey database table. ColdFusion markup language (CFML) is used to construct the query to insert the form fields into the database:
<cfquery name="insertPreSurvey" datasource="LearnGroup(MYSQL)" username="scripts" password="learnword"> INSERT INTO preSurvey (myName,myGender,groupPositive,groupNegative,projectExperience, projectDescription,groupAdvantages,groupChallenges,createMenu, createTasks) VALUES ("#Form.myName#","#Form.myGender#","#Form.groupPositive#", "#Form.groupNegative#","#Form.projectExperience#", "#Form.projectDescription#","#Form.groupAdvantages#", "#Form.groupChallenges#","#Form.createMenu#","#Form.createTasks#") </cfquery>
The cfquery tag has a number of different attributes including a name field, the data source configured with the ColdFusion adminstrator, and the username and password for accessing the database. The code between the cfquery tags is Standard Query Language (SQL) for inserting values into a table. The values of the fields entered into the forms are passed as part of the query (e.g., #Form.myName#).

Page 21

Our development scenario has open-ended, text-based responses that do not require a specific format. If there were more stringent requirements in terms of data typing, ColdFusion form tags would have been used to verify compliance with field type formats. Using ColdFusion form tags moves the task of checking field types from the client to the server, further separating the server logic from the presentation logic. In our scenario, the form fields from preSurvey.cfm form are inserted into the database table preSurvey. Our curriculum designers wanted a way to match up learners pre- and post-surveys for assessment purposes. An authentication system would have allowed the database specialists to access a user ID unique to each user. Configuring an authentication system is a multistep process even with ColdFusion. Once the learning interactions reach the production stage, a more secure authentication system would be deployed. This multi-stage process is common in software development and supported by the flexibility of Macromedia Dreamweaver MX and ColdFusion. For our example, however, a less formal approach is used. The preSurvey table has an automatically incremented field called the preSurveyID. The following code retrieves the unique ID for the recently entered pre-survey data for each learner:

http://www.macromedia.com/support/dreamweaver/ts/documents/ssh.htm
xxi Access to UC-WISE is available at:
http://wise.berkeley.edu or http://ucwise.berkeley.edu

Page 29

Making the Most of Dreamweaver MX/8, CF Studio, and HomeSite+
Charlie Arehart CTO, Garrison Enterprises

Introduction

Many still using DWMX/8, HomeSite+, or CF Studio Are you still using CF Studio?
Some may have the first two available and not switched to them yet for misunderstanding or lack of motivation
Will present tips, techniques, and resources for all 3
to help make the most of these traditional CFML editors
some will speed up the tools some will speed up your day-to-day development. others may well surprise and delight you

About Your Speaker

CTO of Garrison Enterprises, Charlotte, since April 06
Formerly CTO of New Atlanta (BlueDragon)
9 yrs CF experience (23 yrs in Enterprise IT) Co-author, ColdFusion MX Bible (Wiley) Frequent contributor to ColdFusion Dev Journal Past accomplishments of note
Tech Editor, CFDJ Allaire/Macromedia Certified Adv CF Developer (4, 5, MX) Allaire/Macromedia Certified Instructor Team Macromedia Member & Customer Advisory Board Member Contributor to Macromedia Devnet, Dev Exchange
Frequent speaker to user groups, conferences worldwide

Topics

CF Studio/HomeSite+
How the former has morphed into the latter How to obtain HS+ free if you own DWMX/Studio MX Some helpful tweaks for HS+ (and CF Studio)

Dreamweaver/MX/8

How its evolved to support CFML developers Features, and how to enable them
Some inherent, some require site, some require rds
Annoyances, and how to address them New bonus features with CF7 Updater for DWMX

CF Studio and HomeSite+

CF Studio was not so much killed as renamed
Now available as HomeSite+ Not to be confused with HomeSite
which CF Studio came from in CF3 timeframe CF Studio and HomeSite+ add CF-oriented features
HomeSite still sold, HomeSite+ is not sold
HS+ available only on DWMX or Studio MX CD Not on installer menu, but on CD in own directory
So CF Studio users still stuck on 4/5 can switch
If they own DWMX or Studio MX (no need to install them)
More info: Getting into HomeSite+
http://cfdj.sys-con.com/read/41617.htm

RDS Server Configuration

All 3 editors support RDS services
RDS= Remote Developer Services
Enables remote file access (w/out FTP), database schema and data browsing, more CF Admin console has both admin and RDS passwords
Single shared password for all users on entire server CF 4/5 had option for multiple passwords per developer/group, if using CF Advanced Security

Feature removed in CFMX

To configure RDS in CF Studio/HS+
Use Files tab, choose Macromedia FTP & RDS at same level as C/D drives If localhost (or preferred server) exists, expand to see files
If it fails, right-click and choose properties
Ensure hostname, port, and context (if needed) are set Provide RDS password (and no username, unless Adv Sec)
More info: CF RDS: From Stress to Success
http://www.systemanage.com/presentations/ColdFusionRD SFromStresstoSuccess.pdf

Dev Mappings

Add a development mapping
Options>Settings>Browse>Development Mappings Choose appropriate RDS server, then Add
Point to where code lives that you will edit (Homesite Path) Identify what URL would be to browse that directory (Browser Path) Available CF Server Path needed only for debugging (no longer in MX)
Can then browse template easily with F11 (external), F12 (internal)
Turn OFF temp file browsing
options>config ext browsers>browse using a temp copy otherwise creates temp file and you think it's not "Refreshing" when you change code
More info: Browsing Within CF Studio/HomeSite+
http://cfdj.sys-con.com/read/42061.htm
Helpful Tweaks for Studio/HS+
Turn down delay for tag/function insight
Options>Settings>Editor>tag/function insight

Change shortcut for CFML comments
Options>Customize>Keyboard shortcuts
Adding new file extensions to be editable
Options>Settings>File Settings>Extension Manager
Chang view of filenames to remove document title and size, and to sort by date
In Files tab, right-click on file, choose view
Use favorite folders feature
In Files tab, right-click on file, choose Favorite Folders
Beware default filter (all web files, not all files)
In Files tab, right-click on file, choose Filter
Beware: in advanced find, cfcs are not listed in default file type!
Can add it, but must use ; not ,
Ensure line numbers are enabled, consider word wrap

Both in left gutter

Other Useful Features
Learn to use the database tab
Requires RDS configuration on server and in editor Shows all datasources defined in CF For each, can view DB schema (tables, views) Can also view actual table/view data And offers visual query designer More info: Using the Studio Query Builder
http://www.systemanage.com/presentations/query_builder.pdf`
Dont forget tag insight, tag completion, help, tag editing, code collapse, go to line number (ctrl+g), file>recent files Consider projects, codesweeper, other features

Dreamweaver MX / 8

Dreamweaver 8 is latest edition
Preceded by DWMX 2004, and DWMX (in 2002)
Each edition has added new features
Some more well-suited to HTML developers
As well as CSS, Flash, etc
But they have evolved as CFML editors

DWMXs Introduction

Dreamweaver MX came out as the melding of Dreamweaver and UltraDev
Most CFML developers used CF Studio at the time
Not enthralled with DWs heritage as visual designer
Even so, many features were suited to CFML development
Since many, to this day, still have not used it, lets take a look at key features that would appeal to CFML folks
DWMXs Basic Coding Features
Designer vs Coder Workspace
Edit>Preferences>General>Change Workspace
Insert>ColdFusion Objects
Variables, tags, surround w/ pounds, comments
Tag/function completion, insight, edit and help Snippets, and whole host of HTML/CSS tools Can connect directly to remove server (FTP/RDS)
Files panel group, then Files>FTP & RDS Servers Or via Sites>Manage Sites>New>FTP & RDS
But much more is enabled if you create a site

Defining a Site

On surface, just recognizes group of related files
Also enables association of remote, testing servers Can connect via RDS, S/FTP, VSS, WebDav, Network Similar, on surface, to projects in CF Studio/HomeSite

Also enables integration with Server technology
Not just CF, but ASP, ASP.NET, JSP, PHP Designate Testing server which runs dynamic pages Enables additional functionality
Designate remote server if files to be published elsewhere
Supports testing locally, publishing remotely; or testing/working remotely Enables features like File Check-in, Check-out, and more
Site-Based Coding Features
File>Preview in Browser
Opens in external browser Requires that testing server have correct URL for sites file location To add a new browser, use Edit>Preferences>Preview in Browser

View>Server Debug

Opens in internal browser Separate results>server debug pane of debugging info Debugging shown only if enabled in admin

View>Live Data

Enables WYSIWYG changes (design mode), with dynamic data loaded Must turn on view>design or view>code and design (split view)
Still more enabled with designation of RDS login for testing server

RDS Login

For testing server (where code is executed), provide RDS password
CF Admin console has both admin and RDS passwords RDS= Remote Developer Services Has long existed to support both CF Studio, DWMX, and now HomeSite+ Enables remote file access (w/out FTP), database schema and data browsing, more Single shared password for all users on entire server
CF4, 5 had option for multiple passwords via CF Advanced Security
RDS-based Coding Features
Insert>Application Objects
Recordsets, paging, master/detail, insert/update, more

Application Panel Group

Offers database, binding, server behavior, component tools

Databases

Shows all datasources defined in CF For each, can view DB schema (tables, views, SPs) Can also view actual table/view data Can also add new DSNs, edit existing ones (w/ CF7 update) Cannot build SQL from this interface (see bindings next)
RDS-based Coding Features (cont.)

Server Behaviors

Features that build code for simple app techniques
Mostly same as previous Insert>Application Objects
Recordset feature (adding one) allows building SQL through drill-down (not drag and drop, though) Also enables means to select from a query CFC (CF7 update)
And offers interface to build one, from a given DSN and table

Bindings

Shows available recordsets, server behaviors on page
Components (CFCs and web services)
Can view, and create new, CFCs
Select one, and see all its methods and properties CF7 update permits filtering CFCs shown (per site) Interface to create them is not query-driven (as before)

Can browse Web Services

Point to any web service WSDL to see methods, properties
Can drag and drop to create code from either
DWMXs Annoyances, and Solutions
Features requiring site, RDS
Hopefully, now more familiar with those aspects

General slowness

One frequent recommendation: turn off Virus Scanning on DWMX dirs
Slow when swapping to/from DWMX, or prompts to search for new and changed files
Consider turning off file refresh
Sites>Edit>Advanced>Local Info>Refresh local file list automatically Same for Remote Info and Testing Server

Slow when saving

Consider turning off Automatically Upload Files to Server in site Remote folder options
See Tom Mucks 22 Speed Up Hints for Dreamweaver MX
http://www.tom-muck.com/Articles/speedhints/
Help and tag insight not for CF7
Can download update from Adobe Then for help, use Help>using ColdFusion 7
F1 works only for tags, not functions

DWMX Bonus Info

CF7 update adds some features
See Help>Using CFMX7 Extensions
Component tree filtering Add/edit/remove datasources in Database tab CFC Recordset feature Enhanced debug info And more
Note available CF Login Wizard
Commands>ColdFusion Login Wizard Choose from Simple, NT Domain, LDAP authentication
Browser box vs CF template as login page
Creates application.cfc and related files
Useful Beginners Guide to Databases and SQL Primer
Help>Using Dreamweaver>Appendixes

DW 8 Coding Enhancements

Can install it alongside past versions of DW
Even imports old sites, etc.
Several code view enhancements
New Code toolbar (left gutter of code area) Code collapse/expand (similar to that in CFS/HS+)
Useful for CFFUNCTIONs, script blocks, forms, large queries, etc. Can collapse by tag, all same tags, or by selection
Means to select parent tag, code formatting, indent/outdent See Better Coder Tools in Dreamweaver 8
http://www.communitymx.com/abstract.cfm?cid=B8F8F
CF7 support built-in, new server behaviors Improved FTP engine, background processing Easy inserting of XML data (such as RSS feeds) CSS Visualization features

My Past Resources

Dreamweaver MX for Studio/HomeSite Users
http://www.systemanage.com/presentations/dwmx_for_stu dio_users.pdf http://cfmxplus.blogspot.com/2002_09_22_cfmxplus_archi ve.html These point to articles including:
Migrating from Macromedia ColdFusion Studio to Macromedia Dreamweaver MX , by Charles Nadeau Three Reasons to Migrate From ColdFusion Studio/HomeSite to Dreamweaver MX, by Tom Muck Migrating from Macromedia HomeSite to Macromedia Dreamweaver MX, by Jennifer Rowe Code Editing in Dreamweaver MX, by Mark Fletcher

My Past Resources (cont.)

Getting into HomeSite+

Browsing Within CF Studio/HomeSite+
CF RDS: From Stress to Success
http://www.systemanage.com/presentations/ColdFusionRDSFromStres stoSuccess.pdf
Setting Up and Using the CF Studio Debugger
http://www.systemanage.com/presentations/debugger-setup.pdf
Using the Studio Query Builder
http://www.systemanage.com/presentations/query_builder.pdf

Summary

HomeSite+ is updater of CF Studio (renamed)
Available free on DWMX, Studio MX CD

DWMX has evolved

Supports many useful code-centric features Some require defining a site, some require RDS
DWMX has some annoyances, can be mitigated New CF7 Updater for DWMX adds bonuses

Contact Information

Contact for follow-up issues
carehart@garrisonenterprises.net Or charlie@carehart.org