﻿<?xml version="1.0" encoding="utf-8" ?>
<Template Title = "New Fragment">
		<import-xml src = "Templates/TemplateTools.xml" id = "TemplateTools" />
		<div class ="field">
		<div class = "field_label">
			Name:
		</div>
		<div class = "field_input">
			<input type = "text" class = "input_text" rid = "fragment_name" />
		</div>
	</div>
	<div class ="field">
		<div class = "field_label">
			Description:
		</div>
		<div class = "field_input">
			<input type = "text" class = "input_text" rid = "fragment_description" />
		</div>
		<div class = "field_description">
				 (<i>optional</i>)
		</div>
	</div>
	<textarea rid ="fragment_text" wrap ="off" style ="background-color: #CFCFCF; overflow:auto;border:0px solid #000000;margin:0px;width:100%;height:125px;"></textarea>
	<div>
			<input type ="checkbox" rid ="chk_use_tools" /> Include template tools.
			<br />
			<input type ="checkbox" rid ="chk_enable_callbacks" /> Include embedded_init and embedded_destroy callbacks.
			<br />
			<input type ="checkbox" rid ="chk_enable_event" /> Include example XHTML event.
			<br />
			<input type ="checkbox" rid ="chk_enable_form" /> Include example virtual form.
	</div>
	<div>
		<input type ="button"	value ="Create" onclick ="${this}.CreateNewFragment()" />
		<input type ="button"	value ="Close" onclick ="${this}.Close()" />
	</div>
	<embedded-script>
		<![CDATA[
		template_init : function(){
			
			this.GetElementByRID("fragment_text").value = "<!-- "
				+ "Enter valid XHTML"
			// + "Use ${this} for localized XHTML -> Component scripting,"
			// + "\nand ${this.id} to access the component id string.\n"
			+ " -->\n";
			;
			
		},
		CreateNewFragment : function(){
				var sName = this.GetElementByRID("fragment_name").value.replace(/$\s*/,"").replace(/\s*$/,"");
				if(sName.length == 0){
					this.setStatus("Invalid name.  Name must be specified.");
					return;
				}
				var sXhtml = this.GetElementByRID("fragment_text").value;
				var oX = 0;
				try{
						oX = Hemi.xml.parseXmlDocument("<test>" + sXhtml + "</test>");
				}
				catch(e){
				}

				if((oX == null || oX.documentElement == null || oX.documentElement.nodeName == "parsererror") && !confirm("Warning - content is not valid XHTML/XML.  Continue creating fragment?")) return;

				 
				var oBuilder = Hemi.registry.service.getObject(this.getProperties().opener_id);

				oBuilder.ClearFragment();

				var oConstruct = oBuilder.NewComponentConstruct(oBuilder.GetFragmentModel());
				oConstruct.changes++;
				
				var aBuff = [];
						
				oBuilder.GetElementByRID("fragment_name").value = this.GetElementByRID("fragment_name").value;
				oBuilder.GetElementByRID("fragment_description").value = this.GetElementByRID("fragment_description").value;
				if(this.GetElementByRID("chk_enable_callbacks").checked){
					oBuilder.AddFunctionStatement(oConstruct, "embedded_init","// Invoked when fragment is loaded, prior to template_init being invoked");
					oBuilder.AddFunctionStatement(oConstruct, "embedded_destroy","// Invoked when a destroy signal is raised");
				}
				var bTools = this.GetElementByRID("chk_use_tools").checked;
				var bForm = this.GetElementByRID("chk_enable_form").checked;
				if(bTools || bForm){
						aBuff.push("<!-- import-xml is defined in Hemi.app.space.definitions to use Hemi.xml.getXml to load an XML file and match at the root for html-fragment -->")
						aBuff.push("<import-xml src = \"Templates/TemplateTools.xml\" id = \"TemplateTools\" />");
				}
				if(this.GetElementByRID("chk_enable_event").checked){
						aBuff.push("<!-- ${this} is a token interpreted by the host Application Component to return a context-sensitive JavaScript pointer.  The context is the hosting Application Component. -->");
						aBuff.push("<p><span onclick = \"${this}.ClickEvent(Event)\">Click here</span></p>");
						oBuilder.AddFunctionParameter(oConstruct, "ClickEvent","vEvent");
						oBuilder.AddFunctionStatement(oConstruct, "ClickEvent", "// Get the correct event object for the client.");
						oBuilder.AddFunctionStatement(oConstruct, "ClickEvent", "vEvent = Hemi.event.getEvent(vEvent);");
						oBuilder.AddFunctionStatement(oConstruct, "ClickEvent", "var oEventSource = Hemi.event.getEventSource(vEvent);");
						oBuilder.AddFunctionStatement(oConstruct, "ClickEvent", "alert(\"Click\");");
				}
				if(bForm){
						aBuff.push("<!-- The rid attribute is used by the Application Space to provide a context-sensitive object reference, and by the Data Form for Virtual Forms. The context is the hosting Application Space. -->");
						aBuff.push("<!-- ${this} is a token interpreted by the host Application Component to return a context-sensitive JavaScript pointer. The context is the hosting Application Component. -->");
						aBuff.push("<div>\n\t<input type = \"text\" rid = \"example_text\" />\n\t<input type = \"button\" value = \"Submit\" onclick = \"${this}.SubmitForm()\" />\n</div>");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","// Example: Retrieve form field via TemplateTools::GetElementByRID");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var oText = this.GetElementByRID(\"example_text\");");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","// Example: Retrieve a virtual form field value via the template space (this.getTemplateSpace())");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var sValue = this.GetFormValue(\"example_text\");");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","// Example: Validate value against validation pattern using Config/ValidationPatterns.xml");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var bValid = this.ValidateForPattern(\"example_text\",\"not-empty\");");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","// Example: Serialize entire virtual form into XML, and post it to the server.");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var oX = this.SerializeForm();");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var oResponse = Hemi.xml.postXml(\"/path/to/server\",oX);");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","// Example: Serialize specified virtual form elements into specified XML, and post it to the server.");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var oXmlRequest = Hemi.xml.newXmlDocument(\"XmlForm\");");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var oX2 = this.SerializeForm(oXmlRequest,[\"example_text\"]);");
						oBuilder.AddFunctionStatement(oConstruct, "SubmitForm","var oResponse2 = Hemi.xml.postXml(\"/path/to/server\",oX2);");
				}
				if(aBuff.length) aBuff.push("");
				
				oConstruct.xhtml_content = aBuff.join("\n") + sXhtml;
				
				oBuilder.getObjects().fragment_construct = oConstruct;
				oBuilder.BuildFragment();
				this.getProperties().built = 1;
				oBuilder.RefreshFragmentBuilder();

				this.Close();
		},
        local_handle_close : function(oWin){
            var oBuilder = Hemi.registry.service.getObject(this.getProperties().opener_id);
            if(oBuilder && typeof oBuilder.getFocus == "function") oBuilder.getFocus();
		}
  ]]>
	</embedded-script>
</Template>

