Differences between revisions 11 and 12
Revision 11 as of 2008-02-07 16:21:17
Size: 5180
Editor: TrevorOldak
Comment: Fixed broken link
Revision 12 as of 2009-09-20 23:06:33
Size: 5250
Editor: localhost
Comment: converted to 1.6 markup
Deletions are marked like this. Additions are marked like this.
Line 16: Line 16:
[http://dev.nexaweb.com/demo/EasyTrader/index.php Realtime Stock Ticker] [[http://dev.nexaweb.com/demo/EasyTrader/index.php|Realtime Stock Ticker]]
Line 20: Line 20:
Source: [http://dev.nexaweb.com/demo/EasyTrader/table.php table.php], [http://dev.nexaweb.com/demo/EasyTrader/logic.js logic.js], [http://dev.nexaweb.com/demo/EasyTrader/jsupdate.php jsupdate.php], [http://dev.nexaweb.com/demo/EasyTrader/disable_button.xal disable_button.xal], [http://dev.nexaweb.com/demo/EasyTrader/enable_button.xal enable_button.xal] Source: [[http://dev.nexaweb.com/demo/EasyTrader/table.php|table.php]], [[http://dev.nexaweb.com/demo/EasyTrader/logic.js|logic.js]], [[http://dev.nexaweb.com/demo/EasyTrader/jsupdate.php|jsupdate.php]], [[http://dev.nexaweb.com/demo/EasyTrader/disable_button.xal|disable_button.xal]], [[http://dev.nexaweb.com/demo/EasyTrader/enable_button.xal|enable_button.xal]]
Line 28: Line 28:
[http://dev.nexaweb.com/demo/ms2/examples/google/index.html Emergency Response System (Showing extensibility and Integration with Google Maps)] [[http://dev.nexaweb.com/demo/ms2/examples/google/index.html|Emergency Response System (Showing extensibility and Integration with Google Maps)]]
Line 30: Line 30:
This application demonstrates the plugin architecture; this allows developers to create XML syntax that can than be used within applications. In this application an XML tag called "gMap" is used to allow very simple integration with a third party component. See the [http://wiki.apache.org/incubator/xap/Bridges bridges] page for more details This application demonstrates the plugin architecture; this allows developers to create XML syntax that can than be used within applications. In this application an XML tag called "gMap" is used to allow very simple integration with a third party component. See the [[http://wiki.apache.org/incubator/xap/Bridges|bridges]] page for more details
Line 32: Line 32:
Source: [http://dev.nexaweb.com/demo/ms2/examples/google/index.xal index.xal], [http://dev.nexaweb.com/demo/ms2/examples/google/EventMCO.js EventMCO.js], [http://dev.nexaweb.com/demo/ms2/examples/google/EmsCall.js EmsCall.js] Source: [[http://dev.nexaweb.com/demo/ms2/examples/google/index.xal|index.xal]], [[http://dev.nexaweb.com/demo/ms2/examples/google/EventMCO.js|EventMCO.js]], [[http://dev.nexaweb.com/demo/ms2/examples/google/EmsCall.js|EmsCall.js]]
Line 40: Line 40:
[http://dev.nexaweb.com/demo/ms2_compressed/examples/helloWorld/index.php Hello, World!] [[http://dev.nexaweb.com/demo/ms2_compressed/examples/helloWorld/index.php|Hello, World!]]
Line 42: Line 42:
Source: [http://dev.nexaweb.com/demo/ms2_compressed/examples/helloWorld/index.xal index.xal] Source: [[http://dev.nexaweb.com/demo/ms2_compressed/examples/helloWorld/index.xal|index.xal]]
Line 48: Line 48:
[http://dev.nexaweb.com/demo/ms2_compressed/examples/clientside-handler/index.php clientside-handler] [[http://dev.nexaweb.com/demo/ms2_compressed/examples/clientside-handler/index.php|clientside-handler]]
Line 50: Line 50:
Source: [http://dev.nexaweb.com/demo/ms2_compressed/examples/clientside-handler/index.xal index.xal], [http://dev.nexaweb.com/demo/ms2_compressed/examples/clientside-handler/MyHandler.js MyHandler.js] Source: [[http://dev.nexaweb.com/demo/ms2_compressed/examples/clientside-handler/index.xal|index.xal]], [[http://dev.nexaweb.com/demo/ms2_compressed/examples/clientside-handler/MyHandler.js|MyHandler.js]]
Line 56: Line 56:
[http://dev.nexaweb.com/demo/ms2_compressed/examples/inline-javascript/index.php inline-javascript] [[http://dev.nexaweb.com/demo/ms2_compressed/examples/inline-javascript/index.php|inline-javascript]]
Line 58: Line 58:
Source: [http://dev.nexaweb.com/demo/ms2_compressed/examples/inline-javascript/index.xal index.xal] Source: [[http://dev.nexaweb.com/demo/ms2_compressed/examples/inline-javascript/index.xal|index.xal]]
Line 64: Line 64:
[http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/index.php serverside-handler] [[http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/index.php|serverside-handler]]
Line 66: Line 66:
Source: [http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/index.xal index.xal], [http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/MyHandler.js MyHandler.js], [http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/data.txt data.txt], [http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/hello-world.xal hello-world.xal] Source: [[http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/index.xal|index.xal]], [[http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/MyHandler.js|MyHandler.js]], [[http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/data.txt|data.txt]], [[http://dev.nexaweb.com/demo/ms2_compressed/examples/serverside-handler/hello-world.xal|hello-world.xal]]
Line 72: Line 72:
 * [http://dev.nexaweb.com/demo/ms2_compressed/examples/split-pane/index.php split-pane] Source: [http://dev.nexaweb.com/demo/ms2_compressed/examples/split-pane/index.xal index.xal]
 * [http://dev.nexaweb.com/demo/ms2_compressed/examples/tab-pane/index.php tab-pane] Source [http://dev.nexaweb.com/demo/ms2_compressed/examples/tab-pane/index.xal index.xal]
 * [[http://dev.nexaweb.com/demo/ms2_compressed/examples/split-pane/index.php|split-pane]] Source: [[http://dev.nexaweb.com/demo/ms2_compressed/examples/split-pane/index.xal|index.xal]]
 * [[http://dev.nexaweb.com/demo/ms2_compressed/examples/tab-pane/index.php|tab-pane]] Source [[http://dev.nexaweb.com/demo/ms2_compressed/examples/tab-pane/index.xal|index.xal]]
Line 79: Line 79:
[http://www.rockstarapps.com/samples/sendmeapic Send me a pic!] [[http://www.rockstarapps.com/samples/sendmeapic|Send me a pic!]]
Line 81: Line 81:
[http://www.rockstarapps.com/samples/sendmeapic http://www.rockstarapps.com/img/sendmeapic.jpg] [[http://www.rockstarapps.com/samples/sendmeapic|{{http://www.rockstarapps.com/img/sendmeapic.jpg}}]]
Line 85: Line 85:
[http://www.rockstarapps.com/samples/map-compare Map Comparison] [[http://www.rockstarapps.com/samples/map-compare|Map Comparison]]
Line 87: Line 87:
[http://www.rockstarapps.com/samples/map-compare http://www.rockstarapps.com/img/mapCompare.jpg] [[http://www.rockstarapps.com/samples/map-compare|{{http://www.rockstarapps.com/img/mapCompare.jpg}}]]

These examples demonstrate the core functionality of XAP applications:

  • Declarative UI - XML is used to create complex user interface
  • Declarative update - ability to modify an existing UI via XML
  • Server side event handling via XAL - work with any server that is capable of serving or generating XAL documents
  • Client side event handling using JavaScript code

These examples are using very simple styling - however CSS is fully supported and the look and feel can be customized as desired.

Demos

Demo Application: Updating Stock Quotes

This application provides simulated real time stock price information.

Realtime Stock Ticker

This sample updates a table in real time using data generated on the server. This sample uses Milestone 3 code.

Source: table.php, logic.js, jsupdate.php, disable_button.xal, enable_button.xal

Demo Application: Emergency Response System

This application is a simulated emergency response system that a user can view the location of ambulance, hospital and fire stations on a map, add/modify nodes and calcuate routes between different nodes.

All below samples and demos use Milestone 2 version.

Emergency Response System (Showing extensibility and Integration with Google Maps)

This application demonstrates the plugin architecture; this allows developers to create XML syntax that can than be used within applications. In this application an XML tag called "gMap" is used to allow very simple integration with a third party component. See the bridges page for more details

Source: index.xal, EventMCO.js, EmsCall.js

Examples

Hello World

A simple XAP application.

Hello, World!

Source: index.xal

Client Side Logic

Demonstrates connecting user interface events with Managed Client Objects (MCOs) written in JavaScript.

clientside-handler

Source: index.xal, MyHandler.js

Inline Javascript

Demonstrates including Javascript directly in a XAL document.

inline-javascript

Source: index.xal

Server Side Modification

This example shows usage of XModify as a server document to update the user interface asynchronously and declaratively.

serverside-handler

Source: index.xal, MyHandler.js, data.txt, hello-world.xal

Widget Examples

These applications demonstrate the available widgets provided by XAP.

3rd Party Demos

Rockstarapps.com host serveral demos built on the XAP runtime.

Send me a pic!

http://www.rockstarapps.com/samples/sendmeapic

- Allows you to search Flickr's database and create Mobile Phone Wallpapers out of any photo you want. That's right, every photo in the Flickr database can be a Wallpaper for your phone. Try it out, it is easy as See It, Size It, Send It!

Map Comparison

http://www.rockstarapps.com/samples/map-compare

- This application use the Apache XAP project to integrate all three mapping technologies into one interface to compare their functionality and UI.

xap/Demos (last edited 2009-09-20 23:06:33 by localhost)