in 37 minutes<br />Episode 22<br />Viewing the unviewable: Displaying additional image types in XMetaL Using the InPlaceCo...
XMetaL can display images in several common graphics formats (full list in Help)<br />For non-supported formats, XMetaL ca...
CTM file <OCXReplacement><br />Associates an ActiveX viewer control with an element<br />Event macros<br />_OnShouldCreate...
Have an XML element solely dedicated to the special image type: <Visio_Image><br />Always use viewer control to display th...
<OCXReplacement><br /><OCXReplacements> is an optional main element in the CTM file – like <ElementPropertiesList>, <Templ...
_OnInitialize macro<br />This macro is executed for each <Visio_Image> element in the document.<br />ActiveInPlaceControl ...
Use the same image element for built-in and a special image format<br />Use viewer control for special image type<br /><Du...
Same stuff from before<br /><OCXReplacement> in the CTM – different element name, different macro prefix<br />...<br /><OC...
<Image><br />Handles the fall-back case of built-in image formats. <Dual_Purpose_Image> is designated as an image element ...
_OnShouldCreate<br />Use business logic to determine whether XMetaL should be displaying this element in the viewer contro...
Using _OnFocus event to manipulate the viewer control<br />Our Visio viewer has APIs for turning on/off various features o...
_OnFocus<br />This macro is executed both on focus and on blur – when the user clicks in or out of the viewer control.<br ...
Using _OnSynchronize event to update the document and/or the control<br />Useful when you need to update data in the viewe...
_OnSynchronize<br />Macro is executed whenever the document changes and whenever focus leaves the viewer control.<br />Upd...
If your viewer control API includes events, you can write script in XMetaL to handle the events<br />If your viewer has an...
If you require more than one viewer control, and if all the image types use the same <Image> element, some additional scri...
XMetaL DITA customization uses this technique – recursively! – to display SVG graphics<br />XMetaL’s viewer control is Int...
XMetaL Community Forums<br />http://forums.xmetal.com/<br />JustSystems Partner Center<br />http://justpartnercenter.com/<...
Thank you for attending!<br />Q&A<br />
Upcoming SlideShare
Loading in …5
×

Displaying additional image types in XMetaL

1,607 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,607
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Displaying additional image types in XMetaL

  1. 1. in 37 minutes<br />Episode 22<br />Viewing the unviewable: Displaying additional image types in XMetaL Using the InPlaceControl interface to add custom viewer controls<br />Tom Magliery, XML Technology Specialist<br />12 May 2011<br />Brought to you by XMetaL Technical Services<br />
  2. 2. XMetaL can display images in several common graphics formats (full list in Help)<br />For non-supported formats, XMetaL can use an ActiveX viewer control to display the images<br />You have to supply the viewer<br />You have to do some script customization<br />Purpose of today: show you how to do the script customization<br />Introduction<br />
  3. 3. CTM file <OCXReplacement><br />Associates an ActiveX viewer control with an element<br />Event macros<br />_OnShouldCreate, _OnInitialize, _OnFocus, _OnSynchronize<br />InPlaceControl interface<br />Application.ActiveInPlaceControl gives access to the viewer control during these events<br />Keys to this customization<br />
  4. 4. Have an XML element solely dedicated to the special image type: <Visio_Image><br />Always use viewer control to display this element<br />Need two bits of code:<br /><OCXReplacement> in CTM file<br />_OnInitialize macro<br />Example 1<br />
  5. 5. <OCXReplacement><br /><OCXReplacements> is an optional main element in the CTM file – like <ElementPropertiesList>, <Templates>, etc.<br />Name of your image element<br />Prefix to be used with event macros (can be whatever you want provided the resulting macro name is valid)<br />...<br /><OCXReplacements><br /> <OCXReplacement><br /> <SelectorName>Visio_Image</SelectorName><br /> <MacroPrefix>VisioViewer</MacroPrefix><br /> <ProgID>VisioViewer.Viewer</ProgID><br /> </OCXReplacement><br /></OCXReplacements><br />...<br />ProgID of your ActiveX viewer control<br />
  6. 6. _OnInitialize macro<br />This macro is executed for each <Visio_Image> element in the document.<br />ActiveInPlaceControl object exists for the duration of this macro.<br />Name prefix matches what was in the CTM file.<br />Sets the size for the control.<br /><MACRO name="VisioViewer_OnInitialize" hide="true" <br />lang="JScript"><![CDATA[ <br />varaipc = Application.ActiveInPlaceControl;<br />aipc.Width = 500; <br />aipc.Height = 300;<br />var filename = aipc.Node.getAttribute("href");<br />aipc.Control.SRC = filename;<br />]]></MACRO><br />Node is the element being displayed with this control.<br />Control property gives you access to the IDispatch interface of the viewer control. SRC is a property of the Visio Viewer control.<br />Can also perform other initializations here using the control’s interface, via aipc.Control.*.<br />
  7. 7. Use the same image element for built-in and a special image format<br />Use viewer control for special image type<br /><Dual_Purpose_Imagehref=“myVisioDiagram.vsd”/><br />Fall back to default XMetaL behavior otherwise<br /><Dual_Purpose_Imagehref=“myJPG.jpg”/><br />Need same code bits as before, plus:<br /><Image> in CTM file<br />_OnShouldCreate macro<br />Example 2<br />
  8. 8. Same stuff from before<br /><OCXReplacement> in the CTM – different element name, different macro prefix<br />...<br /><OCXReplacements><br /> <OCXReplacement><br /> <SelectorName>Dual_Purpose_Image</SelectorName><br /> <MacroPrefix>VV2</MacroPrefix><br /> <ProgID>VisioViewer.Viewer</ProgID><br /> </OCXReplacement><br /></OCXReplacements><br />...<br />_OnInitialize macro does the same thing as before – it’s using the same viewer control<br /><MACRO name="VV2_OnInitialize" hide="true" <br />lang="JScript"><![CDATA[ <br />varaipc = Application.ActiveInPlaceControl;<br />aipc.Width = 500; <br />aipc.Height = 300;<br />var filename = aipc.Node.getAttribute("href");<br />aipc.Control.SRC = filename;<br />]]></MACRO><br />
  9. 9. <Image><br />Handles the fall-back case of built-in image formats. <Dual_Purpose_Image> is designated as an image element in the CTM.<br />...<br /><Image><br /> <Name>Dual_Purpose_Image</Name><br /> <Source-Attribute>href</Source-Attribute><br /> <Height-Attribute>height</Height-Attribute><br /> <Width-Attribute>width</Width-Attribute><br /> <AltText-Attribute>alt</AltText-Attribute><br /></Image><br />...<br />
  10. 10. _OnShouldCreate<br />Use business logic to determine whether XMetaL should be displaying this element in the viewer control in this instance; store the outcome in the ShouldCreate property.<br />Get the href attribute from the element to which this control is (tentatively) attached<br /><MACRO name="VV2_OnShouldCreate" hide="true" <br />lang="JScript"><![CDATA[<br />varaipc = Application.ActiveInPlaceControl;<br />varhref = aipc.Node.getAttribute("href");<br />vari = href.lastIndexOf(".vsd");<br /> if (i != -1) {<br />aipc.ShouldCreate = true;<br /> } else {<br />aipc.ShouldCreate = false;<br /> }<br />]]></MACRO> <br />Look at the file extension to see if this is a Visio file<br />Set the ShouldCreate property accordingly<br />
  11. 11. Using _OnFocus event to manipulate the viewer control<br />Our Visio viewer has APIs for turning on/off various features of the control<br />Suppose we want toolbar, scrollbars, etc. only when the control has focus<br />Example 3<br />
  12. 12. _OnFocus<br />This macro is executed both on focus and on blur – when the user clicks in or out of the viewer control.<br />UserMovedIntoControl property is true on “focus” and false on “blur”<br /><MACRO name="VisioViewer_OnFocus" hide="true" lang="JScript"><![CDATA[<br />varaipc = Application.ActiveInPlaceControl;<br />aipc.Control.AlertsEnabled = aipc.UserMovedIntoControl;<br />aipc.Control.ScrollbarsVisible = aipc.UserMovedIntoControl;<br />aipc.Control.ToolbarVisible = aipc.UserMovedIntoControl;<br />aipc.Control.PageVisible = aipc.UserMovedIntoControl;<br />]]></MACRO><br />
  13. 13. Using _OnSynchronize event to update the document and/or the control<br />Useful when you need to update data in the viewer control because of changes in the document – or vice versa<br />Bizarre hypothetical example: Suppose we have an element in our document that we wish to reflect the current “zoom” level of the Visio control<br />Example 4<br />
  14. 14. _OnSynchronize<br />Macro is executed whenever the document changes and whenever focus leaves the viewer control.<br />UpdateFromDocument=true if the control may need updating because the document state has changed; false if it’s the other way around.<br />This is our bizarre “zoom” data element<br /><MACRO name="VisioViewer_OnSynchronize" hide="true" lang="JScript"><![CDATA[<br />varaipc = Application.ActiveInPlaceControl;<br />varndlist = aipc.Document.GetElementsByTagName("Author");<br /> if (!aipc.UpdateFromDocument) {<br />var zoom = aipc.Control.Zoom;<br />ndlist.item(0).firstChild.nodeValue = zoom;<br /> } else {<br />var value = ndlist.item(0).firstChild.nodeValue;<br />aipc.Control.Zoom = value;<br /> }<br />]]></MACRO><br />Set document data based on the control<br />Set control data based on the document<br />
  15. 15. If your viewer control API includes events, you can write script in XMetaL to handle the events<br />If your viewer has an event called “SomeEvent”, you can write a macro like this:<br />When the viewer fires the event, XMetaL will execute this macro<br />ActiveInPlaceControl.NextEventParam property allows you to access the arguments of the event<br />Unfortunately no example to show today :-(<br />(Non)-example:Events in the viewer control<br /><MACRO name="VisioViewer_SomeEvent" hide="true" lang="JScript"><![CDATA[<br /> // In here you do whatever you need to handle this event<br />]]></MACRO><br />
  16. 16. If you require more than one viewer control, and if all the image types use the same <Image> element, some additional scripting is required<br />CTM file can only have one <OCXReplacement> for each DTD element<br />But you can define additional OCXReplacements dynamically in script<br />Relevant APIs:<br />DOMDocumentType.addInPlaceControl()<br />InPlaceControl.userData<br />A little too much for an example here today!<br />(Non)-example:More than one custom viewer<br />
  17. 17. XMetaL DITA customization uses this technique – recursively! – to display SVG graphics<br />XMetaL’s viewer control is Internet Explorer<br />IE (through 8) does not natively support SVG either – requires you to install a plugin<br />So XMetaL hands the image over to IE, which in turn hands it over to your SVG plugin<br />SVG in DITA in XMetaL<br />
  18. 18. XMetaL Community Forums<br />http://forums.xmetal.com/<br />JustSystems Partner Center<br />http://justpartnercenter.com/<br />Ask us for help (partner tech support)<br />partnersupport-na@justsystems.com<br />Resources<br />
  19. 19. Thank you for attending!<br />Q&A<br />

×