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
"When we talk about cloud without compromise what we're talking about is that when people think about 'I need the flexibility of the cloud' - it's the ability to create applications and run them in a cloud environment that's far more flexible,” explained Matthew Finnie, CTO of Interoute, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
The Internet giants are fully embracing AI. All the services they offer to their customers are aimed at drawing a map of the world with the data they get. The AIs from these companies are used to build disruptive approaches that cannot be used by established enterprises, which are threatened by these disruptions. However, most leaders underestimate the effect this will have on their businesses. In his session at 21st Cloud Expo, Rene Buest, Director Market Research & Technology Evangelism at Ara...
No hype cycles or predictions of zillions of things here. IoT is big. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, Associate Partner at M&S Consulting, presented a step-by-step plan to develop your technology implementation strategy. He discussed the evaluation of communication standards and IoT messaging protocols, data analytics considerations, edge-to-cloud tec...
New competitors, disruptive technologies, and growing expectations are pushing every business to both adopt and deliver new digital services. This ‘Digital Transformation’ demands rapid delivery and continuous iteration of new competitive services via multiple channels, which in turn demands new service delivery techniques – including DevOps. In this power panel at @DevOpsSummit 20th Cloud Expo, moderated by DevOps Conference Co-Chair Andi Mann, panelists examined how DevOps helps to meet the de...
When growing capacity and power in the data center, the architectural trade-offs between server scale-up vs. scale-out continue to be debated. Both approaches are valid: scale-out adds multiple, smaller servers running in a distributed computing model, while scale-up adds fewer, more powerful servers that are capable of running larger workloads. It’s worth noting that there are additional, unique advantages that scale-up architectures offer. One big advantage is large memory and compute capacity...
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.
Amazon started as an online bookseller 20 years ago. Since then, it has evolved into a technology juggernaut that has disrupted multiple markets and industries and touches many aspects of our lives. It is a relentless technology and business model innovator driving disruption throughout numerous ecosystems. Amazon’s AWS revenues alone are approaching $16B a year making it one of the largest IT companies in the world. With dominant offerings in Cloud, IoT, eCommerce, Big Data, AI, Digital Assista...
Artificial intelligence, machine learning, neural networks. We’re in the midst of a wave of excitement around AI such as hasn’t been seen for a few decades. But those previous periods of inflated expectations led to troughs of disappointment. Will this time be different? Most likely. Applications of AI such as predictive analytics are already decreasing costs and improving reliability of industrial machinery. Furthermore, the funding and research going into AI now comes from a wide range of com...
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...
We build IoT infrastructure products - when you have to integrate different devices, different systems and cloud you have to build an application to do that but we eliminate the need to build an application. Our products can integrate any device, any system, any cloud regardless of protocol," explained Peter Jung, Chief Product Officer at Pulzze Systems, in this SYS-CON.tv interview at @ThingsExpo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA
SYS-CON Events announced today that Ayehu will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara California. Ayehu provides IT Process Automation & Orchestration solutions for IT and Security professionals to identify and resolve critical incidents and enable rapid containment, eradication, and recovery from cyber security breaches. Ayehu provides customers greater control over IT infras...
SYS-CON Events announced today that MobiDev, a client-oriented software development company, 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. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business...
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 Enzu will exhibit at SYS-CON's 21st Int\ernational Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Enzu’s mission is to be the leading provider of enterprise cloud solutions worldwide. Enzu enables online businesses to use its IT infrastructure to their competitive advantage. By offering a suite of proven hosting and management services, Enzu wants companies to focus on the core of their ...
SYS-CON Events announced today that Cloud Academy named "Bronze Sponsor" of 21st International Cloud Expo which will take place October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara, CA. Cloud Academy is the industry’s most innovative, vendor-neutral cloud technology training platform. Cloud Academy provides continuous learning solutions for individuals and enterprise teams for Amazon Web Services, Microsoft Azure, Google Cloud Platform, and the most popular cloud com...
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.
In his session at Cloud Expo, Alan Winters, an entertainment executive/TV producer turned serial entrepreneur, presented a success story of an entrepreneur who has both suffered through and benefited from offshore development across multiple businesses: The smart choice, or how to select the right offshore development partner Warning signs, or how to minimize chances of making the wrong choice Collaboration, or how to establish the most effective work processes Budget control, or how to ma...
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...
Multiple data types are pouring into IoT deployments. Data is coming in small packages as well as enormous files and data streams of many sizes. Widespread use of mobile devices adds to the total. In this power panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists looked at the tools and environments that are being put to use in IoT deployments, as well as the team skills a modern enterprise IT shop needs to keep things running, get a handle on all this data, and deliver...
In his session at @ThingsExpo, Eric Lachapelle, CEO of the Professional Evaluation and Certification Board (PECB), provided an overview of various initiatives to certify the security of connected devices and future trends in ensuring public trust of IoT. Eric Lachapelle is the Chief Executive Officer of the Professional Evaluation and Certification Board (PECB), an international certification body. His role is to help companies and individuals to achieve professional, accredited and worldwide re...