extreme ComponentsはAJAXガイドを使用します.
8928 ワード
extreme ComponentsはAJAXガイドを使用します.
AJAXガイド
進行中…
eXtreme TableでAJAXを使うのはとても簡単で、既存の機能の拡張にもとても便利です.AJAX統合の最も強力なところは、統合が不要です.あなたが使いたいAJAXツールバッグは自由に使えます.すべてのやるべきことは、表のactionが呼び出された時に、eXtreme Tableに何を使うかを教えます.表のactionsには、フィルタ、ソート、改ページ、表示の行数、およびエクスポートがあります.
自分の例では、非常にクールなDWRツールバッグを使います.DWRに必要な接着コードは非常に少ないので、表をどのように構築するかに注目する必要があります.この駅の例で効果が見られます.
[edit]
Asssember Example
この例では、DWRツールパッケージをインストールし、POJOを作成してテーブルを作成し、eXtreme Tableを含むJSPページを作成します.
[edit]
DWRの取り付け
まずはDWRツールバッグをダウンロードします.ウェブサイトの使用説明をご覧になるべきですが、以下は私のニーズに合わせて仕事をさせていただきます.は、dwr-11.jarをWEB-INF/libディレクトリ にコピーする.、WEB-INFディレクトリの下でdwr.xmlファイル を作成します.は、WEB-INF/web.xmlでDWR servletを宣言する である.
[edit]
POJOを作成
DWRはPOJOsを使用します.これは非常に私たちのニーズに合っています.eXtreme TableはJspラベルを使ってテーブルを構成するために十分なAPIがあります.実際、JSPタグはeXtremable Java APIの先端にすぎない.まず、構造表の方法を示します.
ble.set OnInvokeAct(「buildTable」);一番面白い呼び出しです.表のactionsを使うと、このjavascript方法が呼び出されます.表のオンインボアクションが空白であれば、デフォルトのjavascript方法が提出されます.期待通りです.
Asmberクラスの別の方法---getTable():
[edit]
コントローラ
[edit]
JSP
適切なjavascriptファイルを導入することにより、JSPページの構築を開始します.唯一のプロジェクトを含める必要があるjavascriptファイルはextrement ponents.jsで、他のjavascriptファイルはすべてDWRで使用されます.
[edit]
結論
本ガイドは、eXtremteTableでAJAXを使用するために必要な手順を説明しています.注意すべきことの一つは、AJAXと実際に統合されていないことです.テーブルのactionsが使用されている場合は、eXtremteTableに対して、Javascriptがどのように調整されるかを簡単に教えてください.もう一つは、本例でDWRツールパッケージを知ることができます.POJOJOGボックスを使用することができます.を使用します.
AJAXガイド
進行中…
eXtreme TableでAJAXを使うのはとても簡単で、既存の機能の拡張にもとても便利です.AJAX統合の最も強力なところは、統合が不要です.あなたが使いたいAJAXツールバッグは自由に使えます.すべてのやるべきことは、表のactionが呼び出された時に、eXtreme Tableに何を使うかを教えます.表のactionsには、フィルタ、ソート、改ページ、表示の行数、およびエクスポートがあります.
自分の例では、非常にクールなDWRツールバッグを使います.DWRに必要な接着コードは非常に少ないので、表をどのように構築するかに注目する必要があります.この駅の例で効果が見られます.
[edit]
Asssember Example
この例では、DWRツールパッケージをインストールし、POJOを作成してテーブルを作成し、eXtreme Tableを含むJSPページを作成します.
[edit]
DWRの取り付け
まずはDWRツールバッグをダウンロードします.ウェブサイトの使用説明をご覧になるべきですが、以下は私のニーズに合わせて仕事をさせていただきます.
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Assembler">
<param name="class" value="org.extremesite.controller.Assembler"/>
<include method="getTable"/>
</create>
</allow>
<signatures>
<![CDATA[
import java.util.Map;
import java.util.List;
import org.extremesite.controller.Assembler;
import javax.servlet.http.HttpServletRequest;
Assembler.getTable(Map<String, List> parameterMap, HttpServletRequest request);
]]>
</signatures>
</dwr>
簡単に言えば、(In a nutshell)作成ラベルは、メソッドが呼び出されたときに、構築テーブルに必要なPOJOを参照することができます.署名ラベルは、呼び出し方法の実際のタイプを宣言しています.本例のAsssemberクラスのgetTable方法は、formパラメータを含むMapとHttpServletRequestを導入する. <servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
以上でDWR servletの設定が完了しました.POJOを呼び出します.設定以外に、このservletについてもっと知る必要がありません.[edit]
POJOを作成
DWRはPOJOsを使用します.これは非常に私たちのニーズに合っています.eXtreme TableはJspラベルを使ってテーブルを構成するために十分なAPIがあります.実際、JSPタグはeXtremable Java APIの先端にすぎない.まず、構造表の方法を示します.
public class Assembler {
private Object build(TableModel model, Collection presidents) throws Exception {
Table table = model.getTableInstance();
table.setTableId("assembler");
table.setItems(presidents);
table.setAction(model.getContext().getContextPath() + "/assembler.run");
table.setTitle("Presidents");
table.setOnInvokeAction("buildTable('assembler')");
model.addTable(table);
Export export = model.getExportInstance();
export.setView(TableConstants.VIEW_XLS);
export.setViewResolver(TableConstants.VIEW_XLS);
export.setImageName(TableConstants.VIEW_XLS);
export.setText(TableConstants.VIEW_XLS);
export.setFileName("output.xls");
model.addExport(export);
Row row = model.getRowInstance();
row.setHighlightRow(Boolean.FALSE);
model.addRow(row);
Column columnName = model.getColumnInstance();
columnName.setProperty("fullName");
columnName.setIntercept((AssemblerIntercept.class).getName());
model.addColumn(columnName);
Column columnNickName = model.getColumnInstance();
columnNickName.setProperty("nickName");
model.addColumn(columnNickName);
Column columnTerm = model.getColumnInstance();
columnTerm.setProperty("term");
model.addColumn(columnTerm);
Column columnBorn = model.getColumnInstance();
columnBorn.setProperty("born");
columnBorn.setCell(TableConstants.DATE);
model.addColumn(columnBorn);
Column columnDied = model.getColumnInstance();
columnDied.setProperty("died");
columnDied.setCell(TableConstants.DATE);
model.addColumn(columnDied);
Column columnCareer = model.getColumnInstance();
columnCareer.setProperty("career");
model.addColumn(columnCareer);
return model.assemble();
}
}
上のほとんどのコードは自己解釈的で、どのようにTable Modelを構築するかを下に見ますが、まずTable Modelは構造表の時に相互作用が必要な唯一のオブジェクトです.構造表の第一歩は、Table Modelを用いてTable、Row、Column、Exportを作成することである.いったんモデルオブジェクトを作成したら、モデルに追加するだけです.それをTable Modelに追加しない限り、modelはそれを使用しません.すべてのものが構築されたら、あなたはmodel.assiebleを呼び出すだけで表を作成します.ble.set OnInvokeAct(「buildTable」);一番面白い呼び出しです.表のactionsを使うと、このjavascript方法が呼び出されます.表のオンインボアクションが空白であれば、デフォルトのjavascript方法が提出されます.期待通りです.
Asmberクラスの別の方法---getTable():
public class Assembler {
public String getTable(Map parameterMap, HttpServletRequest request) {
WebApplicationContext webApplicationContext = WebApplicationContextUtils.getWebApplicationContext(request.getSession().getServletContext());
PresidentsDao presidentsDao = (PresidentsDao) webApplicationContext.getBean("presidentsDao");
Collection presidents = presidentsDao.getPresidents();
Context context = null;
if (parameterMap == null) {
context = new HttpServletRequestContext(request);
} else {
context = new HttpServletRequestContext(request, parameterMap);
}
TableModel model = new TableModelImpl(context);
try {
return build(model, presidents).toString();
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
}
この方法の呼び出しは頻繁で、二重の役割を果たします.これはController(Springを使うなら)によって初めて呼び出される必要があります.Strutsを使うなら、アクションクラスと同じです.その後、AJAXを使うと、この方法も呼び出される必要がありますが、今回はカスタマイズされたparameterMapが入ってきます.parameterMapはeXtremableがAJAXを使用するために必要なすべてのパラメータを含みます.ControllerとJSPを見たら、これはもっとはっきりします.[edit]
コントローラ
public class AssemblerController extends AbstractController {
public String successView;
public void setSuccessView(String successView) {
this.successView = successView;
}
protected ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception {
ModelAndView mv = new ModelAndView(successView);
Assembler assembler = new Assembler();
Object viewData = assembler.getTable(null, request);
request.setAttribute("assembler", viewData);
return mv;
}
}
controllerは、最初の呼び出し時にテーブルを構築する.それはPOJOを呼び出して、表をrequestに伝えます.空の値(null)はどのようにparameterMap伝送を使いますか?初めて表が作られた時、対応表がないので知る必要があるactionsです.[edit]
JSP
適切なjavascriptファイルを導入することにより、JSPページの構築を開始します.唯一のプロジェクトを含める必要があるjavascriptファイルはextrement ponents.jsで、他のjavascriptファイルはすべてDWRで使用されます.
<script type="text/javascript" src="<c:url value="/dwr/interface/Assembler.js"/>"></script>
<script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
<script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/extremecomponents.js"/>"></script>
次に、フックを挿入してテーブルを表示し、divを用いてinnerHtmlを呼び出して、新しいラベルを構築する. <div id="tableDiv">
<c:out value="${assembler}" escapeXml="false"/>
</div>
最後に、javascriptを追加してDWRのフックを呼び出します.<script type="text/javascript">
function buildTable(form) {
var parameterMap = getParameterMap(form);
Assembler.getTable(parameterMap, showTable);
}
function showTable(table) {
document.getElementById('tableDiv').innerHTML=table;
}
</script>
get ParameterMap()方法はextremtemponents.jsファイルに含まれています.すべてのformパラメータになります.form idの参照を入力してください.eXtremteTableは本質的にformで構成されています.標準のtabledcはecですが、tableIdを設定したいです.皆さんが、より簡単にPOterratpactコードを呼び出すことができます.ble方法.showTableは、DWRがgetTableから戻るとき、何を呼び出すかをDWRに教えてくれるcalbackです.[edit]
結論
本ガイドは、eXtremteTableでAJAXを使用するために必要な手順を説明しています.注意すべきことの一つは、AJAXと実際に統合されていないことです.テーブルのactionsが使用されている場合は、eXtremteTableに対して、Javascriptがどのように調整されるかを簡単に教えてください.もう一つは、本例でDWRツールパッケージを知ることができます.POJOJOGボックスを使用することができます.を使用します.