Designer - aws xml Editor

Back
The only tool used to build the applications, edit language and config files, importing offsite pages to use as app templates even design your own rss news page. XML code is represented in a tree like structure

Remarks:
1. Doesn't work with Internet Explorer; Use instead Google Chrome (recommended), Mozilla Firefox, Safari, Opera, Epiphany;

2. Mobile browsers known to work, so far: Android Browser, Dolphin (Mini/HD)

Consist of four parts:
1. DOM tree
2. Node info
3. Window buttons
4. Toolbar

1. DOM tree
2. Node properties
3. Window buttons
4. Toolbar

Toolbar

Extends / collapse the active node; Mobile browsers onlySwitch the width of node list frame between 30% - 100% and back; Mainly for mobile browsers which does not allow overflow for divsImport HTML document in selected nodeReload tree from current datasourceRun code for selected nodeRepair treeInsert element to selected node, before or afterWrap around selected nodeInsert document fragment to selected node, before or afterDelete selected nodeDelete childs of selected nodeCut selected nodeCut child nodesCopy selected nodeCopy child nodesCopy attributesPaste to selected nodePaste before / after selected nodeView selected node's sourceRename nodeCreates a bookmark for selected nodeOpens Bookmarks List dialog

Advanced features


1. Run code
There are two ways to run code over existing DOM tree.
a. Run code tool: This one will build a function with the entered code and call it with the selected node in the DOM tree as parameter. Selected node can be accessed using this this.setAttribute("anAttribute","value")
b. Search window code runner: Really, this is the one I recommend, since will run the code for each element of the found DOMNodeList. First, you need to enter a jQuery selector in the "Search window" text input; Function code comes in the textarea below. New function will be called for each element of the search result. DOM nodes can be accessed using this.
This way you can alter the properties of more than one element. //SAMPLE CODE
//For some reason, that I still don't know yet, jquery fails when handling document fragments;
//$(this).append("some code").
//Still, we can do as below

//creating a new element using the ownerDocument
var newElem = this.ownerDocument.createElement("NEWELEMENT");
newElem.setAttribute("someAttr","value");

//append new element
this.appendChild(newElem);

//But, we can still use jquery for other operations, like
$(this).removeAttr("removeMe").addClass("myClass");

//Or making operations on other elements of the document:
$("mainContent",this.ownerDocument).attr("attrName","newValue");


2. Document import
IMPORT HTML INTO SELECTED NODE is the tool that will be used to import HTML documents into your application. The html document can be either a local (ex. mockup/fileToImport.html) file or a remote one (http://www.mysite.com/mypage.html). Source html documents needs to comply with XHTML 1.0 standard (basically elements like br, hr, img, input... have to be closed like this />; see W3C Schools and W3C Schools and W3C XHTML 1.0 DTD) and no missing tags
3. Search
Using main window's "Search" button you can find all the elements in the document returned by the jquery selector (and jump to them by double click on the results and waiting for the DOM tree to open); Results come as css selectors path of each found element. Also, using this tool you can run code over the given jquery selector.

Tips and tricks


1. Keyboard shortcuts
Ctrl+N - New document
Ctrl+O - Open URL
Ctrl+L - Load document source
Ctrl+N - New document
Ctrl+S - Save document
Ctrl+F - Search
Ctrl+R - Load rules
2. Bubble messages
All the tools and active parts of the application are having bubble messages
3. Rules (Load rules window button)
These rules are used as constraints for documents having a specific structure and come with constraints when creating elements and attributes. Rules are defined, for now, in the xmlEditor.js file. Currently working to set up these rules from interface of the application.
4. Bookmars
I've designed a Bookmars Manager to have quick access to those items we need, with just one click of mouse button. This is to be used with AWS XMS applications only.
When a document is opening Designer will look for /app/bookmarks element and if it doesn't exist it will create it automatically; is recommended to save the document and reload if so. Once you create a new bookmark this will be stored inside current application, in /app/bookmarks. To change any of these bookmarks properties, or delete any of them you only have to open /app/bookmarks and make the necessary changes.
This is a very usefull feature and gives you instant access to those document's elements you need to access fast
5. Using Designer with XSL
You can apply custom XSL (xml styles) on document output so AWS XMS will automatically change the output according to selected xml style. Please see AWS Wally which is a direct application of this feature (allows you to see current linux firewall configuration, edit, save for later use and so on).
To use Designer with custom XSL click "Runtime Options" and indicate the path to your xml style in XSL to apply when above selected text input; You can create your XSL files using Designer as well. For this please disable Apply XML Stylesheet when saving document? in Runtime Options. By default Designer will apply a stylesheet to remove all namespaces that can hide in the document, this is to be easier to access the document elements;
I am working to create the rules for Designer so you can have it assist you when creating XSL files.
6. Attributes Helper
By default Designer will use node name as label for each node inside the left side DOM tree. Sometimes is difficult to follow as many as they are and to go where you need.

To help with this Designer will display the value of name attribute (if exists) instead of the node name. To change this default attaribute to some other you need open Runtime Options and indicate which one to use in Attribute value to show instead of node name in dom tree when set text input.
You can change these value from on element to another so you can see what you need to; for ex, if you need to see the href of anchors (a elements) replace name with href. When closed an element this will display the new attribute value on next opening.
7. HTML Import
The easiest way to import a HTML document in you AWS XMS application is to use the IMPORT HTML INTO SELECTED NODE tool (left side DOM Tree, on mouse over the toolbar will appear), first top button; The file can be either local (stored on the server) or a remote file (a HTML document on a webserver).
Previously the import was done by Designer which could create some issues. With the last releases of Designer, the import/conversion is done on the server side and Designer will only load the result -> can import the document as it is, java scripts are not executed, so we have a clear initial state of the file to be imported;
Use this feature to easily create your own templates as Designer will convert the document to AWS XMS format that you can adjust later!!
7. Node sequences for Insert node and Wrap around tools
Nodes sequences look like filters/dom/filter/xpath or any other structure you need. By using sequences with the Insert node and Wrap around tools, Designer will automatically create that node sequence for you and you will win precious time.
8. Node copy to clipboard
The clipboard is not cleared when opening a new document (without reloading Designer). You can use this if need to copy a node from one document to another, without using "View selected node source". Once you have opened the target document and located the target node, click on "Paste tool" or "Paste before / after".