I. Web development with NetBeans II. NetBeans GUI - LTAM

kaputmaltwormΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 3 μήνες)

262 εμφανίσεις

Web development Software

NetBeans

Configuration

SHMMA

LTAM

1
/
4











I.

Web development with NetB
eans

To get your work organized it is recommended to create a project for each chapter of
the course

(as soon as web server will be used)
.

Proje
ct
s are always associated to an local(internal) or remote webserver.
An
alternative is a PHP script command line.

If you don’t have a webserver you can use the “Favorites View”
.

This allows you to
browse to a folder of your computer an
d

to open/create files.

II.

NetBeans GUI overview

A.

Essential  functions:
 


Most features from simp
le text editors are available: open, save, find, replace



Syntax highlighting



Autocomplete for HTML, CSS, JavaScript, PHP, … (CTRL+SPACE)



Fast code formatting/indentation (CTRL+SHIFT+F or Menu: Source
à

Format)



Jump to “Last edit location” (CTRL
-
Q)



Displays

errors and warnings for source code



Integrated debugger (breakpoint, watch, …)



Fast view of the result in a browser (Right click editor or file
à
View)



Side
-
by
-
Side view (Drag a code tab to the right until a large vertical box
appears)



Local history with m
odification listing, version comparison and revert to…
function (Menu: Team
à

Local history
à
Show local history)



Palette with wizard for standard HTML Tags (Menu: Window
à

Palette)



CSS style builder and preview (Menu: Window
à

Other
à

CSS…)



DOM Navigator
(HTML & CSS)



Database explorer



Plugins to extend the interface


Web development Software

NetBeans

Configuration

SHMMA

LTAM

2
/
4


Figure
1
: NetBeans Graphical User Interface



Web development Software

NetBeans

Configuration

SHMMA

LTAM

3
/
4

III.

Create
new

web projects

A.

No (local or remote) web server available

If you don’t have access, or if you don’t
want to use, a web server you can directly
navigate through your file system by using
the “Favorites View”.

No project will be
created!

1.

Open NetBeans.

2.

Open “Favorites View” : press
CTRL+3 or select Window
à

Favorites

3.

Navigate to your
home

folder
.

(Plac
e
where you want to create your folder
structure for the HTSTA course).
Select the home folder.






4.

Right click to get context menu for
your home folder. Then select “Add to
favorites”.


















5.

Collapse the
highest
-
level

folders.
Then you can see that your home folder is
directly accessible via the favorites view.


6.

The context menu of the
selected folder (or
Menu: File) allows
creating

files and
subfolders
.


To view the result of the HTML coding: right
-
click
on the file name (or in the editor window) an select
view. A browser with the display of the HTML files
is opened.

Once the file is opened in a browser a simple refresh in the browser shows the update
of an HTML file.

Figure
2
:
Favorites
-

Files system

Figure
3
: Create favorit
e

Web development Software

NetBeans

Configuration

SHMMA

LTAM

4
/
4

T
o
be continued from here


B.

Local webserver
available

Projects files will be saved(stored) in one of your folders inside your home folder. The
contents of this folder can be shown(opened) by a web browser (File
à

Open…). The
URL in the browser looks like:
file://C:
\
Users
\
student
\
HTSTA
\
Exercises
\
Chapter01
\
ex01.html

After this you can see the content of ex01.html in your web browser.


NetBeans project creation how to


C.

Remote webserver available


IV.

Create web projects
based on existing sources

A.

Local webserver available

Folder

must exist in htdocs with source files

Cf screenshots, ob finish Folder with ProjetName will be created automatically in the
folder specified in Save a copy as…

B.

Remote webserver available



V.

Create

web projects based on existing remote
sources


VI.

NetBeans Editor usage

Basics

Find/replace

Code completion

Shortcuts
:

CTRL
-
SHIFT
-
F

: code is automatically indented

Window
à

Palette

: Displays some common HTML elements

Window
à

Other
à

CSS Style Builder

: is

only working for dedicated CSS files
(file extension .css)

Window
à

Other
à

CSS Preview

: to view a sample of the previously created css
declarations


Figure
4
: Favorites
-

collapsed