CINXE.COM
OAT Framework
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- $Id: index.html,v 1.41.4.5 2012/01/16 19:07:06 pvk Exp $ This file is part of the OpenLink Ajax Toolkit (OAT) project Copyright (C) 2005-2012 OpenLink Software This project is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; only version 2 of the License, dated June 1991 This project is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" > var featureList=["tab","panelbar","dimmer","dialog"]; </script> <script type="text/javascript" src="/DAV/JS/oat/loader.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="/DAV/JS/demo/style.css" /> <link rel="meta" title="DOAP" href="/DAV/JS/DOAP-OAT.rdf" type="application/rdf+xml" /> <title>OAT Framework</title> </head> <body> <div id="throbber"><img src="/DAV/JS/images/throbber.gif" /></div> <div id="throbber_content"> <div id="source"> Click <a id="source_permalink" href="">here</a> for the URI (Permalink) of this source <div id="source_content"></div> </div> <h2>OAT Framework</h2> <h3 id="version"></h3> <p>Click <a id="source_btn" href="#">here</a> to see JS source used for currently selected demonstration.</p> <p>Click <a id="permalink" href="">here</a> for the URI (Permalink) of this Demo</p> <div id="panelbar"> <div id="pb_1">Introduction</div> <div id="pb_11"> <div id="tab_about">About</div> <div id="tab_usage">Usage</div> <div id="tab_compat">Compatibility</div> <div id="tab_license">Licensing</div> <div id="tab_docs">Documentation</div> <div id="tab_down" class="tab"><a href="http://sourceforge.net/projects/oat/files/">Download</a></div> </div> <div id="pb_2">Complete widgets</div> <div id="pb_22"> <div id="tab_chart">Bar Chart</div> <div id="tab_pie">Pie Chart</div> <div id="tab_sparklines">Line Chart & Sparklines</div> <div id="tab_grid">Grid</div> <div id="tab_pivot">Pivot table</div> <div id="tab_tree">Tree control</div> <div id="tab_dock">Dock</div> <div id="tab_panelbar_content">Panelbar</div> <div id="tab_slidebar_content">Slidebar</div> <div id="tab_ticker">Ticker</div> <div id="tab_fisheye">FishEye</div> <div id="tab_dav">WebDAV Browser</div> <div id="tab_timeline">Timeline</div> <div id="tab_rdf">RDF Graph</div> <!-- <div id="tab_menu">Menu</div> --> </div> <div id="pb_3">Supplemental widgets</div> <div id="pb_33"> <div id="tab_upload">Variable upload</div> <div id="tab_validation">Input restriction</div> <div id="tab_dimmer">Dimmer</div> <div id="tab_quickedit">QuickEdit</div> <div id="tab_combolist">Combo list</div> <div id="tab_combobox">Combo box</div> <div id="tab_combobutton">Combo button</div> <div id="tab_slider">Slider</div> <div id="tab_date">Date picker</div> <div id="tab_color">Color picker</div> <div id="tab_anchor">Enhanced Anchor</div> <div id="tab_rss">RSS Reader</div> <div id="tab_notify">Notification</div> </div> <div id="pb_4">Libraries</div> <div id="pb_44"> <div id="tab_json">JSON</div> <div id="tab_crypto">Cryptography</div> <div id="tab_stats">Statistics</div> <div id="tab_ajax">AJAX</div> <div id="tab_gd"><em>Ghost</em> Drag</div> <div id="tab_window">OS-style Windows</div> <div id="tab_round">Rounded corners</div> <div id="tab_tagcloud">Tag Cloud</div> </div> <div id="pb_5">Ajax DB Connectivity</div> <div id="pb_55"> <div id="tab_out_maps">Mapping</div> <div id="tab_out_pivot">Pivot</div> <div id="tab_out_cursors">Scrollable cursors</div> <div id="tab_out_data">Data modelling</div> </div> <div id="pb_6">Standalone applications</div> <div id="pb_66"> <div id="tab_app_qbe">Interactive SQL Query Builder</div> <div id="tab_app_designer">Database Designer</div> <div id="tab_app_formdesigner">Web Forms Designer</div> <div id="tab_app_isparql">Interactive SPARQL Query Builder</div> <div id="tab_app_ode">OpenLink Data Explorer</div> </div> </div> <div id="content"></div> <div id="about"> <h3>About</h3> <p>OAT (OpenLink AJAX Toolkit) is a JavaScript-based toolkit for browser-independent Rich Internet Application development. It includes a rich collection of UI Widgets/Controls, Event Management System, and a truly platform independent Data Access Layer called AJAX Database Connectivity.</p> <p>For maximum effect when viewing this Toolkit demo, please set your desktop resolution to at least 1024x768 pixels.</p> <p>You can view the online HTML version of <a href="http://oat.openlinksw.com/presentations/overview">OAT Presentation</a>.</p> </div> <div id="usage"> <h3>Usage</h3> <p>Using this toolkit is as simple as including two .js files in the <head> portion of an HTML document, and specifying a list of features you want to use. The framework will build the dependency tree and dynamically include all needed (and no other!) files.</p> <p>OAT works in Gecko browsers (Firefox, Mozilla/SeaMonkey), IE6/7, Opera and Apple WebKit.</p> <p>This particular demonstration page is XHTML/1.0 Strict valid.</p> </div> <div id="license"> <h3>Licensing information</h3> OpenLink Software's Ajax Toolkit (OAT)<br /> <br /> Copyright (C) 2005-2012 OpenLink Software<br /> <br /> This software is licensed under the GNU General Public License (see COPYING).<br /> <br /> Note that the only valid version of the GPL license as far as this project is concerned is the original GNU General Public License Version 2, dated June 1991.<br /> </div> <div id="chart"> <h3>Bar Chart</h3> <div id="chart_1"></div> <h3>Bar Chart - percentage</h3> <div id="chart_2"></div> </div> <div id="pie"> <h3>Pie Chart (SVG-based)</h3> <div id="pie_content"></div> </div> <div id="sparklines"> <h3>Line Chart & Sparklines (SVG-based)</h3> <div id="line_chart"></div> <div id="sparkline_1"></div> <div id="sparkline_2"></div> <div id="sparkline_3"></div> </div> <div id="grid"> <h3>Grid</h3> <div id="grid_content"></div> </div> <div id="pivot"> <h3>Interactive Pivot table</h3> <ul> <li>Use select-boxes above the table to select a desired aggregate function</li> <li>Use buttons below the table to toggle charts</li> <li>Click the main heading (left top corner) to change numerical type and </li> <li>Click any aggregate heading to change the order, filter values and toggle subtotals</li> <li>Drag any aggregate heading to any place that becomes red</li> </ul> Aggregate function: <select id="pivot_agg"></select><br/> Subtotals aggregate function: <select id="pivot_agg_totals"></select><br/> <div id="pivot_page"></div> <div id="pivot_content"></div> <div id="pivot_chart"></div> </div> <div id="date"> <h3>Date picker</h3> <input type="button" id="calendar_btn" value="Pick a date"/> <div id="calendar_value"></div> </div> <div id="color"> <h3>Color picker</h3> <p>Click rectangle to change its color</p><div id="color_content"></div> </div> <div id="anchor"> <h3>Enhanced Anchor</h3> <ul> <li>SQL lookup (hover) - categories > <a id="a_1" href="/XMLA">1</a></li> <li>RSS Timeline (click) - <a id="a_2" href="sparql.xml">here</a></li> <li>SPARQL query (click) - <a id="a_3" href="/sparql/">here</a></li> <li>In-page form with SQL data (click) - <a id="a_4" href="form.xml">here</a></li> </ul> </div> <div id="ajax"> <h3>AJAX</h3> Asynchronous HTTP calls are easily available. Test them by specifying a search term (at least 5 chars); this script will tell you how many pages Google finds. <br/><br/> <input type="text" id="ajax_input" /><br/> <span id="ajax_output"></span> </div> <div id="tree"> <h3>Tree control</h3> <ul id="tree_content"> <li>/<ul> <li>boot <ul> <li>kernel</li> </ul> </li> <li>etc <ul> <li>resolv.conf</li> <li>inittab</li> </ul> </li> <li>lib <ul> <li>modules <ul><li style="display:none"></li> </ul> </li> </ul> </li> <li>share <ul><li style="display:none"></li></ul> </li> <li>usr <ul><li style="display:none"></li></ul> </li> <li>var <ul> <li>log <ul> <li>messages</li> </ul> </li> </ul> </li> </ul></li> </ul> </div> <div id="json"> <h3>JSON - JavaScript Object Notation</h3> <p>Click the button to display some sample data in appropriate notation in the space below...</p> <input type="button" id="json_btn" value="Go!" /> <div id="json_content"></div> </div> <div id="upload"> <h3>Variable upload</h3> <div id="upload_content"></div> </div> <div id="validation"> <h3>Client-side input restriction</h3> Digits only, exactly 10 chars: <input id="validation_numbers" type="text" name="validation_numbers" /><br/> Letters only, 3-12 chars: <input id="validation_chars" type="text" name="validation_chars" /><br/> Date (1900/1/1-2010/12/31): <input id="validation_date" type="text" name="validation_date" /><br/> </div> <div id="dock"> <h3>Dock</h3> <p>Can be used for personalized home page or similar. Drag these boxes around to see what they can do...</p> <div id="dock_content"></div> <div id="dock_1">This is your home page.</div> <div id="dock_2">Everyone wants to have some cool boxes for syndicating news via RSS/ATOM today...</div> <div id="dock_3">Is another possibility for filling these draggable things up.</div> <div id="dock_4"> <input type="text" size="10" id="dock_q" name="q" value="Type here..." /><br/> <input type="button" id="dock_search" value="Search!" /> <div id="dock_results"> [first three results will be displayed here] </div> </div> </div> <div id="panelbar_content"> <h3>Panelbar</h3> <p>This whole page is organized into parts using the Panelbar control (on the left side of the page). Its interface is well known from many user applications and web sites, and allows quick, easy, and intuitive navigation across multiple topics.</p> </div> <div id="slidebar_content"> <h3>Slidebar</h3> <p>Slidebar is an animated panel which slides from the side when activated, either by a click or hover, depending of its settings. In autohide mode it slides back automatically after a defined period of time upon mouseout.</p> <div id="slb"> <ul> <li>White hat</li> <li>Grey hat</li> <li>Black hat</li> </ul> </div> </div> <div id="ticker"> <h3>Ticker</h3> <p>Hover on any flag to see a short description...</p> <table id="ticker_table"> <tr><td><img alt="US" id="ticker_0" src="images/flag_us.gif" /></td><td><img alt="UK" id="ticker_1" src="images/flag_uk.gif" /></td></tr> <tr><td><img alt="CR" id="ticker_2" src="images/flag_cr.gif" /></td><td><img alt="ZI" id="ticker_3" src="images/flag_zi.gif" /></td></tr> </table> <div id="ticker_content"></div> <div style="clear:both"></div> </div> <div id="dimmer"> <h3>Dimmer</h3> <p>This control allows creation of DOM elements with 'modal' property, i.e., the user is unable to interact with any other objects while the modal element is shown.</p> <input type="button" value="Click here to launch a modal information box" id="dimmer_btn" /> <div id="dimmer_content"> <p>This box is now modal. You may not click anything on the page until this box is closed.</p> <input type="button" value="Close box" id="dimmer_close" /> </div> </div> <div id="crypto"> <h3>Cryptography</h3> <p>Basic cryptographic routines can be found in this library. As you write text into input below, base64 version and two hashes are dynamically updated.</p> <input type="text" id="crypto_input" name="crypto_input" /><br/> Base64 encoded: <span id="crypto_base64"></span><br/> MD5 hash: <span id="crypto_md5"></span><br/> SHA hash: <span id="crypto_sha"></span><br/> </div> <div id="stats"> <h3>Statistics</h3> <p>Click the button below to generate a fresh set of random data.</p> Number of values: <input type="text" id="stats_count" name="stats_count" value="20" /><br/> Maximum value: <input type="text" id="stats_maximum" name="stats_maximum" value="10" /><br/> <input type="button" value="Generate" id="stats_btn" /><br/> <hr/> Data: <span id="stats_data"></span> <div id="stats_content"> </div> </div> <div id="quickedit"> <h3>QuickEdit (or Edit-in-place)</h3> <p>This one might come handy when users want to quickly edit some portion of text displayed on page. Feel free to change the text below to suit your needs.</p> <p>Dear <span class="qe" id="qe_1">sir</span>,<br/> I would like to <span class="qe" id="qe_2">thank you</span> for the <span class="qe" id="qe_3">information</span> you recently sent me. It proved to be very <span class="qe" id="qe_4">useful</span>.<br/> Yours, <span class="qe" id="qe_5">XXX</span></p> </div> <div id="combolist"> <h3>Combo list</h3> <p>Similar to existing <select> boxes, this one also provides a possibility of direct user input.</p> <div id="combolist_content"></div> </div> <div id="combobutton"> <h3>Combo button</h3> Enables user to specify an action to be performed when button is clicked. Suitable for applications where multiple actions can be performed over one set of data.<br/><br/> <div id="combobutton_content"></div> </div> <div id="combobox"> <h3>Combo box</h3> This one is basically an enhanced <select> which allows richer options.<br/><br/> <div id="combobox_content"></div> <div id="opt_1"><img alt="Firefox" src="images/firefox.gif" /></div> <div id="opt_2"><img alt="IE" src="images/ie.jpg" /></div> <div id="opt_3"><img alt="Opera" src="images/opera.gif" /></div> <div id="opt_4"><img alt="Netscape" src="images/netscape.jpg" /></div> </div> <div id="fisheye"> <h3>Fish Eye</h3> Pure eye-candy, well known from Apple systems. Also known as 'dock'. Please note that images are not displayed correctly in IE because of its known PNG support issues. <div id="fisheye_container"><span id="fisheye_content"></span></div> </div> <div id="gd"> <h3><em>Ghost</em> Drag</h3> Offers the well-known drag'n'drop functionality. User drags element's 'ghost', which may be dropped on a landing zone to perform some action. Otherwise, the 'ghost' returns back. Try this by putting some fruit items into this shopping cart:<br/><br/> <div id="gd_list"> <div id="cart_strawberry" style="background-image:url(images/cart_strawberry.gif);width:35px;height:52px"></div> <div id="cart_cherry" style="background-image:url(images/cart_cherry.gif);width:34px;height:34px"></div> <div id="cart_lemon" style="background-image:url(images/cart_lemon.gif);width:52px;height:37px"></div> <div id="cart_banana" style="background-image:url(images/cart_banana.gif);width:40px;height:42px"></div> </div> <div id="gd_cart"> </div> <a href="#" id="gd_clear">[clear cart]</a> </div> <div id="window"> <h3>OS-style Windows</h3> <input type="button" id="window_launch" value="Click here to open a window" /> <div id="window_content"> This is a generic window. It may be resized & dragged, just like any other element. <br/> It can, of course, contain any HTML markup:<br/> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> An important feature of these windows is that they automatically choose their look, based on operating system used. So they are rectangular on Windows, and rounded/brushed on Mac. </div> </div> <div id="slider"> <h3>Slider</h3> <div id="sliderbg"> <div id="slider_btn"></div> </div> Value: <span id="slider_value"></span> </div> <div id="dav"> <h3>WebDAV Browser</h3> <p>This interface presents WebDAV Browser in 'Open File' mode. User can navigate through directory structure, create directories and filter files based on their type.</p> <table><tbody> <tr><td>File name: </td><td><span id="dav_file_name">[not yet selected]</span> <input type="button" value="Browse" id="dav_btn" /></td></tr> <tr><td>File content: </td><td><textarea rows="20" cols="60" id="dav_file_content"></textarea></td></tr> </tbody></table> </div> <div id="timeline"> <h3>Timeline</h3> <div id="timeline_content"></div> </div> <div id="round"> <h3>Rounded corners</h3> <div id="round_1" class="round"><span class="round_content">simple antialiased</span></div> <div id="round_2" class="round"><span class="round_content">no antialiasing, border</span></div> <div id="round_3" class="round"><span class="round_content">only left top & bottom right</span></div> <div id="round_4" class="round"><span class="round_content">smaller corners</span></div> <div id="round_5" class="round"><span class="round_content">larger corners</span></div> </div> <div id="rss"> <h3>RSS Reader</h3> <p>Can display <a href="feed_rss.xml">RSS feeds</a>...</p> <div id="rss_content_rss"></div> <p>...as well as <a href="feed_rdf.xml">RDF feeds</a>...</p> <div id="rss_content_rdf"></div> <p>...and also <a href="feed_atom.xml">ATOM feeds</a>!</p> <div id="rss_content_atom"></div> </div> <div id="notify"> <h3>Notifications</h3> <p>Click buttons below to launch several notifications...</p> <input type="button" id="notify_1" value="Standard" /> <input type="button" id="notify_2" value="Permanent, styling" /> <input type="button" id="notify_3" value="Image, instant appearance, styling"/> </div> <div id="rdf"> <h3>RDF Graph Visualizer (SVG-based)</h3> <table><tr><td> <ul> <li>SVG-based: works in Gecko and Opera 9</li> <li>Hover over elements to see their values</li> </ul> </td><td> <ul> <li>Drag canvas to move whole graph</li> <li>Drag subjects to move them</li> <li>Ctrl-drag subjects to move them and their descendants</li> </ul> </td></tr></table> <div> Load RDF file by URL: <input size="80" type="text" value="rdf/sample1.rdf" id="rdf_url" /> <input type="button" id="rdf_load" value="Load"/> </div> <div> Pre-set URLs: <select id="rdf_preset"> <option name="" value="" selected="selected"></option> <option value="rdf/sample1.rdf">sample1.rdf - XML.com feed</option> <option value="rdf/sample2.rdf">sample2.rdf - RDF description</option> <option value="rdf/foaf.xml">foaf.xml - FOAF</option> </select> </div> <div style="position:relative; width: 200px; height: 20px; border-bottom: 2px solid #f00 "> <div style="position:absolute; width:15px; cursor:pointer; height: 20px; background-color: #888;" id="rdf_slider"></div> </div> <div id="rdf_content"></div> </div> <div id="tagcloud"> <h3>Tag Cloud</h3> <p>Watch various visualization forms of the Tag Cloud widget.</p> <div id="tc_1"></div> <div id="tc_2"></div> <div id="tc_3"></div> <div id="tc_4"></div> </div> <div id="docs"> <h3>Documentation</h3> The documentation project aims to describe all crucial objects and methods of OAT. It is available <a href="/DAV/JS/oat/docs/index.html">here</a>. </div> <div id="compat"> <h3>Compatibility Matrix</h3> <p>Hover over yellow/red cells for explanation</p> <table class="compatibility"> <tr class="head"><td rowspan="3" colspan="2">Compatibility matrix</td><td colspan="6">Browser<br/>(version)</td></tr> <tr class="head"><td>Firefox</td><td>Internet Explorer</td><td>Internet Explorer</td><td>Opera</td><td>WebKit (Safari)</td><td>Camino</td></tr> <tr class="head"><td>(2.0.0.3)</td><td>(6.0)</td><td>(7.0)</td><td>(9.20)</td><td>(2.0.4)</td><td>(1.0.1)</td></tr> <tr> <!-- Toolkit --> <td class="head" rowspan="6">Toolkit</td> <td class="head">Basic functionality</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">CSS</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="part" title="Frequently used 'font:menu' declaration not supported"></td> <td class="ok"></td> </tr> <tr> <td class="head">SVG</td> <td class="ok"></td> <td class="bad" title="SVG not supported by IE"></td> <td class="bad" title="SVG not supported by IE"></td> <td class="ok"></td> <td class="bad" title="SVG not supported in WebKit"></td> <td class="part" title="Buggy SVG implementation"></td> </tr> <tr> <td class="head">Mac windows & shadows</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">MS Live WebClip</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="bad" title="Not supported by MS"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Saving</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="part" title="Doesn't support WebDAV"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <!-- QBE --> <td class="head" rowspan="2">QBE</td> <td class="head">Query creation & execution</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Pivots</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <!-- Designer --> <td class="head" rowspan="2">DB Designer</td> <td class="head">Basic functionality</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Saving as SQL</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <!-- Forms designer --> <td class="head" rowspan="8">Forms designer</td> <td class="head">Form creation</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="part" title="Form controls cannot be visually deselected"></td> <td class="ok"></td> </tr> <tr> <td class="head">Form viewing</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Image control</td> <td class="ok"></td> <td class="bad" title="data: URLs not supported"></td> <td class="bad" title="data: URLs not supported"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Map control</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Google map provider</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Yahoo map provider</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Virtual Earth map provider</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="bad" title="Incompatible MSVE API"></td> <td class="ok"></td> </tr> <tr> <td class="head">OpenLayers map provider</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <!-- RDFB --> <td class="head" rowspan="2">RDF Browser</td> <td class="head">Basic functionality</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">SVG Visualization</td> <td class="ok"></td> <td class="bad" title="No SVG support"></td> <td class="bad" title="No SVG support"></td> <td class="ok"></td> <td class="bad" title="SVG not supported in WebKit"></td> <td class="part" title="Buggy SVG implementation"></td> </tr> </table> <p> </p> <h3>Mapping features</h3> <table class="compatibility"> <tr class="head"><td rowspan="2">Compatibility matrix</td><td colspan="4">Mapping provider</td></tr> <tr class="head"><td>Google</td><td>Yahoo!</td><td>MS Virtual Earth</td><td>OpenLayers</td></tr> <tr> <td class="head">Basic displaying</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Smart marker re-positioning</td> <td class="ok"></td> <td class="ok"></td> <td class="bad" title="Unsupported by API"></td> <td class="ok"></td> </tr> <tr> <td class="head">Map dragging</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Lookup pin window</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> </tr> <tr> <td class="head">Advanced lookup window actions<br/>(e.g. dragging inside window)</td> <td class="ok"></td> <td class="ok"></td> <td class="ok"></td> <td class="bad" title="Incompatible API"></td> </tr> </table> </div> <div id="out_maps"> <h3>Map Services Mashups</h3> <p>Use 'demo' when asked for credentials.</p> <ul> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Reports/MapMashups/employee_sales_by_ship_country_pivot_google_all.xml"> Google </a></li> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Reports/MapMashups/employee_sales_by_ship_country_pivot_yahoo_all.xml"> Yahoo! </a></li> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Reports/MapMashups/employee_sales_by_ship_country_pivot_msve_all.xml"> MS Virtual Earth </a></li> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Reports/MapMashups/employee_sales_by_ship_country_pivot_openlayers_all.xml"> OpenLayers </a></li> </ul> </div> <div id="out_pivot"> <h3>Dynamic Web Pivot Tables</h3> <p>Use 'demo' when asked for credentials.</p> <ul> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Reports/Pivots/employee_sales_by_ship_country_pivot.xml"> Employee sales by Ship country </a></li> </ul> </div> <div id="out_cursors"> <h3>Scrollable Cursors aware Data Grid</h3> <p>Use 'demo' when asked for credentials.</p> <ul> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Queries/Customer_Sales_By_Products.xml"> Basic scrollable cursors (Sales by Products) </a></li> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Forms/customers_orders_listing_frm.xml"> Scrollable cursors and two-state (tabular/columnar) form control </a></li> </ul> </div> <div id="out_data"> <h3>Database Modeling Diagrams</h3> <p>Use 'demo' when asked for credentials.</p> <ul> <li><a target="_blank" href="http://demo.openlinksw.com/DAV/home/demo/Public/Design/employee_sales_customer_diagram2.xml"> Database design </a></li> </ul> </div> <div id="app_qbe"> <h3>Interactive SQL Query Builder</h3> <p>Query by example for XML/A connectivity to SQL databases. Draw and execute your queries!</p> <a href="../qbe/index.html">link</a> </div> <div id="app_designer"> <h3>Database Designer</h3> <p>Visual database schema designer. Ability to import existing design via XML/A calls.</p> <a href="../dbdesigner/index.html">link</a> </div> <div id="app_formdesigner"> <h3>Web Forms Designer</h3> <p>Draw data presentation forms, add widgets and controls to them. Bind to virtually any data sources (SQL, REST, WSDL, SPARQL...).</p> <a href="../formdesigner/index.html">link</a> </div> <div id="app_isparql"> <h3>Interactive SPARQL Query Builder</h3> <p>Visual (SVG-based) SPARQL query generator and results browser.</p> <a href="../isparql/index.html">link</a> </div> <div id="app_ode"> <h3>OpenLink Data Explorer</h3> <p>Explore the world of RDF! Take advantage of Virtuso's RDF sponging feature, view and traverse RDF graphs, visualize in many ways.</p> <a href="../rdfbrowser2/index.html">link</a> </div> </div> </body> </html>