Javascript - Using Eclipse

I create web pages using notepad and the Chrome browser. Granted, IDE's provide a lot of features I really like, but I prefer using a system that works everywhere without having to install some software. (Unfortunately, notepad was changed in Windows 10 and, as a result, I still prefer to edit in Windows XP.)

At any rate, I decided to try the Eclipse IDE to see what features are currently available. In the past, when I used Eclipse to develop Android (highly structured Java) apps, I found it to be slow and clunky. (To be expected since it is written in Java.) This will give me a chance to see if it has improved.

At the time of writing this, the current Eclipse version is Oxygen. The comments on this page refer to that version.

The bottom line is simple - don't waste your time with this.

Installation

As of Feb 2018, the current version of Eclipse is Oxygen. I downloaded it to a Windows 10 system, and clicked Run - Big mistake. When prompted, I selected

Eclipse IDE for JavaScript and Web Developers

and disabled creating the desktop icon (those are worthless).

The installation failed - nice red error bar - something about not being able to rename the cache file.

I restarted the install with - run as administrator - that worked ! (Windows 10 is a real pain - If an install program creates a file, it should be able to rename it without having to run as administrator.)

Once the installation is complete, be sure to go to the downloads directory and delete the 46.4 MB install file - no need to clutter your system with worthless junk! (On my system, I deleted this after the install completed, but before the installer closed. Based on the available options, it is possible that the installer might have automatically deleted this file - not sure.)

BTW, this installed 2 (two) copies of Eclipse on my system

One partial (the one that failed), and
One complete (with a different name)

First attempt

This is not really a web developer IDE

The html interface is hidden - hard to find
It requires node.js to debug/test your code
There are no tutorials

In other words - the default Eclipse IDE has no place in web development.

When I navigated to

Run / Run Configurations...

it clearly states that my javascript code is a Node.js Application. However, one of the options is HTTP Preview.

That dialog is also available by

Right clicking the filename in the source tree, and
Selecting

Funny that the Eclipse web site does not say anything about node.js being required.

Basic html editing

I am very disappointed with this IDE - when I used it for Android development, it provided a WYSIWYG interface that showed exactly where the UI components would display. However, the html editor just shows text - no WYSIWYG display.

There are two text-only features that will help

Template based code completion
Property window

In my opinion, the code completion is fairly weak for html (much better for javascript, but still not good).

Plugins

I specifically selected the Eclipse IDE for JavaScript and Web Developers installation option so that I would get the tools necessary to create web pages. It included the Eclipse Web Developer Tools which is supposed to provide html, css, JSON, and javascript editors. However, the html editor is fairly basic and does not provide a WYSIWYG interface.

The Eclipse Web Page Editor is supposed to be included with the Web Tools Platform (WTP) - however, it does not appear to be a part of my system. Specifically, that page clearly states that the Web Tools Platform (WTP) includes JavaServer Faces Tools (JSF).

Web Page Editor

In previous Eclipse editions, the Web Page Editor permitted WYSIWYG web form (html) development. After several hours of searching, it appears that that option is no longer available. (At least, I was never able to figure out how to activate it.)

Many forums, blogs, and questions refer to it - but none say that it is no longer available. It is just that the option is never where that help says it should be.

The ONLY reason I tried to get Eclipse running was to use that feature, As a result, I can safely say that Eclipse has limited to no value when designing web pages!

References

Web Page Editor In Eclipse | Code Factory December 07, 2017

How to use it, but NOT where to get it.

WTP FAQ

Does the WTP include a visual JSP editor?

Yes! Check the Open With... context menu on your web pages for the Web Page Editor.

webtools

Indicates that JavaServer Faces (JSF) is included

I posted a request for help on the Eclipse Community Forums and though it indicates that over 100 people have read it, no one has posted any help. That was when I realized that I would have to figure this out for myself. As a result, I decided to just shotgun the problem and see what happens. (See next section.)

(The original forum post was on 02-28-18. As of 03-07-18, over 2,200 people had viewed my request for help - and there were still no replies. Actually, very few of the requests for help have replies - yet another indication that Eclipse should not be used. At any rate, I posted a link to this page 06-03-18 so everyone can know the answer.)

Shotgunning

I am completely lost - so it is time for some shotgunning.

I installed the Eclipse Web Developer Tools - seems logical
The online help keeps mentioning JavaServer Faces - I don't want java, I don't want a server, so (il)logically, this is where the Web Page Editor is loaded/stored

So, I searched the Eclipse Marketplace for JavaServer (seems logical) - nothing. Then I tried jsf - several hits including Eclipse Java EE Developer Tools 3.9.1a which includes JavaServer Faces (JSF) and Java Server Pages (JSP) - both of which show up on some of the related help pages.

Eclipse Web Developer Tools 3.9.1a

Includes the HTML, CSS, and JSON Editors, and JavaScript Development Tools from the Eclipse Web Tools Platform project, aimed at supporting client-side web development and node.js applications. Also installs the XML, XML Schema, and DTD Editors from the Eclipse Web Tools Platform project.

If you need to edit HTML, CSS, and JavaScript files, whether you're developing web applications or not, whatever the back-end, this one's for you.

Eclipse Java EE Developer Tools 3.9.1a

Enables Enterprise Java Bean, Java Enterprise Application, Fragments, and Connector, Java Web Application, JavaServer Faces (JSF), Java Server Pages (JSP), Java Servlet, Java Web Services, and Tag Library development and debugging, plus Java Enterprise server and Java Servlet Container launching and debugging. Includes the JSP, HTML, CSS, and JSON Editors, JavaScript Developer Tools, the XML, XML Schema, and DTD Editors from the Eclipse Web Tools Platform project.

If you're developing web applications with a Java-based back-end, this one's for you.

When I manually installed Eclipse Java EE Developer Tools 3.9.1a, many of the options were not selected. I added (checked) the following

JSF Tools
JSF Tools - Tag Library Metadata (probably not needed)
JSF Tools - Web Page Editor (this is what I've been looking for)

After installing the new libraries, you will be required to restart Eclipse - be sure to wait until prompted, it may LOOK like the install is complete, but it isn't until you are prompted to restart. When I restarted it too soon, it said that I installed Gitflow Nightly (whatever that is - I didn't intentionally select it) and that Eclipse Java EE Developer Tools 3.9.1a was NOT installed. As a result, I "installed" it a second time and waited until prompted to restart Eclipse.

Finally, the Web Page Editor is available - Unfortunately, it is not usable until the following windows are manually opened (these should be automatic - by default)

Window / Show View / Other... / General / Palette
Window / Show View / Other... / General / Properties

Both of these will open in the lower panel (where the are worthless) - simply drag and dock each of them in the left vertical panel. For the Properties display, you will need to resize the first column so that the Value column will be visible. (Again, this should have been done by default.) These will both still be there the next time you run (open) Eclipse.

The only (obvious) remaining problem is that only html 4 objects are displayed - and all of my applications use html 5 objects (mainly the canvas (for graphs) and number input field).

You know, I am developing in javascript and html. I don't want java (and I really don't like java) so therefore it makes perfect sense (but not to me) that I would have to install the java tools to work with javascript.

The key to figuring this out was on one of the pages I found when searching the web for Web Page Editor. WTP Tutorials - JavaServer Faces Tools Tutorial indicates that the JavaServer Faces library might contain the the desired editor.

The JSF Tools Project-contributed Web Page Editor (WPE) .....

It never makes anything clear (though, in hind site, all the necessary information was there). Searches under Help/Eclipse Marketplace... for JavaServer Faces found nothing, but a search for jsf located Eclipse Java EE Developer Tools 3.9.1a and I took a chance.

Please note that both the Web Tools Platform (WTP) and Eclipse Java EE Developer Tools 3.9.1a claim to include JavaServer Faces, but that I had to load the second library to actually get that functionality!

Disappointments

Well - I finally got the preview editor to work - sort of. In my opinion, this has been a complete waste of time, mainly for the following reasons.

Styles are not displayed in the WYSIWYG panel: I added borders to an image - not displayed
I set the absolute position - not displayed
In the property editor, clicking in style does not open the style dialog box: In Delphi, the properties were always connected to their appropriate dialog boxes
Right clicking objects in the Outline panel does not produce the same menu as right clicking in the WYSIWYG panel: This is not a consistent design
When setting the border style via the dialog, each side must be set separately: Normally, the style is set for all 4 sides with a single declaration, not 4
The Styles dialog box is a reasonable first pass: However, it lacks many properties typically used in a style sheet - such as border

Without these features, Eclipse is hardly worth the effort.

Keyboard shortcuts

It isn't so much that these are shortcuts - rather, you must know these to use the javascript editor.

Ctrl-space - show templates

In the html editor, Ctrl-shift-space shows the available properties.

There are probably more, but I gave up and stopped trying before finding them.

Bottom line

To say that I have a low opinion of

The help
The tutorials
The Web Page Editor capability

would be an understatement.

I have previously developed Android apps with Eclipse. While that is not something I would wish on anyone, the WYSIWYG UI builder for Java components was much better than the editor provided for simple html pages. (Much!!) In fact, that is the main reason I thought it would be worth trying to get the Web Page Editor working.

After 3 days this is a significant disappointment and I am going back to using notepad and web searches to build highly interactive web pages. To be fair, I did not spend much time evaluating the javascript editor and it appears to be pretty good. (It provides syntax highlighting and templates) However, considering all the extra baggage that comes with Eclipse (special directory names, lots of extra [unused] directories and files), it is my opinion that Eclipse is simply not worth the effort.

To be clear, for server side applications and/or Android applications I would probably use Eclipse - but not for client side applications.

In general - The best editor is the one you know!

Author: Robert Clemenzi