Dojo Toolkit

I missed my update last week, so this post actually covers the past two weeks. Rewrite with dijit._Widget One of the first things Peter mentioned after my initial commits was that my code was not very Dojo-like, and (though he didn't say it) not ... [More] very good. I had all the setup code in a single initialization function, which the client had to explicitly call. Instead of having a separate class for each component (Source, Canvas, Editor), each piece was declared as a dojo.dnd.Source and then specific actions were attached here, there, and anywhere. The code was not at all modular, with the implementation exposed in many places. Peter gently suggested making each component a subclass of dijit._Widget, which would give me a lot of built-in functionality (dijit.byId, constructors, etc.) for free. Refactoring the code to subclass dijit._Widget has been very helpful. The components are completely decoupled, my code is much more modular, and the client code is quite simple. Creating a class for each component also makes customizing their behavior a cinch, since it's easy to monkeypatch any of the class methods. PropEditor I've finally created the PropEditor, which allows you to edit the properties of a field element. Right now it only supports changing the name, but eventually it will be able to edit the choices for a select, change the default value for a field, and more. pub/sub I'm trying to keep the components completely decoupled after the refactoring, so each piece is usable in isolation from the others. This means that, for example, the Canvas can't call a method of the PropEditor when a field is selected, since there may not even be a PropEditor instance on the page. Instead of direct method calls, I'm using dojo.publish dojo.subscribe to pass messages and data around to anyone who wants to listen. This is my first time doing event-driven programming like this, and I think it's a neat way to maintain modularity between classes. The PropEditor could actually be used on any page that publishes the correct messages, not just in concordance with my Canvas class. Loading existing elements Since I'm building a form editor, and not just a form creator, the Canvas needs a way to load existing form elements from a page. Taking a page from dojo.dnd.Source, the Canvas will now add any existing soc.ed.Elements to its internal structure when the Canvas is created, similar to how dojoDndItems are gathered. All the major pieces of the editor have been created, so now I'll be focused on making each one richer and better. [Less]

Hi dojoers, I am thinking to put my analysis document for GFX 2.0 (this document has been updating from the first time discussion with my mentor Mr.Eugene Lazutkin). You can read the document to know more about abstract design of GFX 2.0... At the ... [More] moment, I am writing document to explain thoroughly about GFX 2.0 implementation, it will be described about: - Assumption implementation (for example, no color texturing, no light feature, etc) - Implementation detail (including design diagram, improvement made to increase performance) - Problem (algorithm, feature that hard to implement) Link for the analysis document can be read in this link [Less]

This week I've made a lot of progress on rails' JavaScriptGenerator. JavaScriptGenerator basically offloads a lot of the work to the underlying prototype js library, and it's meant to be an expressive means of speaking javascript with ruby code. To ... [More] maintain this flexibility, I've been implementing a lot of prototype functionality in our drails javascript package. There are 2 new classes, drails.Element and drails.ElementCollection, and one new interface, drails.Enumerable. drails.Element is a stripped down version of prototype's Element, but rather than extending a DOMNode with additional functionality, it wraps it in a class and provides the basic API that rails explicitly exposes in JavaScriptGenerator. I say explicitly, because a neat feature of JavaScriptGenerator is that if you call a method that isn't explicitly defined in it, it tries to pass it down the chain to the underlying javascript. The implementation of drails.Element is the opposite of the prototype Element. prototype declares a bunch of methods that look like this: Element.insert(element, insertions); and then "methodizes" them each time a DOM Node is extended, with code that looks something like this: // element == Dom Node     for (property in Element.Methods) {       value = Element.Methods[property];       if (Object.isFunction(value) && !(property in element))         element[property] = value.methodize();     } Function.prototype.methodize = function() {     if (this._methodized) return this._methodized;     var __method = this;     return this._methodized = function() {       return __method.apply(null, [this].concat($A(arguments)));     }; Instead of this, I define the methods as instance methods of the drails.Element class, but then provide the same "static" style interface as prototype by instantiating a new instance of drails.Element for the "static" style interface: drails.Element.Functions = (function(){   function functionize(method){     return function(){       var args = drails.toArray(arguments);       return method.apply(new drails.Element(args[0]),args.slice(1));     };   }   functions = {};   for(prop in drails.Element.Methods){     var value = drails.Element.Methods[prop];     if(dojo.isFunction(value) && prop[0] != "_"){       functions[prop] = functionize(value);     }   }   return functions; })(); It took me awhile to get this flow correct and working, as there are some tricky scope issues when passing around anonymous functions. At least now I finally understand what this means. drails.ElementCollection is similar in scope, in that it wraps a NodeList (i.e. one returned from dojo.query) in a class, and mixes in the Enumerable interface, so you end up with an Enumerable collection of drails.Elements. Not much more to say here until I finish getting unit tests in place, but you can have a look at all the new javascript code here: http://pastie.org/226646 Please let me know if you see anything amiss with it. [Less]

I created a nice animation effect that splits the element into an arbitrary number of rows and columns, then sends them flying away from the element's center. The user can specify whether or not the pieces fade out as they move, and whether or not ... [More] the distance and duration of each piece's animation should be randomized. The effect is accomplished by cloning the node once for each piece and combining each piece's animation together. The original node's opacity is set to zero onPlay. Unfortunately, there are a few small kinks I still need to work out in the way the effect is structured. For example, many of the basic _Animation arguments are ignored, and the effect does not play nicely with dojo.fx.chain. Now that I have a successful technique for splitting a node into pieces and animating them, I can create a whole slew of unique effects never before seen in a JavaScript toolkit. I'll be demonstrating these effects here as I perfect them. [Less]

Hi dojoers, Finally, after bugging around with algorithm to change Quaternion to Euler rotation system... The Opera implementation for GFX 2.0 is out... It is around 90% though (I need mathematician who understand about good camera management). Since ... [More] the Firefox and Opera implementation are already out... So I already achieved the unification API feature of GFX 2.0... After mid evaluation, I want to jump into high level of GFX 2.0 to make interactive 3D module... such as loading 3d model... and easy 3d environment loader file... I also want to make a real world example... Some example: -Model Viewer GFX 2.0 supports user to load or create 3D model in 3D environments. For example, a furniture website would like to show 3D model furniture to user. User is able to interact with the 3D model furniture like manipulating the view (rotate, zoom or pan view) and changing 3D model state (opening door of wardrobe). -Statistic Chart GFX 2.0 allows user to view charts both in 2D and 3D environments. In 3D environment, user can manipulate view to be rotated and zoomed. -Mathematic Graph GFX 2.0 also can be used to display mathematic equation graph in 2D and 3D. User can analyze the equation shape or specific point location. Some checkpoint: - Anyone know (book or web page) which tell about good camera management (interaction with the algorithm)? - Anyone have a thought about nice 3D real world example? - Any idea about nice 3d model file format? Such as Google Earth model file... If you guys want to see the test page (sorry no camera rotation for Opera... I cant implement this...), you can see it in this page Thanks very much! I really appreciate, if you provide suggestions, ideas or critics... [Less]

Hi dojoers, There we go! A new demo page, it has realtime script execution, so you can play around with the library. Notice that, I put some predefined script already as example script... You can change it or do your own in custom script... The ... [More] purpose of this demo page is to determine whether my API is good or not... Not forget to mention, I will post the class diagram for you to get an abstract idea about the API... Try your best not to see the source code... try to guess from the argument parameter name... I am sorry I cant provide full HTML documentation right now since I will do it later on this project lifetime... Please go to this to see the demo page and this to see the class diagram... I would really appreciate if you give some comments, suggestions, or critics... Thanks! [Less]

I've been playing around with the idea of a user-friendly way to make a toggle-able animation, meaning the user creates a single animation object, and when that object is played, the animation either plays forward or backward, depending on the ... [More] animated node's current position or animation status. If the animation is played while it's already running, it would stop and then play in reverse from the current position. I tried a few different methods, but they all were unsuccessful or unreasonable one way or another. After this experimentation I realized that the best solution would be to add a reverse function to _Animation that would basically stop the animation if running and then play in reverse. [Less]

Not much to report this week as far as actual commits go. Been working on grokking rails' JavaScriptGenerator, JavaScriptHelper, and PrototypeHelper. I'm hoping to have a dojoified replacement for the aforementioned done by next week. I'm working ... [More] on rewriting the unit tests from rails to their dojo equivalents right now, then moving on to the implementation. Stay tuned for updates. [Less]

There was a delay in my project, I didn't do much last week - there were final exams in the university and I had to prepare well. Now, when I finally finished this term, I can concentrate on the project and be productive. There were updates on the ... [More] code since my last blog post. I added a simple implementation of grouped tokens handling. It can be used for the cases when you need to treat a set of equal tokens, which go one after another, as a one big separate token. For example, it can be used for list processing. Here is a simple list in Markdown format: * this is * a bulleted * list Each line is treated as a list item (so it can be translated to <li> html tag), but all three lines grouped together can be treated as a whole list and can be translated to <ul> tag. You can test how it works here: grouped tokens test. David gave me good advices on how should I rewrite some parts of code and how it should work. And while inspecting the code I wrote David added a simple definition of Mediawiki syntax. You can try it here: languages test. Next week I plan to finish a parser and start developing of token-processing functions so I can have a simple working prototype of Markdown parser to the end of next week. [Less]

Wow, it's been two weeks since my last blog. I'll be sure to update this regularly from now on. I've been experimenting with a method to solve the "stale values" bug in sizeTo but when I realized that the goal of my project is to provide a ... [More] "toolset," not a bug fix, I decided to forget about trying to solve the bug in dojox.fx and focus on cranking out new animations that handle interruptions and dynamic initial values. Instead of using the defective sizeTo, I'm using animateProperty. In addition to a set of animation presets, I was considering improving the Toggler class so animations move at a consistent rate when interrupted with a toggle. [Less]