📄 howto.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Buffalo AJAX - Howto</title>
<style type="text/css" media="all">
@import url("./css/maven-base.css");
@import url("./css/maven-theme.css");
@import url("./css/site.css");
</style>
<link rel="stylesheet" href="./css/print.css" type="text/css" media="print" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body class="composite">
<div id="banner">
<a href="index.html" id="bannerLeft">
<img src="images/buffalo-title.gif" alt="" />
</a>
<a href="http://sourceforge.net" id="bannerRight">
<img src="http://sflogo.sourceforge.net/sflogo.php?group_id=178867&type=1" alt="" />
</a>
<div class="clear">
<hr/>
</div>
</div>
<div id="breadcrumbs">
<div class="xleft">
Last Published: 10/08/2006
</div>
<div class="xright"> <a href="http://www.amowa.net/buffalo/zh">Chinese Docs</a>
</div>
<div class="clear">
<hr/>
</div>
</div>
<div id="leftColumn">
<div id="navcolumn">
<h5>Quick Start</h5>
<ul>
<li class="none">
<a href="tutorial.html">1 Minute Tutorial</a>
</li>
<li class="none">
<a href="http://demo.amowa.net/buffalo-demo/">Demo</a>
</li>
<li class="none">
<a href="download.html">Download</a>
</li>
<li class="none">
<a href="features.html">Features</a>
</li>
<li class="none">
<a href="faq.html">FAQ</a>
</li>
</ul>
<h5>Mastering Buffalo</h5>
<ul>
<li class="none">
<a href="best_practice.html">Best Practise</a>
</li>
<li class="none">
<strong>How to...</strong>
</li>
</ul>
<h5>Reference</h5>
<ul>
<li class="none">
<a href="jsapi.html">JavaScript API</a>
</li>
</ul>
<a href="http://maven.apache.org/" title="Built by Maven" id="poweredBy">
<img alt="Built by Maven" src="./images/logos/maven-feather.png"></img>
</a>
</div>
</div>
<div id="bodyColumn">
<div id="contentBox">
<div class="section"><h2>How to...</h2><ul><li><a href="#1">Start a new buffalo project</a></li><li><a href="#2">Add buffalo feature to existing project</a></li><li><a href="#3">Upgrade from former versions</a></li><li><a href="#4">Integrated with Spring</a></li><li><a href="#5">Serializing a form on web page to an object</a></li><li><a href="#6">Customize events</a></li><li><a href="#7">Data binding</a></li><li><a href="#8">Browser forward/back</a></li></ul><div class="section"><h3><a name="1">1</a> Start a new buffalo project}</h3><p>Please follow the <a href="tutorial.html">tutorial</a> to create a new application, or download the binary distribution and copy to have a skeleton. </p></div><div class="section"><h3><a name="2">2</a> Add buffalo feature to existing project</h3><p>If you want to use the web remoting feature, just copy the buffalo-<i>version</i>.jar (and commons-logging.jar if not supplied) and buffalo.js. Please refer other documents using buffalo. If you need buffalo delegate you page flow, please split the page as the demo application. Please not miss the <a href="best-practice.html"> best practice</a> to see if your application suitable for OPOA.</p></div><div class="section"><h3><a name="3">3</a> Upgrade from former versions</h3><p>To uprage is quite easy. </p><div class="section"><h4>If you upgrade from version 1.1: </h4><ul><li>remove the burlap*.jar, replace with buffalo-<i>version</i>.jar</li><li>replace the buffalo.js with the lastest version</li><li>remove the endpoint servlet definition in spring. we need only one servlet now</li><li>Change the code: <ul><li>JavaScript: endpoint change to "yourappname/bfapp";</li><li>Server: No need to change</li></ul></li></ul></div><div class="section"><h4>If you upgrade from version 1.2.x:</h4><ul><li>remove the burlap*.jar, replace with buffalo-<i>version</i>.jar</li><li>replace the buffalo.js with the lastest version</li><li>If possible, change the java code which is inherited from BuffaloService. Replace the corrosponding method to RequestContext.getContext().getXXX. We still have backward compatibility anyway. </li><li>that's it. </li></ul></div></div><div class="section"><h3><a name="4">4</a> Integrated with Spring</h3><p>To integrated with Spring is quite simple. First you need to make sure spring can be loaded successfully (using config servlet or context listener). Please refer Spring related documents for further infomation. After that, add a config bean into any of the spring configruation files like below: </p><div class="source"><pre><bean name="buffaloConfigBean" class="net.buffalo.service.BuffaloServiceConfigurer">
<property name="services">
<map>
<entry key="testSpringService1"><ref bean="yourBeanId"/></entry>
<!-- oterh entries... -->
</map>
</property>
</bean>
</pre></div><p>That's it. When the application is started, buffalo will find this bean and load all services defined in the services property. There is no difference between the service comes from buffalo-service.properties and spring. buffalo client cook them the same way. :) </p></div><div class="section"><h3><a name="5">5</a> Serializing a form on web page to an object</h3><p>There is a Buffalo.Form.formToBean method from buffalo version 1.2.1, which can serialize a form to an object directly. You can see the Form demo in the demo application. Here we have a simple example showing how we transform a form to a net.buffalo.demo.form.User object. </p><div class="source"><pre>var userObj = Buffalo.Form.formToBean("form1", "net.buffalo.demo.form.User");
buffalo.remoteCall("userService.createUser", [userObj], function(reply){
alert(reply.getResult().username);
})
</pre></div><p>The serializing principal: </p><ul><li>For simple fields like text, password, radio, select-one, will add a fieldName=fieldValue property to the object.</li><li>For select-many, checkbox, will add a fieldName=List<i>String</i> to the object.</li></ul></div><div class="section"><h3><a name="6">6</a> Customize events</h3><p>Buffalo support customized event when doing remoting call:</p><table class="bodyTable"><tbody><tr class="a"><td align="left"><b>Event</b></td><td align="left"><b>Description</b></td><td align="left"><b>Parameter</b></td><td align="left"><b>Default Impl</b></td></tr><tr class="b"><td align="left">onLoading</td><td align="left">when loading a request</td><td align="left">true or false</td><td align="left">a buffalo loading div will appear on top right of the screen</td></tr><tr class="a"><td align="left">onFinished</td><td align="left">when finished the request</td><td align="left">nothing</td><td align="left">empty function</td></tr><tr class="b"><td align="left">onError</td><td align="left">when there is an error (normally is 500 or 404 error)</td><td align="left">xmlhttp object</td><td align="left">a red div will displayed</td></tr><tr class="a"><td align="left">onException</td><td align="left">when invoking a service, throws exception</td><td align="left">Buffalo.Fault object</td><td align="left">a yellow div will displayed</td></tr><tr class="b"><td align="left">onTimeout</td><td align="left">when timeout, default is 10 seconds</td><td align="left">nothing</td><td align="left">alert("timeout")</td></tr></tbody></table><p>If you want to customize the events, You can </p><div class="source"><pre>var buffalo = new Buffalo(endpoint, async, {onLoading: yourLoadingFunction, onError: yourErrorHanlder ...})
</pre></div><p>Or </p><div class="source"><pre>buffaloInstance.events["onLoading"] = function(state) {
if (state) { //displaying message
...
}
}
</pre></div></div><div class="section"><h3><a name="7">7</a> Data binding</h3><p>Buffalo support on way binding, which is, bind the javascript object value to html elements.</p><div class="source"><pre>buffalo.bindReply(service, params, elementId)
</pre></div><p>Above code will try to make a remote call, and bind the reply result to the element directly. Or you can try Buffalo.Bind.bind(elementId, bindValue). </p></div><div class="section"><h3><a name="8">8</a> Browser forward/back</h3><p>You need the buffalo-blank.html to enable this feature. The download binary contains this file. </p><div class="source"><pre><iframe src="buffalo-blank.html"
id="buffalo-view-history-iframe" width="0" height="0"
style="display:none;"></iframe>
</pre></div><p>When you want to swtich the view, use buffalo.switchView(viewName), buffalo will remember the history automatically. If you don't need this feature for some specified view, use buffalo.switchPart(...) to exculde. Please reade the <a href="jsapi.html">JavaScript API</a> for more. </p></div></div>
</div>
</div>
<div class="clear">
<hr/>
</div>
<div id="footer">
<div class="xright">©
2004-2006
</div>
<div class="clear">
<hr/>
</div>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -