[
Lists Home |
Date Index |
Thread Index
]
The following might help. The VML is a DOM-capable object in
the tree, uses a behavior spec and just slides into the HTML.
I hope this helps.
This is the script and shape to set a zoom pretty much as the
MS docs show it:
<script language="JavaScript">
<!--
function Zoom()
{
x = document.all.line.getAttribute("coordsize");
if (x == "300,300") x = "600,600";
else x = "300,300";
document.all.line.setAttribute("coordsize",x,"false");
}
//-->
</script>
<v:shape id="line" onClick="Zoom()" style="height:10cm;width:10cm"
coordsize="600,600" coordorigin="0 0" strokeweight="3pt"> <v:path
v="m25 129 l25 186 104 265 554 265 554 92 386 92 386 58"/>
In the following examples, the VML graphic is used as the event source to
call a Javascript function for creating popups. In the first example, a VML
graphic is used to display a popup with information documenting the element
itself , by left clicking on the graphic. In the second, a right click on
the same element opens a dropdown menu. This is the source for the VML
element.
<v:group id="attributeADDMODULE" style="position:relative; left:430pt;
top:1479pt; width:35pt; height:25pt;" >
<v:oval id="NMMAIN.ADDMODULEclick" onClick="doPopup();"
oncontextmenu="richDropDown();" style='width:80pt;height:25pt'
fillcolor="red" strokecolor="black" strokeweight="1pt">
<v:textbox style="position:relative; ">
<div class='attClass'><strong><center>ADDMODULE</center></strong></div>
</v:textbox></v:oval>
<v:shape style="position:relative; left:0pt; top:22pt; width: 80pt;
height: 45pt">
<v:textbox style="position:relative;">
<div class='roleClass'><center><strong>Module Adding
Entry</strong></center></div>
</v:textbox>
</v:shape>
</v:group>
Note in the example, the following attributes on the Oval element:
o id="NMMAIN.ADDMODULEclick": The unique identifier for this element. This
is used in the Javascript to determine which graphic element is the source
of the mouse events (left and right click).
o onClick="doPopup();": This is the Javascript function called when a left
click occurs on the graphic element.
oncontextmenu="richDropDown();": This is the Javascript function called when
a right click occurs on the graphic element.
The Javascript for these two events use a similar means to trap events: the
event.srcElement DOM function. The content is implemented using two
different techniques. The first script is for the left mouse click (onClick)
function.
NOTE: When using the technique that follows, pay particular attention to
ensuring that line breaks don't occur in the Javascript variable assignments
and that quotes are properly nested. If, for example, you are implementing
this out of a code generator source such as a document database, be sure to
include code that scrubs the data to make entity substitutions for
characters such as end-of-line, apostrophes, etc. For very long strings, it
can be better to use the + concatenation operator prior to assigning the
literal to the popup variable. Spooky things can happen so your mileage may
vary.
<SCRIPT LANGUAGE="JavaScript">
var oPopup = window.createPopup();
function doPopup()
{
switch (event.srcElement.id) {
case 'NMMAIN.ADDMODULEclick' :
oPopup.document.body.innerHTML = '<h4><font color="blue">Module Adding
Entry</font></h4><p><strong>Fieldname:</strong> ADDMODULE<br
/><strong>Version:</strong> V5.6 <br /><strong>Datatype:</strong>
Character<br /><strong>Foxpro:</strong> C(8)<br /><strong>Oracle:</strong>
CHAR(8)<br /><strong>SQL Server:</strong> CHAR(8)<br/><strong>NULL:
</strong>Cannot Be Null</p><p><strong>DESCRIPTION:</strong> Indicates the
name of the module for which this name entry was created</p>';
break;
... case statements for other graphics in the diagram
}
var popupBody = oPopup.document.body; // declare the popup
popupBody.style.overflow = 'auto'; // set the popup to display
scrollbar as needed
popupBody.style.backgroundColor = "lightyellow";
popupBody.style.border = "solid black 1px";
popupBody.style.fontFamily = "Arial";
popupBody.style.fontSize = "12px";
popupBody.style.margin = "1em";
oPopup.show(0, 15, 175, 200 , event.srcElement); //show popup when
srcElement sends id
}
In the example above, the element id (NMMAIN.ADDMODULEclick) is passed to a
switch statement. When the matching case is encountered, the HTML within the
quotation marks is passed to the browser popup object for display as shown
above. Note that additional DOM calls are used to set the properties of the
popup.
In the next example, the popup uses the IE DOM innerHTML extension and gets
content from the element id named in the API call, oContentHTML. In this
case, an inline group of DIV elements is used to create a dropdown menu
whenever the user right clicks over the element. Note that the style
properties of the DIV element are used to style the popup and ensure that it
is positioned relative to element that is clicked.
<SCRIPT LANGUAGE="JScript">
var o2Popup = window.createPopup();
function richDropDown()
{
o2Popup.document.body.innerHTML = oContextHTML.innerHTML;
o2Popup.show(0, 28, 305, 200, event.srcElement);
}
</SCRIPT>
<!-- Popup navigation content -->
<DIV ID="oContextHTML" STYLE="display:none;">
<DIV style="position:relative; top:0; left:0; overflow:scroll;
overflow-x:hidden; width:300; height:200; scrollbar-base-color:#3366CC;
border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF;
SCROLLBAR-ARROW-COLOR: white;" >
<DIV
onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(G
radientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="position:relative; font-family:verdana; font-size:70%;
height:25px; background:#e4e4e4; border:1px solid black; padding:3px;
padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="top.location.href='schemaLegend.htm'">Schema
Legend</SPAN>
</DIV>
<DIV
onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(G
radientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="position:relative; font-family:verdana; font-size:70%;
height:25px; background:#e4e4e4; border:1px solid black; padding:3px;
padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="top.location.href='legal.htm'">Legal</SPAN>
</DIV>
<DIV
onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(G
radientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="position:relative; font-family:verdana; font-size:70%;
height:25px; background:#e4e4e4; border:1px solid black; padding:3px;
padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="top.location.href='V5.8TASUPPerd.htm#TASUPP'">
Accident Supplements (TASUPP)</SPAN>
</DIV>
.... more DIVs for each option in the dropdown
len
-----Original Message-----
From: Thomas Tappe [mailto:ttappe@ads.sita.aero]
Sent: Thursday, January 06, 2005 12:45 PM
To: xml-dev@lists.xml.org
Subject: [xml-dev] Example of button attribute of Shape element.
Can anyone provide an example of a .vml Shape element with a button
attribute that shows how to reference the button state?
This is probably an elementary question for experienced xml / vml
developers, but I'm really stuck. The only documentation I can find on
this is in the MSDN Library Reference for VML which does not show how to
reference the button state.
Any help would be appreciated.
Thanks, Tom
-----------------------------------------------------------------
The xml-dev list is sponsored by XML.org <http://www.xml.org>, an
initiative of OASIS <http://www.oasis-open.org>
The list archives are at http://lists.xml.org/archives/xml-dev/
To subscribe or unsubscribe from this list use the subscription
manager: <http://www.oasis-open.org/mlmanage/index.php>
|
