Using VJET Plugin For JavaScript development


Problem Statement :

Writing JavaScript code in a normal text editor is very difficulty and it a developer may not be able to find out the mistake in his code while writing the code itself .  VJET JavaScript IDE  will help developer from unwanted mistakes like the above , we can use VJET javascipt IDE in place of standard text editors or simple JavaScript editors ,  to brings common IDE features to JavaScript. VJET JavaScript provide coding assistance and support to a developer while developing Sencha applications.

VJET Javascript plug-in advantages over normal text editor or simple javascript editors :

1. This plugin can be used as a Eclipse plugin , so the development in the IDE like eclipse will become easy for a java script developer.

2. We can get quality code  and  faster development.

Scope of this article:

  • Installation of VJET in Eclipse like a plugin.
  • How to set up our project to use this plugin to develop our own applications.
  • A real-time example by explaining real-time scenarios.
  • Creating our own Type Library.

Pre-requisites:

Eclipse and VJET plugin

How to do it:

Let us fallow the step-by-step process which lead us to achieving the requirement.

STEP 1 : Installation of VJET in eclipse like a plugin.

Install VJET as an Eclipse Plugin :

  • In your eclipse go to Help menu => Install New Software

1InstallPlugin

A pop-up window appears, as shown below. Click on the Add button 

2AvailableSoftwares

Another pop-up that will help to give the location of our plugin. In this pop-up we have to give the url which will download VJET plug-in in to eclipse.

3VJETInstallationURL

Continue the steps to complete the plug-in installation.

4VJETInstalled

STEP 2 : How to setup our project to use this plugin to develop our own applications.

For Using this plugin in the ExtJS or Sencha Touch application we need to have TL (Type libraries) of the ExtJS or Sencha Touch versions.

In this step we are going to see , how we can import and configure the projects to support ExtJS or Sencha Touch application development..

Import the TL project in to Eclipse :

Right-click in the Project Explorer area of Eclipse and click on Import->Import..

5ImportTLProjects

A pop-up window appears , as shown below. we need to select the “Existing Project into Workspace” in the General Section, and Click on the next.

6ImportPopUP

Click on the Browse button, and Go to the location where we have extracted the ExtJSTL-4.1 ,because this is the project which is helpful to give suggestions. Now Browse and select the TL project.

7ProjectLocation

8ProjectLocation

Click on Finish button.

9TLProjectImported

10TLProjectIMportCompleted

Importing the TL Project is Completed.

For using this TL Project imported in to out development.

Right Click and select New => Other..

11CreatedNewProject

Select VJET project and click on the NEXT >

12CreateVJETProject

Enter the project name , and click on the “Next” button.

13GiveProjectName

Go to “Projects” tab in the window. In the Project tab we have to give the TL Project as the Build path project. For this click on the “Add” button in this window
then a pop-up with existing projects will come.
14TLProjectLinking

15TLProjectLink2

Select the TL Project we have added earlier in the below pop-up , and click on OK.

16TLProjectAdd

click on the Finish button.

17TLPojectAdded

STEP 3 : A real-time example by explaining real-time scenarios. 

Now create a package which will be useful to separate the model,view,controller code. As this is View Related Code I am preparing the view.

18NewProjectCreated

Enter package name and click on Finish button.

19CreatingPackages

19CreatingPackages

Now create a JavaScript file for writing our code.

20PackageCreationCompleted

20PackageCreationCompleted

21CreatingJavaScriptFile

22CreateJSFileName

Now we will see how VJET project is giving suggestions while writing code , Just type Ext ( ExtJS library class) and a dot (.) and Ctrl+space will give you suggestions related to Ext class.

23UsingVJET

24UsingVJetForFields

STEP 4 : Creating our own Type Library.

What is Type Lib ?

A VJET type library is a type library which can be created by using the javascript core library code and VJET VJO type construction kit and VJET documentation for type declarations. By including this type libraries project in to your project path we can use these type libraries.

So Start Your Eclipse and Create a new VJET Project.

25CreatingOurOwnLibraries

Now we will create a package which will helpful to separate the functional areas.

26CreateOwnTLProject

27TLProjectCreationCompleted

Create a Otype which will be useful to get suggestions.

28CreatingOType

Enter name of the Otype file and package details.

29Otype

30OtypeDetails

It is give you a js class with normal prototype , now we have to write our code here.

31OtypeLibraryjs

32OtypeCode

Lets see how to use our Otype Class in our own projects . 

First Create new project to test it.

33CreateJSProject

34JSProjectName

Add Our custom library to the project so we can get suggestions related to that library files

35LinkOtypeLibraryWithJSProject

36LinkTLWithJSProject

Select the Custom Library from the Options and click on OK button.

37SelectTlProject

Custom Library is Added to our project.

38BuildPathSettings

Create a package to write our functional class.

39UsingVJETinJSProject

40CreateVJETPackage

41CreateVjetPackagecomplete

Create a JS class for writing our functionality.

42CreateVJETJSFile

Enter class name and click on finish

43CreateVJETjsFile2

Now try to use our custom library class.

44UsingTLProjectInJsFile

Summary :

We are able to create our Custom libraries with this plugin and how to use those custom library projects .

Tagged with: , ,
Posted in General, Sencha ExtJS, Sencha Touch

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: