PLEASE NOTE: This Tech Tip applies to 4D Web 2.0 Pack version 1.1
The 4D Ajax Framework contains several types of Data View objects for displaying data on a web page. Each Data View object displays data in a different format and is used for a different purpose. This Tech Tip will discuss creating a web page that will utilize the Data Grid object. A full source code example is provided at the end of this Tech Tip.
The Data Grid's purpose is to display data in a tabular view. The Data Grid supports live updating of the data as well, so the data is always fresh and in realtime. The Data Grid also allows several customization options like showing/hiding specific columns, row actions and events.
This Tech Tip is a documented example of creating a Data Grid object that is embedded in an HTML page. It is assumed that you have an understanding of HTML, JavaScript and CSS already, so these concepts will not be focused on. It is also assumed that you have the 4D Ajax Framework component installed in your structure and you have a working web installation.
A very simple HTML page without JavaScript, Cascading Style Sheets and 4D Ajax Framework Objects can look like the following:
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> replace with your document's title </title> </head> <body> replace with your document's content </body> </html> |
With a simple HTML page like the above you can start to add the required pieces to create a functional Data Grid object.
Lets start by adding the required call to the 4D Ajax Framework Cascading Style Sheets. As you know Cascading Style Sheet calls are places in the <head></head> of the HTML page, but before the <title></title>. The call would look similar to:
| <!-- ### EXPLANATION ### - - This next line defines the style sheet that all 4D AF objects need to look proper --> <link rel="stylesheet" href="dax/themes/basic/basic.css" media="all" type="text/css" title="XPress" /> |
Next, the required JavaScript files need to be referenced. Normally this is done directly after the
<title></title> tag. Similar lines like the following should be added.
| <!-- ### EXPLANATION ### - - these next lines reference needed Javascript file for 4D AF to work properly --> <script language="javascript" type="text/javascript" src="dax/js/framework.js"><</script> <script language="javascript" type="text/javascript" src="dax/js/dax.js"></script> |
Next, it is required to add some inline JavaScript code so that the appropriate events are handled when the web page is loaded. Inline JavaScript is placed in the <head></head> section of the web page and after the <title></title> section. Inline JavaScript is paced in <script></script> tags and would look like the following:
<script language="javascript" type="text/javascript"> </script> |
Code needs to be placed inside the <script></script> tags. This code defines necessary events that must run when the web page is loaded in the browser. The first event, dax_load() is fired when the page loads in the browser. This code simply logs in to the database with the specified user so that we can work with the 4D Ajax Framework Objects and the data they require. The second event is onAfterInit() and is fired after the dax_load() event has executed. This event is where the Data Grid object is created and customized as needed. This code is as follows:
// Do Not Modify dax_load function <!-- // ### EXPLANATION ### - - onAfterInit gets fired and as you can see below this is where the DataGrid is created with all necessary paramemters. Notice the MyDataGrid1.customize statement, other commands like .SetCoumnWidth would go in this same place, after, the creation of the Grid itself. --> |
Next, it is necessary to add a JavaScript onload() event that calls dax_load() to the <body></body> tag so that the event is run. The code is as follows:
| <body onload="dax_load();"> |
Lastly, it is necessary to define your objects in the <body></body>. Since the bulk of the work as been done, the calls inside the <body></body> tag are easy. They would look something like:
| <center> <!-- Here is where you define the grid and place it at its desired location on your HTML page --> <div id="dax_grid1" class="dax_object"></div> </center> |
It is important to note that the <div id=""> name used matches the document.getElementByID(" ") name used in the onAfterInit() function. If these do not match, the Data Grid object will not be displayed or work properly.
For clarity, here is the complete code that was explained above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script language="javascript" type="text/javascript"> <body onload="dax_load();"> |
4D, Inc. also now offers a Dreamweaver CS3 extension to help aid in the process of creating 4D Ajax Framework based pages. More information about this extension can be found at:
http://www.4d.com/products/4dweb20pack_DW.html
For the latest information the 4D Ajax Framework please see the Daxipedia:
http://daxipedia.4d.com