FAQ - Frequently asked questions: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
* ''The documentation suggests using either JQuery.js or prototype.js, but the AJAX example appears to require prototype.js.  By, what reasons would one choose JQuery over prototype, or vice versa.''
====* What is the event model of JSXGraph?====
 
The choice completely depends on you. JSXGraph works with both packages equally good.  If you want to use JavaScript features like AJAX
choose the package you're most familiar with.
 
* ''What is the event model of JSXGraph?''
 
 


The event model of JSXGraph is the following:
The event model of JSXGraph is the following:
- An onmousemove event in the HTML element containing the JSXGraph construction and  
An ''onmousemove'' event in the HTML element containing the JSXGraph construction and  
- an onmousup event of the whole HTML document  
an ''onmouseup'' event of the whole HTML document  
trigger the method JXG.Board.update() .
trigger the method ''JXG.Board.update()''.


JXG.Board.update() calls the update() method of each element (points, lines, texts, ...) of the board.
''JXG.Board.update()'' calls the update() method of each element (points, lines, texts, ...) of the board.


Thus, by dragging a point, onmousemove of the HTML element containing
Thus, by dragging a point, onmousemove of the HTML element containing
Line 19: Line 12:
which calls all update() methods of each element.
which calls all update() methods of each element.


The update() method of each element computes the new position of the element
The ''update()'' method of each element computes the new position of the element
and its layout (strokeColor, strokeWidth).  This update() method can use  
and its layout (''strokeColor, strokeWidth'').  This update() method can use  
the position of other elements, see the Lissajous example.
the position of other elements, see the [[Lissajous curves]] example. So, for example you can handover functions to a geometric element which determine the X-coordinate and the Y-coordinate during an update() call, respectively. The same is possible for strokeWidth and strokeColor, see [[Highlight curve via slider]].
The Hilbert example is somewhat more complicated:
 
It overwrites the (previously empty) method updateDataArray() of a curve of curevType "plot".
The [[Hilbert curve]] is somewhat more complicated:
It overwrites the (previously empty) method ''updateDataArray()'' of a curve of curveType "plot".
In that method the new data points are computed depending on one slider.
In that method the new data points are computed depending on one slider.
Then, with
Then, with
Line 29: Line 23:
             this.dataY = ...;
             this.dataY = ...;
they are handed to the curve tight before they are plotted.
they are handed to the curve tight before they are plotted.


Other special cases:
Other special cases:
- In order to speed up things the update() of (all) elements can be  
- In order to speed up things the update() of (all) elements can be  
prevented by calling
prevented by calling
board.suspendUpdate();
''board.suspendUpdate();''
until the call of
until the call of
board.unsuspendUpdate();
''board.unsuspendUpdate();''


- JSXGraph updates ALL JXG.Boards in an HTML document. So
- JSXGraph updates ALL JXG.Boards in an HTML document. So
elements of one board can depend from elements in another board.  
elements of one board can depend from elements in another board.  
See http://jsxgraph.uni-bayreuth.de/wiki/index.php/Sine_and_cosine
See the [[sine and cosine]] example.

Latest revision as of 14:29, 29 October 2009

* What is the event model of JSXGraph?

The event model of JSXGraph is the following: An onmousemove event in the HTML element containing the JSXGraph construction and an onmouseup event of the whole HTML document trigger the method JXG.Board.update().

JXG.Board.update() calls the update() method of each element (points, lines, texts, ...) of the board.

Thus, by dragging a point, onmousemove of the HTML element containing the construction is triggered. This triggers the call of JXG.Board.update(), which calls all update() methods of each element.

The update() method of each element computes the new position of the element and its layout (strokeColor, strokeWidth). This update() method can use the position of other elements, see the Lissajous curves example. So, for example you can handover functions to a geometric element which determine the X-coordinate and the Y-coordinate during an update() call, respectively. The same is possible for strokeWidth and strokeColor, see Highlight curve via slider.

The Hilbert curve is somewhat more complicated: It overwrites the (previously empty) method updateDataArray() of a curve of curveType "plot". In that method the new data points are computed depending on one slider. Then, with 

           this.dataX = ...;
           this.dataY = ...;

they are handed to the curve tight before they are plotted.

Other special cases: - In order to speed up things the update() of (all) elements can be prevented by calling board.suspendUpdate(); until the call of board.unsuspendUpdate();

- JSXGraph updates ALL JXG.Boards in an HTML document. So elements of one board can depend from elements in another board. See the sine and cosine example.

Retrieved from "http://jsxgraph.org/wiki/index.php?title=FAQ_-_Frequently_asked_questions&oldid=3177"