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[4]

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[4]

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[4]

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

  1. #1 by david on June 23, 2011 - 5:01 pm

    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.

  2. #2 by Bibhas Bhattacharya on June 27, 2011 - 7:44 am

    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.

  3. #3 by david on June 27, 2011 - 12:59 pm

    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!

  4. #4 by madmax on October 19, 2011 - 12:48 am

    thank you for writing this!

  5. #5 by Aleksandar Lugonja on November 10, 2011 - 2:33 pm

    Thank you for great article
    Great work

  6. #6 by Bright_chen7 on November 15, 2011 - 4:20 am

    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

  7. #7 by Matthew Silver on November 23, 2011 - 11:26 pm

    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.

  8. #8 by Matthew Silver on November 23, 2011 - 11:48 pm

    I submitted the following bug to Eclipse:

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

  9. #9 by asivy on December 23, 2011 - 1:44 am

    nice thank you so much!!

  10. #10 by Prodyot on December 29, 2011 - 5:25 pm

    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.

  11. #11 by Prodyot on February 3, 2012 - 1:47 am

    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.

  12. #12 by Mark on April 10, 2012 - 7:41 am

    Thanks. This was very helpful.

  13. #13 by Mike on April 11, 2012 - 9:07 am

    Good Job 🙂 easy to do

  14. #14 by Abhishek on May 15, 2012 - 3:10 am

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

  15. #15 by Mynt on June 7, 2012 - 4:51 am

    Great place.
    Keep up the good work!

  16. #16 by Gary on July 13, 2012 - 2:52 pm

    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.

  17. #17 by Alan on August 8, 2012 - 2:56 pm

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

  18. #18 by Frustaci on August 11, 2012 - 10:31 pm

    lifesaver =P

  19. #19 by JuanPickselov on August 14, 2012 - 2:24 pm

    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

  20. #20 by Matt Silver on August 16, 2012 - 1:19 pm

    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.

  21. #21 by prashant on September 13, 2012 - 5:14 am

    Good .. Thanks

  22. #22 by jrweb on November 26, 2012 - 3:04 pm

    Nice tutorial. Thanks

  23. #23 by short Hair styles for women over 50 on December 21, 2012 - 12:42 pm

    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!!

  24. #24 by Zia Partovi on January 23, 2013 - 6:42 pm

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

  25. #25 by Vikas on January 24, 2013 - 3:47 am

    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..

  26. #26 by Tarun on February 11, 2014 - 2:53 pm

    Thanks a lot. Its really very helpful.

    Keep doing the great Job

  27. #27 by Diksha on March 27, 2014 - 8:26 am

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

  28. #28 by Matthew Silver on April 17, 2014 - 10:11 am

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

  29. #29 by Kirantej on November 3, 2015 - 12:21 am

    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.

(will not be published)

*