Ajax in PRPC

Ajax in PRPC
/*author@JeremyThis 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. FlagsThe 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 development1.Use the  ‘dojo.io.bind’ method in the HTML/JSP/ASP pagesMost 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 sideSuppose 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.orghttp://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book31http://dojotoolkit.org/api/#dojo.io
2. Let Dojo live in PRPC2.1 Get ready in your PRPC SystemBefore 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 PRPCSuppose 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 UIBecause 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 designWe have 2 sections here:1 Profile Section 2 Profile and CompanyIf 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 harnessYou 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 requestNow 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 browser2 Use the PRPC method to build the activity
a Design your own Rule-Obj-HTMLIn 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)