Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
273 lines (152 sloc) 10.1 KB
<!DOCTYPE html>
<title>XML Editor</title>
<link type="text/css" href="style.css" rel="stylesheet"/>
<div id="main_title" onselectstart="return false">
<div id="main_title_title">XML Template-Based Editor</div>
<div class="main_title_button" onclick="'dialog_about')">About</div>
<div class="main_title_button" onclick="'dialog_options')">Options</div>
<div class="main_title_button" onclick="'dialog_load')">Load</div>
<div class="main_title_button" onclick="'dialog_save')">Save</div>
<div class="main_title_button" onclick="'dialog_help')">Help</div>
<div id="dialog">
<div class="dialog_content" id="dialog_help">
The XML Template-Based Editor is a GUI-based XML modification program written in Javascript. Unlike most XML writing programs, this one is very easy to use, and can restrict the types of tags and attributes that can be added to the document.
<h3>The Text Editor:</h3>
The XML Text Editor on the right of the screen can be used for uploading and editing XML documents. It is not a robust XML parsing program; its simply for uploading content and making quick changes without the aid of the GUI-based editor on the left.
<h3>The GUI Editor:</h3>
The GUI editor on the left side of the screen displays the current XML document in a graphical and easily-understandable format. This is where most of your XML editing will likely take place.
The top-most text area in the GUI editor specifies XML header values. If you don't know what to use, just leave them with their default value.
Each XML element/tag is signified by a box in the GUI editor. For those of you unfamiliar with XML, tags are what XML use to organize data. Tags generally contain text data, as well as other tags.<br>
The name of a tag is on the upper-left corner of a box. The tag options (move up, move down, duplicate, and delete) are located on the upper-right corner of the box.<br>
Clicking the Move Up / Move Down buttons (the first two from the left) will move the tag up or down inside the current tag. Clicking the Duplicate button (the third one from the left) will duplicate the current tag and all its inner tags. Click the delete button (the farthest right button) to delete the tag (and all of it's child tags). In addition to all of this, you can click the name of the tag to collapse/expand the tag for readability.
The resizable text area that spreads the width of the box signifies the text content inside the XML tag. If the tag has attributes, you will see text fields above the text area, each with an attribute name to the right of each text field.
Most tags will have buttons in the bottom-right hand corner labeled "Add [SomeTagName]". If you click these buttons, a tag with the name specified on the button will be created inside the current tag, underneath any existing child tags.<br>
<img src="help1.png" />
As you update the GUI editor, the changes are automatically propagated to the Text Editor on the right side of the screen. The resulting generated content is almost guaranteed to be valid XML.
<h3>Loading XML documents</h3>
To load an XML document into the editor, you will need to first open the original document into a text editing program. If you're on a Windows-based machine, try right-clicking the .xml document, and select the "Open With" option, and select Notepad or Wordpad. On a mac, try the same procedure, but open with TextEdit or a similar application.
<h4>Do not open the XML document in Microsoft Excel or a web browser. Just open it in a simple text editor!</h4>
Once you open the document, select all of its contents, and copy it (ctrl-C, or cmd-C on a mac).
Next, click the close button on the bottom-right of this window to close the help dialog, and click on the large text area on the right. Select all of the text that is currently inside the text area (ctrl-A, or cmd-A on a mac), and delete it with the delete key. Now, paste the XML data you copied into this text area by pressing ctrl-V (cmd-V on a mac).
Once all the XML content is pasted in, click the narrow "Load XML" button that is just above the text area. The editor will parse and load all of the valid XML tags into the GUI editor, and reformat the XML in the text area. Note that the XML displayed in the text area is only a copy of the actual XML document; it is not the original that you just opened.
The "Load XML" button can be clicked at any time, allowing more savvy users to make changes to the XML document without using the graphical editor on the left. You can even type in XML in the text area without opening a file first, if you know how.
Assuming that you have previously saved an XML document within the editor via the Save button, you can click the Load button on the top-right corner of the window, and load an XML document that way. Just click on one of your files displayed in the left window (if any have been saved), and click the Load button on the bottom.
If you wish to delete a file from the Editor, select a file, and click the (delete) button. While this will permanently remove an XML file in the Editor, it will not remove any XML files you may currently have on your computer.
<h3>Saving XML documents</h3>
To save an XML document in the Editor, click the Save button on the top-right of the window. Next, type in a name for the document, and click the save button. Now, you can load the XML document you were last working on via the Load button also on the top-right of the window.
In addition, the state of the XML document you're currently working on is automatically saved in the Editor whenever you close the window, to avoid losing any data when you leave the program.
Saving within the editor is great, but if you plan on actually using your created XML document for anything, you will need to export it into it's own file. To do this, first open a text editing program (try to find a simple editor. Do not use Microsoft Word). Next, inside the XML Template-Based Editor program, select all the text that's in the text area to the right of the screen (after clicking the close button on the bottom-right of this window). Copy this text into your new document you created with the text editing program on your computer. Save this document, and give it a .xml extension. For more information on how to do this, check out this link: <a target="blank" href=""></a>
<div class="dialog_content" id="dialog_save">
Give the XML file a name, and click save.
<input type="text" id="dialog_save_name" />
<div id="dialog_save_warning">
Warning: This file already exists!
<div id="dialog_save_button">Save</div>
<div class="dialog_content" id="dialog_load">
<div class="dialog_load_url_tab dialog_load_url_tab_highlighted">URL</div>
<div class="dialog_load_file_tab">File</div>
<div id="dialog_load_url_container">
<h3>XML File URL:</h3>
<input type="text" id="dialog_load_url_address" />
<input type="text" id="dialog_load_url_template_address" />
<div id="dialog_load_url_button">Load</div>
<div id="dialog_load_file_container">
<div id="dialog_load_file_list"></div>
<textarea id="dialog_load_file_preview" readonly="true">
Select a file on the left (if any), and click the Load button.
<div class="dialog_load_file_button_container">
<div id="dialog_load_file_button">Load</div>
<div id="dialog_load_file_delete_button">(delete)</div>
<div class="dialog_content" id="dialog_options">
<h3 title="How should the GUI editor output XML?">XML Output:</h3>
<form name="options_xmloutput">
<input type="radio" name="xmloutput" value="standard" checked="true" onclick="XMLEditor.condenseOutput=false"
title="Standard (Indented, easy to modify)" />Standard<br>
<input type="radio" name="xmloutput" value="condense" onclick="XMLEditor.condenseOutput=true"
title="Condensed (Removes most whitespace, smaller footprint)" />Condensed
<h3 title="">Undo Buffer Length:</h3>
<input type="text" value="20" onkeyup="XMLEditor.Undo.setBufferLength(this.value)" />
<div class="dialog_options_reset" onclick="reset()">Reset Program</div>
<div class="dialog_content" id="dialog_about">
XML Template-Based Editor
Version: 11<br>
Last Updated: June 6, 2012
<a target="blank" href="">Jeffrey Sweeney</a><br>
<a target="blank" href="">Fong-Wan Chau (Design)</a>
<a target="blank" href="">Follow, Fork, or Contribute to this project on Github!</a>
<div id="dialog_close" onclick="Dialog.hide()">Close</div>
<div id="main_container">
<div id="divider_left">
<div id="wrapper" onselectstart="return false">
<textarea id="header_information" class="tag_content_text"></textarea>
<div id="divider_divider" onselectstart="return false"></div>
<div id="divider_right">
<div id="load_xml_button" onselectstart="return false"
title="Click here to load and parse the xml">
&#8592; Load XML &#8592;
<div class="xml_wrapper">
<textarea id="xml">XML Content will be updated here.
You can also paste XML content in to this text area
and click the "Load xml" button to load and parse it.
<div class="divider_right_bottom">
<!--<script type="text/javascript" src="JSON.js"></script>-->
<script type="text/javascript" src="scripts.js"></script>