Dojo, Now with Drawing Tools!
A common misunderstanding is that everything within DojoX is experimental or necessarily unstable. Although there certainly are some alpha-quality subprojects within the DojoX namespace that you wouldn't want to rely on for long-term production scenarios, several DojoX subprojects (including gfx) are quite ready for mainstream use. In general, you should be able to check a project's README file to determine information about its status.
In order to demonstrate the various drawing concepts as clearly as possible, all of the examples you're about to see will plug right in to the following minimal HTML page. Although you're encouraged to download the entire toolkit eventually, so you have full access to the source code whenever you need it, let's take advantage of the version that's hosted on AOL's Content Delivery Network, as it's quicker to get up and running. The latest version of Dojo at the time of this writing is 1.2, so the minimal effort to put Dojo to work is the following page, which uses a script tag to cross-domain load the toolkit:
With the minimal template in place, it is trivial to load the gfx module and start drawing. The next section digs right in to various aspects of the API, but just so you can see where we're heading, consider the modification to the template that instantiates a 600x600 pixel drawing surface and draws a line from the upper-left corner to the lower-right corner shown in Listing 1.
Listing 1. A Minimal Drawing Example
Although quite simple, the previous example taught us that the origin of the drawing surface is the upper-left corner with positive axes extending down and to the right, and that you can place a drawing surface into an arbitrary page element. Although not directly stated, the latter implies that you can have multiple drawing surfaces on a single page.
It's also worth noting that the style applied to the div element in no way applies to the gfx surface that is created. Internally, what happens is that the surface is created and placed inside of the div; thus, the containing div exhibits a 600x600 size with a visible border around it, and the surface that is placed into the div just so happened to be 600x600 pixels also. Without using Firebug to inspect the DOM, that may not have been obvious, so hopefully, mentioning it here avoids any confusion.
An additional aspect of this simple demonstration that's important to note is that the browser was detected and a default drawing renderer was assigned automatically without any special intervention. In the case of a Gecko- or KHTML-based browser, like Firefox or Konqueror, SVG is used as the default renderer; Internet Explorer defaults to VML.
Silverlight and Canvas can be configured to run on supported platforms via a gfxRenderer configuration switch supplied to djConfig via the script tag that loads Dojo into the page. For example, to instruct Firefox to use Canvas as the renderer you would provide the following script tag:
Web Development News
- Readers' Choice Awards 2013
- Linux Kernel News - November 2013
- Mars Needs Women
- December 2013 Issue of Linux Journal: Readers' Choice
- RSS Feeds
- Sublime Text: One Editor to Rule Them All?
- Raspberry Pi: the Perfect Home Server
- Advanced Hard Drive Caching Techniques
- Web Administration Scripts
- IBM Will Minimize Impact of Future Disasters
- thanks for share, great
4 hours 8 min ago
- There are factors which are
9 hours 8 min ago
- Gnome 3 ?
9 hours 53 min ago
- Reply to comment | Linux Journal
14 hours 46 sec ago
- "Redis RethinkDB 4.5%" on Best NoSQL Databases
1 day 6 min ago
- on the ground
1 day 6 hours ago
- I was able to read the whole
1 day 7 hours ago
- since i have read the title i
1 day 11 hours ago
- Belanja Online Cari Voucher Diskon
1 day 11 hours ago
- The kernel doesn't really
1 day 23 hours ago