Coding HTML5 Pages Using Eclipse

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.

clip_image001

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.

clip_image002

4.   Select New HTML File (5) for the template and click Finish.

clip_image003

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.

clip_image005

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.

clip_image001

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:

clip_image003

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.

clip_image005

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.

clip_image007

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.

clip_image009

 

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.

 

clip_image011

 

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.

 

clip_image013

 

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.

 

clip_image015

 

12.  Likewise, scroll down and verify the type attribute is set to text.

 

clip_image017

 

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.

 

clip_image019

 

14.  Your input element should now look as follows:

 

clip_image021

 

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.

 

clip_image023

 

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.

 

clip_image025

 

5.   Click OK.

6.   Click the Use external web browser button.

7.   Check the box next to the new browser (e.g., Google Chrome).

 

clip_image027

 

8.   Click OK.

9.   Click the web browser icon in the toolbar.

 

clip_image029

 

The browser should open.

10.  Enter the URL for the page you created.

 

clip_image031

 

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.

 

clip_image033

 

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.

 

clip_image035

 

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:

WA1925 Enterprise Web Development using HTML5

Matthew Silver April 23, 2011

30 Comments

  • david

    thanks for taking time to write this, but i just installed eclipse helios (and I’m familiar with older releases as a java developer) but I don’t see web page editor as an option (only html editor). are you sure your web page editor didn’t come from elsewhere? I also installed the eclipse web toolkit, but it wasn’t in there either.

  • Bibhas Bhattacharya

    Eclipse can be downloaded in various forms. To get the web page editor, please download “Eclipse IDE for Java EE Developers” as the blog article states in the first sentence. It also provides a link to the download page.

  • david

    thank you for your reply. i thought i already had those features – but i was able to add them to my eclipse installation easily, and now i see the web page editor!

  • madmax

    thank you for writing this!

  • Aleksandar Lugonja

    Thank you for great article
    Great work

  • Bright_chen7

    when i used web page editor to do our example, the properties tab didn’t show anything, and then, pop up null exception.
    I think it is a bug for eclipse, i used eclipse indigo

  • Matthew Silver

    Yes I just tried it out in Indigo and got the same exception. It appears to be a bug in the Indigo release. I’ll post the issue on the Eclipse site.

  • Matthew Silver

    I submitted the following bug to Eclipse:

    https://bugs.eclipse.org/bugs/show_bug.cgi?id=364667

  • asivy

    nice thank you so much!!

  • Prodyot

    Hats off to you.
    You had really taken the pain to educate us.
    That is great.
    I will be looking forward to reading some more of your articles.
    I have a request.
    Can you step-by-step walk us through the iGoogle type user interface designing?
    That will be a great help.
    Thanks for caring.

  • Prodyot

    Pretty good and helpful tutorial.
    Actually I had downloaded Eclipse Web Developer’s version a few days back and was waiting for a Heavenly auspicious moment to unzip it.
    Good that I came across this tutorial.
    I already feel as if I had created a web page in HTML5 in eclipse.
    Thanks for the visual guidance and also thanks for the tutorial.

  • Mark

    Thanks. This was very helpful.

  • Good Job 🙂 easy to do

  • Abhishek

    Thanks for this. This was exactly what I needed. A very good tutorial.

  • Mynt

    Great place.
    Keep up the good work!

  • This is a great article. One thing I found that may be helpful. I’m using Eclipse Helios on Mac Snow Leopard, but I think this probably works across most Eclipse installs.

    Instead of manually typing in the URL to the page you want to view in the internal Web browser, if you right-click on the file name in the Project Explorer, then select Open With -> Web Browser, it will auto-insert the URL for you.

  • Nice tutorial but the HTML 5 elements such as canvas don’t seem to show up when pressing ctrl-space auto complete. Any suggestions?

  • Frustaci

    lifesaver =P

  • JuanPickselov

    you could also simply make your own snippets in the Snippets view, double click to add them to your page, and import/export into other workspaces and/or versions of Eclipse

  • Matt Silver

    Alan :
    Nice tutorial but the HTML 5 elements such as canvas don’t seem to show up when pressing ctrl-space auto complete. Any suggestions?

    Make sure you selected the HTML5 template (i.e., “New HTML File (5)” option) when creating the HTML file. The HTML template defaults to HTML 4.01 Transitional, which will not show you the new HTML5 elements when you press Ctrl-Space.

    If you’d like, for the existing file you created, change the doctype from:

    to:

    and you should see the new HTML5 elements if you press Ctrl-Space.

  • prashant

    Good .. Thanks

  • An interesting discussion is worth comment. I do think
    that you should write more on this subject matter, it might not be a taboo matter but usually folks don’t discuss these subjects. To the next! Many thanks!!

  • Zia Partovi

    Thank you very much for sharing this valuable tutorial with public.

  • Vikas

    really ,is an good.but when using it to changes in point that time it show unexpected result..& also plz use example to present ur theory..

  • Tarun

    Thanks a lot. Its really very helpful.

    Keep doing the great Job

  • […] 참고사이트 : https://www.webagesolutions.com/blog/archives/419 […]

  • Diksha

    Can we use html5 input types in eclipse juno if yes plz help

  • Matthew Silver

    Yes, the procedure is the same as what’s stated in the blog. See the section “Using the WYSIWIG Editor”, Step 13.

  • Kirantej

    Hey nice tutorial, thanks for this 🙂
    When I was trying to use the input type as ‘date’ instead of ‘text’, it is not working properly. It is still taking it as normal text instead of date.

Leave a Reply

Your email address will not be published. Required fields are marked *

Web age solutions blog Zones