IBM WebSphere Host Access Transformation Server ( HATS )

flashyfarctateInternet και Εφαρμογές Web

30 Ιουλ 2012 (πριν από 5 χρόνια και 3 μήνες)

233 εμφανίσεις

Rational Host

Access Transformation Services

Tutorial: Custom Widget

Abstract

Transformation is the core function of
HATS
.
Components

and
Widgets

provide

important
function
s

in
transformation process.

Once c
omponents
are
recognize
d

in
specifi
ed

region
s

of
the
host screen, widgets
render these
region
s.
HATS

offers

settings for
the provided
components and widgets

to
handle

most

conditions
.
Y
ou
c
an

also modify settings

at the
project level
, in the rendering sets, or in a
specific
transformation.

If
you

would l
ike to render host
components

in a special way

(
such as combinin
g two lines of data to one
line) and

the provided
HATS

widget
s

cannot be

configured to meet
your

requirement
, w
rit
ing

your

own
custom
widget
could be a way to resolve this condition
.

This tuto
rial is designed for

a w
eb
developer who
would like

to know how to create
a

custom widget
.

Topics
c
overed in this tutorial

Th
is

tutorial will cover
how to create

a screen customization
that sets

global variables, and
give
instruction
on

how to
construct
a

custom

widget
.
In t
his tutorial
,

the scenario
we
will
use is creat
ing

a
HTML
custom
widget
containing

a
n input field and a button
.

The widget we will
create
in this tutorial
can be used when

a
host screen contains the host component
that would be recognize
d as an
Input

field

or an

Input

field

with

hints

and
a
web developer wants to use an
additional

button to send
mnemonic

k
eyword

for
a
specific
purpose
:

Example:


A
Help button, to send
the
mnemonic

k
eyword

[pf1]


A
Prompt button, to send
the
mnemonic

k
ey
word

[pf4]

The

button name

and
mnemonic

k
eyword

can

be
:



Input
ted

from

the
w
idget settings



Imported from s
pecified g
lobal variables

Assumptions

This tu
t
orial assumes:



Y
ou have

already installed
HATS
Toolkit v7.1
.



Y
ou are already familiar with

basic
HATS

ski
lls to customiz
e

HATS

applications
,
to
us
e

global

variables

and
to perfor
m
r
unning

on
s
erver.



The HATS toolkit is open, and a HATS project exists in your workspace
.

C
reate
your
custom
widget

The
widget java
file
is a Java class which
de
termines

how th
is wi
dget will behave.

In this
tutorial
, we
de
scribe

widget
creation steps with a HATS
W
eb project. To create the widget in HATS RCP project,
the
steps are almost the same.

For more information about
required elements of a widget
, refer to the section
Creating
custom components
and widgets

in
Web Application Programmer

s Guide

or
Rich Client Platform Programmer

s Guide
.

The
scenario

that we are going to use in this demo is:

A web developer would like to create a custom widget to
transform

Input field
and

Input field with hints

components
.
By using th
i
s widget,

the web developer
offer
s

users
an
additional
button

beside

the

input field
so that users could use this button for specific purpose. Additionally,
the
web
developer prefers

the user uses
those buttons instead of function keys.

Now

we will look a
t steps to create
and use
this

widget
:

1.

To create
the

widget,
go to your HATS
W
eb project and
launch

the
Create a Widget

wizard

by right
click
ing

your HATS project
-
>
New

-
>
Widget
. In
the
Create a Widget

wizard
, e
nter

a name for the
widget
(we use
MyCustom
Widget

as the widget

s name
in this tutorial)
,

ensure the checkbox
Include
methods to allow settings to be modified in the HATS Toolkit
checked,
and
associate

this widget
with the component

Input

f
ield

and Input field with hints
.

The screen will look like:


When
Include methods to allow settings to be modified in the HATS Toolkit

option
is
enabled,
additional methods
getPropertyPageCount
(),
getCustomProperties
() and
getDefaultValues
() will be
append
ed

to the new Java source file for further implementation.

2.

After the
wizard
is
finished
,
the
Java source

file
MyCustomWidget.java

in your HATS
W
eb project
should be

created
in the directory
widgets

as shown below
:


3.

Open
MyCustomWidget.java

with

the
Java Editor
.
You

wi
ll
see

that
some

of
the
elements

have been
con
structed

in this source file
.
W
e are
now
ready to implement the code for the widget:


4.

According to our design
,
the
widget setting
s

should

have
the following c
a
pa
bilit
ies
:



To r
etrieve

the
button name and
mnemonic

keyword

from global variables
if the check
box
Fill
from global variables

is checked



T
o

retrieve

the
button name

and
mnemonic

keyword
from an input string
if the checkbox
Input

directly

is checked.



To treat
the
button name

and
mnemonic

keyword as
an
empty string

if
there is a

conflict.

Note:

The fo
llowing
screen shot shows the widget settings that will be created after the

widget
implementation completed.


4.1

To
achieve

this

goal
, we use the
public method
getCustomProperties
()

to implement

the GUI for
widget settings
.

Add
this

method to
MyCustomWidget
.java

and append
appropriate

GUI components

in
to
it
. The

code block
s

include
s

d
eclarations for the properties

and statements to create GUI components as
shown below
:



D
eclarations for the properties
:





Statements to create GUI components:


For detailed

i
nformation about
how to
customize

widget settings,
refer to
the
HATS
Information
Center

and
HATS API References
.

4.2

Once the code block
in section 4.1
is created,
you
can

verify
the
widget settings.
Go to

Navigator

view

-
>
Web

Content

-
> and

open
t
he component and widget list file
,

ComponentWidget
.
xml
.
You
will

find
that
the new widget
MyCustomWidget

is registered to
the component and widget
list
:


And the widget is
associated

to components
Input

field

and
Input

field

with

hints

as shown
below:


G
o to your project settings and v
erify
the new GUI
. E
nsure
all GUI elements behave

properly
.

5.

After coding the widget

settings, it

is

time to define how this widget
will

render
the
associated

com
ponents.
The public method
,

drawHTML()
,

is one of required
meth
ods

of

a
Web
widget.
drawHTML()

is used to generate HTML output

in JSP files

in
a
HATS
W
eb project
. For

a
HATS RCP
project, you can use
another
public
method
drawSWT()

to generate RCP output.

In
drawHTML()
, yo
u need to complete following steps from 5.1 to
5.7:

5.1

Examine the following code that generated by the wizard. In the code block, the

buffer
is used
to
store generated HTML
,

and
the

HTML element
factory
will
create HTML elements:


5.2

Decla
re variables to store settings:


In this step, you might experience

compile error
s

for missing imports. You
can
use
Source

-
>
Organize

Imports

to
resolve the missing imports.
.

5.3

In the next step, we will use the public class
com.ibm.hats.transform.elements.InputComponentElement
to generate HTML input elements.
The code blo
ck will i
terate through each
c
omponentElement
s

objec
t.
P
lease note that
the widget
should not process components that have already been processed by a HATS global rule.
The
method
RenderingRulesEngine.processMatchingElement(
)
will return the
transformation

fragment

if this input field has been processed, or return NULL if it is not processed yet.

For more
information about w
idgets and global rules
, refer to the section
Creating custom components and
widgets

in
Web Application Programmer

s Guide

or
Rich Client Platform Programmer

s Guide
.

Add the

code block below:


5.4

Add the button element next to the input field and use
getContextAttribute()
to extract the hash
table for global variables:


These statements above
are to
determine

how to set the button name and
mnemonic

keyword. We
use t
he followin
g three methodologies

here:

1.

If only
Fill

from

global

variables

is checked and global variables are available,
extract values from global variables.

2.

If on
ly
Input

directly

is checked,
extract values from widget settings.

3.

If
the
GUI configuration is
in
correc
t, set button name and
mnemonic

keyword to
empty string.

5.5

Get
button name and
mnemonic

keyword

from global variables

or widget settings
:

5.51

Scenario 1: Get

from global variables:


5.52

Scenario 2:
Get

from widget settings:


5.6

The last step is to set
button name
, mn
emonic keyword and action for this button:


6.

At this point, we have

completed
the

implementation

of

this widget.

To test obtaining the button label
and
host key mnemonic from global variables, w
e need to

initial
ize

those
two global variables

by
creating a

screen customization

with set global variabl
e actions
.

This step is only for
demonstration

purpose
in this tutorial
. Y
ou need to consider when to set these two global variables and how to set
them to match your business needs.

6.1

C
reate a
HATS Customization

w
ith the
name
CustomSignOn
.evnt
. Apply
the

t
ransformation

default
.js
p

to
the

customization
CustomSignOn
.evnt
. Add two
Actions

to set these two global
variables to the customization
CustomSignOn
. The page
Actions

in

CustomSignOn
.evnt

looks

like

:



With thi
s design, the customization
CustomSignO
n
.evnt

will initial
ize

values for button name and
mnemonic

keyword when
host

connection established.

For more information about the available m
nemonic

keywords, refer to
The
HATS
-
supported
3270 mnemonic keyword table

and
The
HATS
-
supported
525
0

mnemonic

keyword

table

in
Enabling keyboard suppor
t
.

6.2

In this tutorial,
the
custom widget
is
associated

wi
th
Input

f
ield

and Input field with hints
,
which
are

used to transform un
-
protected field like the input field
Position

to

type

in
System

i

screen
Work

with

Objects

Using

PDM
.
You
can

navigate
to
th
e

screen

Work

with

Objects

Using

PDM

by:
sign
ing

on to you
r

System

i and issuing

the command
STRPDM
in the
command line
. I
t will look like
:


In the green screen, end users need to know that if they position their cursor in the
Position to type

field, they can press PF1 to receive help information for that field.

See the help dialog below:


To achieve this goal, create a
HATS Transformation
,

WorkWithObjectsUsingPD
M
.
Use
My
C
ustomWidget

widget for the input field
Position

to

type

and use
field

components

and
widgets for the other regions of this screen
:


Edit
thi
s host
component

of this input field. Configure widget settings as shown below:


7.

Save all changes in your HATS web project.

It

s time to test
functionalities

for this new widget.
Perform
Run on Server
or
Debug

on

Server

to
test
it,
ensur
ing that

the widge
t

behaves

properly
in
each

condition
.

Conclusion

This tutorial has demonstrated how to use
HATS

Toolkit

to create
and test
a custom widget.
The option
to c
reate your own custom widget
s

is

very helpful
when

the settings that are provided by HATS do not
mee
t your needs
. Using this powerful
capability

could help you to reduce the effort
when

customizing
a
large number of

host screens.

Related References

See
Web Application Programmer

s Guide

and

Rich Client Platform Programmer

s Guide

for more
information.