The Helios release of the Eclipse IDE for Java EE Developers provides support for HTML5 development. Specifically, it allows you to create HTML5 pages using a new template, provides code completion for HTML5 elements, provides a Properties editor for HTML5 attributes, and provides a WYSIWYG editor for visual development of HTML5 pages.
Creating an HTML5 Page
Before creating an HTML5 page, it’s recommended to set the character encoding type to UTF-8. It defaults to ISO-8859-1. To do so:
1. Select Window->Preferences from the menu bar.
2. Expand Web and select HTML Files.
3. Select ISO 10646/Unicode(UTF-8) from the Encoding drop-down.
4. Click OK.
Creating an HTML5 page is easy. Simply follow these steps:
1. Select File->New->Other.
2. Expand Web and select HTML File. Click Next.
3. Enter a file name, select the parent folder and click Next.
4. Select New HTML File (5) for the template and click Finish.
The file will open with the HTML Editor, which provides syntax highlighting (coloring). The tags are displayed in green, the attributes in purple, the attribute values in blue, and the element values in black.
Notice that the document contains the new DOCTYPE element which is used to specify “non-quirks mode” (a.k.a. “standards mode”). It also contains the simplified meta element which is used to specify the UTF-8 character encoding.
Using Code Completion
Using code completion is the same as always. Simply press Ctrl-Space and a list of valid HTML5 elements will be listed.
The same thing applies to attributes. Stick your cursor inside the element’s start tag, press Ctrl-Space, and you’ll see a list of valid attributes:
Using the WYSIWYG Editor
The Helios release of Eclipse also has a WYSIWYG editor for HTML development. It allows you to visually develop your web pages by dragging and dropping widgets from a palette onto your page. Unfortunately, the palette doesn’t include any HTML5 elements at present, but the Properties view was updated to include HTML5 attributes. To make use of the new editor, follow these steps:
1. Close the HTML file if you already have it open using the HTML Editor.
2. Right click on the file and choose Open With->Web Page Editor.
The Web Page Editor will open. This is a multi-tab editor. By default, the Design tab is displayed, which offers a split view for easier editing. The top half of the editor displays the visual view of the page and the bottom half of the editor displays the source code. Note that there’s also a Preview tab which displays what the page will look like when rendered by Eclipse’s internal browser.
3. If you added the canvas element in the last part, go ahead and delete it.
4. In the right side of the editor, click the left arrow and the Palette will be displayed.
5. Expand the HTML 4.0 folder to see the list of HTML 4.0 elements. Once again, there are no new HTML5 elements included yet.
6. Scroll down inside the Palette and drag and drop the Text Field widget onto the page.
Notice that a form element is automatically added to the page. Also, notice that even though you added a text field to the page, the type attribute is not specified. It turns out that in HTML5 the type attribute defaults to “text” if not specified.
7. Select the text field in the top half of the editor.
8. Click on the Properties view and its Attributes tab.
9. Click on the drop-down to the right of autofocus and select autofocus.
10. Verify that the autofocus attribute is listed in the source code section of the editor. This sets the focus on this field when the form is rendered. Pre-HTML5, you had to do this with JavaScript code.
Note: The editor uses XHTML syntax by default. You don’t need to use XHTML syntax if you don’t want to in HTML5, since HTML is not XML.
11. Back in the Properties view, scroll down and select required from the drop-down for the required attribute. This means the user has to input a value for this field. Otherwise, he won’t be able to submit the form. Just like with the autofocus attribute, you used to have to do this with JavaScript code.
12. Likewise, scroll down and verify the type attribute is set to text.
13. While you’re there, click the drop-down to the right of type. Notice that it reflects the new HTML5 input types, including color, date, datetime, datetime-local, and email.
14. Your input element should now look as follows:
15. Drag and drop a Button element on the page to the right of the text field.
16. Change the value attribute to Submit in the Properties view.
17. Save the file.
Great! You’ve visually developed an HTML5 page using the Web Page Editor. Note that even if choose not to use this editor and continue using the HTML Editor, the Properties view is still available from there.
Opening the Web Page in a Browser
By default, if you click the browser icon in the Eclipse toolbar, it will open the internal browser, which is based on IE. Unless you’re using Windows 7, the version of IE that’s used is IE7 or IE8, neither of which provide much HTML5 support. Don’t despair. You can change the Eclipse settings to open a different browser, such as Google Chrome 10, Opera 11, or Firefox 4, which provide much better support for HTML5. To do so:
1. Select Window->Preferences from the menu bar.
2. Expand General and click Web Browser.
3. Click New.
4. Type the name of the browser and specify its location using the Browse button.
5. Click OK.
6. Click the Use external web browser button.
7. Check the box next to the new browser (e.g., Google Chrome).
8. Click OK.
9. Click the web browser icon in the toolbar.
The browser should open.
10. Enter the URL for the page you created.
Notice the cursor is blinking inside the text field, which means autofocus is working.
11. Click the Submit button without entering a value in the text field.
Notice an error message is displayed, which means the required attribute is working.
12. Now input a value and click Submit. This time the form should submit successfully. However, because we didn’t specify a form action, the original page will be displayed, since the form submits to itself.
Making the WYSIWYG Editor Your Default Editor
If you’d like, you can make the Web Page Editor your default editor for HTML files. To do so, follow these steps:
1. Select Window->Preferences from the menu bar.
2. Expand General->Editors and select File Associations.
3. Select .html from the File types list box.
4. Select the Web Page Editor option in the Associated editors list box.
5. Click the Default button to the right of it.
6. Verify the label (default) appears to the right of the Web Page Editor option.
7. Click OK.
Summary
In this blog posting, we examined how to use Eclipse Helios to create an HTML5 page using the new HTML5 template. We saw that the code completion drop-down was updated to include HTML5 elements. We sampled the new Web Page Editor, which provides us with the ability to develop pages visually. Last but not least, we learned how to change the default web browser used by Eclipse to an HTML5 compliant one.
For more information on HTML5 development, check out our new HTML5 course:
