Wiki  |   Blog  |   Sitemap  |   Search  
Home
JavaScript UI FrameworkTutorialsHello World!

Hello, World!

Creating applications with Ample SDK is as simple as doing so with plain HTML, JavaScript and the DOM. Plus you get SVG, XUL and more!!

The following sample application will display a "Hello, World!" message in bold on the screen.
Once the text is clicked there will be an alert popup shown notifying you of the event.

<!DOCTYPE html>
<html>
	<head>
		<title>Hello, World!</title>
		<!-- (A) Ample SDK runtime and UI language -->
		<script type="text/javascript" src="ample/runtime.js"></script>
		<script type="text/javascript" src="ample/languages/xhtml/xhtml.js"></script>
		<!-- (1) Style -->
		<style type="text/ample+css">
			b {
				color: red;
			}
		</style>
		<!-- (2) Logic -->
		<script type="text/javascript">
			ample.ready(function(){
				ample.query("b").bind("click", function(event) {
					alert('Element "' + event.target.tagName + '" was clicked');
				})
			})
		</script>
	</head>
	<body>
		<!-- (3) Layout -->
		<script type="application/ample+xml">
			<b>Hello, World!</b>
		</script>
	</body>
</html>
			

The 4 important areas of this sample document include:

All three Application resource types can also be placed in an external document instead of inline, and be referenced with a URL: Logic can be included with the <script type="text/javascript" src="" /> tag, Style with the <link type="text/ample+css" rel="stylesheet" href="" /> tag, and Layout with the <script type="application/ample+xml" src="" /> tag.