Welcome!

You will be redirected in 30 seconds or close now.

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

Related Topics: ColdFusion

ColdFusion: Article

Browsing Within CF Studio/HomeSite+

Browsing Within CF Studio/HomeSite+

Do you know how to use the internal browse capability in CF Studio/ HomeSite+? Did you know that you don't need to use the RDS feature to be able to do so? And that you can use it to browse not only CFML templates running on both ColdFusion and BlueDragon, but also JSP, ASP, PHP, and others?

Even if you don't care for the internal browser, did you know Studio can load your templates in any external browser you have installed? And that there are keyboard shortcuts for doing either? In this month's Journeyman column, I'll walk you through the steps to enabling internal and external browsing in CF Studio (4 or 5) and HomeSite+. Along the way, I'll address several sources of confusion and frustration. If you've tried and failed, I'm sure you'll succeed after reading this. By the way, somewhat similar concepts apply to Dreamweaver MX, though you need to set up a "site" there. See the DWMX help for more information on that (and the View->Server Debug and File->Preview in Browser commands).

Challenges in Getting It Set Up
Many CFML developers remain loyal to CF Studio or have moved to HomeSite+, the latest incarnation of that tool offered with DWMX, as I discussed in my June 2003 CFDJ article, "Getting into HomeSite+." For the purposes of this article, the two (CF Studio and HomeSite+) are essentially the same, and for the sake of simplicity I'll just refer to them simply as "Studio" in the vernacular common to many developers (and not to be confused, of course, with the Studio MX suite of tools).

I find that many have never enabled/leveraged the Studio internal browsing ability. I think part of the problem is that it's just not obvious how to do it. Indeed, if you hit the Browse button in Studio or press the shortcut (F12), when you've not taken the steps to set up your Studio environment, you'll see an error message that may or may not clarify for you what's wrong: "The ColdFusion file that you are trying to browse cannot be resolved into a URL. Add a server development mapping to enable URL resolution for this file." (See Figure 1.)

 

The first question may be, what is a "server development mapping?" If you're familiar with Web servers, you may be confused into thinking it has something to do with Web server mappings (it doesn't). Beyond that, how do you set things up properly? Where is it documented? The message doesn't tell you. And when you do find the documentation, you'll also encounter the notion of an "RDS Server." What's that? By the end of this article, you'll understand all of these concepts.

Understanding Development Mappings
A development mapping is the real key to enabling browsing. It's really quite simple in concept, being just a definition of which URL to use when browsing files in a given directory. You can have many mappings if you have files in different directories, or one mapping for all files and subdirectories under a given one.

The key point is that when you try to browse a template in Studio, it looks at the location (disk and directory path) of the file you're trying to browse and then checks to see if a development mapping has been defined for that directory or any ancestor (parent, grandparent, and so on).

For instance, if the file you're editing is in c:\inetpub\wwwroot\somedir\, then Studio will look first to see if there's a Studio development mapping defined for c:\inetpub\wwwroot\somedir\; if not then it will look for one for c:\inetpub\wwwroot\, and so on. This happens very quickly, of course, much the same way in which ColdFusion looks for an application.cfm file before processing each template.

If there's no mapping for the directory path (or ancestor) of the file being browsed (and note that there are none set up by default), then you are shown the error message above. If there is a mapping, then Studio uses that mapping to determine which URL to use for browsing files in that directory and it will attempt to browse it. (We'll see how such a mapping is defined in the next section.)

This approach of using a mapping means, of course, that it works for any files that are located in a directory ready to be browsed by a Web server. If you put your code in a directory called c:\mycode\ or some subdirectory of that, and if there is a URL that can be used to browse it in that location (such as if you've defined a Web server mapping or virtual directory), then you can define a Studio development mapping for it.

It even works for mapped drives (such as f:\, that may be mapped to a network directory) or a UNC path (such as \\myserver\). All that matters is that a URL can be defined to browse the file in the given directory. If you can type a URL to browse files in a given directory, then you can tell Studio how to map that URL to that directory (and its children).

That's really all that development mapping is. This also shows why any kind of file can be browsed within Studio. It's just a mapping of a directory path to the corresponding URL to browse that directory. You could even create a mapping to your PHP, JSP, and ASP apps, if you wanted to. Indeed, Studio supports color coding and other coding tools for PHP, and even more for JSP and ASP.

The Mapping Editor and RDS Servers
So how do you define these mappings? Let's assume for the moment that you're simply interested in creating a mapping for code running on your localhost machine, or 127.0.0.1. As I just mentioned, a mapping can also be created for files executed on other machines as long as you have a drive mapping or UNC path (or RDS Server) defined on your machine. We just need to declare what URL to use for the given directory of a file we're editing.

In fact, there are several ways to add a mapping. The original one was to use the menu command Options->Settings (or F8) and then choose the Browse link in the folder in the tree control displayed on the left (about halfway down the list). You'd see several fields and buttons, one of them labeled "Development Mappings."

A shortcut for all that is to simply press the shortcut Alt+M (while holding the Alt key, press "m" for mapping).

Still another approach, introduced in Studio 4 along with the internal debugger feature, is the menu command Debug->Development Mappings (and a corresponding button in the Debug toolbar at the bottom of the Studio interface).

Any of these approaches will open a window or editor for development mappings (see Figure 2). The first time you use it, it may appear mostly blank as in the figure, since no development mappings are defined by default upon installation of Studio.

 

If you look closely, you'll notice that in fact there first is a dropdown at the top of the window labeled "RDS Server." Since in this first example we're setting up browsing against our local machine, we want to be sure that "localhost" is selected. It will be selected by default if no other RDS Servers have been defined (more on those later), because Studio does install a "localhost" RDS Server definition on installation.

If you see anything other than localhost in that dropdown, or think you will use other RDS Servers, see the sidebar "Multiple RDS Servers" for more information.

If you never use the internal debugger, the association of mappings to a given specific RDS Server isn't critical just for browsing (since it searches through all of them). Still, for consistency, it may be best to select the RDS Server representing the server where the code being executed is located, and define its mapping there.

So, continuing our example, make sure that localhost is selected in the RDS Server dropdown. If you have any development mappings defined for the selected server, they will be shown in the lower area of the mapping editor window. Note the available Add button to create a new mapping, as well as the Edit and Delete buttons for managing any existing ones.

Adding a Development Mapping
To add a new development mapping, select the Add button, and a new window is opened (see Figure 3). (If you're using Studio 4.5 or earlier, you don't need to click Add to start the process.) You'll be prompted with three empty fields. For purposes of browsing, only the first and third fields are significant.

 

The first field, labeled "Studio Path" (or "HomeSite+ Path" in HomeSite+), is another source of frequent confusion. Newcomers may be inclined to interpret this as being the path where Studio/HomeSite+ is located. In Studio 5 and HomeSite+, the prompting associated with these fields has improved, so if you read the screen it should be less of an issue.

Anyway, from what we've discussed so far, it should be clearer now that the Studio/HomeSite+ Path is simply this: the path to the directory where your files that you will want to browse from within Studio are located.

Referring back to our example of code in c:\inetpub\wwwroot\somedir\, we might just simply name that directory as the path here. But if you think about it, we're going to next declare (in the third field) the URL to use when browsing files in that path. Let's assume that the URL would simply begin http://localhost/somedir/, then clearly the /somedir is just a subdirectory indicator. As we'll see in a moment, we don't need to define a mapping for this specific subdirectory but instead for the Webroot above it.

So we should fill in c:\inetpub\wwroot\ in the first field. Notice that there's an available Browse button (a yellow folder icon) to the right of the field, which allows you to use a tree-like directory explorer interface to locate and select the desired path.

The second field, the "CF Server Path," is yet another source of confusion. It's really relevant only to using the internal debugger. Since that works only with CF 4, 4.5, and 5, if you're not using any of those to execute your code, you can safely leave the field blank. Debugging is not enabled in ColdFusion MX (nor currently in BlueDragon). To learn more about the debugger, see the Studio/HomeSite+ manual referenced in the sidebar.

The third and critical field is the "Browser Path," or simply the URL needed to browse templates found in the first field's path. If we've defined the first field to hold the Webroot directory, then we would specify here the URL needed to browse files in that Webroot. In our example, we'd put in http://localhost (or http://127.0.0.1, if the difference is significant on your machine). If a port is needed, such as when using the built-in Web server in CFMX or BlueDragon, provide that on the URL, such as http://localhost:8500 for CFMX or http://localhost:8080/ for BlueDragon.

As stated, we can specify just one mapping for all templates and subdirectories under a given path. If a file is browsed in a subdirectory, Studio will properly determine the extra path information needed relative to the first path specified and will add that extra path information (such as "/somedir") to the URL when the template is browsed.

That's it! You've now defined a development mapping for all files in your localhost Webroot. As I said, it's really simple once it's been explained. You're probably annoyed that you never learned about it (or learned all the details) before. Naturally, if you have multiple directories such as virtual directories or aliases in your Web server pointing to code that's outside your Webroot, you'll want to create mappings for each of those.

And if you ever have trouble determining what the "Studio path" should be for a given file (especially if you have a file open via a drive mapping, UNC path, or RDS Server), simply open the file to be browsed within Studio and look at the title bar. Studio shows the file path up there. That's the path to be put in the Studio path (minus the filename, of course, and perhaps leaving off some subdirectories to create a more general mapping).

It would be nice if Studio had a mechanism to capture the current filepath of an opened document when creating a new mapping. (You might think it would be nice to have Studio come preconfigured with a mapping for the Webroot, but the Webroot path would depend on which Web server you're using and there's no way for Studio to know.)

Before concluding, let me point out one more annoyance for those of you still working with Studio 4.5 or earlier. The interface for adding a mapping is just slightly different and a possible source of frustration (thus its improvement in Studio 5 and beyond). Instead of an Add button opening a new window in which to define a mapping, you are shown the three blank fields for either editing existing mappings (if selected) or adding a new one. But you must remember to click the Add button after typing in the mapping fields. If you press "OK", the editor window goes away and your mapping is not added. Untold woe has befallen those who didn't realize that and wondered why their mappings weren't working. Studio 5 and beyond prevents the confusion by opening a new window for adding/editing mappings.

Browsing Your Goods
You can now try your spanking new development mappings to use the internal browser. Open a file in Studio located in your Webroot (or whatever directory you named in the mapping). Cross your fingers, click the Browse tab (highlighted in Figure 1) or press F12.

If you've set up everything correctly, your page should be executed and the edit area where your source code was shown should be replaced with a browsed version of the page. Woo-hoo! Life as a developer should be much easier now.

You can hit F12 again (or the Browse tab) to return to the editor, edit some code, hit F12 again, and so on. No more need to have an external browser open and flip back and forth. There are just a couple of final points to keep in mind.

First, if you get a 404 or some other indication that the URL is not correct, you can return to the development mappings editor and edit whatever mapping you just added. Also note that when using the internal browser, it may be important to refresh your document after changing it since the internal browser may show a cached version. The default internal browser is Internet Explorer, and Studio's internal browser will respect whatever setting you have in your real IE browser (the two are the same). There are several possible settings in IE for browser caching. In IE 6, for instance, see Tools->Internet Options->Temporary Internet Files->Settings. The current setting may cause Studio to not show the latest version of output from a template you've just edited.

The good news is that you can (and usually should) simply refresh the display. One way is to right-click in the browsed output (not on a graphic or form field) and choose "refresh" from the list of options - the same ones you'd see when right-clicking the output in your regular IE browser. Note that you can also right-click on a browsed document and choose "view source" to be able to see the underlying HTML of a browsed page.

I should add that there are indeed times when it may still make more sense to browse a file externally (meaning, not in the internal browser). If you're editing the action page of a form, you wouldn't typically want to browse that file. You'd want to browse the form instead, and if you're meaning to edit the action page and see the results of your changes, you'd need to save the changes, switch to the form, and submit it. Then if you needed to change it, you'd have to return to the editor, switch to the action page, and repeat. That's clumsy.

It would be smarter to open the form in an external browser, submit the form, and view the action page results in the browser. Then if you need to edit the action page, do so in Studio and save the changes. Go back to the external browser and simply hit the "refresh" button (Ctrl-R) while viewing that action page result. The browser will ask if you want to "resend" the form data. Click "OK" or "retry" and you'll see the results of your changes. Switch back to Studio and continue editing. That's much easier than trying to work in the internal browser.

Another case when it may make sense to use an external browser is when you want to pass query string or URL values into a page being browsed, though there is, in fact, a way to do that in Studio. When browsing a file in the internal browser, you'll notice a series of buttons atop the browsing area, with little icons that give access to several interesting functions (see Figure 4). Explore these icons on your own. One of them is "open url" (the folder icon) and another is "refresh". Still, it's sometimes just easier to open your template in an external browser.

 

There's one more reason you may prefer to use an external browser, if you don't care to launch your templates in Internet Explorer: the default internal browser. There is, in fact, a way to change what the internal browser should be. See Options->Settings->Browse, and the Studio documentation, for more help.

Launching an External Browser
You don't need to do it manually. Studio can launch the external browser for you. Launching your template in an external browser can be as powerful and useful (if not more so) than internal browsing, and it's certainly a time saver.

If you had any external browsers already installed when Studio was installed, you'll find that you can ask Studio to launch a template in an external browser. Instead of clicking the Browse tab or F12, click the F11 key. That will launch your "default" external browser, at least the "default" as far as Studio is concerned. The browser will open and the URL for the given template will be populated automatically and browsed. Cool!

To configure which browser is your default, or indeed to make Studio aware of one that may have been installed after Studio, see Options->Configure External Browsers (see Figure 5). Note that you can put them in order placing the desired one first, which controls which is launched by F11.

 

Besides using F11, there is also an available "Open in External Browser" icon in the Browse toolbar icons (the last one, a magnifying glass, as shown in Figure 4). And there is also a more powerful "View External Browser List" button at the top right of the toolbar buttons under the menu commands. Again see Figure 4. This option will give you a choice of available browsers if multiples are installed.

Note also that even if you're not interested in external browsing, there is one more setting to be aware of, and it's set (perhaps curiously) in that Configure External Browser window (Figure 5). Notice that it offers a choice for how Studio should react when you try to browse a file whose changes you haven't saved. By default, it will try to save a temporary file. For dynamic files like CFML, it's best to change that to either prompt you to save it or automatically save it. Browsing dynamic pages with a temporary name can get confusing.

Just be aware that the same issue applies to browsing internally. Unfortunately, you have to know how to get Studio to recognize that setting for internal browsing as well. Notice in Options->Settings->Browse (not shown), there is an option "use external browser configuration for internal browser." That's what this checkbox is there for. You'll want it checked (though I think the default behavior may have changed in Studio 5 or HomeSite+, as my HomeSite+ shows it not checked but it is not saving as temporary files. Perhaps this setting isn't as critical anymore).

Conclusion
That's a whirlwind tour of browsing files internally and externally in CF Studio/HomeSite+. It's a powerful feature, misunderstood by many. I hope that these tips help save you lots of time. Let us know. You can comment on any article by visiting the CFDJ Web site, at www.sys-con.com/coldfusion. View the article in the archives and enter comments at the bottom of the article page. Or drop me a line. I'd love to hear how my articles have helped you.

 

More Stories By Charlie Arehart

A veteran ColdFusion developer since 1997, Charlie Arehart is a long-time contributor to the community and a recognized Adobe Community Expert. He's a certified Advanced CF Developer and Instructor for CF 4/5/6/7 and served as tech editor of CFDJ until 2003. Now an independent contractor (carehart.org) living in Alpharetta, GA, Charlie provides high-level troubleshooting/tuning assistance and training/mentoring for CF teams. He helps run the Online ColdFusion Meetup (coldfusionmeetup.com, an online CF user group), is a contributor to the CF8 WACK books by Ben Forta, and is frequently invited to speak at developer conferences and user groups worldwide.

Comments (2) View Comments

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.


Most Recent Comments
Charles Arehart 09/10/03 08:47:57 AM EDT

Chip, are you asking about the print or online version of the article? I'll assume you mean the latter. For some reason, they chose to implement the sidebar as a "figure" (see the links above, or go to http://sys-con.com/coldfusion/picture.cfm?pic=http://www.sys-con.com/col...). It's also at the bottom of the "print article" version of the story, at http://sys-con.com/coldfusion/articleprint.cfm?id=638.

Chip Willis 09/04/03 11:53:18 AM EDT

Hi,
In your article about internal browse capability in Home Site you said:
"If you see anything other than localhost in that dropdown, or think you will use other RDS Servers, see the sidebar "Multiple RDS Servers" for more information."
However I can not find that piece. I have searched the site also. Any idea where it may be. I would like to set up RDS debugging on our network server.

@ThingsExpo Stories
SYS-CON Events announced today that Yuasa System will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Yuasa System is introducing a multi-purpose endurance testing system for flexible displays, OLED devices, flexible substrates, flat cables, and films in smartphones, wearables, automobiles, and healthcare.
SYS-CON Events announced today that Dasher Technologies will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Dasher Technologies, Inc. ® is a premier IT solution provider that delivers expert technical resources along with trusted account executives to architect and deliver complete IT solutions and services to help our clients execute their goals, plans and objectives. Since 1999, we'v...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities – ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups. As a result, many firms employ new business models that place enormous impor...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that TidalScale, a leading provider of systems and services, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. TidalScale has been involved in shaping the computing landscape. They've designed, developed and deployed some of the most important and successful systems and services in the history of the computing industry - internet, Ethernet, operating s...
SYS-CON Events announced today that Taica will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Taica manufacturers Alpha-GEL brand silicone components and materials, which maintain outstanding performance over a wide temperature range -40C to +200C. For more information, visit http://www.taica.co.jp/english/.
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.
SYS-CON Events announced today that IBM has been named “Diamond Sponsor” of SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California.
SYS-CON Events announced today that TidalScale will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. TidalScale is the leading provider of Software-Defined Servers that bring flexibility to modern data centers by right-sizing servers on the fly to fit any data set or workload. TidalScale’s award-winning inverse hypervisor technology combines multiple commodity servers (including their ass...
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant tha...
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
As popularity of the smart home is growing and continues to go mainstream, technological factors play a greater role. The IoT protocol houses the interoperability battery consumption, security, and configuration of a smart home device, and it can be difficult for companies to choose the right kind for their product. For both DIY and professionally installed smart homes, developers need to consider each of these elements for their product to be successful in the market and current smart homes.
Infoblox delivers Actionable Network Intelligence to enterprise, government, and service provider customers around the world. They are the industry leader in DNS, DHCP, and IP address management, the category known as DDI. We empower thousands of organizations to control and secure their networks from the core-enabling them to increase efficiency and visibility, improve customer service, and meet compliance requirements.
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
SYS-CON Events announced today that mruby Forum will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. mruby is the lightweight implementation of the Ruby language. We introduce mruby and the mruby IoT framework that enhances development productivity. For more information, visit http://forum.mruby.org/.
Digital transformation is changing the face of business. The IDC predicts that enterprises will commit to a massive new scale of digital transformation, to stake out leadership positions in the "digital transformation economy." Accordingly, attendees at the upcoming Cloud Expo | @ThingsExpo at the Santa Clara Convention Center in Santa Clara, CA, Oct 31-Nov 2, will find fresh new content in a new track called Enterprise Cloud & Digital Transformation.
Most technology leaders, contemporary and from the hardware era, are reshaping their businesses to do software. They hope to capture value from emerging technologies such as IoT, SDN, and AI. Ultimately, irrespective of the vertical, it is about deriving value from independent software applications participating in an ecosystem as one comprehensive solution. In his session at @ThingsExpo, Kausik Sridhar, founder and CTO of Pulzze Systems, will discuss how given the magnitude of today's applicati...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
SYS-CON Events announced today that NetApp has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. NetApp is the data authority for hybrid cloud. NetApp provides a full range of hybrid cloud data services that simplify management of applications and data across cloud and on-premises environments to accelerate digital transformation. Together with their partners, NetApp emp...
In a recent survey, Sumo Logic surveyed 1,500 customers who employ cloud services such as Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP). According to the survey, a quarter of the respondents have already deployed Docker containers and nearly as many (23 percent) are employing the AWS Lambda serverless computing framework. It’s clear: serverless is here to stay. The adoption does come with some needed changes, within both application development and operations. Tha...