本网站只能被运行在支持JavaScript脚本的环境中

使用NetBeans 7.4进行Web开发

本节概述

在上一节中,我们介绍了在进行Web开发时可以使用的几个著名的综合开发环境。本节针对最新版的大幅度加强Web开发功能的NetBeans进行详细介绍。

NetBeans 7.4中被加强的Web开发功能

NetBeans为一个依赖于Java运行环境的综合开发环境。由Oracle(被收购前为Sun Microsystems)公司赞助,NetBeans社区开发。支持对于PHP、Java、C、HTML、JavaScript等各种语言的编辑。

自NetBeans 7.3版开始,大幅度加强HTML 5相关代码编辑功能,支持元素查看及JavaScript代码调试功能。通过在Google Chrome浏览器中安装扩展,可以与NetBeans进行各种协作开发功能。

本文介绍NetBeans 7.4版中可以使用的,被加强的Web开发功能。在安装了NetBeans 7.4版之后,可以对这些Web开发功能进行确认。

安装NetBeans

可以在NetBeans官网上点击页面右侧的“Download”按钮免费下载安装最新版NetBeans。


NetBeans官网

在NetBeans下载页面中,提供了多种语言、操作系统及功能的NetBeans安装文件。开发者可以自行选择自己所需要的语言、操作系统及功能进行下载。


NetBeans下载页面

在安装NetBeans之前,首先需要安装Java JDK。未安装Java JDK的读者可以首先从Oracle的下载页面上下载安装Java JDK。

在下载了NetBeans安装文件之后,双击运行该文件,然后根据向导提示进行安装。


开始安装软件

许可证内容

JUnit许可证

确认安装路径及Java JDK路径

确认GlassFish路径

安装的最终确认路径

安装结束画面

在安装NetBeans之后,启动NetBeans应用程序。出现如下所示的开始画面,表示安装成功。


应用程序开始画面

安装NetBeans Connector

NetBeans Connector为Google Chrome浏览器的一个扩展,用于与NetBeans协同开发。在安装了Google Chrome浏览器之后,可以与NetBeans结合进行元素查看,JavaScript脚本代码调试,单元测试等操作。在使用NetBeans开发Web网站或Web应用程序时,推荐安装该扩展。

可以通过在Chrome网上应用商店的NetBeans Connector下载页面上点击“免费”按钮来安装NetBeans Connector。


NetBeans Connector下载页面

点击“免费”按钮

扩展被安装成功之后,页面上出现“已添加至CHROME”提示信息,如下图所示。


NetBeans Connector扩展安装成功

现在,NetBeans的所有准备工作已经完成,接下来开始体验尝试NetBeans的功能。

创建及运行项目

可以通过NetBeans软件菜单新建一个项目。由于我们将要创建一个基于HTML 5技术的Web网站或Web应用程序,所以点击“文件”菜单下的“新建项目”子菜单,然后在“类别”中点击“HTML 5”项目,然后在右边的“项目”中点击“HTML 5应用程序”,如下图所示。


新建HTML 5应用程序

点击“下一步”按钮后,输入项目名与项目保存位置,默认项目保存位置为“我的文档”文件下的NetBeansProjects子文件夹,如下图所示。


输入项目名与项目保存位置

点击“下一步”按钮后,可以选择项目使用模板,可以使用自己准备的模板,也可以在线下载联机模板。


选择项目使用模板

可以使用的在线模板如下所示。

  • Angular JS Seed - Angular JS项目用模板
  • Initializr: Bootstrap - Initializr的Bootstrap模板
  • Initializr: Classic - Initializer的Classic H5BP模板
  • Initializr: Responsive - Initializer的自适应式模板
  • HTML5 Boilerplate v4.0.0 - HTML5 Boilerplate的模板(4.0.0版本)
  • HTML5 Boilerplate v3.0.2 - HTML5 Boilerplate的模板(3.0.2版本)
  • Twitter Bootstrap - Twitter Bootstrap的模板
  • Mobile Boilerplate - Mobile Boilerplate的模板

此处我们不使用任何模板,直接点击“下一步”按钮。

接下来选择我们需要使用的JavaScript框架。可以使用的框架及版本被显示在画面左边,选择需要使用的框架后,将从CDNJS上下载这些框架。


框架选择页面

可以通过搜索选择目标框架

点击“完成”按钮后,将自动打开被创建的项目中被自动创建的index.html文件,如下图所示。


项目创建完成后自动打开被创建的项目中被自动创建的index.html文件

项目被创建完成后,可以在Web浏览器中确认index.html文件的显示效果。点击工具条上的运行项目按钮(绿色向右箭头),在Google Chrome浏览器中安装了NetBeans Connector扩展的前提下,将在Google Chrome浏览器中显示NetBeans开发环境中正在编辑的页面,如下图所示。


在Google Chrome浏览器中显示NetBeans开发环境中正在编辑的页面

使用NetBeans Connector进行调试

可以通过NetBeans Connector的使用在NetBeans中进行各种代码的调试。

实时预览

可以在NetBeans中保存修改后的代码之后在Google Chrome浏览器中显示更新后的页面。将代码保存之后,观察Google Chrome浏览器,浏览器中自动显示更新后的页面,如下图所示。


在NetBeans中保存修改后的代码之后Google Chrome浏览器中自动显示被修改后的页面

查看元素

在NetBeans Connector功能未被取消的状态下点击页面中的任何元素,该元素相关CSS样式代码将会出现在软件窗口右部,如下图所示。


查看元素样式代码

调节窗口尺寸

可以通过单击Google Chrome浏览器地址栏中显示的NetBeans图标来调整窗口尺寸。可自动调整的窗口尺寸如下所示。

  • 桌面PC:宽1,280px x 高1024px
  • 平板电脑横向:宽1,024px x 高768px
  • 平板电脑纵向:宽768px x 高1,024px
  • 智能手机横向:宽480px x 高320px
  • 智能手机纵向:宽320px x 高480px
  • 宽屏幕:宽1,680px x 高1,050px
  • 上网本:宽1,024px x 高600px
  • Size to Fit:自动最大化显示

窗口尺寸调整功能

选取上述某一个选项后,浏览器窗口尺寸将被自动调整为指定尺寸。可以通过这种方法来确认自适应Web网站设计的页面显示效果。

另外,可以通过单击窗口尺寸选取清单中的“Customize”选项来添加,编辑或删除窗口尺寸。


在Customize Windows Settings画面中编辑窗口尺寸

NetBeans中的内置功能

在NetBeans中,提供了多种内置功能。此处介绍几个与Web开发相关的主要功能。

导航器

在导航器面板中,将自动根据被打开的文件种类以树形结构显示该文件的导航内容。在树形结构中进行逐级展开后,双击某元素,被打开的文件将自动跳转到元素代码处。

被打开的各种文件在导航器中的信息如下所示:

  • HTML文件:显示DOM树。在指定属性值的情况下,同时显示属性值。
  • CSS文件:针对ID、样式类名、元素名、CSS样式规则进行分类显示。
  • JavaScript文件:将变量、对象、作用域、属性、事件、方法信息以树形结构进行显示。

HTML文件导航器

CSS文件导航器

JavaScript文件导航器

代码智能提示

在编辑代码的过程中,NetBeans软件将根据正在编辑的文件种类与开发者输入的代码随时显示代码智能提示,例如当用户在HTML页面中输入“<vid”文字后,软件中显示HTML 5中video元素名及该元素的帮助信息,如下图所示。


HTML代码智能提示

在编辑HTML代码的过程中,在文件空白处按下Ctrl+Space快捷键,在不与其他正在使用的软件中定义的Ctrl+Space快捷键相冲突的情况下,NetBeans软件中显示可以输入的元素,如下图所示。


HTML代码智能提示

选取智能提示中列出的元素后,NetBeans软件中显示对话框。开发者在该对话框中输入或选取元素信息后,点击“确定”按钮,该元素将被插入到代码中。


选取智能提示中列出的元素后NetBeans软件中显示对话框

在编辑CSS样式代码的过程中,NetBeans软件也将随时给出代码智能提示,如下图所示。


CSS样式代码智能提示

在编辑JavaScript脚本代码的过程中,NetBeans软件也将随时给出对象信息、JavaScript API或各框架API中的信息,如下图所示。


JavaScript脚本代码智能提示

历史记录

点击编辑器上部的“历史记录”标签,标签下部将显示被编辑文件的编辑历史记录。如果与Subversion或Git等版本管理系统协同开发,则可以在这些版本管理系统中保存编辑历史记录。


代码编辑历史记录

在编辑历史记录中显示了文件的保存时间、相关信息、与上一版本的区别。单击“源”标签,可以返回代码编辑画面。

显示、缩进与代码智能提示的设定

可以通过点击“工具”菜单下的“选项”子菜单,然后点击“编辑器”的操作设定编辑器的与显示、代码缩进及代码智能提示相关的选项。

在“格式设置”标签面板中,可以设置缩进方式,缩进空格数以及换行方式等选项。


“格式设置”标签面板

在“代码完成”标签面板中,可以设置与代码智能提示相关的选项。


“代码完成”标签面板

在“提示”标签面板中,可以针对HTML语言或CSS语言设置需要显示错误提示或警告提示的规则。


“提示”标签面板