当前页面: 开发资料首页 → Netbeans 专题 → Integrating Dreamweaver MX with NetBeans IDE
Integrating Dreamweaver MX with NetBeans IDE
摘要: This tutorial demonstrates how you can configure Macromedia Dreamweaver MX as a visual layout editor for a web application created in NetBeans IDE.
NetBeans IDE 5.0 includes a new editor palette that lets you easily add JSP ServerBeans, HTML forms and other ready-made code snippets to your web application. To open it, choose Tools > Palette from the menu.
You can additionally integrate NetBeans IDE 4.x with Macromedia Dreamweaver MX for further visual HTML and JSP editing. Dreamweaver can be set up to edit JSP files in your NetBeans project directory, and it can automatically keep those files synched with your build files. You will be able to initiate previewing your JSP pages from the NetBeans IDE as well as from Dreamweaver using the built-in Tomcat server.
If you don't have a web application but still want to go through the tutorial, choose File > New Project > Samples > Web > Tomcat JSP Example from the NetBeans menu and use this sample project.
In the following, I will refer to the NetBeans project directory as $NB_PROJ_HOME and I will refer to the web project used as my_project.
Fast Track
If you already are familiar with Dreamweaver, you can follow the fast track to configure the NetBeans integration. Otherwise, follow the detailed steps described in the next paragraphs.
- Create a new site configuration with Site > Manage Sites from the Dreamweaver menu.
- Set the "Local Root Folder" to
$NB_PROJ_HOME\web\. - Set the "Remote Root Folder" to
$NB_PROJ_HOME\build\web\. - Choose "JSP" as the Server Model type.
- Choose "Local/Network" as the Access type (twice).
- Set the "Testing Server Folder" to
$NB_PROJ_HOME\build\web\. - Check the boxes to "Refresh remote file list automatically" (twice) and "Automatically upload file to server on save".
- Set the URL Prefix to the preview URL
(e.g.
http://localhost:8084/my_project/)
Setting Up Your Environment
Specify the Dreamweaver Local Site Folder
First, we tell Dreamweaver where NetBeans stores the JSP files we want to edit.
- Open Dreamweaver. Select Site > Manage Sites from the menu.
- Click the New button in the Manage Sites dialog box and select Site from the pop-up.
- The Site Definition dialog appears. Click the Advanced tab and select Local Info from the list.
- In the "Site Name" text field, enter your project name.
- In the "Local Root Folder" text field,
enter the path to the folder that contains your project's JSP files.
JSP files are located in the folder
$NB_PROJ_HOME\web\. For instance, the local site path may look like this:C:\Documents and Setting\your_user_name\My Documents\my_project\web\" - Check the box to "Refresh remote file list automatically".
- Leave the Site Definition dialog open.
Specify the Dreamweaver Remote Site Folder
Next, we tell Dreamweaver where NetBeans stores the build files. Dreamweaver should use the same folder to save JSP build files to in order for your project to stay consistent.
- In the Advanced tab of the Site Definition dialog, select Remote Info from the list. The Remote Info screen appears.
- In the Access pop-up menu, choose "Local/Network".
- In the "Remote Folder" text field,
enter the path to the folder that contains your web build files.
Your web build files are located at
$NB_PROJ_HOME\build\web\. If you don't see$NB_PROJ_HOME\build\web\in the file browser, you need to build your project in NetBeans to make the folder appear. For instance, the remote site path may look like this:C:\Documents and Setting\your_user_name\My Documents\my_project\build\web\ - Check the box to "Refresh remote file list automatically".
- Check the box to "Automatically upload file to server on save".
- Leave the Site Definition dialog open.
Specify the Dreamweaver Testing Server Folder
The last step is to tell Dreamweaver how to preview your JSP files in case you want to use Dreamweaver's built-in preview function.
- In the advanced Site Definition dialog, click Testing Server in the list. The Testing Server screen appears.
- Select "JSP" from the Server Model pop-up menu.
- In the Access pop-up menu, select "Local/Network".
- For the Testing Server Folder, Dreamweaver correctly fills in
the same path you entered before (
$NB_PROJ_HOME\build\web\). - Check the box to "Refresh remote file list automatically".
- In the URL Prefix text box, enter the root URL
you would enter in a web browser to preview your project.
You can get the URL by copying it from the browser window
which is opened when you build and run your project from NetBeans.
It may look like this:
http://localhost:8084/my_project/ - Click OK to save the changes to the site configuration and close the Site Definition dialog. Click Done to close the Manage Sites dialog box.
Synching the local files with the web server folder
If you checked the box "Refresh remote file list automatically" and "Automatically upload file to server on save", Dreamweaver will synch your project files each time they change.
Workflow
Now you're set up to edit your project's source code in NetBeans IDE while you can do further HTML and JSP layouting using Dreamweaver as a visual editor. You can preview and test your JSP pages in the web browser not only by running your project in NetBeans, but also by clicking the preview button in Dreamweaver.
- Edit the Java and HTML code of your JSP project in the NetBeans IDE as usual.
Use the IDE's Palette to quickly access ready-made code snippets.
- Then, switch to Dreamweaver for additional visual layouting.
- You can check the layout in a web browser by either running the NetBeans project
or by Dreamweaver's preview function.
Related pages
↑返回目录
前一篇: Importing a 3rd Party Project as a NetBeans Free-Form Project
后一篇: Integrating NetBeans with other J2EE Server Vendors