Dojo Zoomer?

An Easy Way To Earn More Money With Binary Trading

 

Different types of assets are traded in the binary world, and this sector offers a lot of possibilities to prospective investors. However, you could be earning even more than the rest if you incorporate a binary trading robot such as Quantum code, and this automated trading software can boost your trading performances in no time.

by Peter Higgins

I don’t normally blog demo’s when I make them, but this one was a little special … it began as a simple Drag and Drop / Constrained Mover example, and with the help of a couple #dojo community members took shape into a fully featured demo showing the power of the Dojo Toolkit.

Pictures are worth a thousand words, so visit the demo first. I call it Dojo:Zoomer.

The demo is broken into clearly separated roles of content and presentation. The Markup is valid, with two external <script> tags are loading progressive enhancements to an otherwise plain list of anchors and thumbnails. There is a single CSS file, though as can be seen in the source file, it is being concatenated from a couple different .css files as part of the build process.

The drag / preview component was separated into a module “image.Preview“, and is reusable, configurable, and otherwise just a “standard widget”, extending from only dijit._Widget to use the framework provided therein.

Thanks to Nic Rizzo and Ben Hockey in #dojo — both who, after seeing the initial example late one evening, had patches pasted into my IM client when I awoke the next morning, ultimately finishing the nasty glaring bugs for me. Kudos guys, thanks!

I had decided it was a fairly good looking demo, but needed many more images in order to be considered a true “demo” … It needed some kind of UI going on, so I quickly hacked together some code to progressively enhance the list of thumbnails into a paging/switching mechanism with dojo.fx and some onclick events. Initially, i’d left this module out of the build layer, and had a link to issue the dojo.require() appropriate for that navigation, but it was non-obvious to viewers, so it is there by default. (Though nothing will break if you omit the module, should you happen to obtain this code from svn / etc).

The additional thumbnails are being sent to the client via XHR (Ajax) in JSON format, and is just a static list of filenames. This isn’t being generated, but clearly could be had I assumed a server side language for this demo. Dojo itself is server-agnostic, though most servers support some form of JSON processing. The list could be used, for instance, on the server side to generate the initial page of valid links, and then progressively add more and more via lazy Ajax calls. JSON is a great compact format for mixing client and server data and communication …

Not bad for a couple nights hacking. Thanks be to mi hermana, Allison Wildman, for contributing all the beautiful imagery, Ben and Nic for coming through on the advanced math and coordinate calculation, and thanks to Dojo for providing such out of the box components as a dnd.parentConstrainedMoveable and dojox.widget.ResizeHandle, making this exercise simply one of wiring the parts together and supplying images.

ps: the “image.Preview” widget really is largely generic, and if Dojo were not so close to 1.3, I would consider making it an “official” widget within the dojox.image project. Perhaps for 1.4.

About: Peter “dante” Higgins is the Dojo Toolkit Project Lead and a UI Designer at Joost.com
Website: http://higginsforpresident.net/

 

This entry was posted on Monday, January 19th, 2009 at 3:15 pm and is filed under News. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

18 Responses to “Dojo Zoomer?”

  1. cs44 Says:
    Really like the resizable preview pane. Very slick use of Dojo – I’m hoping more folks see this.
  2. Dojo Zoomer – Sweet Image Cropping Widget | How2Pc Says:
    […] I love projects that evolve from minor functionality to full-blown apps, especially with the help of a strong community like Dojo users. This is precisely what happened to Peter Higgins: […]
  3. Fully Featured Image Magnifier with Dojo Zoomer « Freedp97’s Blog Says:
    […] Higgins has created Dojo Zoomer. It is divided into 3 panels. By hovering over the image on the left panel, right panel dynamically […]
  4. The Wonderfactory » Blog Archive » Dojo image magnification Says:
    […] Higgins has created Dojo Zoomer. It is divided into 3 panels. By hovering over the image on the left panel, right panel dynamically […]
  5. 70 New, Useful AJAX And JavaScript Techniques | ClickLogin Web Design Says:
    […] Dojo Zoomer A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here. […]
  6. dojonovice Says:
    Hi, This is fantastic. I’m a completely new to Dojo .. For the life of me, I can’t figure out where to Download all the files at once. I’m not sure what js’s are being used and how. If you have a full package available, please let me know as I can not figure out how to even implement this at all and I really want to.Thanks.
  7. dante Says:
    @dojonovice – This is “just a demo”, though the code is all available in the -demos download. This example _requires_ Dojo 1.3, which hasn’t officially been released, but is available in release-candidate mode:http://download.dojotoolkit.org/current-dev/I would go ahead and “jump all in”, and grab the -src.tar.gz release, and unpack it. Then grab the -demos.tar.gz for the same version number, and unpack the demos/ folder next to your dojo/ dijit/ and dojox/ folders. Then, just look at demos/cropper/demo.html and src.js for all the code.

    I am going to try to make this particular demo “more reusable” and an official widget in a next version of Dojo. As it is now, it requires a little setup with regard to css and modules.

  8. Web Development Internships « TeamPatent Says:
    […] dojo zoomer, a simple JavaScript image magnifying tool to support arbitrary shape cropping and […]
  9. Hello world! « Trungquy’s Blog Says:
    […] Dojo Zoomer A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here. […]
  10. 70 New, Useful AJAX And JavaScript Techniques « Ramesh Says:
    […] Dojo Zoomer A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here. […]
  11. Dojo Javascript Framework Toolkit, Take your Apps to the Next Level | tripwire magazine Says:
    […] Dojo Zoomer […]
  12. 70 Great, Useful AJAX And JavaScript Techniques « Social-Press Says:
    […] Dojo Zoomer A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here. […]
  13. WordPress Arena: A Blog for WordPress Developers, Designers and Bloggers Says:
    […] 11. Preview Images with imgPreview jQuery Plugin […]
  14. Useful Tooltips Tutorials and jQuery Plugins | Web SEO Rank Says:
    […] 11. Preview Images with imgPreview jQuery Plugin […]
  15. Useful Tool Tips Tutorials and jQuery Plugins | AlexVerse Says:
    […] 11. Preview Images with imgPreview jQuery Plugin […]
  16. 70个新鲜实用的JavaScript和Ajax技术【推荐】 Says:
    […] Dojo Zoomer […]
  17. 70个新鲜实用的JavaScript和Ajax技术 Says:
    […] Dojo Zoomer […]
  18. Geek is a Lift-Style. »Archive » 70 New, Useful AJAX And JavaScript Techniques Says:
    […] Dojo Zoomer A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here. […]