<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body link="#355491" alink="#4262a1" vlink="#355491" style="background: #e2e2e2; margin: 0; padding: 20px;">
<div>
<table cellpadding="0" bgcolor="#FFFFFF" border="0" cellspacing="0" style="border: 1px solid #dadada; margin-bottom: 30px; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border: solid 2px #ccc; background: #dadada; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td bgcolor="#000000" valign="middle" height="58px" style="border-bottom: 1px solid #ccc; padding: 20px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;">
<h1 style="color: #333333; font: bold 22px Arial, Helvetica, sans-serif; margin: 0; display: block !important;">
<!-- To have a header image/logo replace the name below with your img tag -->
<!-- Email clients will render the images when the message is read so any image -->
<!-- must be made available on a public server, so that all recipients can load the image. -->
<a href="https://community.jboss.org/index.jspa" style="text-decoration: none; color: #E1E1E1">JBoss Community</a></h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font: normal 12px Arial, Helvetica, sans-serif; color:#333333; padding: 20px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;"><h3 style="margin: 10px 0 5px; font-size: 17px; font-weight: normal;">
Eclipse VJET - a new 3rd-party tool available in Central
</h3>
<span style="margin-bottom: 10px;">
modified by <a href="https://community.jboss.org/people/vrubezhny">Victor Rubezhny</a> in <i>JBoss Tools</i> - <a href="https://community.jboss.org/docs/DOC-48905">View the full document</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><p>Eclipse VJET is a new 3rd-party tool that is available for installation from Central. Well integrated into Eclipse WTP, VJET aims to replace standard JSDT (JavaScript Development Tools) in Eclipse. VJET provides its own JavaScript Editor ('VJET Editor') with Content Assistant facility that allows you create/edit JavaScript files (*.js) as well as to edit JavaScripts on HTML pages. It also provides a number of views and outlines that help to browse the existing JavaScript structure, Type Space, Types, Members and so on. </p><h2>Installing Eclipse VJET into JBoss Developer Studio</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Due to simplify the Eclipse VJET installation and to allow our users to have it handy we've included the Eclipse VJET to 3rd-party products available for installation from JBoss Central. To install Eclipse VJET you need to perform the following few simple steps:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><ul><li style="text-align: start;">Open JBoss Central and select 'Software/Update' tab and type 'vjet' in filter field. You'll see the only 'Eclipse VJET' item in the list of 3rd-party software under 'Web and Mobile Development'. Select 'Eclipse VJET' and press 'Install' button below:</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21025/vjet-01-installation-from-central.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21025/vjet-01-installation-from-central.png </span></a></p><ul><li style="text-align: start;">Make sure that at least 'Eclipse VJET JavaScript IDE (Incubation)' item is selected and press 'Next >' button:</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21026/vjet-02-installation-from-central.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21026/vjet-02-installation-from-central.png </span></a></p><ul><li style="text-align: start;">Select at least one License in the list and make sure that 'I accept the terms...' radio is selected, then press 'Next >' button:</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21027/vjet-03-installation-from-central.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21027/vjet-03-installation-from-central.png </span></a></p><ul><li style="text-align: start;">Wait a bit while installation process is finished...</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21028/vjet-04-installation-from-central.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21028/vjet-04-installation-from-central.png </span></a></p><ul><li style="text-align: start;">... then restart JBoss Developer Studio</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21029/vjet-05-installation-from-central.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21029/vjet-05-installation-from-central.png </span></a></p><p style="text-align: start;">Most part of installation is finished so you can try to use Eclipse VJET's features.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2 style="text-align: start;">Using Eclipse VJET</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">We've used HTML 5 Example project imported from JBoss Central hereafter:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21030/vjet-06-import-a-project.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21030/vjet-06-import-a-project.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">But you can create a new project from scratch or use an existing project. Eclipse VJET requires to be enabled on a project you're developing and suggests you to make it automatically when you're opening a JavaScript file for the first time:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21031/vjet-07-open-a-js-file.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21031/vjet-07-open-a-js-file.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">Press 'Enable' button to enable Eclipse VJET on your project.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">Most usefull feature of VJET is Content Assistant. For a number of reasons, VJET requires a file to be saved due to provide a Content Assist. So, we've made a new line and saved the document:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21032/vjet-08-content-assist.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21032/vjet-08-content-assist.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">...and invoked Content Assistant by pressing Ctrl-Space:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21033/vjet-09-content-assist.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21033/vjet-09-content-assist.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">...and then applied the selected property on the document:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21034/vjet-10-content-assist-applyed.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21034/vjet-10-content-assist-applyed.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2 style="text-align: start;">Using Eclipse VJET's Type Libraries</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">JavaScript is a scripting language that is not precompiled, so the Object Types are poorly calculated. But there are number of well known libraries that are supported by Eclipse VJET in form of Type Library Projects that could be imported into your workspace due to provide types and method signatures for the Content Assist and Validation.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">If you want such information to be available for your project:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><ul><li style="text-align: start;">Clone the Type Libraries Project from Eclipse's Git repository 'git://git.eclipse.org/gitroot/vjet/org.eclipse.vjet.typelibs.git' into a local folder:</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21035/vjet-11-getting-type-libraries.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21035/vjet-11-getting-type-libraries.png </span></a></p><ul><li style="text-align: start;">Then return to your Workspace, select 'File->Import->Existing Projects into Workspace' and press 'Next >'</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21036/vjet-12-import-type-libraries-as-existing-projects.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21036/vjet-12-import-type-libraries-as-existing-projects.png </span></a></p><ul><li style="text-align: start;">Find and select 'org.eclipse.vjet.typelibs' folder and press 'OK'</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21037/vjet-13-import-type-libraries.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21037/vjet-13-import-type-libraries.png </span></a></p><ul><li style="text-align: start;">Then select the Type Library project(s) you want to add to your project and press 'Finish' - the required Type Library Project(s) will be imported into your Workspace</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21038/vjet-14-import-type-libraries.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21038/vjet-14-import-type-libraries.png </span></a></p><ul><li style="text-align: start;">Right-click on your project and select 'Properties->VJET->VJET Build Path', then select 'Projects' Tab and press 'Add' button. Then select imported Type Library Project(s) and press 'OK' button:</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21039/vjet-15-setup-type-libraries-on-a-project.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21039/vjet-15-setup-type-libraries-on-a-project.png </span></a></p><ul><li style="text-align: start;">Now you can use the information provided by selected Type Library in Content Assistant for your project, so you're able to select...</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21040/vjet-16-content-assist.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21040/vjet-16-content-assist.png </span></a></p><ul><li style="text-align: start;">... and apply these proposals:</li></ul><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21041/vjet-17-content-assist-applyed.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21041/vjet-17-content-assist-applyed.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">Without having the Type Library project imported and set up, the Content Assistant would be incomplete in most cases. For example, see the proposals of Content Assist invoked at the same file and position but with no jQuery Type Library project imported and referenced:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21042/vjet-18-content-assist-without-tl.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21042/vjet-18-content-assist-without-tl.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2 style="text-align: start;">Eclipse VJET Views to browse the project information</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">Eclipse VJET provides a number of views that may help you to view a project details:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21044/vjet-19-vjet-views.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21044/vjet-19-vjet-views.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">AST View and Type Space View - AST Trees of original and recovered JavaScript and information on Types used in JavaScript:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21045/vjet-20-ast-and-typespace-views.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21045/vjet-20-ast-and-typespace-views.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;">Outline, Types and Members Views:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="text-align: start;"><a href="https://community.jboss.org/servlet/JiveServlet/showImage/21046/vjet-21-types-and-members-views.png"><span> https://community.jboss.org/servlet/JiveServlet/downloadImage/21046/vjet-21-types-and-members-views.png </span></a></p></div>
<div style="background-color: #f4f4f4; padding: 10px; margin-top: 20px;">
<p style="margin: 0;">Comment by <a href="https://community.jboss.org/docs/DOC-48905">going to Community</a></p>
<p style="margin: 0;">Create a new document in JBoss Tools at <a href="https://community.jboss.org/choose-container!input.jspa?contentType=102&containerType=14&container=2128">Community</a></p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>