/*author@Jeremy
This document is written in the Company and used for PRPC develop only,I gave the document to show how to use dojo ,another part is 'dojo used in the PRPC' ,The architect of BPM can reference that part
*/
Ajax in PRPC
1.Dojo introduction
1.1 What is Dojo?
• Dojo is the Open Source JavaScript Toolkit
• It is tool for constructing dynamic web user interfaces
• Dojo offers widgets, utilities, higher IO (AJAX) abstraction etc.
1.2 Dojo and AJAX
• Dojo is sometimes advertised as AJAX framework
1.3 Getting Started
a. Adding Dojo to Your Pages
In order to use dojo in your HTML pages, you need three sections of code, in this order:
1. Flags
The flags control various options of dojo; often developers will set isDebug to true in order to get debugging output on their page. (There are also some other flags related to debugging; see the Debugging section of the code for details.)
<script type="text/javascript">
djConfig = { isDebug: false };
</script>
2. Include the dojo bootstrap
<script type="text/javascript" src="/path/to/dojo/dojo.js"></script>
//
The ‘dojo.js’ package‘s path
This includes the bootstrap section of dojo, and if you are using a release build, then dojo.js will also include code for some of the dojo modules.
3. Define what packages you are using
<s
cript type="text/javascript">
dojo.require("dojo.io.*");
</script>
This section is much like java's "import" statement. You specify every package that you are using in your code. However, note that we will develop the Ajax in PRPC .So the ‘dojo.io.*’ is what we need!
b. Use the dojo.io to start our Ajax development
1.Use the ‘dojo.io.bind’ method in the HTML/JSP/ASP pages
Most of the magic of the dojo.io package is exposed through the bind() method. dojo.io.bind() is a generic asynchronous request API that wraps multiple transport layers .Dojo attempts to pick the best available transport for the request at hand, and in the provided package file, only XMLHTTP will ever be chosen since no other transports are rolled in.
you would call bind() like this:
dojo.io.bind({
url: "http://foo.bar.com/sampleData.txt", //The server’s URL
load: function(type, data, evt){ /*do something to the data */ },
//1.
type :Judge the communication with server is OK or not
2.
data : The data return from your server. It is Object type
formNode: document.getElementById("form_name")
//
get The Form from the HTML page
});
*P.S: If you use formNode in the ‘dojo.io.bind’.You should give it your form in the page. And the Dojo will automatically search all the input in your form and build a string with your inputs to transmit to the server . But you can also use the content in the ‘dojo.io.bind’ to replace the formNode. And if you use the ‘ content’ ,you can build your own string to transmit to the server
You can use the ‘content’ as follows:
content: {name1: document.getElementById('name1').value,
name2: document.getElementById('name2').value,
name3: document.getElementById('name3').value }
2 What we should do in the server side
Suppose we use the Java Servlet as the server, we should write like this:
1 public class SerDojo extends javax.servlet.http.HttpServlet
2
3 implements javax.servlet.Servlet {
4
5 public SerDojo() {super();}
6
7 protected void doGet(HttpServletRequest request,
8
9 HttpServletResponse response) throws ServletException, IOException
10
11 {PrintWriter out = response.getWriter();//
12
13
14
15 String strFlag = request.getParameter("input_name");//use this method to get value //from the ‘dojo.io.bind’
16
17
18
19 out.print("OK"); // The string ‘OK’ will go back to the property ‘data’ in ‘load:fun //ction(type, data, evt){}’
20
21 protected void doPost(HttpServletRequest request,
22
23 HttpServletResponse response) throws ServletException, IOException {
24
25 doGet(request, response);}
26
27 }
28
See these URL for more info
http://manual.dojotoolkit.org
http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book31
http://dojotoolkit.org/api/#dojo.io
2. Let Dojo live in PRPC
2.1 Get ready in your PRPC System
Before our guide , we should get prepared with the PRPC.
What we should do is :
Create RuleSet
Create Application
Create AccessGroup
Create Organization Hierarchy
Create Developer ID
Create Class Structure
A simple workflow for Dojo test
Create properties
Create UI
Ps: More information about the PRPC prepared you can get from the book
designingyourapplicationwithsmartbuild.pdf
2.2 Get Database prepared in PRPC
Suppose that we have successfully build some properties for the Dojo use:
a. Create a Data-Admin-DB-Name instance. You should use an External database.
b. Create a Data-Admin-DB-Table instance. This time we use a work object as its Class Name field
c. Create a Rule-Connect-SQL instance, whose Applies To key part must be the same as the class of the Data-Admin-DB-Table instance;
i)For the properties in Company
We use following sentence:
RDB-Save
:
ii)For the properties in profile
use following sentence:
RDB-Save:
RDB-Delete:
RDB-browser
PS :you an get more information from VSS:
$/TechBuilder/Pega/KT/PRPC _RDB-method_KT Doc 20061017ByPeter.doc
2.3 Put the Dojo in the UI
Because the Dojo should be used in the HTML/JSP/ASP, so in PRPC , you should use your own UI: harness, section.
a.Harness can help you to import the Dojo bootstrap(dojo.js) and dojo package(dojo.io)
As we all know, the developer can’t edit the codes in the harness manually, so your own javascript codes and dojo codes can’t be put into the harness .But you can import the necessary dojo package in the harness.
So please do as follows:
1.Select your harness instance , then select the Tab:
2.Add the dojo.js and dojo.io package in the column scripts
3 In the ‘dojoInclude’, then should be a like follows:
In the ‘dojo’,should be the dojo.js file
4.Add your own sections in your harness:
b Section design
We have 2 sections here:
1 Profile Section
2 Profile and Company
If we use the Portlet compliant in Section design, we can’t use the dojo
And the section design enable you to use your own code, so we should do as follows to implement the Dojo:
i) In the section design page, select the Tab: ,then cancel the Portlet compliant, it should be
ii) Then add your own codes in the .The main context is :
After you have finished the section and harness
You will access the end of the UI design
But don’t remember to add your harness in your flow!
2.4 Now let the activity prepare for serving the Dojo request
Now we come to the server side design!
In PRPC we use the activity that replace the servlet in java to give response to the HttpXMLRequest from Dojo.
There are mainly 2 steps to access the end:
1 Design your own stream to the browser
2 Use the PRPC method to build the activity
a Design your own Rule-Obj-HTML
In the Rule-Obj-HTML you should get the property from the clipboard and define your own steam that can transmit to the browser
i) some main API introduction :
ClipboardPage profile= tools.findPage("pageName",true);
ClipboardProperty prop = profile.getProperty("pxResults");
String astring = itemPage.getProperty("property_name").getStringValue();
ii) create the instance of Rule-Obj-Html
Step1:Select the Generate for
!! Caution :The default selection is ,don’t use this selection
Step 2 : Then add the codes :
b Design your own activity
You can design your activity as following steps:
Step 1 Get the property from the harness and save them in the clipboard(property-set)
Step 2 Save the properties in the DB (RDB-Save)
Step 3 Get all the records in the DB and save them in the clipboard(RDB-List)
Step 4 Show the HTML stream which get the properties from clipboard and then show them
(Show-HTML)