Eclipse has been the editor of choice for Web Application Development for a while now – especially for Java-powered multi-tiered apps. That being said, there are many flavors of Eclipse that target more straight ahead Web projects, such as those that feature JavaScript, or a collection of static pages. The Helios release 2 of the Eclipse IDE for Java EE Developers added support for HTML5-specific development. Some of the goodies that Eclipse provides include HTML5 page templates, code completion for HTML5 elements, a Properties editor for HTML5 attributes, and a WYSIWYG editor for visual development of your HTML5 pages. In today’s article, I’ll show you how to setup a static HTML5 Web project in Eclipse Juno. Show Downloading and Installing Eclipse JunoEclipse Juno is available for download from the eclipse.org site. HTML5 support was added to the second Helios release. It’s your best bet is you only want to create static web pages and want to minimize the download time. The latest and greatest at this time is Juno. The specific flavor that we’re going to use is the Eclipse IDE for Java EE Developers. On the download page, you’ll see several links for different operating systems on the right-hand side of the page. Supported OSes include Windows 32 & 64 bit, Mac OS X (Cocoa 32 & 64), as well as Linux 32 & 64 bit. All versions are compressed as .zip archives for Windows and .tar files for Mac and Linux. Each archive is a self contained installation, so there’s no fancy install wizards to go through or, in the case of Windows, DLL files going into your System directory. Just decide where you want to put Eclipse and extract to that folder. The downside to not having an installation program is that, at least in Windows, there is not program group created in your Start menu. Therefore, I recommend creating a shortcut to the eclipse executable in the “eclipse” root of the installation archive. Designating a WorkspaceYou probably know the drill already, but for those of you who are new to Eclipse, this bears going over. A workspace is a place to group related projects together. Every time that you launch Eclipse, it will ask you to choose a workspace to work from, unless you tell it to always open the same one. If it’s the first time that you run eclipse, you’ll have to choose a folder to store your projects in. By convention, I like to include the word “workspace” in the folder name so that workspaces are easier to find later. A good name for this one might be “Web workspace”. Creating the ProjectHelios Eclipse features projects specifically for Web development – namely JavaScript and Static Web Projects, like the one we are going to create – while Juno also supports dynamic web sites that include server-side smarts. Having said that, you can install a plugin for Helios such as the Spring Tools Suite to add support for dynamic web projects. To create the project, Select New > Static Web Project from the main menu. If you don’t see it there, select Other… to bring up the Select a Wizard dialog. Then expand the Web folder; you’ll see “Static Web Project” there. Select it and click Next >. On the Static Web Project screen, give your project a name, like “HTML5 Demo”, and click Next >. On the following screen, note that the space between HTML5 and Demo is replaced by an underscore. Click Finish to create the project. Adding an HTML FileExpand the HTML5 Demo folder in the Project Explorer, right-click on the WebContent folder and select New > HTML File from the popup menu. On the “Create a New HTML File” screen of the “New HTML file” wizard, enter “index” in the File name field. Eclipse will automatically add the extension. Click Next > On the Select HTML Template screen you can see the inclusion of an HTML5 template – New HTML File (5). Select it and click Finish to create the new HTML file. That will also open it in the Editor pane: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> </body> </html> Changing the Character EncodingThe default character set is “ISO-8859-1”. There are two ways to change it: globally or on a case-by-case basis. The global settings can be located via Window > Preferences from the menu bar. On the Preferences dialog, expand the Web item and select HTML Files. On that screen, you’ll see an Encoding drop-down. It contains numerous character sets to choose from. I tend to favor ISO 10646/Unicode(UTF-8) myself. There are also settings for the default file extension (suffix) and encoding when loading files. Click OK to save any changes and close the dialog. The encoding of a specific page can be accessed via the Properties dialog. Right click the index.html page in Project Explorer to bring up the popup menu and select Properties at the bottom. Under Text file encoding, there is a radio button that allows you to select the character set from a drop-down. It contains far less entries than those of the global preferences, but it does have the most common character sets, including UTF-8. Changing the encoding from here doesn’t change it in the meta tag either; you’ll have to do that manually. Sự kết luậnHôm nay chúng ta đã thấy cách sử dụng Eclipse để tạo một dự án web tĩnh bằng cách sử dụng mẫu HTML5 mới.Trong bài viết tiếp theo, chúng tôi sẽ xem xét cách sử dụng tính năng tự động hoàn thành, trình soạn thảo WYSIWYG (những gì bạn thấy là những gì bạn nhận được) và tìm hiểu cách tạo các mẫu HTML5 của riêng chúng tôi.
 Rob Gravelle Rob Gravelle cư trú tại Ottawa, Canada và là một bậc thầy CNTT trong hơn 20 năm.Vào thời điểm đó, Rob đã xây dựng các hệ thống cho các tổ chức liên quan đến tình báo như Dịch vụ Biên phòng Canada và các doanh nghiệp thương mại khác nhau.Trong thời gian rảnh rỗi, Rob đã trở thành một nghệ sĩ âm nhạc thành đạt với một số bản phát hành đĩa CD và kỹ thuật số cho tín dụng của mình. |
