NETBEANS

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

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

160 εμφανίσεις

N
ET
B
EANS

D
ATA UPDATION AND DEL
ETION

P
REREQUISITE

We presume:

a.

You have installed NetBeans and MySQL server.

b.

Gone through the tutorials on ‘
Web Application designing with NetBeans
’,
‘Debugging in NetBeans’, ‘Log in form’ and ‘Data Insertion form’.

Essentiall
y, we take it that you know how to use MySQL server, have created
necessary database and the tables, know how to connect to it from NetBeans and
are somewhat familiar with drawing user
-
interface on NetBeans. We suppose you
are somewhat familiar with debugg
ing code.

Our updation/deletion form will have the following features:

a.

As soon as a userid is selected from a drop
-
down box, the user particulars
appear on screen.

b.

These particulars may be modified.

c.

After modification is complete, update the database for t
his userid. As soon as
the data is updated, it appears in the table below.

d.

To display data for a particular user, a hyperlink in the table may also be clicked
whereupon user particulars appear in the form. Modify and update them.

e.

Deletion is simple. Select

a userid. His particulars are displayed. Click delete
button. User is deleted. Updated table shows this.

The final form will be as in
Fig.
1
.


F
IG
.

1
:

O
UR FINAL FORM WITH M
ULTIPLE VIRTUAL FORM
S

We will hav
e a step
-
by
-
step approach in this session. We will first implement,
updation, then deletion and finally table
-
display.

D
ATA
U
PDATION

Create a blank Visual Web JSF page. On it place components as in
Fig.
2


F
IG
.

2
:

U
SER INTERFACE FOR DA
TA UPDATION
.

T
HERE ARE TWO TEXT BO
XES
,

TWO DROP
-
DOWN
LISTS
,

A CHECK BOX AND A CA
LENDAR COMPONENT

Our component ids, as specified in respective component property windows are:
userid, name, office, sex, dob and button1. We now b
ind components to data.
Specifically, userid drop
-
down list component is to be bound to
myUserid

of
users

table and office drop
-
down list component is bound to
fieldOfficeName

of offices
table. To make this binding from
Services

window drag
users

table and

drop it over
userid component.
Add New Data Provider

window immediately opens. It presents
an option to associate with the new data provider an already existing RowSet. But
as this row
-
set needs an office parameter to be supplied (
Where
users.myoffice=?,
please see tutorial on

Web Application designing with
NetBeans
’), we cannot work with this row
-
set here. Our row
-
set should display all
userid’s irrespective of office location. Our query is simple: ‘Select * from users’.
Accordingly, from the options pre
sented, select to
Create

a RowSet on
Page4

and
click OK.


F
IG
.

3
:

A
DD
N
EW
D
ATA
P
ROVIDER WINDOW
.

S
ELECT OPTION TO
C
REATE A
R
OW
S
ET IN
P
AGE
4

Right
-
click on userid component, in the context menu click
Bind to Data

and in the
window that

appears make sure that displayed and returned fields are
myUserid

(
Fig.
4
).


F
IG
.

4
:

W
HAT IS DISPLAYED AND

WHAT IS RETURNED BY
USERID COMPONENT

You will find the
Navigator

window displaying the just create
d
usersDataProvider

and
usersRowSet

(
Fig.
5
).


F
IG
.

5
:

N
AVIGATOR WINDOW WITH

JUST CREATED DATA PR
OVIDER AND ROW SET

Similarly drag
offices

table from
Services

window and drop it over
office

drop
-
down
list c
omponent. In the
Add New Data Provider

window, accept the default selection.
The existing row
-
set will display all offices. It is OK for us. Click
OK

button.


F
IG
.

6
:

B
INDING OFFICE DROP
-
DOWN LIST TO OFFICES

TABLE

Navigator

window w
ill show another data provider created (
Fig.
7
).


F
IG
.

7
:

N
AVIGATOR WINDOW WITH

ANOTHER
D
ATA
P
ROVIDER

Right
-
click on
office

component. In the context menu, click
Bind to Data

and in the
window that appears
make sure that displayed and returned fields are
fieldOfficeName
(
Fig.
8
).


F
IG
.

8
:

B
INDING FIELD
O
FFICE
N
AME TO OFFICE COMPON
ENT

W
RITING CODE

D
ATA
U
PDATION

Our user interface is ready. We will now write code

for value change event of userid
drop
-
down list component and the action event of button1 (Update) button. First
Add Binding Attribute

to each input component on the page by right
-
clicking on it as
in
Fig.
9

so that the component

is available for java coding in the java editor
window.


F
IG
.

9
:

A
DD
B
INDING
A
TTRIBUTE TO EACH INP
UT COMPONENT

Right
-
click on the userid component and make it
Auto Submit on Change

(
Fig.
10
).
Again, right
-
click on it and in the context
-
menu click on
Edit Event Handler
-
>processValueChange

(
Fig.
10
)
. It takes you to java editor window creating a
method
userid_processValueChange()
.


F
IG
.

10
:

E
VENT HANDLER FOR U
SERID

In this value
-
change method, call another method
fillValues()
.

public void userid_processValueChange (ValueChangeEvent event) {

fillValues();

}

The method
fillValues()

is as below.

private void fillValues(){

String off = userid.getSelected().toString
();

RowKey rk = usersDataProvider.findFirst("myUserid", off);

name.setText(usersDataProvider.getValue("myFullName", rk));

sex.setValue(usersDataProvider.getValue("isMale", rk));

dob.setValue(usersDataProvider.getValue("myDOB", rk));

office.setSelected(user
sDataProvider.getValue("myOffice", rk));

}

This method first gets the selected office value (
getSelected()
). It then uses the
usersDataProvider

to search the data table (
findFirst()
) to find the first row where
the field
myUserid

holds the selected value.
Since,
myUserid
, is also the primary key,
this is the only row in this table. The
findFirst()

method returns the RowKey for this
row. (What is a RowKey? Please see our discussion in ‘Data Insertion form’.) Now,
given the RowKey,
usersDataProvider
, gets val
ues of other fields in this row, one by
one. The input components are populated with these values using methods:
setValue()
,
setText()

and
setSelected()
,

as the case may be.

Consequently, when a new selection in
userid

drop
-
down is made, the form gets
subm
itted automatically and the other fields get populated as per this selection.

In the
prerender()

method, write the following so that the first time form is opened
it is filled up with data.

public void prerender() {

if (userid.getSelected() == null) {

user
sDataProvider.cursorFirst();

RowKey rk = usersDataProvider.getCursorRow();

userid.setSelected(usersDataProvider.getValue("myUserid", rk));

name.setText(usersDataProvider.getValue("myFullName", rk));

sex.setValue(usersDataProvider.getValue("isMale", rk));

d
ob.setValue(usersDataProvider.getValue("myDOB", rk));

office.setSelected(usersDataProvider.getValue("myOffice", rk));

}

}

Double
-
click the Update (button1) button to reach button1_action() method. Write here the following
code:

public String button1_action
() {

String off = userid.getSelected().toString();

RowKey rk = usersDataProvider.findFirst("myUserid", off);

usersDataProvider.setValue("myFullName", rk, name.getText().toString());

usersDataProvider.setValue("myDOB", rk, dob.getSelectedDate());

usersDataP
rovider.setValue("isMale", rk, sex.getValue());

usersDataProvider.setValue("myOffice", rk, office.getSelected().toString());

usersDataProvider.commitChanges();

usersDataProvider.refresh();

return null;

}

Given a row key to which the particular userid belon
gs, we update values for this
row in various fields with
setValue()

method. Then the changes are committed to
hard
-
disk and data provider is refreshed.

D
ATA DELETION

Place a second button on the form. Set its text property to
Delete

(
Fig.
11
).


F
IG
.

11
:

P
LACE A SECOND BUTTON

ON THE FORM
.

S
ET ITS TEXT PROPERTY

TO
D
ELETE

Double
-
click on button2 (Delete) button to reach its action method,
button2_action()
. Write the following code.

public String button2_action(
) {

String off = userid.getSelected().toString();

RowKey rk = usersDataProvider.findFirst("myUserid", off);

usersDataProvider.removeRow(rk);

usersDataProvider.commitChanges();

usersDataProvider.refresh();

return null;

}

This code finds out the RowKey corre
sponding to the selected userid. Then removes
the row with this row key from the data table in memory. This change is then
committed to hard disk and data provider refreshed.

D
ISPLAYING CHANGES TO

TABLE

Let us now display all data in a table. As soon as a
change takes place, table is
refreshed. Drag table component to Page4 (
Fig.
12
).


F
IG
.

12
:

DISPLAYING DATA AND
CHANGES IN TABLE

As we would like to display
users

table data in table
-
component, we need to bi
nd
table’s data to
usersDataProvider
. Right
-
click on the title
-
bar of the table and in the
context menu, click
Bind to Data
.
Bind to Data

window as in
Fig.
13

appears. Select a
data provider (
usersDataProvider
)
, click
Apply

and
OK
.)


F
IG
.

13
:

A
SSOCIATING AN EXISTI
NG DATA PROVIDER WIT
H TABLE COMPONENT

Table immediately gets linked to underlying data (
Fig.
14
). Change table’s title and
its column headings as appropriate by right
-
click
ing on the title
-
bar and clicking in
the context menu
Table Layout
. Also enable pagination with say, 4 rows displayed at
a time.


F
IG
.

14
:

T
ABLE
-
COMPONENT LINKED TO
USERS TABLE

Now, as soon as data changes,
usersDataProvider

is bein
g refreshed and this will
automatically bring changes to table data. Nothing more needs to be done.

T
ABLE WITH HYPERLINKE
D COLUMN

Let userid column (second column in
Fig.
14
) display data as hyperlinks. On clicking
the hyperlink,
the insertion/deletion form gets filled up as per the userid value.
Right click the title
-
bar of the table
-
component and in the context menu, click on
Table

Layout
. In the
Table Layout

window, under
Selected
, highlight
myUserid
.
Against
Component type
, fro
m the drop
-
down list select,
Hyperlink

(
Fig.
15
)
. Click
OK. All data in userid column in the table will now appear as hyperlinks. But as yet
no action has been associated with them.


F
IG
.

15
:

T
ABLE
L
AYOUT
.

S
ELECT MY
U
SERID AND AGAINST
C
OMPONENT
T
YPE
,

SELECT
H
YPERLINK

Whenever, a hyperlink is clicked, we will need to know as to what is the RowKey
associated with it. Every table
-
component has an associated TableRowGroup
component. This component represents grou
p of table
-
rows. Its method,
getRowKey()
, can be used to find out the RowKey associated with the current row.
To use this component in our java code, in the
Navigator

window look for the
tableRowGroup1 (
Fig.
16
) and click on it to

highlight it. Then right click on it and in
the context menu select
Add Binding Attribute.



F
IG
.

16
:

TABLE
R
OW
G
ROUP
1

SELECTED IN
N
AVIGATOR WINDOW
.

NOTICE THAT THE TABL
E
-
HEADER
ALSO GETS SELECTED

Further, to associate an action with

the hyperlink, click a cell under userid column to
select it (
Fig.
17
).


F
IG
.

17
:

U
NDER USER ID COLUMN
,

CLICK A CELL AND THE
N RIGHT
-
CLICK ON IT
.

I
N THE CONTEXT
MENU
,

CLICK
E
DIT ACTION
E
VENT
H
ANDLER

Then ri
ght click the selected cell and from the context
-
menu click on
Edit action
Event Handler

(
Fig.
18
)
.


F
IG
.

18
:

C
ONTEXT MENU FOR THE
SELECTED CELL

It takes you to java editor in
hyperlink1_action()

method. Wr
ite the following code
there.

public String hyperlink1_action() {

RowKey rk=tableRowGroup1.getRowKey();

userid.setSelected(usersDataProvider.getValue("myUserid", rk).toString());

fillValues();

return null;

}

Here, first we find out the RowKey of the userid

being clicked in the table. Then the
userid in the drop down list and other fields are filled up accordingly. Quite simple
once you understand this RowKey business!

V
IRTUAL FORMS

A virtual form is a form within a form. Our Visual Web JSF Page is a form. W
ithin this
we create certain other (imaginary) virtual forms. The need for a virtual form is this.
Suppose a restriction is imposed on the ‘name’ text
-
field that the minimum length
of input must be three characters. Accordingly, a Length Validator is assoc
iated with
the ‘name’ field (
Fig.
19
). Set the ‘min’ property of this length
-
validator to 3. Also
drag a
Message

component from
Palette

to the page and associate it with the
‘name’ text
-
field.


F
IG
.

19
:

I
MP
OSING LENGTH RESTRIC
TION ON NAME FIELD

Now, when the page gets automatically submitted due to change in the value of
userid drop
-
down list, it is possible that at that time the number of characters in the
name

text
-
field are less than three. Data validatio
n error will occur stopping the
page submission and displaying the error message through associated
Message

component. There is no need, at this time, to validate data in other fields; they are
in any case going to be refilled with new values depending upo
n the changed value
of userid in the drop
-
down list. Thus, in effect, only the userid drop
-
down list should
get submitted and not the other input fields. This exclusiveness/insulation is
achieved through the device of virtual form. We create a virtual form

that contains
only the drop
-
down list component and none other. To do so, right
-
click on the
userid drop
-
down list and from the context menu select
Configure Virtual Forms
.


F
IG
.

20
:

N
OTE THE COMPONENT ID
,

USERID

AT THE TOP
.

Confi
gure Virtual Form

window appears (
Fig.
20
). A
virtual

form

defines a group of
input and submission components on a page. The input components are said to
participate

in the virtual form. The submission components are said to
submi
t

it. For
example, a button and a hyperlink are submission components while a text
-
field
may only participate (if it does not Auto Submit on Change).

Click
New

button. Give this virtual form a name. Double
-
click on the
Participate

column and select ‘Yes’ f
rom the drop
-
down. Similarly double
-
click
Submit

column
and from the drop
-
down select ‘Yes’. Click
Apply

and then
OK
. In the tool
-
bar, click
Show Virtual Forms

button (
Fig.
21
). The virtual form legend appears and the
associated c
omponents are bordered with selected color.


F
IG
.

21
:

I
N THE TOOL
-
BAR CLICK
S
HOW VIRTUAL
F
ORMS BUTTON
(
THE BUTTON WITH TWO
OVERLAPPING SQUARES
)

TO SHOW VIRTUAL FORM
S IN DIFFERENT COLOR
S

Select the other four input fields, right
-
clic
k and in the context menu select
Configure

Virtual

Forms

(
Fig.
22
).


F
IG
.

22
:

S
ECOND VIRTUAL FORM W
ITH FOUR COMPONENTS

Click
New

button, assign a name to the virtual form (
restInput
). These four
components
do not submit the form even though they participate in submission.
While they participate, the other virtual form,
DropDownForm
, has no role to play
and hence both its columns are NO. Two virtual forms appear (
Fig.
23
).


F
IG
.

23
:

T
HE TWO VIRTUAL FORMS
.

F
OR THE SAKE OF BRING
ING CLARITY IN THE F
IGURE THE
T
ABLE
C
OMPONENT HAS BEEN TE
MPORARILY DISPLACED
SIDEWAYS IN THE VIEW

There is another component that submits form. It is the hyperlink. Select table cell
under

userid column in the table. Right
-
click on it and in the context menu click
Configure Virtual Forms

(
Fig.
24
)
.


F
IG
.

24
:

C
LICK TABLE CELL UNDE
R USERID
.

R
IGHT
-
CLICK ON IT AND CLIC
K
C
ONFIGURE
V
IRTUAL
F
ORMS

Assign a name to the virtual form, say ‘hyper’. On clicking the hyperlink, the form is
submitted but the hyperlink as such does not have any input (unlike text
-
field or
drop
-
down list) and hence under
Participate

column default ‘No’ stands. We now
have thr
ee virtual forms (
Fig.
25
).


F
IG
.

25
:

T
HREE VIRTUAL FORMS

A table may have pagination (see
Table Layout

window,
Option

tab). Data in the
table is then spread over many pages with each page displaying a cert
ain number of
rows. When, a paging control (
Go to Next Page

link) is clicked, the page gets
submitted and table with another set of rows appears. Thus, changing pages in the
table also submits the form. When the table so submits a form, then to not to have

values in input fields outside the table being considered, one may set
internalVirtualForm

property of the table to true (
Fig.
26
). Default value is false.


F
IG
.

26
:

T
URNING THE TABLE INT
O A VIRTUAL FORM
.

S
ELECT INTERNAL
V
IRTUAL
F
ORM

We now have an all total four virtual forms including the table.


F
IG
.

27
:

RIGHT CLICK ON HIGHL
IGHTED FORM
1

AND FROM THE CONTEXT

MENU
,

CLICK
A
DD
B
INDING
A
TTRIBUTE

We now make changes in our code at two pl
aces. One in
userid_processValueChange
()
method

and the second in
hyperlink1_action()

method
.
These changes are
as follows:

public void userid_processValueChange (ValueChangeEvent event) {

form1.discardSubmittedValues ("res
t
Input ");

fillValues();

}


publi
c String hyperlink1_action(){

form1.discardSubmittedValues("DropDownForm");

form1.discardSubmittedValues("res
t
Input");

RowKey rk=tableRowGroup1.getRowKey();

userid.setSelected(usersDataProvider.getValue("myUserid", rk).toString());

fillValues();

return nul
l;

}

Method
,
form1.discardSubmittedValues

(“xx”), ensures that the participants in
the supplied virtual form (“xx”) will discard (rather than retain) their submitted
values when a different virtual form (say, YY) is submitted. The normal behavior is
that p
articipants in other virtual form(s) will retain their submitted values. But this is
not what we want. We want these values to be discarded and in their places new
values to be filled up as per the selection made in the drop
-
down list. Thus, when
userid is

changed in the drop
-
down list, virtual form
DropDownForm

gets submitted.
We want that participants in
resInput

virtual form should instead of staying ‘inert’,
discard their submitted values and get new values as per change of userid.
(Comment out this fir
st line,

form1.discardSubmittedValues ("resInput ")

to

see the effect.). This is what happens:

a.

When
DropDownForm

virtual form gets submitted, due to
Auto Submit Form

feature of userid component, inputs in
resInput

virtual form are ignored for
data
-
validati
on. They are also discarded.

b.

When
hyper

virtual form (
Fig.
25
) gets submitted due to clicking the (userid)
hyperlink in the table, inputs in
resInput

and

DropDownForm

virtual form
s are
ignored for data validation and also discarde
d.


c.

When pagination controls of table are clicked, the table’s internal virtual form
gets submitted. Inputs in all other virtual forms are ignored but not discarded.

d.

We have not included Update and Delete buttons in any virtual form. There is
no bar to not

including them. When these buttons are clicked, all inputs on the
page get validated and submitted.

S
OME VARIATION

Once you have understood the way action can be taken by clicking a hyperlink in the
table, some variation can be introduced. A table column
may contain buttons for
taking some action on the rows. To place buttons open
Table

Layout

window as
before (
Fig.
28
).


F
IG
.

28
:

T
ABLE
L
AYOUT WINDOW
.

C
LICK
N
EW TO INTRODUCE A NE
W COLUMN

Delete
Header Text

a
nd for
Component Type
, select Button. Click
Apply

and
OK
. A
table column with buttons is now added (
Fig.
29
).


F
IG
.

29
:

T
ABLE COLUMN WITH BUT
TONS

Double click on the first button to reach its action method.

Write here the code that
is to be executed when the buttons in this column are clicked.

Instead of one button per cell, you can have two buttons per cell. To do so, in the
Table

Layout

window (
Fig.
28
), against
Component

Type
, se
lect
Group

Panel
. Close
the table layout window. Now drag from Palette two buttons to first cell of the new
column with Group Panel. Set their text properties in the Properties window (
Fig.
30
).


F
IG
.

30
:

P
ER CELL TWO BUTTONS
APPEAR

Now, as before, first double click one button to reach its action method and then
double click another button to reach its action method. Write codes for both as per
your requirements.

*****************