Teniga_Suite_User_Guide.doc - of /ubuntu

searchcoilSoftware and s/w Development

Aug 15, 2012 (5 years and 3 months ago)

278 views

1

Introduction

1.1

What is teniga suite?

Teniga suite
is
a
n advanced

javascript editor with lots of functions such as syntax
highlighting,
grammar check, type check, code completion and so forth.
It is a module of
NetBeans
.
It is quite easy for developers to wri
te javascript code using teniga suite.


1.2

How can I install teniga?

Before you install the teniga suite, make sure that your J
RE

version is
5.0

or higher.
The
version of NetBeans platform is 5.5.


Because teniga is packed as a
NetBeans
module file (.nbm),
It

is quite easy for developers to
install teniga javascript suite.
Just follow the standard way of installing normal NetBeans
modules and

you can easily
enjoy the conveniences brought by this suite.

1.3

Quick start

First of all, let’s take a glance at the devel
op environment of the teniga suite.
After installing
the teniga, you can simply create a javascript file by right clicking the certain folder
in which
you want to place the file, and choose “
文件
/
文件夹


menu
.
A
fter doing this, a popup
window as follows appeared.


I
f the teniga module installed correctly, a folder called

Javascript


appears in the

类别


list.
By
clicking

the

Javascript


folder, a

JavascriptTemplate.js


appears in the list on the

right.

Select the item in the right list
and

click

下一步


button, a window pops up to notice you to
enter the file name and location of the javascript file, enter the name then click

完成


button,
a javascript file with the name you have entered is created
in the folder you have selected.


Now, you can type some code in the file to enjoy the conveniences that teniga has brought to
you.

2

Overview of Teniga s
uite

2.1

Development perspective

Now let

s take a look at the teniga workbench.
A
fter creating a javascript

file, a
n

editor pane
as follows
is opened
automatically
.


T
eniga suite contains three major parts called explorer parts as on the
top left
, navigator on
the bottom left and editor part on the right side.

L
et

me give some more information on each
of the p
art.


Explorer part has a tree view to
organize

the proj
ects and files you have created. I
t is a
component

of NetBeans

platform
.
T
eniga use this component to facilities the organization of
huge amount of javascript files.
Y
ou can place javascript files whe
rever you want.
T
his part
plays a role of navigating javascript files.


O
n the left bottom lies the javascript navigator.
I
t is derived from navigation component
provided by NetBeans platform.
It is used to view the outline of a javascript file.
B
y selecti
ng
the javascript file node in the explorer part or opening a javascript editor, the tree based
outline of the javascript file can be
presented in the navigator.


Finally, let

s talk about the most attractive and exciting part of the teniga suite, that is
javascript editor part located on the right side.

A
s you know, the most valuable function of a
certain IDE is to provide a code editor with a great number of useful functions
. As a
n

editor
plug
-
in

of the NetBeans platform, teniga editor indeed provide
s

muc
h more in coding the
javascript.

Besides some common functions provided by NetBeans platform, teniga

provides
almost every major function related to
a
n

excellent code editor such as grammar check, type
check, code completion, folding,
and code

format and s
o on.
Each of the function will be
discussed in the following passages
.

2.2

How to use option panel to change the default
settings of
T
eniga

T
o control the behavior of the major functions provided by teniga, an option panel is used.
Y
ou can open it by clicking


工具
/
选项

. I
n
the

编辑器


category, you can
set some useful
abbreviations for some
common statements such as

alert()

,

document.getElementById()


and so forth.

T
he picture following shows the use of the abbreviations.



While in the

字体和颜色


category,
you c
an set colors and fonts for all tokens of javascript
file such as keywords, string literals and comments
.
Y
ou can change the color to whatever
you like.
T
he following picture shows how to change the color

of the tokens.



As you can see from the picture i
n the foll
owing,
you can
also
alter some advanced settings
by clicking the

高级选项


button.

T
he javascript advanced settings are located in

编辑器
设置

.

Besides the common settings of the NetBeans platform such as

缩写

,




and


表符大小

,
teniga offers some important options like

Code Navigation Delay

,

Code Parse
Delay


and so on.
S
uch

options will be discussed when certain functions related to them are
introduced

in the following passages.



3

Main functions of Teniga Suite

In this section, we will introduce some of the main functions realized by teniga through
demonstrating
the usage
s
.


3.1

Creation wizard

You can either create a empty file with the extension of

.js


or create a javascript file using
the wizard which has been discussed in the passages above.

S
o we do not pay much attention
to this section.

3.2

Syntax highlight

After creating t
he javascript file, you can edit it in the editor part.
T
he picture below shows
the syntax highlighting result.



W
e can also change the color and the font of certain token, for instance, we change the style
of

multi
-
line comment


with the color

RED


an
d font size 39

and font style italic
, the
result is as follows:



Teniga provides a variety of tokens such as

multi
-
line comments

,

keywords

,

method
names


and

all kinds of literals.
Y
ou can change the style of the code to whatever you like, by
settin
g the colors and fonts, you can easily edit you code.

3.3

Grammar check

Now, let

s take a trip to the most
fascinating

and
useful

function of the teniga:
grammar
check.


For example,
if

you input the following code into the
teniga
javascript editors, what
hap
pen
s
?

var test;

function test(var list){


alert(list);

}



I
sn

t it exciting that teniga told you that the token

var


in the function
parameter list

is not
allowed
?
T
he following picture
overwhelms

hundreds
words.



In fact, teniga is not a

javascript


edi
tor, but an ECMA script editor which requires
stricter

grammar
condition.

For example, a statement ends with a ENTER is legal in javascript, but
as to ECMA, statements must end with a
semicolon
.

S
o a statement
without

the semicolon is
illegal in teniga.

A
nother example is that, according to ECMA
-
262 standard, expression
statement can not be start with token

{


or

function

, but in javascript it works.
S
o much
attention should be paid when you are not familiar with ECMA.


C
ode which is in confliction wi
th ECMA
-
262 standard is
interpreted

to be wrong in teniga,
and
this greatly diminishes

the error
s

made by
careless
coders.

By the way, teniga is a javascript editor with strict grammar

limitation
, so it is not to say that
your code can not run in IE or oth
er browsers if there
are

error annotation
s

in you code when
you are using teniga.

I
f you ar
e allergic to error annotations, you can change the annotation
threshold of the grammar check in the advanced option settings.

Its name is

Syntax Error
Annotation

.



For example, change Syntax Error Annotation to WARNING level, then the

parsing result of
the

code you

have just typed change to the following:



Got something fun?
I
f you find that grammar check is such a useless function or you are not
satisfied with

the parsing result
s

of the teniga, please mail to me:
wangtt03@163.com


Furthermore, you can change the parsing

delay in the same option panel and

its label is

Code Parse Delay

.
Its

function is as same as the par
sing delay of java files.


3.4

Type check

It is common for careless coders to make errors like using a variable that is not yet defined.
Some
times such errors can cause the program corrupt.
H
ow to avoid such errors is of great
significance to coders.
Fortunate
ly
, teniga provides a function to check whether the variable
you are using has been defined.


For example, if you type the following code into the teniga editor, an error annotation is
displayed to notice that this variable is not defined.


alert(iAmNotDef
inied);


The error found by teniga is annotated as the following picture:



Not only can teniga find variables that is not defined, but also it can find whether the variable
definition is duplicated, for example, input the following code into editor, erro
r annotations
which indicate that such definitions are already defined are displayed in the editor.


Code:

var iamvar1;

var iamvar2;

var iamvar1;


Errors pointed out by teniga:



But if the scope of the variable is different, the errors do not occur.

For
example, define a
variable called global out of a function and define

another global in the function as the
following:


var global;

function test()
{


var global;

}
:

T
he error never appears.


Quite interesting, doesn

t it?

Teniga can also parse more errors
than we have discussed above,
and
what you should do is simply try it.

3.5

Code n
avigation

Code navigation is a
n

in
dispensable

part of modern IDE. It provides a
n

easy way for cod
ers
to find the location of certain code snippets
. Teniga suite also provides a po
werful code
navigation tool which can dramatically lessen the pressure of coding.

The types that teniga
can navigate contains variable definitions, function definitions and object literals. All of the
definitions are organized in a scope based way. Now let

s take a look at the navigation tree
generated by parsing the following code:


var var1;

var var2;


function fun1(){


var innerVar1;


var innerVar2;

}


function fun2(param1,param2){


var innerVar1;


function innerFun(){


var innerInnerV
ar1;


}

}


var obj = {


id:1,


name:"foo",


address:{


home:"bar1",


office:"bar2"


}

};


The navigation tree generated:



According to the outline above, we can see that teniga also supports inner
-
method outline
.

F
urthermore,

the outline of th
e code is linked to the editor and
by clicking
the node in the
navigation tree

the content linked to this node is highlighted.


3.6

Code completion

Code completion function offered b
y teniga is also very powerful. Teniga provides two basic
co
mpletion types, the first one called browser element based completion and the second
called javascript object based completion. Now let

s give more detail information about each
type.


First, let us talk something about browser element
based
completion (BE
C).
Browser
elements are such elements as

window

,

document

,

history


and so on.
S
uch elements
have a relatively static properties, methods and events.
S
o if you type

document


end with a
dot, all properties and other things are popped.

T
he following
picture shows the completion
items
of browser

element

document

.




W
hat is more
attractive

and interesting of code completion function of the teniga is its
powerful
javascr
ipt object based completion (JO
C)
.

JOC provides a way to
popup completion
items b
y parsing the current file
and

calculate the code structure of it.


For example, we define a function using the following code:

function Car(){


var name;


var brand;


this.getName = function(){


return this.name;


};


this.getBrand =

function(){


return this.brand;


};

}


T
hen if we create an instance of Car, and press

.

,
the method

getName()


and

getBrand()


can be displayed as following:



Y
ou will notice that there are t
hree items with a warning icon.
I will talk wit
h them later.


Another example is that
teniga provide a

Comment based completion

, which means that if
you add a comment before the variable you have defined, by pressing

.

, you can get
completion items belong to that comment.
F
or example, if you type t
he following code in
teniga editor:

var /*String*/ str = "";

See what you get by typing

str.

:



Teniga also supports object literal completion.
F
or example, type the following code in teniga
editor:

var
person

= {


id:1,


name:"foo",


address:{


home:"bar1",


office:"bar2"


}

};

T
ype

person.


i
n the
editor

and you will get the following result:



An

important feature of teniga editor is that it
supports

multi
-
section completion. For
example, by pressing

document


which
end
s

w
ith a dot, you will get all methods that belong
to

document

, and by type

document.getElementById(

id

)


which
end
s

with a dot, you
will get all methods and properties that belong to

element

.
A
s can be seen from the
following picture:



Now let

s talk

something about the warning icons appeared.
A
s you can see from the
completion documentation, it is
an

identifier from the current file.
B
ecause parsing javascript
code is a tedious job and sometimes normal code completions does not contains what you
want
, so teniga provides all identifiers in this file as the backup completion.
S
ometimes it is
very useful.


Teniga supports method parameters tip.
I
f you complete a method using code completion, a
parameter list will be popped up.



Teniga provides various
kinds of code completion.
Y
ou can find more while you are using it.

3.7

Code template

Code template of teniga is based on the abbreviation system offered by NetBeans platform
.
Y
ou can add or delete code templates
in

编辑器


category.


3.8

Code folding

Teniga provides code folding feature to facilitate coders to organize their code
. There are two
types of folding in the teniga editor, code based folding and user defined folding.


Code based folding is used to fold code eleme
nt such as functions, multi
-
line comments.
F
or
example, if you define a function, the body of the function can be folded
, the same with the
multi
-
line comments. The
following picture gives a clear view of code based folding.




A
nother kind of folding is
user defined folding.
B
y surround the certain code range with


//#


pair, you can
fold

anything you want.
F
or example:



User defined folding is very useful when the code is tremendously large
.
Y
ou can fold the
code which is not in use and pay more atten
tion to current work.


There are two options that are related to the code folding function in the advanced option
panel
.
T
hey are

Code Folding Enable


and


Code Folding Update Interval

.
T
he first one is
to enable or disable code folding function while th
e second one is used to define the time
interval of renew the folding area.

3.9

Code format

Teniga provides two
types

of code format techniques. The first one is derived from Indent
Engine provide by NetBeans platform and the second one is Abstract Syntax Tree

Based
Format.

T
he
former

one is easy to use but sometimes it does not work well (I will give a
example later)
, the
advantage of
it is that it does not need the support of AST, that means, if
the code has some errors, it still works.

The latter one is base
d on AST which means the code
must be parsed before format.

I
f there is any error in the code, format failed.
B
ut it has its
own
advantage, which

is it can format more pretty than that of Indent Engine.
Let

s compare
the two types now.


Before using the indent format, please make sure that the default indent engine is “Javascript
Indent Engine”, it can be set in the option panel. See the following picture:




The following code is the original input:



I
f Indent Engine is used to format

the code, the result is as follows:



It seems to be better than the original input.
B
ut what happens if AST based format is used?
T
he result is:


It really amazing!
B
ut
remember

in your mind, the code should be
without any syntax errors.

I
f there are s
ome syntax errors in the code, the status panel will give you some information:



Y
ou can format your code simply by right click in the current editor, and choose one of the
format
strategies

in the

Format


folder:


3.10

Other useful actions

There are also q
uite a

few useful functions in teniga. F
or example, you can surround certain

code range by try
-
catch clause, and you can also comment or uncomment a source line using
toolbar button or hot key Alt+Shift+W.


S
uch useful functions can be easily fou
nd in cont
ext menu or toolbars.

4

Contact me

T
his is the pre alpha edition
, and there maybe some bugs, if you are interested in teniga or
you want to report some bugs, please mail to me:
wangtt03@163.com