javascript simple lightweight draggable window pattern

I have designed a simple draggable window, which can be draggable, minimize, maximize,

The design has a task bar down, so that the draggable window can be minimized, maximized, closed ..

simple javascript validation pattern

I have designed a validation frame work for my web, i am posting the design example.

Concept: I will have an attribute called 'fieldType' on each input element which needs validation, also i will set the validate function on the onblur attribute of that input element.

Intent: To have uniform validation across all the pages input fields, each validation method is classified by it's field type and each one will have a RegEx patterns inside to test the value is proper or not.

simple XQuery

As we know that XQuery is a W3c standard, Saxonica is the best tool so far i explored for various requirements. But I don't know the particular reason why most of the xml developers not choosing it. If you want to derive some information from lot of xml files, better do it in easy X-query.

You can write functions like in a scripting language. The main thing is that you need to understand FLOWER expression to iterate throw a XML tree,

FLWOR means for, let, where, order by, and return

Look at this this simple example

flwor.xq













In this xquery example, we have two xml file, one is emps.xml and depts.xml, which is shown below. In emps.xml, each 'emp' element has deptno reference which is present in depts.xml, So this X-query selects all the employee from emps.xml for this the criteria is that there should be more than one employee present for a same department. Please check it with the result attached below.

depts.xml








emps.xml























result.xml










Lets see an example with functions, it is easy to write a function like we write it in XSLT function, but in XSLT function is like again a xml data , but in xquery it is like a scripting language function.

simple-xq-func.xq




















result.xml









For more information read the W3C pages for Xquery use cases page
http://www.w3.org/TR/xquery-use-cases

SVG draggable objects design

I have designed draggable component in plain javascript which can manipulate SVG Object or it's group, You can drag and drop any svg component structure by simple setting it's draggable attribute to true. My library includes my own layout algorithm, and my own pattern

see the below sample picture , svg-draggable-network-view, (please try this sample in Firefox / chrome )











This UI code and draggable component can also be used inside Acrobat PDF slide view

If you want this sample code, please send me an email to my email id subburajanm@gmail.com























I have posted the PDF object oriented javascript code snippet below for your reference. Go through it if you have a requirement to do it like this ..

%PDF-1.4
1 0 obj
<<     /Type /Catalog     /Pages 2 0 R     /Names 3 0 R  >>
endobj
2 0 obj
<< /Type /Pages    /Kids [7 0 R]    /Count 1 >>
endobj
3 0 obj
<<      /AlternatePresentations 6 0 R      /JavaScript 4 0 R >>
endobj
4 0 obj
<<      /Names [ (OnLoadJavaScript)<< /S /JavaScript /JS 5 0 R >> ]
>>
endobj
5 0 obj
<<  /Length 148 >>
stream
if (alternatePresentations['circuit-app'] != null ) {
app.fs.isFullScreen = true;
alternatePresentations['circuit-app'].start(true);
}
endstream
endobj
6 0 obj
<<      /Names [ (circuit-app)7 0 R ]  >>
endobj
7 0 obj
<<      /Type /SlideShow      /Parent 2 0 R      /MediaBox [0 0 612 792]        /Subtype /Embedded      /Resources 8 0 R      /StartResource (circuit-svg) >>
endobj
8 0 obj
<<      /Names [ (circuit-svg)9 0 R ]  >>
endobj
9 0 obj
<<      /Type /FileSpec      /F (circuit-svg)     /EF 10 0 R  >>
endobj
10 0 obj
<<    /F 11 0 R  >>
endobj
11 0 obj
<<     /Length 56687     /Type /EmbeddedFile     /Subtype /image#2Fsvg+xml >>
stream

--- svg --  xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="doOnLoad(evt)">

--- style type="text/css" ---

---- style ----

----  Java script ----

var ddc;

var svgDoc;

function doOnLoad(evt) {
svgDoc = evt.target.ownerDocument;
var svgRootElem = svgDoc.documentElement;

ddc = new SVGDragAndDrop(svgDoc, svgRootElem);
ddc.init();
}

function SVGDragAndDrop(_svgDocument, _svgRootElement) {
this.svgDocument = _svgDocument;
this.svgRootElement = _svgRootElement;
this.defNS = null;
return this;
}

SVGDragAndDrop.prototype.init = function() {
this.svgRootElement.addEventListener("mousedown",
function(evt) { ddc.grap(evt); }, false);
this.svgRootElement.addEventListener("mousemove",
function(evt) { ddc.drag(evt); }, false);
this.svgRootElement.addEventListener("mouseup",
function(evt) { ddc.drop(evt); }, false);

this.grapPoint = this.svgRootElement.createSVGPoint();
this.trueCoords = this.svgRootElement.createSVGPoint();
this.dragger = new MySVGNodeDragger(this.svgDocument, this.svgRootElement);
this.maxX = 1000;
this.maxY = 500;
}


--- script ----

svg data

endstream
endobj
xref
0 11
0000000000 65535 f
0000000010 00000 n
0000000093 00000 n
0000000162 00000 n
0000000248 00000 n
0000000340 00000 n
0000000544 00000 n
0000000607 00000 n
0000000792 00000 n
0000000855 00000 n
0000000943 00000 n
0000000985 00000 n
trailer
<< /Size 12    /Root 1 0 R >>
startxref
58192
%%EOF

A simple SVG Web Combo box

Click here to open the samples, this prototype works fine in firefox/chrome now, so please try in firefox

graphical combo array as like you see in the below picture
graphical node link selection Combo as like you see in the below picture

Source Code
svgcombo.js, svgcombo_ext.js, vscrollbar.js, hscrollbar.js, svgtextbox.js

Graphical UI component: (web tool)

This is a simple combo box kind of design. We can scroll down thousands of entries and also we can do type and search. Library includes my H/Vscroll algorithm and new paging algorithm

Concept:
Concept is very simple, if the combo size is 5 means, then there are 5 text-fields will be drawn from top to bottom one another along with a vertical scrollbar right side. data will be kept outside of this design in an separate array . So on each click or drag points of the scroll bar, 5 entries from the array will be taken and will be populated in those textfields sequentially.
Also this combo component can come with or without header. Combo row can be text data or an UI data.

Here the vertical scroll bar and horizontal bar objects are also separate component, integrated

Combo box component has the vertical scroll bar support which can scroll for any size, for example for a size of 6 it can scroll max 600 entries. I tested it with maximum size of 2000 which can be scrollable. This combo component has some special that its width will be automatically change depends upon its text width when user scrolls horizontally. Also it has auto completion and type and search functionality.

Here look at the below 2 picture, one picture shows combo with graphic row component and another picture shows combo with text data. This text combo box has some special functionality, i.e, when you scroll down if the size of the text is large or very small compare to the previous row, then it will automatically shrink and expand as it is shown in the below picture.

































Like this i developed some UI component using plain object oriented javscript code.

I developed UI components TextField, vertical/horizontal scrollbar, and combo box in Svg. These component also has draggable functionality

If you want the source code of the javascript, please send me an email subburajanm@gmail.com