JavaScript in PRPC v1.0 PDF

:4
18
7
JavaScript use in PRPC
ss
oc
ia
te
ID
Dovetail Course Material
C3: Protected
About the Author

Alok Kumar Das,197274
Ranesh Bhattacharya, 126747
Surajit Ghosh, 105604
Santanu Seth, 124408
Anish Chatterjee, 121540
Credential
Information:
Senior Technical Associates
Version and
Date:
JS_in_PRPC/PPT/0111/1.0
ss
oc
ia
te
ID
:4
0
18
7
Created /
Reviewed By:
2007, Cognizant Technology Solutions
Confidential
JavaScript use in PRPC :Overview

Introduction:
PegaRULES Process Commander (PRPC) applications can be designed in
ss
oc
ia
te
ID
:4
0
18
7
such way so that in most of the places PRPC out of the box feature can
be used instead of JavaScript
There are certain areas where PegaRULES Process Commander
implementation cannot be possible without using JavaScript. The best
possible ways to use JavaScript in PRPC will be discussed in this Course
Confidential
JavaScript use in PRPC :Objectives

Objectives:
ss
oc
ia
te
ID
:4
0
18
7
After completing this chapter, associates will be able to:

State the basics of the JavaScript Programming
Where can JavaScript be avoided in PRPC (Out of the Box features)
Understand the proper use of JavaScript in PRPC
Confidential
Course Structure
Part 1: JavaScript : Basic Understanding
18
7
Part 2: PRPC Out of Box Features
ss
oc
ia
te
ID
:4
0
Part 3: Proper Use of JavaScript
Confidential
Part 1> JavaScript : Basic Understanding

JavaScript is :
Developed by Netscape
18
7
Helps to create dynamic pages
Supports the most of the browsers

To design the pages according to the appropriate browser on which it
:4
0
ss
oc
ia
te
ID
would be viewed
Do not require access to Web server
Interactivity
Scripted -not compiled
Powerful
Object-based
Cross-Platform
Client and Server
Confidential
JavaScript : Basic Understanding (Contd.)

JavaScript is a Client side scripting and can be used for the
following reasons :
A script that is executed by the browser on a users computer
18
7
Instead of the entire page, part of the page is sent to the browser when
user requests for the page

Mostly run in response to an event
:4
0
For example: Click events, validations
ss
oc
ia
te
ID
Direct interaction with client
Confidential
JavaScript and Java :Comparison

Java Script
Java
Based on Object Oriented Concepts
18
7
Based on Object Oriented Concepts
Java is a programming language

developed by Sun Microsystems
JavaScript is developed by Netscape.
Java cannot be parsed. It must be

compiled into machine language before
it is executed.
JavaScript must run inside a Web page

on a Web Browser. Web Browser must
be complaint to Java Script.
With Java, stand-alone applications can

be created
ss
oc
ia
te
ID
:4
0
JavaScript is a scripting language that is

parsed and executed by the parser.
Confidential
Putting JavaScript into Pages

Direct Insertion
Inside <head>Within <body>

Embedded inline
Inside other HTML tags
:4
0
<input type=button
18
7
<script>Code</script>
ss
oc
ia
te
ID
onclick=JavaScript:alert(Hi); />
External references
In external .js files
<script src=JSFileName></script>
Confidential
Comments in JavaScript
Different comments in JavaScript are shown as follows:
// is single line comments
/* */is multiple line comment
ss
oc
ia
te
ID
:4
0
18
7
Non supported browser code ignore comments
Confidential
10
Programming Rules
JavaScript is case-sensitive
Ending statements with a semicolon is optional
Open and Close braces for scoping the embedded Java Script
ss
oc
ia
te
ID
:4
0
18
7
code is mandatory
You can apply more than one script in a same HTML file
Confidential
11
JavaScript Language Concepts

Java Script Language Constructs:
Values, Variables, and Literals
Expressions and Operators
18
7
Regular Expressions
Statements
ss
oc
ia
te
ID
:4
0
Functions
Confidential
12
Values, Variables, and Literals

JavaScript does not have explicit data types
There is no way of specifying that a particular variable
:4
0
18
7
represents an integer, a string or a real

The same variable may be interpreted differently in different
contexts
All JavaScript variables are declared applying the keyword var
For example: var x,y=7
ss
oc
ia
te
ID
JavaScript recognizes the following types of values:

Numbers, such as 42 or 3.14159
Logical (Boolean) values, either true or false
Strings, such as "Howdy!
null, a special keyword denoting a null value

Confidential
13
Values, Variables, and Literals (Contd.)

A JavaScript identifier or name must start with a letter or
:4
0
18
7
underscore ("_")
Subsequent characters can also be digits (0-9)
As because JavaScript is case sensitive, letters include the
characters "A" through "Z" (uppercase) and the characters "a"
through "z" (lowercase)
Variables Scope:
ss
oc
ia
te
ID
Local variable is one, which is declared inside a function

Global variable is one, which is declared outside a function
Applying var to declare a global variable is optional. However,
you must apply var to declare a variable inside a function

Confidential
14
Values, Variables, and Literals (Contd.)

Integer Literals:
Integers can be expressed in decimal, hexadecimal, and octal
Some examples of integer literals are: 42, 0xFFF, and -345
Object Literals:
18
7
An object literal is a list of zero or more pairs of property names and
String Literals:
:4
0
associated values of an object, enclosed in curly braces ({})
ss
oc
ia
te
ID
A string literal is zero or more characters enclosed in double or single
quotation marks
The following are examples of string literals:
"blah"
'blah'
"1234
"one line \n another line
Confidential
15
Programming JavaScript
Variables:
Howdy, numberRight, score, Ralph
Data types:
18
7
12, 987.654, true or false, Texas Tech
Operators:
:4
0
>=, ==, +=, ||, <, >, and so on
Control statements:
ss
oc
ia
te
ID
If, if.else, for, and so on
Keywords:
Var, true, false, new, return
Confidential
16
User Defined Functions in JavaScript

Following is the syntax to define the function in JavaScript:
18
7
function functionName(var1,var2..)
{
some code
return <Data> //optional
}
ss
oc
ia
te
ID
from the function
:4
0
The return statement is applied to specify the value that is returned
Confidential
17
Conditional Statements: If..else
ss
oc
ia
te
ID
:4
0
18
7
if..else Syntax
if (condition){
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
If.. Else ifElse Syntax
if (condition1) { code to be executed
}
else if (condition2) { code to be executed
}
else { code to be executed
}
Confidential
18
Conditional Statements: Switch

Switch Syntax:
ss
oc
ia
te
ID
:4
0
18
7
switch(n) {
case 1: execute code block 1break ;
case 2: execute code block 2break ;
default: code to be executed if n is different from case 1 and 2
}
Confidential
19
Control Statements
The for loop is applied when the user know in advance, how
many times the script shall run
For loop Syntax:
ss
oc
ia
te
ID
:4
0
18
7
var initval;
for(initval=startvalue;initval<=endalue;initval=initval+incrval)
{
code to be executed
}
Confidential
20
Control Statements (Contd.)
ss
oc
ia
te
ID
18
7
:4
0
while (initval<=endvalue)
{
code to be executed
}
Do..While Syntax:
do {
code to be executed
} while (var<=endvalue)
While Syntax:
Confidential
21
Control Statements: ForIN

The for..in statement is applied to loop (iterate) through the
elements of an array or through the properties of an object
18
7
For..In Syntax:
ss
oc
ia
te
ID
:4
0
for (variable in object)

{
code to be executed
}
Confidential
22
JavaScript and Concept of Inheritance

JavaScript Inheritance - Prototyping
There are two popular ways of working with JavaScript and the concept
:4
0
18
7
of Inheritance. Out of these the first and the more popular way of
working with inheritance is known as the prototype way
The prototype way or prototyping a class, usually deals with using a
function prototype instead of a class
ss
oc
ia
te
ID
For instance
function Iam () {
this.alive = true;
}
Iam.prototype.notdead = function () {
return true;
};
Confidential
23
JavaScript and Concept of Inheritance (Contd.)

An Object that would inherit Iam:
18
7
Dave.prototype = new Iam;

function Dave () {
this.writes = true;
}
Dave.prototype.getsBored = function () {
return "Never!";
};
:4
0
Now, if associates create an instance of Dave object, and call its member
methods, the result would be:
ss
oc
ia
te
ID
// Create an instance of the Dave object

var me = new Dave();
JavaScript Inheritance: Calling a parent member method
If any one wants to call a super method for an object, this is how it
would be called
Dave.prototype.getsBored = function ( ) {
Iam.prototype.getsBored.call(this);
return Never1;
Confidential
24
JavaScript and Concept of Inheritance (Contd.)

The second way of using JavaScript Inheritance is one in which
associates mimic class-based inheritance

For class based inheritance, the previous code then translates to:
ss
oc
ia
te
ID
:4
0
18
7
var Iam = Class.extend({ breathing : true; lives function ()

{ return true; }
});
var Dave = Iam.extend({ writes : true; getsBored() : function
{return Never!;}
});
var me = new Dave();
me.getsbored();
me.lives();
Confidential
25
Cross-site scripting
Cross-site scripting (XSS):
XSS is a type of computer security vulnerability typically found in web
applications which allow code injection by malicious web users into the
web pages viewed by other users
XSS surpassed buffer overflows to become the most common publicly
reported security vulnerability in recent years, and at least 68% of
websites are likely open to XSS attacks on their users. Cross-site
scripting holes in general can be seen as vulnerabilities which allow
attackers to bypass security mechanisms. By finding clever ways of
injecting malicious scripts into web pages an attacker can gain elevated
access privileges to sensitive page content, session cookies, and a
variety of other objects
Three distinct types of XSS vulnerabilities exist: non-persistent,
persistent, and DOM-based
ss
oc
ia
te
ID
:4
0
18
7
Confidential
26
JavaScript: JavaScript impacts performance

JavaScript hampers Servers - says Steve Souders ( Google chief
performance engineer )
Developers should reduce the amount of JavaScript on their `sites if they
18
7
:4
0
ss
oc
ia
te
ID
want to improve performance

While developers are aware of the need to improve performance, they
are tackling the wrong things
They are cutting the number of requests to the web server, shrinking
JPEG sizes or employing a content delivery network vendor like Akamai
Technologies, all of which had minimal effect
Only 10 percent to 20 percent of the time it takes to load a website
could be attributed to the web server
The offending code is usually JavaScript, not because JavaScript files on
a web page are large but because of the way browsers treat JavaScript
Confidential
27
JavaScript: Tool for diagnosis

Tools for diagnosing performance bottlenecks
YSlow
Visual Roundtrip Organizer ( from Microsoft )
ss
oc
ia
te
ID
:4
0
18
7
Pagetest ( AOL now open-source )
Confidential
28
JavaScript: Tips for Performance Improvement

Inline scripts block downloads and delays page rendering
18
7
affecting performance
Here are three strategies for avoiding, or at least mitigating,
the blocking behavior of inline scripts
move inline scripts to the bottom of the page - Although this still
ss
oc
ia
te
ID
:4
0
blocks rendering, resources in the page arent blocked from

downloading
use setTimeout to kick off long executing code - If you have a function
that takes a long time to execute, launching it via setTimeout allows the
page to render and resources to download without being blocked
use DEFER - In Internet Explorer and Firefox 3.1 or greater, adding the
DEFER attribute to the inline SCRIPT tag avoids the blocking behavior of
inline scripts
Confidential
29
JavaScript: Best Practices

Dont Change a Variables Type after Initial Declaration.
In JavaScript, technically, the following is perfectly legal:
18
7
1. var my_variable = "This is a String";

2. my_variable = 50;
Use try-catch to Prevent Errors from Displaying to the User.
ss
oc
ia
te
ID
:4
0
By wrapping all your code in a try-catch statement, you can

ensure that the user never sees an ugly JavaScript error. Like
this:
1. try {
nonExistentFunction();
3. } catch (error) {
4.
document.write("An error has occured.")
5. }
2.
Confidential
30
Session Break
ss
oc
ia
te
ID
:4
0
18
7
Time for a Break !
Confidential
31
Q&A
ss
oc
ia
te
ID
:4
0
18
7
Questions from participants
Confidential
32
Test Your Understanding

1. What is the difference between JavaScript and Java?
ss
oc
ia
te
ID
:4
0
18
7
Script?
3. Is Java Script case sensitive?
2. Can you have an stand alone application built using Java
Confidential
33
Part 2> JavaScript: Not to use in PRPC
Where can JavaScript be avoided in PRPC :
ss
oc
ia
te
ID
:4
0
18
7
After the Part 1 it is well understood that associates have to reduce use of
JavaScript while developing an application. There are PRPC out of the box
feature, that can be used instead of JavaScript. Those are described with
example in following slides.
Confidential
34
JavaScript: Not to use in PRPC(Contd.)

Field validation can be used by Rule-Edit-Validate against the
property
ss
oc
ia
te
ID
Text input length
:4
0
18
7
Use the Edit Validate form to define a Java routine that tests the validity of
an input value in an activity that processes user input. The activity calls the
Property-Validate method, which applies the test defined in an Edit
Validate rule.
From PRPC we can mention the length of a Max Text Box.
Confidential
35

On value change visible/hide/disable/enable any control
On change of any property using Refresh the section associate can

visible/hide/disable/enable other property value.
18
7
Auto Complete
ss
oc
ia
te
ID
:4
0
Use an AutoComplete control to allow the user to select a value from a possibly
large set of searched text values, based on a partial string match. The system
dynamically assembles and displays a list of candidate matching values after the
user types one or a few characters of input.
For example, when searching for an employee by first name, the user can type two
characters such as "AL". An autoComplete control can run an activity to create a list
of employees in a Page List structure, one page per employee, and match on the
embedded FirstName field, presenting matching candidates Alan, Allan, Albert, and
so on.
Confidential
36

List View row click load Preview
18
7
Smart Hover Info (Call Out)
Onclick of the record in the list view, a more detailed section is visible to
the user. This detailed screen opens either in a new window or in the same
frame
ss
oc
ia
te
ID
Dynamic Select
:4
0
Any section can be included in Smart Info control which should be visible
to the user as tooltip at runtime
Dynamic select is used where the values in the dropdown are not static and
are dynamically generated. Here the values are generated either through a
list view or through an activity
Confidential
37
AJAX (Asynchronous JavaScript and XML)

AJAX is based on the following web standards:
ss
oc
ia
te
ID
:4
0
18
7
JavaScript, XML, HTML, CSS

AJAX is not a new programming language, but a new technique
for creating better, faster, and more interactive web
applications
With AJAX, a JavaScript can communicate directly with the
server, with the XMLHttpRequest object to trade data with a
web server, without reloading the page
AJAX uses asynchronous data transfer (HTTP requests)
between the browser and the web server, allowing web pages
to request small bits of information from the server instead of
whole pages
Confidential
38
AJAX (Contd.)
PRPC OOTB Example are:
handleClientEvent(SERVER, ActivityName, &ParameterList, -1, event);
:4
0
18
7
The function is a default function of the PRPC, which

implements the XMLHttpRequest Object to run the activity on
the server and refreshes the section to display the data from
the server
httpRequestAsynch(requestURI+?pyActivity=ActivityClass.ActivityName&
ss
oc
ia
te
ID
ParameterList);
The function also implements the XMLHttpRequest Object to

run the activity in the background on the server but doesnt
refresh the section to display the new data
Confidential
39
Session Break
ss
oc
ia
te
ID
:4
0
18
7
Time for a Break !
Confidential
40
Q&A
ss
oc
ia
te
ID
:4
0
18
7
Confidential
41
ss
oc
ia
te
ID
:4
0
18
7
applications
2. What is Dynamic Select?
3. What is Auto Complete?
1. How to bypass JavaScript while implementing PRPC
Confidential
42
Where JavaScript must be used PRPC (Contd.)

Increase overall user productivity on client side
validation
:4
0
18
7
Client-side validation ensures that data entry on a work object form is

correct before the form is submitted to the application server. For example,
if a user enters an incorrect date into a date field (for example 2/30/2007),
an error notification appears when the focus exits the date field
This optional technique has three benefits:
ss
oc
ia
te
ID
Errors are detected earlier, increasing overall user productivity.

The number of round trips (HTTP interactions) needed to obtain a fully
valid and complete form may be reduced.
Processing workload on the server and HTTP traffic are reduced.
Confidential
43

Alert and Confirmation Message box
To display any alert
Confirm (<Text>);
18
7
To display any confirmation (Ok/Cancel)
Alert (<Text>);
:4
0
Set Focus on any control

To set any text box focus
ss
oc
ia
te
ID
document.getElementById (<Fieldname>).focus ();
Confidential
44

Key Code Enter
18
7
If associate want to fire any event on Key Press, associate need to use
JavaScript.
Below the code details:
ss
oc
ia
te
ID
:4
0
if (e.keyCode==13)
{
var x = document.getElementById("<Fieldname>");
x [0].fireEvent ("<event>");
}
e: event
KeyCode: different for different key (e.g. 13 for Enter key)
Confidential
45

On row radio click call activity
On If associate want to fire any event on radio button click of a list view,
associate we need to use JavaScript.
Below the code details:
ss
oc
ia
te
ID
:4
0
18
7
<script>
function <function name>(index){
httpRequestAsynch (requestURI+"? pyActivity=<Activity
name>&Parameter="+index);
}
</script>
<input type="radio" <pega: include name="ClientValidation"/>
id=<id> name=<name> class="Radio" onclick="javascript :<
function name> (<%= tools.getActive ().getParentProperty
().indexOf () %>);"/>
tools.getActive ().getParentProperty ().indexOf () is used to select the index of record selected.

Confidential
46

To Calculate Text Area length
PRPC cannot calculate the text area length properly. So, to calculate the
max length of the text area JavaScript need to use..
ss
oc
ia
te
ID
:4
0
18
7
<script>
function <function name> (obj)
{
if (obj.value.length >= <max length required>)
return false;
return true;
}
</script>
Confidential
47

To display harness in wide pane, need to use the JavaScript in
narrow pane
18
7
To open any harness in wide pane on click on any hyperlink in narrow

pane. The only way is to using JavaScript
On click of the hyperlink we call the below code:
:4
0
OpenUrlInSpace ('pyActivity= [Activity Name and Parameters])
ss
oc
ia
te
ID
Deselect/Select the check all check box in list view
In list view after select the check all check box if user uncheck an
individual row check box. The checks all checkbox will not be unchecked.
For that scenario we need to use the JavaScript.
Confidential
48

code details:
UnselectAll ()
18
7
all_checkbox=document.getElementsByName ("check");
all_select=document.getElementsByName ("selectAll")[0];
(var i=0; i < all_checkbox.length ; i++)
:4
0
<script>
function
{
var
var
for
{
ss
oc
ia
te
ID
if (all_select.checked==true)
all_checkbox[i].checked=true;
if (all_select.checked==false)
all_checkbox[i].checked=false;
}
</script>
Confidential
49
Session Break
ss
oc
ia
te
ID
:4
0
18
7
Time for a Break !
Confidential
50
Q&A
ss
oc
ia
te
ID
:4
0
18
7
Confidential
51
Part 3> Where JavaScript must be used PRPC
In PRPC, there are quite a few implementation those cannot
ss
oc
ia
te
ID
:4
0
18
7
be done without using JavaScript. In the following slides those

are discussed with examples
Confidential
52

1. Where to use JavaScript while implementing PRPC
ss
oc
ia
te
ID
:4
0
18
7
applications?
Confidential
53
Part 1 :Summary
JavaScript is a scripting language that is, parsed and executed
ss
oc
ia
te
ID
:4
0
18
7
by the parser. It must run inside a Web page on a Web

Browser
JavaScript can put dynamic text into an HTML page
Java Script Language Constructs consist of Values, Variables,
and Literals, Expressions and Operators, Regular Expressions,
Statements, and Functions
Confidential
54
Part 2 :Summary
PRPC Out of the box features
Field validation can be used by Rule-Edit-Validate
Smart Hover Info (Call Out)
18
7
Dynamic Select
ss
oc
ia
te
ID
:4
0
Auto Complete
Confidential
55
Part 3 :Summary
JavaScript usage in PRPC :
Increase overall user productivity on client side validation
Key Code Enter
18
7
Set Focus on any control
Alert and Confirmation Message box
:4
0
On row radio click call activity
To display harness in wide pane, need to use the JavaScript in narrow
ss
oc
ia
te
ID
pane
Deselect/Select the check all check box in list view
Confidential
56
:4
0
18
7
You have successfully completed

JavaScript use in PRPC
ss
oc
ia
te
ID
Click here to proceed

JavaScript in PRPC v1.0 PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript in PRPC v1.0 PDF

Uploaded by

Copyright:

Available Formats

:4

JavaScript use in PRPC

Dovetail Course Material

About the Author

Senior Technical Associates

2007, Cognizant Technology Solutions

JavaScript use in PRPC :Overview

2007, Cognizant Technology Solutions

JavaScript use in PRPC :Objectives

After completing this chapter, associates will be able to:

2007, Cognizant Technology Solutions

Part 1: JavaScript : Basic Understanding

Part 2: PRPC Out of Box Features

Part 3: Proper Use of JavaScript

2007, Cognizant Technology Solutions

Part 1> JavaScript : Basic Understanding

Helps to create dynamic pages

Supports the most of the browsers

2007, Cognizant Technology Solutions

JavaScript : Basic Understanding (Contd.)

user requests for the page

For example: Click events, validations

Direct interaction with client

2007, Cognizant Technology Solutions

JavaScript and Java :Comparison

Based on Object Oriented Concepts

Based on Object Oriented Concepts

Java is a programming language

JavaScript is developed by Netscape.

Java cannot be parsed. It must be

JavaScript must run inside a Web page

With Java, stand-alone applications can

JavaScript is a scripting language that is

2007, Cognizant Technology Solutions

Putting JavaScript into Pages

Inside <head>Within <body>

Inside other HTML tags

In external .js files

2007, Cognizant Technology Solutions

/* */is multiple line comment

Non supported browser code ignore comments

2007, Cognizant Technology Solutions

2007, Cognizant Technology Solutions

JavaScript Language Concepts

Expressions and Operators

2007, Cognizant Technology Solutions

Values, Variables, and Literals

represents an integer, a string or a real

JavaScript recognizes the following types of values:

Strings, such as "Howdy!

null, a special keyword denoting a null value

Values, Variables, and Literals (Contd.)

Local variable is one, which is declared inside a function

Applying var to declare a global variable is optional. However,

you must apply var to declare a variable inside a function

Values, Variables, and Literals (Contd.)

An object literal is a list of zero or more pairs of property names and

associated values of an object, enclosed in curly braces ({})

A string literal is zero or more characters enclosed in double or single

12, 987.654, true or false, Texas Tech

>=, ==, +=, ||, <, >, and so on

If, if.else, for, and so on