xmlplus ·
Xmlplus is a JavaScript framework,It can not only run on the browser-side, but also on the server-side. For more information, see http://xmlplus.net.
If having installed the NPM client, you can install xmlplus with NPM.
$ npm install xmlplus
The following is the basic organizational structure of the project:
xmlplus/
├── docs/
│ ├── getting-started/
│ ├── docs/
│ ├── components/
│ └── api/
├── demo/
│ ├── getting-started/
│ ├── docs/
│ ├── components/
│ └── api/
└── src/
├── xmlplus.js
└── patch/
The docs/
and the xmlplus/
under the demo/
contain subfolders with the same name. The docs/
contains document files and the demo/
contains the corresponding sample code. The src/
contains the frame source file and patch files for IE9+.
Xmlplus is a framework that can not only run on browser-side but also on server-side. Here we'll give two sets of basic templates for different environments.
The following is the JavaScript template we fist give to run directly on the server-side. You can modify or extend the functionality based on this. The template is very simple. After installing the xmlplus software package, you just need to create a file containing following content.
// 02-01
xmlplus("xp", function (xp, $_, t) {
$_().imports({
Index: {
fun: function (sys, items, opts) {
console.log("hello, world");
}
}
});
}).startup("//xp/Index");
Having created a file containing the above content, you can execute node index
to run the above template example.
In addition, please note that a comment line at the beginning of the sample. The line indicate that the current sample code is located at demo/docs/02-templete/01/
. The 02
here is the chapter order and the 01
is the name of the folder containing the sample.
On the browser-side, you need to prepare three files. The first is the xmlplus.js
. The second you need to create is a file named index.js
containing following content.
// 02-02
xmlplus("xp", function (xp, $_, t) {
$_().imports({
Index: {
css: "#text { color: red; }",
xml: "<h1 id='text'>hello, world</h1>",
fun: function (sys, items, opts) {
sys.text.css("font-size", "28px");
}
}
});
});
At last, you need a HTML file containing following content. Here, we name the file as index.html
.
<!-- 02-02 -->
<!DOCTYPE html>
<html>
<head>
<script src="xmlplus.js"></script>
<script src="index.js"></script>
</head>
<body>
<i:Index xmlns:i="//xp"></i:Index>
</body>
</html>
Ensure that the above three files are in the same folder. If opening the index.html
with a browser, you should be able to see the red hello, world
.
For the server-side, xmlplus supports all versions of the node.js runtime environment, so here we only to discuss its performance on the browser-side. Xmlplus has the best performance on the latest desktop and mobile browsers. However, on some older browsers it may fail.
Xmlplus supports mainstream browsers and platforms. On the Windows platform, it supports Internet Explorer 9-11 / Microsoft Edge. Please see the details listed below.
In general, xmlplus supports the latest version of the browser for each mainstream platform.
Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
---|---|---|---|---|---|
Android | Supported | Supported | N/A | Android v4.0+ Supported | N/A |
iOS | Supported | Supported | Supported | N/A | N/A |
Windows 10 Mobile | N/A | N/A | N/A | N/A | Supported |
Accordingly, xmlplus also supports most of the latest version of the desktop browser.
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | Supported | Supported | N/A | N/A | Supported | Supported |
Windows | Supported | Supported | Supported, IE9+ | Supported | Supported | Not supported |
As we have mentioned above, xmlplus supports Internet Explorer 9-11, but this requires the additional two files: xpath.js
and xmldom.js
.
These two files can be found in the src/patch/
. That is to say, if you want the application based on xmlplus running on Internet Explorer 9-11, you need to import the following three JavaScript files.
<script src='xpath.js'></script>
<script src='xmldom.js'></script>
<script src='xmlplus.js'></script>