Author: lgiessmann Date: Mon Jun 29 14:39:18 2009 New Revision: 79 Log: ajax-client: implemented a skeleton for a topic map overview, currently a css-style and some handlers are missing Added: trunk/src/ajax/css/tree.css (contents, props changed) - copied, changed from r73, /trunk/src/ajax/css/main.css Modified: trunk/docs/xtm_json.txt trunk/src/ajax/css/main.css trunk/src/ajax/isidorus.html trunk/src/ajax/javascripts/constants.js trunk/src/ajax/javascripts/home.js trunk/src/ajax/javascripts/requests.js Modified: trunk/docs/xtm_json.txt ============================================================================== --- trunk/docs/xtm_json.txt (original) +++ trunk/docs/xtm_json.txt Mon Jun 29 14:39:18 2009 @@ -171,6 +171,27 @@ //+----------------------------------------------------------------------------- +//+ topic map overview - node +//+ Contains a list of trees, that represents a topic map by representing +//+ all valid topics and their super-subtypes and type-instance +//+ relationships. +//+----------------------------------------------------------------------------- +{ + "topic" : ["psi-1", "psi-2"], + "isType" : <boolean>, + "isInstance" : <boolean>, + "instances" : [ <node> ] +} + + +//+----------------------------------------------------------------------------- +//+ topic map overview - treeview +//+ Contains alist of nodes. +//+----------------------------------------------------------------------------- +[ <node>, <node>, <...> ] + + +//+----------------------------------------------------------------------------- //+ Part 3: TMCL - data model //+ This part explains how the tmcl-rules/suggestions of isidorus are //+ sent via HTTP as JSON-data. Modified: trunk/src/ajax/css/main.css ============================================================================== --- trunk/src/ajax/css/main.css (original) +++ trunk/src/ajax/css/main.css Mon Jun 29 14:39:18 2009 @@ -23,7 +23,7 @@ border-right: 1px solid #d1d1d3; border-bottom: 1px solid #d1d1d3; margin-top: -21px; - padding-bottom: 21px; + padding-bottom: 60px; } h1 { Copied: trunk/src/ajax/css/tree.css (from r73, /trunk/src/ajax/css/main.css) ============================================================================== --- /trunk/src/ajax/css/main.css (original) +++ trunk/src/ajax/css/tree.css Mon Jun 29 14:39:18 2009 @@ -10,57 +10,35 @@ /*----------------------------------------------------------------------------*/ -body { - width: 1024px; - margin-left: auto; - margin-right: auto; -} - -#subPage { - color: #333377; - min-height: 800px; - border-left: 1px solid #d1d1d3; - border-right: 1px solid #d1d1d3; - border-bottom: 1px solid #d1d1d3; - margin-top: -21px; - padding-bottom: 21px; +ul.treeView { + padding-top: 10px; + padding-left: 20px; + list-style-type: none; } -h1 { - clear: left; - margin-left: 10px; - padding-top: 20px; -} - -.clickable { - cursor: pointer; +ul.treeView ul { + padding-left: 20px; + list-style-type: none; } -.clickable:hover{ - color: #ff7f00; -} - -.deselect { - cursor: pointer; +ul.topicPsis { + float: left; + clear: left; } -.deselect:hover{ - color: #ff7f00; +ul.topicPsis + span { + margin-left: 20px; + margin-right: 2px; } -.errorMessage { - margin: 0.5em; - color: red; - font-size: 0.85em; +ul.topicPsis + span + span{ + margin-left: 2px; } -div.loadFrame { - padding: 2em; - color: #ff7f00; - text-align: center; +ul.topicPsis + span.disabled { + color: #eaeaee; } -img.ajaxLoader { - display: none; - margin-left: 412px; /* the image has a width of 100px --> 1024/2 - 100 = 412*/ +ul.topicPsis + span + span.disabled { + color: #eaeaee; } \ No newline at end of file Modified: trunk/src/ajax/isidorus.html ============================================================================== --- trunk/src/ajax/isidorus.html (original) +++ trunk/src/ajax/isidorus.html Mon Jun 29 14:39:18 2009 @@ -20,6 +20,7 @@ <link rel="stylesheet" type="text/css" href="css/main.css"/> <link rel="stylesheet" type="text/css" href="css/frame.css"/> <link rel="stylesheet" type="text/css" href="css/navi.css"/> + <link rel="stylesheet" type="text/css" href="css/tree.css"/> <!-- error handling for javascript code --> <script language="JavaScript" type="text/javascript"> <!-- Modified: trunk/src/ajax/javascripts/constants.js ============================================================================== --- trunk/src/ajax/javascripts/constants.js (original) +++ trunk/src/ajax/javascripts/constants.js Mon Jun 29 14:39:18 2009 @@ -11,7 +11,7 @@ // --- Some constants fot the http connections via the XMLHttpRequest-Object -var HOST_PREF = "http://143.93.190.237:8000/"; //"http://localhost:8000/"; // of the form "http://(.+)/" +var HOST_PREF = /*"http://143.93.190.237:8000/";*/ "http://localhost:8000/"; // of the form "http://(.+)/" var GET_PREFIX = HOST_PREF + "json/get/"; var GET_STUB_PREFIX = HOST_PREF + "json/topicstubs/"; var TMCL_TYPE_URL = HOST_PREF + "json/tmcl/type/"; @@ -83,5 +83,11 @@ "load" : function(){ return "loadFrame"; }, "ajaxLoader" : function(){ return "ajaxLoader"; }, "editFrame" : function(){ return "editFrame"; }, - "disabled" : function(){ return "disabled"; } + "disabled" : function(){ return "disabled"; }, + "node" : function(){ return "treeNode"; }, + "tree" : function(){ return "tree"; }, + "treeView" : function(){ return "treeView"; }, + "instances" : function(){ return "instances"; }, + "subtypes" : function(){ return "subtypes"; }, + "topicPsis" : function(){ return "topicPsis"; } }; \ No newline at end of file Modified: trunk/src/ajax/javascripts/home.js ============================================================================== --- trunk/src/ajax/javascripts/home.js (original) +++ trunk/src/ajax/javascripts/home.js Mon Jun 29 14:39:18 2009 @@ -16,4 +16,128 @@ var header = new Element("h1").update("Topic Map Overview"); content.insert({"bottom" : header}); $(CLASSES.subPage()).insert({"bottom" : content}); + + function successFun(xhr){ + var json = null; + try{ + json = xhr.responseText.evalJSON(); + } + catch(innrErr){} + + try{ + if(json === null) { + alert("The server's response does not contain any topics!"); + } + else { + var treeView = new TreeViewC(json); + content.insert({"bottom" : treeView.getFrame()}); + } + } + catch(err) { + alert("Could not create a Topic Map overview: " + err); + } + } + + requestTreeView(successFun, null); } + + +var TreeViewC = Class.create({"initialize" : function(contents){ + if(!contents) throw "From NodeC(): content must be set!"; + try { + this.__frame__ = new Element("ul", {"class" : CLASSES.treeView()}); + for(var i = 0; i !== contents.length; ++i){ + var tLi = new Element("li").update(new TreeC(contents[i]).getFrame()); + this.__frame__.insert({"bottom" : tLi}); + } + } + catch(err){ + throw "From TreeC(): The following exception was thrown:\n" + err; + } + }, + "getFrame" : function(){ + return this.__frame__; + }}); + + +var TreeC = Class.create({"initialize" : function(content){ + if(!content) throw "From NodeC(): content must be set!"; + try { + this.__frame__ = new Element("ul", {"class" : CLASSES.tree()}); + this.__frame__.update(new NodeC(content).getFrame()); + } + catch(err){ + throw "From TreeC(): The following exception was thrown:\n" + err; + } + }, + "getFrame" : function(){ + return this.__frame__; + }}); + + +var NodeC = Class.create({"initialize" : function(content){ + if(!content) throw "From NodeC(): content must be set!"; + try { + this.__frame__ = new Element("li", {"class" : CLASSES.node()}); + this.__topic__ = new Element("ul", {"class" : CLASSES.topicPsis()}); + this.__frame__.update(this.__topic__); + for(var i = 0; content.topic && i !== content.topic.length; ++i){ + var tLi = new Element("li").update(content.topic[i]); + this.__topic__.insert({"bottom" : tLi}); + } + + this.__edit__ = new Element("span", {"class" : CLASSES.clickable()}).update("edit"); + this.__create__ = new Element("span", {"class" : CLASSES.clickable()}).update("create"); + if(content.isType !== true){ + this.__create__.writeAttribute({"class" : CLASSES.disabled()}); + } + else { + this.__create__.observe("click", function(event){ + alert("create"); + }); + // TODO: define a handler + } + + if(content.isInstance !== true){ + this.__edit__.writeAttribute({"class" : CLASSES.disabled()}); + } + else { + this.__edit__.observe("click", function(event){ + alert("edit"); + }); + // TODO: define a handler + } + this.__frame__.update(this.__topic__); + this.__frame__.insert({"bottom" : this.__edit__}); + this.__frame__.insert({"bottom" : "|"}); + this.__frame__.insert({"bottom" : this.__create__}); + + this.__instances__ = null; + this.__subtypes__ = null; + + if(content.instances && content.instances.length !== 0) { + this.__instances__ = new Element("ul", {"class" : CLASSES.instances()}); + for(var i = 0; i !== content.instances.length; ++i){ + var entry = new NodeC(content.instances[i]); + this.__instances__.insert({"bottom" : entry.getFrame()}); + } + } + + if(content.subtypes && content.subtypes.length !== 0) { + this.__subtypes__ = new Element("ul", {"class" : CLASSES.subtypes()}); + for(var i = 0; i !== content.subtypes.length; ++i){ + var entry = new NodeC(content.subtypes[i]); + this.__subtypes__.insert({"bottom" : entry.getFrame()}); + } + } + + if(this.__instances__) this.__frame__.insert({"bottom" : this.__instances__}); + if(this.__subtypes__) this.__frame__.insert({"bottom" : this.__subtypes__}); + } + catch(err){ + throw "From NodeC(): The following exception was thrown:\n" + err; + } + }, + "getFrame" : function(){ + return this.__frame__; + }}); \ No newline at end of file Modified: trunk/src/ajax/javascripts/requests.js ============================================================================== --- trunk/src/ajax/javascripts/requests.js (original) +++ trunk/src/ajax/javascripts/requests.js Mon Jun 29 14:39:18 2009 @@ -233,4 +233,27 @@ catch(err){ alert("From requestFragment(): " + err); } +} + + +// --- Request a topic map overview object from the server and calls +// --- onSuccessHandler or OnFailureHandler. +function requestTreeView(onSuccessHandler, onFailureHandler) +{ + if(!onSuccessHandler) throw "From requestTreeView(): onSuccessHandler must be set!"; + + try{ + var onFailure = onFailureHandler ? onFailureHandler : defaultFailureHandler; + var timeFun = setAjaxTimeout(6 * TIMEOUT, COMMIT_URL); + onLoad("Requesting a topic map overview from " + TM_OVERVIEW); + + new Ajax.Request(TM_OVERVIEW, { + "method" : "get", + "requestHeaders" : INIT_DATE, + "onSuccess" : createXHRHandler(onSuccessHandler, timeFun), + "onFailure" : createXHRHandler(onFailure, timeFun)}); + } + catch(err){ + alert("From requestFragment(): " + err); + } } \ No newline at end of file