X Quick-Start

Installation

Download the X distribution file and unzip it into the folder of your choice. Be sure to select the "Use folder names" option when unzipping. After unzipping you will find a folder named Cross-Browser.com which has several sub-folders. In this root folder you will find a web page, index.html, which serves as the index for the distribution package.

Folder Structure

Under the root folder Cross-Browser.com are the following sub-folders.

/css/ Styles for the distribution package.

/images/ Images used by the demos.

/templates/ General-purpose template files.

/x/ Prebuilt library file x.js and the build script build.xml.

/x/docs/ X Library documentation files.

/x/examples/ Examples that demonstrate the use of X.

/x/lib/ This is the actual library. It contains all XML and Javascript source files for the X Library.

/x/tools/ Ant macros and executable, source code and project files for the X Tools.

Library Files

There are very many .js files in the distribution package. This section summarizes their purposes.

Cross-Browser.com/x/ - Prebuilt Library Files

This folder contains a general-purpose, prebuilt library file. In almost every application there will be X functions that you always need. This file contains some of the most commonly used X functions. This file does not constitute the entire X Library itself, which is located in the directory /x/lib/.

The prebuilt library file "x.js" contains the following X functions. Click a link to see that symbol in the online X Viewer.

x.js xGetElementById, xGetElementsByTagName, xGetElementsByClassName, xMoveTo, xLeft, xTop, xPageX, xPageY, xScrollLeft, xScrollTop, xHasPoint, xResizeTo, xWidth, xHeight, xClientWidth, xClientHeight, xStyle, xOpacity, xGetComputedStyle, xCamelize, xDef, xStr, xNum, xLibrary. xAddEventListener, xRemoveEventListener, xEvent, xStopPropagation, xPreventDefault, xEachE, xEachN, xOffset.

Cross-Browser.com/x/lib/ - X Library Files

This folder contains the actual library. It contains .xml and .js files. There is an XML file and a Javascript file for every symbol in the library. So, the X Library is not made up of a few files which each contain many functions and objects. All the functions and objects (symbols) in the X Library are each in individual files. This separation into individual files, along with the dependency information in the XML file, allows you to create a library file which only contains the X symbols your application uses. The X Tools completely automate this task.

Read more about the structure of X. Use the online X Viewer to browse the sources and documentation for all X Library symbols.

Quickly Starting a New Project

Start with a copy of one of the template files, or visit one of the demos online and save it as HTML on your computer. For example, make a copy of "html5_template.html" and place it in the x/examples directory. This file has a script element which loads the "x.js" file, and has another script element in which a listener is registered for the load event. If you need a function which is not in "x.js" use the online X Viewer to look for it. Add another script element to your HTML file which loads the file from the x/lib directory.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script src="../x.js"></script>
<script>
xAddEventListener(window, 'load',
  function() {
  }, false
);
</script>
</head>
<body>


</body>
</html>

Also take a look at the X Tutorial.