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
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
Because IoT devices are deployed in mission-critical environments more than ever before, it’s increasingly imperative they be truly smart. IoT sensors simply stockpiling data isn’t useful. IoT must be artificially and naturally intelligent in order to provide more value In his session at @ThingsExpo, John Crupi, Vice President and Engineering System Architect at Greenwave Systems, will discuss how IoT artificial intelligence (AI) can be carried out via edge analytics and machine learning techn...
From 2013, NTT Communications has been providing cPaaS service, SkyWay. Its customer’s expectations for leveraging WebRTC technology are not only typical real-time communication use cases such as Web conference, remote education, but also IoT use cases such as remote camera monitoring, smart-glass, and robotic. Because of this, NTT Communications has numerous IoT business use-cases that its customers are developing on top of PaaS. WebRTC will lead IoT businesses to be more innovative and address...
WebRTC is the future of browser-to-browser communications, and continues to make inroads into the traditional, difficult, plug-in web communications world. The 6th WebRTC Summit continues our tradition of delivering the latest and greatest presentations within the world of WebRTC. Topics include voice calling, video chat, P2P file sharing, and use cases that have already leveraged the power and convenience of WebRTC.
SYS-CON Events announced today that GrapeUp, the leading provider of rapid product development at the speed of business, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company, specialized in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market acr...
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, 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. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
In his opening keynote at 20th Cloud Expo, Michael Maximilien, Research Scientist, Architect, and Engineer at IBM, discussed the full potential of the cloud and social data requires artificial intelligence. By mixing Cloud Foundry and the rich set of Watson services, IBM's Bluemix is the best cloud operating system for enterprises today, providing rapid development and deployment of applications that can take advantage of the rich catalog of Watson services to help drive insights from the vast t...
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, will provide a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to ...
SYS-CON Events announced today that CA Technologies has been named "Platinum Sponsor" of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business - from apparel to energy - is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
Recently, IoT seems emerging as a solution vehicle for data analytics on real-world scenarios from setting a room temperature setting to predicting a component failure of an aircraft. Compared with developing an application or deploying a cloud service, is an IoT solution unique? If so, how? How does a typical IoT solution architecture consist? And what are the essential components and how are they relevant to each other? How does the security play out? What are the best practices in formulating...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
SYS-CON Events announced today that Elastifile 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. Elastifile Cloud File System (ECFS) is software-defined data infrastructure designed for seamless and efficient management of dynamic workloads across heterogeneous environments. Elastifile provides the architecture needed to optimize your hybrid cloud environment, by facilitating efficient...
There is only one world-class Cloud event on earth, and that is Cloud Expo – which returns to Silicon Valley for the 21st Cloud Expo at the Santa Clara Convention Center, October 31 - November 2, 2017. Every Global 2000 enterprise in the world is now integrating cloud computing in some form into its IT development and operations. Midsize and small businesses are also migrating to the cloud in increasing numbers. Companies are each developing their unique mix of cloud technologies and service...
SYS-CON Events announced today that Golden Gate University 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. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
SYS-CON Events announced today that Grape Up 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. Grape Up is a software company specializing in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market across the U.S. and Europe, Grape Up works with a variety of customers from emergi...
SYS-CON Events announced today that DXWorldExpo has been named “Global 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. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...