Just a quick announcement: Anyone in or around Portland, OR during OSCON next week is welcome to attend our makeshift/informal dojo.dinner() planned for Wed, July 23, 2008 - Time and Place TBD -- but Portland has some great restaurants ... so never fear.

If you'd like to attend, please RSVP (asap) to rsvp @ dojotoolkit.org with a headcount of those planning to attend so that we can pick an appropriate location based on the attendance.

Sorry for the short notice ... and looking forward to seeing everyone there!

Hola dojoers,

Recently, GFX 2.0 got new important feature! It is called LoaderSystem. As name describes, it will load external data format (especially graphic markup language such as OBJ file)... Anyone familiar with Suzanne from Blender? It is auto loaded in the GFX 2.0 in the start up page... You can rotate it, you can move it as well... Not forget to mention other mesh such as Cylinder is added as well...

If you aware for Opera page, it does not have any predefined script (no item in the combobox). Yes it is, since I dont know how to fix the auto loader for JSON in Opera... Anyone has idea for that? Maybe I should use ordinary way to add item...

You can find image screenshot in here and test page in here. Please be aware that loading page takes long time (it needs to load texture and mesh data around 1 MB, not to mention dojo library).

Please give comments, suggestion or critics! Thanks!

Since this is supposed to be the "Midterm Evaluation Period" and "Coding Phase II" starts on Tuesday, I've been taking it easy this past week. However, I haven't completely stopped working on my project; there are two new effects. Nothing to spectacular, just a wipe version of the previous "shear" effect ("pinwheel" was the best name I could think of; suggestions are welcome), and an effect where pieces simply fade out. The demo page is here.

My mentor suggested working on text effects, where each character in a block of text could be animated individually, much like the "pieces" of a whole element are handled in the effects I've created so far. He also suggested implementing text-replacement in which the current text disappears while new text appears. I think this is a great idea and plan to create a set of effects similar to those that I've been working on.

I've also been considering creating a simple non-linear slide effect that moves an element along a user-defined curve. This would allow even more complex effects, such as an "explode" effect in which the pieces travel in parabolas as if affected by gravity, or an effect where pieces spiral into place. This is my second priority, my first being the previously-mentioned text effects.

We're looking for some feedback from the dojo community on a visual page design tool we're building at projectzero.org (community development site for WebSphere sMash).

General Features:

• 100% dojo-based
• Generates html pages that are 100% dojo+html+css+js
• Browser-based
• Runs disconnected (on a very small footprint client runtime).

Visual Page Editor Features:

• DnD page editing for most Dijit and Dojox widgets (more coming soon)
• Flow or Absolute positioning layout modes
• Proper handing of nested containers/child widgets
• Widget and page-level property sheets
• CSS property sheets
• Datasource creation
• Databinding
• Design/Source code views
• Event handlers (uses dojox/wires and declarative script event handlers)

This is a work in progress, and we still have lots of additional things coming over the next few months, but we would like to get feedback from the best community of developers that will be using it while we're still early in dev cycle.

Quick Instructions to get you to the cool parts of the builder app:

1. Follow the simple install instructions here.  You have to install the command line interface first, then follow the instructions for starting the app builder.  The script will download additional maven modules containing the dev tool, start it up and launch the browser.  Be patient, it may take time for the dependencies to download initially until the browser appears.
2. Once you're in the application builder, create a new app, and then inside that app create a New Page... (html) in the /public folder (something like /public/testpage.html). This will launch the visual page designer tool on a blank html page. From here you can Drag and drop widgets from the palette on the right onto the page, and right click or use the Properties menu to changes properties, styles and events. The Structure view shows an outline of all the visual and non-visual widgets on the page, and the data tab allows you to create dojo.data DataStores. Go to the property sheet for databound widgets like grid to set the databinding to the datastores in the page.
3. Click on the Source view to view and edit the html/js/css source and switch back to Design view.
4. You can start the app using the Start link, then open a new browser window on http://localhost:8080/{yourpage.html} <-- Note: no need for /public and should see the page you built here.

If you need help, pc me chrism on /dojo IRC or send email to ccmitchellusa at gmail dot com, or please feel free to join projectzero.org and post to the forums there.

We're really excited about the progress we're making on this tool and hope that it helps accelerate dojo development in a big way.

Enjoy!
Chris Mitchell
IBM/WebSphere/Project Zero/Dojo

It's time for the next Dojo Developer Day, this time in Boston at the Ajax Experience.

Developer/Contributor Day
Sunday, September 28, 10-5
IBM (Cambridge)

Developer/Community Day
Monday, September 29, 8-12
Ajax Experience (Boston)

Both events are free to attend. Space is limited for the event on Monday, so please RSVP asap. Please only RSVP yes if you absolutely can make it as we're tight on space. We'll create a waiting list once we run out of seats.

Sign-up now

Hi dojoers,

As mid evaluation comes, I am prepared myself with a document to give brief explanation about my implementation. It is provided class diagram, sequence diagram, some explanation for each component and screenshot about some demonstration.

You can find about:
- Design Document
- Implementation Overview Document
- Simple Class Diagram
- Detailed Class Diagram
- StarUML Project File
- Latest Test Page
- GFX 2.0 Zip File

Note
- For maximum quality, please zoom the PDF document to 150%.
- Opera test page is buggy, pre-defined script does not want to load. Anyone know how to solve this?
- Please right click and choose save target as for downloading StarUML Project File.

I would really appreciate if you can provide me suggestion, opinion or critics! Thanks!

Today SitePen, Inc. announced the release of a co-sponsored "demo" utilizing Adobe's AIR runtime and The Dojo Toolkit affectionately named "The Dojo Toolbox". Don't let the term "demo" fool you though, this thing is a fully functioning application providing a pluggable API built around the question "what can be done offline to better Dojo?" ... As you probably know, AIR provides a plethora of functionality not present in standard browser applications, and Dojo is the perfect toolkit to fully take advantage of the potential. From offline storage to native window interaction (which seems to fall perfectly in line with the idea of templated widgets, especially in "chromeless" mode) to the remote update capabilities of AIR, realizing powerful desktop-based cross-platform applications has never been easier. I can't begin to confess how excited I am about being to use the stuff I know (html/css/js/Dojo) in the realm of Desktop application, so I won't even try.

Enough jabbering ... on to the good stuff! You can skip my wordiness and view the screencast Kevin Dangoor made up, or read along with the quick-and-dirty rundown from the SitePen press release:

The entire Dojo API Documentation has been taken offline and converted into a searchable index. Every piece of the public (and private) API in Dojo is now available on your desktop for browsing. Doc updates come out? No problem,
the application can be remotely updated anytime a new version of Dojo is released.

The power of the Dojo build system has been ported to AIR. You can target an existing build profile, define common options, and build your dojo.js and layers all from a simple UI. Upcoming (planned) features include: ShrinkSafe web service (you can't run Java from within AIR, so no ShrinkSafe is available just yet) to compress your code, as well as a custom Profile maker.

Many vital resources are found in this simple Toolbox plugin giving you handy access to the most current and most important resources available for Dojo. One oversight in the 1.0 release the absence of a link to DojoCampus, though the automatic updating nature of the application means it will likely appear shortly.

The application was released under a BSD license and is fully open source. SitePen has setup a dedicated mailing list to discuss any issues or enhancements about the Toolbox, so signup and throw some ideas out. What kind of cool mini tools can you imagine floating around on AIR to make your web-dev experience easier? I'm thinking of a set of pixel calculators/rulers to overlay and inspect layout nitpicking ... The potential is endless.

Thanks be to Adobe and SitePen for their support of Dojo and Open Source Software. I can't wait until other tool ideas start popping up ...

Since my last update, I've made the demo page more verbose and created a "shear" effect that, once again, splits the element into rows and/or columns and slides them in alternating directions, with an optional progressive or random delay between each piece's animation.

I also added a parameter (args.unhide) that returns the opposite animation, which is not necessarily the exact reverse. For example, the opposite of the disintegrate effect is the build effect, in which pieces fall from the top into place rather than down from their initial positions.

Since the fold effect was acting strangely, and because its concept was so trivial, I scrapped it. It was supposed to be a simple chain of two wipes, one vertical and the other horizontal. Users should be able to figure this one out on their own.

I'm planning more advanced effects, involving non-linear sliding. I also plan to perfect a simple _Animation.reverse() that either simply reverses the animation's curve or handles pausing, reversing, and playing an animation in progress. My mentor and I have already discussed a simple prototype that might work.

I continue working on Markdown parser and for now it already supports:

• span elements (bold, italic, inline images links and code)
• settext and atx headers
• code blocks
• blockquotes, partly supported for now (in some cases output differs from original Markdown output)
• horizontal rules
• backslash escaping for special chars (\*, \`, etc)

It took much more time than I planned to implement all this stuff. The process
of writing a good syntax definition to support all possible cases appeared to
be very tricky. However I'm moving on.

Things that are left:

• lists
• paragraphs
• reference-style links and images
• autolinks

Here is the latest test you can play with - languages test.
For more info on Markdown's syntax you can visit official Markdown syntax documentation.

With the successful completion of the explode effect, I decided to build on the code used to split the node into pieces. I split the code in half and thus created a new generic function, dojox.fx._split that returns an animation object that splits the node into args.rows and args.columns and applies args.pieceAnimation() to each piece. This function takes the piece, its x and y location in the grid of pieces, and the dojo.coords of the original node as arguments and returns either an animation object or an array of animation objects to be combined.

So, I can now start churning out all types of effects that deal with pieces of a node separately. I've already created a disintegrate effect, in which each piece drops 1.5 times the height of the node and fades out. You can play with it and other effects in progress here.

Although I could continue in this direction, I've decided to go back and create effects that make the node appear from nothing rather than disappear. This may be slightly more involved, since I'd like to avoid the "stale values" issue as well as making the user explicitly define the dimensions of the node at the end of the animation.

I missed my update last week, so this post actually covers the past two weeks.

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 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.

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.

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.

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.

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 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

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 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.

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 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.

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 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...

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 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!

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 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.

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 on rewriting the unit tests from rails to their dojo equivalents right now, then moving on to the implementation. Stay tuned for updates.

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 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.

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 "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.