Remove trunk directory
This commit is contained in:
Paulo Gustavo Veiga
270
web2d/src/test/javascript/render/events.html
Executable file
270
web2d/src/test/javascript/render/events.html
Executable file
@@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<script type="text/javascript" src="web2dLibraryLoader.js"></script>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<style type="text/css">
|
||||
.eventForm {
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function EventLogger(type, element)
|
||||
{
|
||||
this._enable = false;
|
||||
this._element = element;
|
||||
this._type = type;
|
||||
this._listener = function logger(event)
|
||||
{
|
||||
var oldColor = this.getAttribute('fillColor');
|
||||
this.setFill("yellow");
|
||||
alert("Event on:" + this.getType() + ", Type:" + type);
|
||||
this.setFill(oldColor);
|
||||
};
|
||||
}
|
||||
|
||||
EventLogger.prototype.changeState = function()
|
||||
{
|
||||
this._enable = !this._enable;
|
||||
if (this._enable)
|
||||
{
|
||||
this._element.addEventListener(this._type, this._listener);
|
||||
} else
|
||||
{
|
||||
this._element.removeEventListener(this._type, this._listener);
|
||||
}
|
||||
return this._enable;
|
||||
};
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Logger.setEnabled(true);
|
||||
</script>
|
||||
|
||||
<h1>Elements Event Handling</h1>
|
||||
|
||||
<table border="1">
|
||||
<colgroup style="width:80%;">
|
||||
<col style="width:30%"/>
|
||||
<col style="width:60%"/>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
This examples shows the ability to attach listeners to handle several events.
|
||||
In this example, you can attach different events to three elements: workspace, small elipse and the big elipse.
|
||||
Events will follow the event bubbling behaviour.
|
||||
</td>
|
||||
<td>
|
||||
<div id="workspaceContainer" style="float:left;"></div>
|
||||
|
||||
<div class="eventForm">
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>Workspace Events</legend>
|
||||
<label>Click Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!wClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Double Click Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!wDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Over Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!wMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Out Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!wMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Move Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!wMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>Small Elipse Events</legend>
|
||||
<label>Click Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!esClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Double Click Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!esDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Over Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!esMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Out Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!esMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Move Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!esMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>Big Elipse Events</legend>
|
||||
<label>Click Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!ebClickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Double Click Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!ebDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Over Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!ebMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Out Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!ebMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label><br/>
|
||||
<label>Mouse Move Event:
|
||||
<input type="button" value="Register"
|
||||
onclick="(!ebMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'"/>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
web2d.peer.Toolkit.init();
|
||||
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
var workspace = new web2d.Workspace();
|
||||
workspace.setSize("150px", "150px");
|
||||
workspace.setCoordSize(150, 150);
|
||||
|
||||
var bigElipse = new web2d.Elipse();
|
||||
bigElipse.setSize(100, 100);
|
||||
bigElipse.setPosition(75, 75);
|
||||
workspace.appendChild(bigElipse);
|
||||
|
||||
var smallElipse = new web2d.Elipse();
|
||||
smallElipse.setSize(50, 50);
|
||||
smallElipse.setPosition(75, 75);
|
||||
smallElipse.setFill('red')
|
||||
workspace.appendChild(smallElipse);
|
||||
|
||||
wClickEventLogger = new EventLogger('click', workspace);
|
||||
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
|
||||
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
|
||||
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
|
||||
wDblCickEventLogger = new EventLogger('dblclick', workspace);
|
||||
|
||||
esClickEventLogger = new EventLogger('click', smallElipse);
|
||||
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
|
||||
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
|
||||
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
|
||||
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
|
||||
|
||||
ebClickEventLogger = new EventLogger('click', bigElipse);
|
||||
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
|
||||
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
|
||||
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
|
||||
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
|
||||
|
||||
workspace.addItAsChildTo($("workspaceContainer"));
|
||||
|
||||
</script>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Multiple listeners can be attached to an element to handle an event type.
|
||||
In this example, multiple listeners can be registered to the elipse element to handle the click event type.
|
||||
</td>
|
||||
<td>
|
||||
<div id="workspaceMultipleEvents" style="float:left;"></div>
|
||||
|
||||
<div class="eventForm">
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>Elipse Click Events Listeners</legend>
|
||||
<label>Registered Listeners #:
|
||||
<input type="text" disabled="disabled" value="0" id="listenerCounter" maxlength="2" size="2"/>
|
||||
</label>
|
||||
<br/>
|
||||
<input type="button" value="Register Listener"
|
||||
onclick="multipleHandler.registerOneListener();$('listenerCounter').value=multipleHandler.listenerCount();"/>
|
||||
<input type="button" value="UnRegister Listener"
|
||||
onclick="multipleHandler.unRegisterOneListener();$('listenerCounter').value=multipleHandler.listenerCount();"/>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function MultipleEventHandler(type, element)
|
||||
{
|
||||
this._listeners = [];
|
||||
this._type = type;
|
||||
this._element = element;
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.registerOneListener = function()
|
||||
{
|
||||
var count = this._listeners.length;
|
||||
var listener = function(event) {
|
||||
alert("Listener #:" + count);
|
||||
};
|
||||
this._listeners.push(listener);
|
||||
this._element.addEventListener(this._type, listener);
|
||||
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.listenerCount = function()
|
||||
{
|
||||
return this._listeners.length;
|
||||
}
|
||||
|
||||
MultipleEventHandler.prototype.unRegisterOneListener = function()
|
||||
{
|
||||
if (this._listeners.length > 0)
|
||||
{
|
||||
var listener = this._listeners.pop();
|
||||
this._element.removeEventListener(this._type, listener);
|
||||
}
|
||||
}
|
||||
|
||||
var mEventWorkspace = new web2d.Workspace();
|
||||
mEventWorkspace.setSize("150px", "150px");
|
||||
mEventWorkspace.setCoordSize(150, 150);
|
||||
|
||||
var elipse = new web2d.Elipse();
|
||||
elipse.setSize(100, 100);
|
||||
elipse.setPosition(75, 75);
|
||||
elipse.setFill('blue')
|
||||
mEventWorkspace.appendChild(elipse);
|
||||
|
||||
mEventWorkspace.addItAsChildTo($("workspaceMultipleEvents"));
|
||||
multipleHandler = new MultipleEventHandler('click', elipse);
|
||||
|
||||
</script>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user