打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Lesson 6: Create a Dojo data grid
n this lesson you continue to create the web client interfaceby adding a Dojo data grid widget to the page and populating the gridwith content.
To create a grid to display the movie objects:
  1. In the palette, click the Dojo Data Widgets drawerto open it.
  2. Drag a DataGrid widget inside theborder container, but to a position outside of the existing regions.
    Note: You might not see the right region of the border containerin the Design pane.
    The Dojo DataGrid wizard opens. The datagrid widget creates a table that looks like a spreadsheet.
  3. Clear the Generate JavaScript to populate thegrid check box.
  4. In the Columns section, specify the column heading labelsand JavaScript propertyfor each column:
    1. In the Heading Label field, enter Title.
    2. In the JavaScript Property field,enter title.
    3. Click Add to add the HeadingLabel - JavaScript Propertypair to the table below.
    4. Repeat the previous steps to add the following pairsof heading labels and JavaScript properties:
      Heading labelJavaScript property
      Directordirector
      Actoractor
      Descriptiondescription
  5. Click Finish. In theSource pane, you can see that the HTML markup for the data grid isadded with the JavaScript propertiespopulating the field attribute and the correspondingheading labels as column names.

    A set of Dojo require statements for the DataGrid and ItemFileReadStoremodules are added automatically. The dojo.require statement loadsall of the Dojo packages that are required by the widgets on the webpage:

    Cascading style sheet (CSS)links are also added to the source code of the web page. Tundra.cssand dijit.css are part of the default Dojo themes that give widgetsa consistent look and feel. Grid.css and tundraGrid.css are stylesheetsthat are specific to data grid display:

  6. In the Source pane, select the <table> tag. The table tab is displayed in the Properties view.
  7. In the Properties view, enter the following text in the Style:Properties field: position:absolute; top: 50px; left: 50px;. The addedstyle properties will set the table to 50 pixels to the right of theleft side of the border container and 50 pixels below the top of theborder container.
  8. Now you can populate the data grid. First, you will usecontent assistance to add the script tags for the JavaScript code to populate the data grid.To manually invoke content assist, press CTRL + Space.
  9. In the Source pane, below the </script> tagthat contains the dojo.require statements, type <.You can see the content assist on the right.
  10. Select script to add the followingcode:<script type="text/javascript"> </script>.
  11. Inside the empty script tags, type dojo.a andpress CTRL + Space to invoke content assist. The content assistoptions are narrowed down as you type.
  12. Select the dojo.addOnLoad functiontemplate. This template automatically adds an anonymous function asa parameter of the addOnLoad call. This anonymous function will containthe code that retrieves the data to populate the data grid.
  13. The next step is to write the Ajax function to get thedata from a service URL or JSON file. You will use the Dojo xhrget functionto retrieve the data. Inside the addOnLoad anonymous function, type dojo.xhrget.
  14. Invoke content assist and then select the dojo.xhrget template:
    Content assist providesa Dojo template for the xhrget function. When you select the template,the code in the tooltip is added to your source code, like this:
    dojo.xhrGet( {	url : "url",	handleAs : "text",	load : function(response, ioArgs) {			},	error : function(response, ioArgs) {	}});
  15. Change the URL attribute to the Service URL or the locationof the JSON file containing the data.
    • Option one: If you downloaded the JSON file, enterthe relative path to the JSON file: MovieList.json.
    • Option two: If you are using the RPC adapter service,copy and paste the following text into the URL property:/MyMovieProject/RPCAdapter/httprpc/MovieService/getMovieList.
  16. Set the handleAs attribute to json,because the RPC adapter service returns a JSON file with the data.
  17. The function that the load property declares is run ifthe data is loaded successfully. Add the following code to the loadproperty that populates the data grid:
    var newData = {					identifier: "title",					items: response.result			};			var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});			var grid = dijit.byId("gridId");			  grid.setStore(dataStore);
    The code above that youjust added reformats the data loaded in response into the format thatis required by dojo.data.ItemFileReadStore, creates an ItemFileReadStoredata store with the reformatted data and adds it to the data grid.Adding the var keyword before the variable nameplaces the variable in a scope local to the load function.
  18. On the function that is declared in the error attribute,add the following code: alert("An error occurredwhile invoking the service.");
  19. Save the page.
  20. You can test the web page by right-clicking ShowMovies.html inEnterprise Explorer, and then selecting RunAs > Run on Server.
  21. In the servers list, select your server:
    • Option one: If you are using the JSON file as a datasource, select AJAX Test Server.
    • Option two: If you are using the RPC adapter as a datasource, select WebSphere Application Server 8.0.
    Click Finish. The ShowMovies.html pageopens in a browser.
The source code of ShowMovies.html should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><link rel="stylesheet" type="text/css"	href="dojo/dijit/themes/dijit.css"><link rel="stylesheet" type="text/css"	href="dojo/dijit/themes/claro/claro.css"><title>ShowMovies</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><script type="text/javascript"	djconfig="isDebug: false, parseOnLoad: true" src="dojo/dojo/dojo.js"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit.layout.BorderContainer");dojo.require("dijit.layout.ContentPane");dojo.require("dojox.grid.DataGrid");dojo.require("dojo.data.ItemFileReadStore");</script><script type="text/javascript">dojo.addOnLoad(function() {dojo.xhrGet({	url : "/MyMovieProject/RPCAdapter/httprpc/MovieService/getMovieList",	handleAs : "json",	load : function(response, ioArgs) {		var newData = {					identifier: "title",					items: response.result			};			var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});			var grid = dijit.byId("gridId");			  grid.setStore(dataStore);	},	error : function(response, ioArgs) {	alert("An error occurred while invoking the service.");	}});});</script><link rel="stylesheet" type="text/css" title="Style"	href="dojo/dojox/grid/resources/Grid.css"><link rel="stylesheet" type="text/css" title="Style"	href="dojo/dojox/grid/resources/claroGrid.css"></head><body class="claro">	<div dojotype="dijit.layout.BorderContainer" id="BorderContainer"		design="headline" style="height: 100%; width: 100%">		<table id="gridId" dojotype="dojox.grid.DataGrid" autowidth="true"			rowselector="20px" style="position: absolute; top: 50px; left: 50px;">			<thead>				<tr>					<th field="title">Title</th>					<th field="director">Director</th>					<th field="actor">Actor</th>					<th field="description">Description</th>				</tr>			</thead>		</table>		<div dojotype="dijit.layout.ContentPane" region="top" style="text-align: center">My Movie Web Application!</div>	<div dojotype="dijit.layout.ContentPane" region="right"></div>		<div dojotype="dijit.layout.ContentPane"></div>	</div></body></html>

Lesson checkpoint

You created the web page code for the Dojo client.
You learned:
  • How to add a data grid to a web page.
  • How to use content assist to rapidly write Dojo code
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Dojo Tips and Tricks - InsideRIA
dojo 粗略
dojo tooltip
JQGRID 基本用法及示例、换肤等
给jqGrid数据行添加修改和删除操作链接(可以执行)
dojo - 方法解析
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服