I'm successfully using dojo.gfx (surface) to draw an interactive part of my page. Now, I'd like to add some functionality, which is already provided in the form of dijit.form elements or some dojox controls (e.g. dojox.gauges).
The controls should be used for both input and output (buttons, sliders, checkboxes, gauges,...), so it seems to be a good idea to combine home-made graphics (dojo.gfx) with pre-built controls (dijit or dojox).
Is there an example on how to do this? One thing I'm aware of is that z-order could be an interesting issue (shapes drawn on a surface vs. dijit or dojox controls).
Solution
Just had some real problems getting things to work, but in the end the solution was obvious:
- created a <div> with fixed size (the same as the surface), otherwise scrolling would not work correctly
- added the controls to the parent of the <div&tg; where the surface is created
- Z-ordering is a bit of a problem as the whole surface is either in front or behind a control, so it is not possible to have parts of the drawing in front and other parts behind of a control