SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘dojox’ Category

Dojo’s mobile widgets coming along nicely

Posted by Shane O'Sullivan on June 22, 2010

I’ve been working a lot on Dojo’s new mobile framework (see HERE for my intro post on dojox.mobile.app) and the Image widgets are coming along very nicely.  I just checked in a new Thumbnail viewer, and enhanced the ImageView widget.  Check them both out at http://bit.ly/cU3akI.

Click the “Browse Flickr” selection to see both images integrated with Flickr, as well as a dynamic group search view using the TextInput and List widgets.  Given that these widgets use cool fancy HTML5 effects, you’re best off viewing them in a WebKit browser, so Safari, Chrome, webOS, iPhoneOS (iOS now I guess) will give you the best experience.

The ImageThumbView uses CSS3 transforms to position the thumbnail images, and animates the opacity with CSS3 to fade in/out images. 

Posted in Ajax, Dojo, dojox, Javascript, mobile, open source, Palm, Technical, WebOS | 4 Comments »

Dojo’s new Mobile App Project

Posted by Shane O'Sullivan on June 13, 2010

Dojo v1.5, which should be released in the coming weeks, will contain an early beta of a new infrastructure for building Mobile Apps.  Currently it is called dojox.mobile.app, but that is expected to change.  Check out the test apps (the bottom section) at http://www.skynet.ie/~sos/misc/dojoxMobile/tests/dojox/mobile/tests , which work best in WebKit, so use Safari or Chrome for best results.

Jared Jurkiewicz and Yoshiroh Kamiyama recently added the dojox.mobile project.  It provides some very nice widgets for use on mobile phones, such as views that can transition between each other, rounded lists, tab containers etc.

However, the focus of dojox.mobile is to be very small, so as to suit websites formatted for mobile devices.  When writing cross device apps that are hosted on a phone, the size of the JavaScript is less of a concern, so a much more powerful experience can be created.

Hence, dojox.mobile.app is born.

It is built on top of dojox.mobile, but adds many new features, with more on the way.

  • Templated views that can be pushed and popped off the stack of views, all of which are lazily loaded.
  • Templated lists
  • Input widgets
  • Image Gallery
  • Dialog Boxes
  • Popup Menus

are all available now.  The structure of a dojox.mobile.app application is modeled very closely to a webOS app.  The templates and code are in a similar folder structure, and the lifecycle for creating and destroying (popping) scenes/views are very similar.

The goal of dojox.mobile.app is NOT to replace or duplicate the functionality in PhoneGap.  PhoneGap provides low level access to many phone features. dojox.mobile.app aims to provide an easy to use, flexible application structure, and many widgets that you will find useful, all themed to appear native to each platform.  In a real world app, it would make most sense to use both PhoneGap and dojox.mobile.app.

One of the cooler widgets currently available is the ImageView widget, check it out at http://www.skynet.ie/~sos/misc/dojoxMobile/tests/dojox/mobile/tests/imageControlsApp .  Some of its features include

  • Canvas based
  • Touch capable
  • Swipe across to change images
  • Tap to zoom in, and then swipe to move around an image
  • Progressive loading of images – first load a small version of an image, and later a larger version

dojox.mobile.app is currently tested mostly on the iPhone, but will soon support webOS and Android also.  The mobile world is an exciting place to be right now, and Dojo is jumping in feet first ;-)

Posted in Ajax, demo, dojox, Flickr, Image Gallery, Javascript, mobile, open source, Palm, Technical, templating, WebOS | 8 Comments »

Cool Portlets added to Dojo!

Posted by Shane O'Sullivan on June 1, 2009

Last week I put the finishing touches my Portlets for the Dojo Ajax Toolkit.  You can see them now on the test page at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_PortletInGridContainer.html (it can take a while to load since it loads a hell of a lot of widgets and the code is not optimized with a build).

To see a description of what they can do, see my original post announcing them at http://shaneosullivan.wordpress.com/2009/03/11/cool-portlets-in-dojo

As a brief description, Portlets are widgets that represent individual applications used in a web portal.  They can be rearranged by dragging and dropping them around the page, and can often be customised with a number of settings.

The Dojo Portlets, in the dojox.widget project, support some useful features like:

  • Customisable settings widgets, for setting user defined options.
  • Loading Atom and RSS feeds to display as a list

and a good bit more.  See my previous post for a full description, or check out the test page.

Below you can see the Portlets using the blue Soria theme from Dojo.  There will probably be some small changes to the look and feel before v1.4 is released, but nothing major.  Note the different types of Portlets, from the Atom & RSS feed portlets on the left that can show more detail using tooltips or expandable secrions, to portlets containing generic widgets like a slideshow on the right.

Have fun!

Portlets

Posted in Ajax, Atom, dojo.data, dojo.image, dojox, dojox.image, Javascript, open source, tab | Tagged: | 16 Comments »

Cool Portlets in Dojo

Posted by Shane O'Sullivan on March 11, 2009

I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.

You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria

A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible.  However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area.  A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.

Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.

A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).

  • dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button.  All of these are optional.
  • dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list.  Hovering over an item shows a dijit.Tooltip with a summary of the news story.
  • dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.
  • dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.
  • dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.
  • dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.

These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs.  However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.

Posted in Ajax, Atom, Calendar, chart, charting, Date Picker, demo, dijit, Dojo, dojo.charting, dojo.data, dojox, open source, widget | 72 Comments »

dojox.gfx: Rotating in an elliptical line

Posted by Shane O'Sullivan on December 7, 2008

This post describes how to get a shape to rotate a central point following an elliptical path, using the Dojo Ajax Toolkits cross browser graphics engine, dojox.gfx. To see it in action, go to http://www.skynet.ie/~sos/misc/EllipseAnim.html

dojox.gfx is built in much the same way as SVG, with most of the same capabilities.  When it comes to moving shapes around a surface, it provides useful translations that move objects in straight lines, circles and more.

You can also combine different transformation matrices together to create more complex animations.  However, this is difficult in the extreme unless you have an really (and I mean REALLY) good grasp of matrix transformations and Cartesian coordinate manipulation.  Which I don’t.  And it is unlikely that you, the good reader, do either (if you do, I heartily apologise).

Anyhow, I had the requirement to rotate a small circle in an elliptical shape around a central point.  After much hacking, I gave in and asked Eugene, the dojox.gfx author, and one of the guys who DOES understand all this matrix stuff, and he solved it.

The trick is use two transformations simultaneously:

  • The first transformation rotates the shape around a point by 180 degrees.  This is not the central point of the ellipse.  For simplicitys sake, I start the animation with the shape at the leftmost point of the ellipse, level with the ellipse central Y point.  The point around which the shape should rotate has an X position equal to the central point of the shape plus the Y radius of the ellipse, and a Y point equal to the centre Y of the ellipse.
  • The second transformation moves the shape from left to right in a straight line.  This starts from the origin of the shape, and ends just short of the right hand median point of the ellipse.  The distance between the end of the lateral linear transformation and the rightmost point of the ellipse is twice the radius of the circle used for the rotation translation.  The reason for this is that the rotation transformation will, by the end of the linear transformation, have moved the shape twice the radius of the rotation circle in the X direction, so this must be subtracted from the lateral linear transformation.

The code I used for this is shown below.  Feel free to take it and play around.

<html>
<head>
<style type="text/css">
@import "../dojo/resources/dojo.css";
@import "../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js"
djConfig="isDebug: true"></script>

<script type="text/javascript">
dojo.require("dojox.gfx");
dojo.require("dojox.gfx.fx");
dojo.require("dojo.fx");
dojo.require("dojox.gfx.matrix");
dojo.require("dojo.fx.easing");

var circle, surface, cx = 50, cy = 200, rx = 40, ry = 20;
var ellipse;

dojo.addOnLoad(function(){

var domNode = dojo.byId("test");
// Create the surface, this contains all the graphics objects
surface = dojox.gfx.createSurface(domNode, 400, 400);

// Create the circle shape to be moved in a elliptical line
circle = surface.createEllipse({cx: 10, cy: cy, rx: 5, ry:5});
circle.setFill("blue");

// Create an elliptical line, just to show you the path it will take
ellipse = surface.createEllipse({cx: cx, cy: cy, rx: rx, ry: ry});
ellipse.setStroke("black");
});
// Define a function to create an animation.
//'isLTR' means 'Is Left To Right'

function getAnim(isLTR) {

var g = dojox.gfx, m = g.matrix;
var startAngle = isLTR ? 0 : 180;
var endAngle = isLTR ? 180: 360;
var startX = isLTR ? 0 : rx;
var endX = isLTR ? rx: 0;

return g.fx.animateTransform({
shape: circle,
duration: 1000,
transform: [
// The first transform just moves the shape either from
// left to right, or right to left

{name: "translate",
start: [startX, 0], end: [endX, 0]},
// The second transform rotates the shape in a circular
// path

{ name: "rotateAt",
start: [m._degToRad(startAngle), cx - ry, cy],
end: [m._degToRad(endAngle), cx - ry, cy]}
],
onEnd: function(){
// When the animation to make the circle go
// half way around the ellipse finishes,
// start it again in the opposite direction

getAnim(!isLTR).play();
},
easing: dojo.fx.easing.linear
});
}

function animate() {
var anim1 = getAnim(true);
anim1.play();
}

</script>
</head>
<body>
<button onclick="animate()">Animate!</button><br/>
<div id="test" style="border:1px solid black;margin-top:10px;"></div>

</body>
</html>

Posted in Ajax, Dojo, dojox, dojox.gfx, Javascript, open source, svg, Technical | 2 Comments »

Musings on Browser based graphics with dojox.gfx

Posted by Shane O'Sullivan on November 24, 2008

I’m messing around with dojox.gfx at the moment, the Dojo Ajax Toolkit‘s very cool but difficult to use cross browser graphics package. I’m finding out, slowly, its little quirks, annoyances and more.  As I do I will be posting short blog posts so as to both document them for my own sake, and for the enlightenment of you, the good reader.

FYI: The official docs are here – http://docs.dojocampus.org/dojox/gfx

#1 – Adding mouseenter and mouseleave events

When drawing a shape, if it does not have a fill color it is considered to be one dimensional, that is, just a line.  Therefore if you want know when the mouse enters and leaves the shape using code such as:
shape.connect("mouseenter", function() { console.log("entry");});
shape.connect("mouseleave", function() { console.log("exit");});

moving the mouse into the shape (e.g. a rectangle or circle) will fire both event almost simultaneously.  To prevent this, you have to set a fill on the object, using the setFill function, and it will then be treated a two dimensional and the mouse events will work as you would expect with HTML DOM elements.

#2 – Which shape is in front of which is decided by the order they are added to the graphics surface

Graphics work differently to HTML and do not have a z-index property to determine which is displayed in front of which.  However a simple function is available on each shape that will bring it to the front, called strangely enough, moveToFront(), e.g.
var surface = dojox.gfx.createSurface(someDomNode, 100, 100);
var text = surface.createText({x: 10, y: 20, text:"Hello World!!"});
var rect = surface.createRect({x: 1, y: 1, width: 50, height: 50});
rect.setFill("white");
// At this point the text is not visible as the rectangle is in front of it.
text.moveToFront();
// The text is now in front of the rectangle and looks to be surrounded by it

#3 – A mouseenter event on one element causes a mouseleave on the previous element

In the previous example, we had a rectangle surrounding some text.  If we wanted to do something to the rectangle when the mouse entered it, and when it left, such as change the fill color,  the text would mess this up.  This is because when the mouse moves over the text, a mouseleave event would fire for the rectangle, even though the mouse is still inside it.  To fix this, I used a simple delay on executing the code for the mouseleave event, and cancelled it if the mouse entered the text e.g.
var timer;
rect.connect("mouseenter", function(){rect.setFill('blue');});
rect.connect("mouseleave", function() {
timer = setTimeout(function(){rect.setFill('white');}, 50)
});
text.connect("mouseenter", function(){
if (timer) {
clearTimeout(timer);
timer = null;
}
});

Posted in Ajax, Dojo, dojox, dojox.gfx, svg, Technical, vml | 2 Comments »

Quick Django Tip – Modulus

Posted by Shane O'Sullivan on September 27, 2008

I was fiddling around with Dojo‘s Django Templating language (amazingly cool bit of tech of course), and got a bit stuck trying to do something very simple: modulus

All I wanted to do was stripe a list of elements by applying a different class based on whether a row was odd or even. It turns out the reason the answer didn’t really pop up in searches was because, in Django land, it is called divisibleby

So, if you are using a for loop in Django, to check if
(current loop index % 2) == 0
you can use
{{forloop.counter0|divisibleby:2}}

which returns either true or false.

Posted in django, dojox, Javascript, Technical, templating | 9 Comments »

Dojo’s DTL performance gains with HtmlTemplate

Posted by Shane O'Sullivan on August 25, 2008

I’ve recently discovered (and greatly appreciated) the performance gain to be found with switching to using Dojo‘s Django Templating Language’s HtmlTemplate class.

I was previously using the standard dojox.dtl.Template class, which writes textual HTML, and sets the innerHTML property of a node.  While this worked relatively well on Firefox and Safari, on IE 6 and 7, it performed like a snail, mostly due to IE’s terrible DOM performance.

Neil Roberts has written a DOM-based template generator for Dojo 1.2 (currently in the nightlies) that solves this nicely.  Instead of writing to the innerHTML of a DOM node, and overwriting the template each time, it generates the nodes just once, and reuses them each time.

For repeated operations, the speed up is amazing – I found that it generated large templates up to four times faster in Internet Explorer, with smaller gains in more up to date browsers like FireFox and Safari.

It also greatly reduces the chances of memory leaks – which are a real problem if you are dealing with innerHTML.

I’ve updated my search site, Chofter.com, with Neil’s latest code, and it’s running much quicker than before.  Neil has also updated his blog, someclosure.com, with the latest code.

Hopefully with the release of Dojo 1.2 (any day now….), Neil should have a good amound of docs and demos to show people how to get the most out of dojox.dtl – it really is a fantastic piece of software.

Posted in Ajax, django, Dojo, dojox, Javascript, open source, templating | Leave a Comment »

Chofter.com – A Next-Gen Search Portal is launched

Posted by Shane O'Sullivan on August 4, 2008

For quite a while, I had been working with various REST services, e.g. Flickr, the Google search services and more, as part of my contributions to the Dojo Ajax Toolkit, when it occurred to me that no one had done a good job of bringing all these various sources of information together in a usable way.

Cut to four months later, and I have launched my new search portal, Chofter.com.

To add it to the search bar in your browser, click here.

Immodest as it may sound, Chofter.com provides a better search experience than Google, Yahoo or Microsoft Live, because it incorporates search results from all of them, and much more.

The entire application is written using the Dojo toolkit, utilising

  • Layouts, Dialogs, Menus and ContentPanes for the user interface.
  • dojo.data and dojo.rpc for data transfer.
  • dojox.dtl (Django Templating Library) for transforming search data into visuals.
  • dojo.fx and FisheyeLite for eye candy
  • …. and a chunk of custom code.

As of writing, the following search sources are available, arranged into a number of categories:

  • Google – web, news, image, blog, video and book search.
  • Yahoo – web, news and image search.
  • Microsoft Live – web and news search.
  • YouTube – video search.
  • Flickr – image search.
  • BBC News – news and sports search.
  • Digg – web, news and video search.
  • Amazon.com – book search.
  • Wikipedia – web search.
  • IMDB – video search.
  • Technorati – blog search.
  • DZone – technical search.

I will be adding more as time goes on.  A forum is being set up, and I welcome all feedback on the site.  I’ve also set up a blog for the site at http://www.chofter.com/blog.

Posted in chofter, dijit, Dojo, dojo.data, dojox, dojox.data, Javascript, json, search, Technical | 4 Comments »

New Demos for Dojo & Google search engine online

Posted by Shane O'Sullivan on May 13, 2008

I’ve previously written about the data stores I committed to the Dojo Ajax Toolkit that enable you to search Google’s services for all sorts of things – books, news, blogs, images and everything else.

Now I’ve put some demos up on DojoCampus that show off a few of the stores.  Check them out at http://dojocampus.org/explorer/#Dojo_Data_GoogleSearchStore , especially the Google Images one – it’s shiny :-)

Posted in Ajax, demo, Demo Engine, dijit, Dojo, dojo.data, dojox, open source, Technical | 2 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: