Plug-in Architectures

1,440 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,440
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Plug-in Architectures

    1. 1. Plug-in Architectures J effrey S tylos User Interface Software, Fall 2004
    2. 2. Introduction
    3. 3. Component architectures <ul><li>What are components good for? </li></ul><ul><ul><li>Being able to reuse standard components within your own applications </li></ul></ul><ul><ul><li>Allowing applications to be architected and implemented more modularly </li></ul></ul><ul><ul><li>Allowing applications to be extended (by plug-ins) after they are compiled and released </li></ul></ul>
    4. 4. What is a plug-in? <ul><li>For my purposes, a plug-in is a piece of software that extends or changes the behavior or interface of an existing, compiled application </li></ul>
    5. 5. What are plug-ins good for? <ul><li>Extending an application’s functionality </li></ul><ul><li>Changing the UI of an application (skins or themes) </li></ul><ul><li>Extracting data from an application </li></ul><ul><ul><li>To connect it to another app </li></ul></ul><ul><ul><li>For logging </li></ul></ul>
    6. 6. What are the issues with plug-in architectures? <ul><li>What sort of plug-ins can you create? </li></ul><ul><ul><li>What aspects of the original program can you override? </li></ul></ul><ul><ul><li>How difficult does this make it to create the base application? </li></ul></ul><ul><li>How are the plug-ins created and installed? Are they compiled? </li></ul><ul><li>How do plug-in authors debug their plug-ins? </li></ul><ul><li>How you create an architecture that balance these different issues is an interesting research question </li></ul>
    7. 7. My goals for this lecture <ul><li>Give an overview of several different examples of plug-in architectures and their capabilities and limitations </li></ul><ul><li>Give you an idea of what resources and tools to use if you want to create one of these plug-ins </li></ul><ul><li>Not to die from coughing </li></ul>
    8. 8. Why you should care about plug-in architectures <ul><li>Writing plug-ins is a way to connect your research with real applications, making it more compelling </li></ul><ul><li>Writing plug-ins is a relatively easy way to write software that can make your life easier </li></ul><ul><li>Building a plug-in architecture into your project is a way to let other people improve your project for you </li></ul><ul><li>Designing new plug-in architectures is a potentially fruitful research avenue </li></ul>
    9. 9. DISCLAIMER <ul><li>This wasn’t one of the existing topics </li></ul><ul><ul><li>I picked it because I wanted to learn more, not because I was already an expert </li></ul></ul><ul><li>These slides suck </li></ul><ul><li>I have a cough </li></ul>
    10. 10. Overview <ul><li>Intro </li></ul><ul><li>Emacs </li></ul><ul><li>Mozilla </li></ul><ul><li>Eclipse </li></ul><ul><li>Skinnable apps </li></ul>
    11. 11. Emacs
    12. 12. Emacs <ul><li>&quot;Editor MACroS“ </li></ul><ul><li>One of the first runtime extensible systems </li></ul><ul><li>Designed for text editing </li></ul><ul><ul><li>Used for everything </li></ul></ul><ul><li>Contains a core written in C </li></ul><ul><li>The rest is written in elisp </li></ul>
    13. 13. Emacs extensions <ul><li>Extensions are written in elisp </li></ul><ul><li>Can provide new functions or replace existing functionality </li></ul><ul><li>Most extensions are macros that provide some sort of automation when explicitly invoked </li></ul><ul><li>Can also do things like change text formatting </li></ul><ul><ul><li>Can display images, but only in the context of lines of text </li></ul></ul><ul><ul><li>Auto spell-checking (flyspell) </li></ul></ul><ul><li>It’s hard to: </li></ul><ul><ul><li>Write multi-threaded extensions (makes network programming difficult) </li></ul></ul><ul><ul><li>Do arbitrary painting (assumes lines of text) </li></ul></ul>
    14. 14. Emacs extensions (continued) <ul><li>Everything loaded from initialization file </li></ul><ul><li>To install an extension </li></ul><ul><ul><li>Set the correct paths in the initialization file </li></ul></ul><ul><ul><li>Load the extension from the initialization file </li></ul></ul><ul><li>Can also manually load any lisp file, or even execute code as you write it </li></ul>
    15. 15. How do you debug extensions? <ul><li>Because much of Emacs is in Lisp, can step through it </li></ul><ul><li>Has a built-in debugging mode </li></ul><ul><li>Extensions for more detailed debugging (Edebug) and profiling (ELP) </li></ul><ul><li>Don't have to build Emacs to run or debug an extension </li></ul>
    16. 16. Emacs examples <ul><li>[Show Tetris example] </li></ul>
    17. 17. Mozilla
    18. 18. Mozilla <ul><li>Several different applications </li></ul><ul><ul><li>Current code base provides </li></ul></ul><ul><ul><ul><li>Mozilla 1.8 </li></ul></ul></ul><ul><ul><ul><li>Netscape 7.2 </li></ul></ul></ul><ul><ul><ul><li>Firefox 1.0 </li></ul></ul></ul><ul><ul><ul><li>Thunderbird 1.0 </li></ul></ul></ul><ul><ul><li>Different from old Netscape (which also provided some extensibility) </li></ul></ul><ul><ul><ul><li>Current extensibility features allow modification of the browser interface components (not just interactive webpage elements) </li></ul></ul></ul>
    19. 19. Mozilla extensibility architectures <ul><li>XPCOM </li></ul><ul><ul><li>Heavier weight – supports C++ and other programming languages </li></ul></ul><ul><li>XUL / JavaScript </li></ul><ul><ul><li>User interface modification and scripting </li></ul></ul><ul><ul><li>Also used for “themes” </li></ul></ul><ul><li>[XPConnect] </li></ul><ul><ul><li>Bridges XPCOM and Javascript </li></ul></ul><ul><li>[XPInstall] </li></ul><ul><ul><li>Installation and package management </li></ul></ul>
    20. 20. XPCOM <ul><li>Cross-Platform COM </li></ul><ul><ul><li>A cross platform clone of COM </li></ul></ul><ul><ul><li>Multi-threaded, but no remote support (not DCOM) </li></ul></ul><ul><li>Used to create heavy-weight components that can be called by XUL and JavaScript elements </li></ul><ul><li>Code can be cross platform, but has to be recompiled </li></ul>
    21. 21. XPCOM (continued) <ul><li>Used to implement much of Mozilla’s core functionality </li></ul>
    22. 22. XPCOM (continued) <ul><li>Uses the IDL (Interface Definition Language) to specify capabilities </li></ul><ul><ul><li>IDL compiles to C++ </li></ul></ul><ul><ul><li>Connects to JavaScript </li></ul></ul><ul><ul><li>As with COM, XPCOM programming uses lots of interface pointers </li></ul></ul><ul><ul><ul><li>§Bad: void ProcessSample(nsSampleImpl* aSample) {     aSample->Poke(“hello”); } §Good: void ProcessSample(nsISample* aSample) {     aSample->Poke(“Hello”); } </li></ul></ul></ul>
    23. 23. Using XPCOM <ul><li>(Usually) needs Mozilla framework to compile </li></ul><ul><ul><li>Can be difficult to compile </li></ul></ul><ul><li>Needs the Mozilla framework to debug component </li></ul><ul><li>Requires special tool to generate IDL specification </li></ul><ul><li>Can use XPCOM for programming other than Mozilla plug-ins, but few do </li></ul>
    24. 24. Debugging XPCOM components <ul><li>Effective when you debug all of Mozilla </li></ul><ul><li>Tools for detecting memory leaks </li></ul><ul><ul><li>BloatView, Boehm GC Leak Detector, Refcount Tracing, Trace-Malloc, etc. </li></ul></ul>
    25. 25. High level overview of XPCOM Mozilla plug-ins <ul><li>Make a DLL that implements necessary methods (NSGetModule, etc.) </li></ul><ul><li>Create a IDL specification </li></ul><ul><li>Create an XPT specification from the IDL </li></ul><ul><li>Put everything in Mozilla’s components directory </li></ul>
    26. 26. XPCOM Examples <ul><li>Using XPCOM: </li></ul><ul><li>var sound = Components.classes[&quot;@mozilla.org/sound;1&quot;].createInstance(); </li></ul><ul><li>if (sound) sound.QueryInterface(Components.interfaces.nsISound); </li></ul><ul><li>IDL: </li></ul><ul><li>[scriptable, uuid(1BDC2EE0-E92A-11d4-BCC0-0060089296CB)] </li></ul><ul><li>interface mozIGPS : nsISupports </li></ul><ul><li>{ </li></ul><ul><li>boolean Open(in string strDevice); </li></ul><ul><li>boolean Close(); </li></ul><ul><li>string Reason(in boolean bClear); </li></ul><ul><li>readonly attribute double latitude; </li></ul><ul><li>readonly attribute double longitude; </li></ul><ul><li>readonly attribute double elevation; </li></ul><ul><li>readonly attribute double gpstime; </li></ul><ul><li>}; </li></ul>
    27. 27. XPCOM resources <ul><li>High level information </li></ul><ul><ul><li>http://www.mozilla.org/projects/xpcom/ </li></ul></ul><ul><ul><li>An Introduction to XPCOM </li></ul></ul><ul><ul><ul><li>http://www-128.ibm.com/developerworks/webservices/library/co-xpcom.html </li></ul></ul></ul><ul><li>I don’t know of any good tutorial for creating and compiling an XPCOM extension </li></ul>
    28. 28. Mozilla Plug-ins: XUL and JavaScript <ul><li>Used to build the base Mozilla user interface </li></ul><ul><li>What most of the available extensions are written in </li></ul><ul><li>Uses XUL to specify the static layout of the UI elements </li></ul><ul><li>Uses JavaScript to specify how each of the elements interacts </li></ul>
    29. 29. XUL <ul><li>“ zool” </li></ul><ul><li>XML User-interface Language </li></ul><ul><li>Initial ambitions of also being a language for richer webpages (sort of works now) </li></ul><ul><li>Cross platform </li></ul><ul><li>Can be used to create stand alone applications (with difficulty) </li></ul>
    30. 30. XUL (continued) <ul><li>Uses “overlays” to add new interface elements to existing interfaces </li></ul><ul><ul><li>Easy to add a new button to an existing form </li></ul></ul><ul><li>Can also replace existing interface elements </li></ul><ul><li>Uses CSS to specify many of the formatting elements of the UI </li></ul>
    31. 31. How to write a XUL-based plug-in <ul><li>Write a .xul and .js file in Notepad </li></ul><ul><li>Put in Mozilla’s extension directory </li></ul>
    32. 32. Debugging XUL and JavaScript plug-ins <ul><li>Difficult – most common solution is trial and error </li></ul><ul><ul><li>Prints out red error messages on the UI </li></ul></ul><ul><li>There exists a debugging tool </li></ul><ul><ul><li>Venkman JavaScript debugger </li></ul></ul><ul><ul><li>… but it hasn’t worked with Firefox or Thunderbird for a year or so </li></ul></ul><ul><ul><ul><li>Update: There’s a development branch that might work with some version of Firefox </li></ul></ul></ul>
    33. 33. Example XUL code <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE window> </li></ul><ul><li><?xul-overlay href=&quot;file://src/HTML/moztests/sampleoverlay.xul&quot;?> </li></ul><ul><li><window orient=&quot;vertical&quot; </li></ul><ul><li>xmlns=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;> </li></ul><ul><li><box orient=&quot;vertical&quot;> </li></ul><ul><li><box orient=&quot;horizontal&quot; flex=&quot;1&quot;> </li></ul><ul><li><text value=&quot;Sample text number ONE&quot;/> </li></ul><ul><li><spring flex=&quot;1&quot;/> </li></ul><ul><li><text value=&quot;Sample text number TWO&quot;/> </li></ul><ul><li></box> </li></ul><ul><li><box orient=&quot;vertical&quot;> </li></ul><ul><li><text value=&quot;Sample text number THREE&quot;/> </li></ul><ul><li><text value=&quot;Sample text number FOUR&quot;/> </li></ul><ul><li></box> </li></ul><ul><li><box id=&quot;extraStuff&quot;/> </li></ul><ul><li></box> </li></ul><ul><li></window> </li></ul>
    34. 34. Example JavaScript / XUL code <ul><li>function toggleContactsPicker() { </li></ul><ul><li>var sidebarBox = top.document.getElementById(&quot;sidebar-box&quot;); </li></ul><ul><li>var sidebarSplitter = top.document.getElementById(&quot;contacts-pane-splitter&quot;); </li></ul><ul><li>var sidebarState = sidebarSplitter.getAttribute(&quot;state&quot;); </li></ul><ul><li>var menuItem = top.document.getElementById(&quot;menu_showContacts&quot;); </li></ul><ul><li>var toolbarButton = top.document.getElementById(&quot;button-contacts&quot;); </li></ul><ul><li>if (sidebarBox.hidden) { </li></ul><ul><li>sidebarBox.hidden = false; </li></ul><ul><li>sidebarSplitter.hidden = false; </li></ul><ul><li>if (menuItem) </li></ul><ul><li>menuItem.setAttribute(&quot;checked&quot;,&quot;true&quot;); </li></ul><ul><li>if (toolbarButton) </li></ul><ul><li>toolbarButton.setAttribute(&quot;checked&quot;,&quot;true&quot;); </li></ul><ul><li>... </li></ul>
    35. 35. Example XUL extensions <ul><li>[Show Firefox and Thunderbird extensions] </li></ul><ul><li>[Thunderbird extensions: </li></ul><ul><ul><li>Contact sidebar </li></ul></ul><ul><ul><li>Quote colors] </li></ul></ul>
    36. 36. Themes <ul><li>Uses the swap-ability of XUL elements to create plug-ins that change the appearance but not the functionality </li></ul><ul><li>[Show theme examples] </li></ul>
    37. 37. XUL and JavaScript resources <ul><li>Lots, high-level overviews, reference sites, and examples </li></ul><ul><li>Because they are non-compiled languages, you can view the source of every current available extension </li></ul>
    38. 38. XUL / JavaScript overview <ul><li>Powerful and flexible UI scripting </li></ul><ul><ul><li>Can override existing elements </li></ul></ul><ul><ul><li>Can dynamically transform UI elements </li></ul></ul><ul><li>Provides support for separating formatting decisions into CSS files </li></ul><ul><li>Provides support for internationalization by separating text strings into language files </li></ul><ul><li>Don’t have to compile </li></ul><ul><li>Hard to debug </li></ul><ul><li>Can’t write arbitrary C code </li></ul><ul><li>Potentially slow </li></ul>
    39. 39. Break
    40. 40. Eclipse
    41. 41. Eclipse <ul><li>A modern Emacs </li></ul><ul><li>Designed to have a very small core that loads independent components </li></ul><ul><li>Written in Java, primary selling point is its included Java developing components </li></ul><ul><li>“The Eclipse Platform is an IDE for anything, and for nothing in particular.” </li></ul><ul><li>Cross platform </li></ul>
    42. 42. Eclipse (continued) <ul><li>Designed for building IDEs </li></ul><ul><li>People used it for other apps </li></ul><ul><ul><li>Remail, Haystack (new version) </li></ul></ul><ul><li>Now formalized: “Rich Client Protocol” </li></ul>
    43. 43. Eclipse architecture
    44. 44. Eclipse plug-ins <ul><li>All written in Java </li></ul><ul><li>Found at Eclipse launch </li></ul><ul><ul><li>Heavier-weight than Emacs model – can’t dynamically swap plug-ins or write and execute code </li></ul></ul><ul><li>Include a “manifest” file </li></ul><ul><ul><li>Specifies visibility of included classes and methods </li></ul></ul><ul><ul><li>Used to add information to the plug-in registry </li></ul></ul>
    45. 45. Manifest file example <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><plugin </li></ul><ul><li>name=&quot;JUnit Testing Framework&quot; </li></ul><ul><li>id=&quot;org.junit&quot; </li></ul><ul><li>version=&quot;3.7&quot; </li></ul><ul><li>provider-name=&quot;Eclipse.org&quot;> </li></ul><ul><li><runtime> </li></ul><ul><li><library name=&quot;junit.jar&quot;> </li></ul><ul><li><export name=&quot;*&quot;/> </li></ul><ul><li></library> </li></ul><ul><li></runtime> </li></ul><ul><li></plugin> </li></ul>
    46. 46. Eclipse plug-in architecture <ul><li>Load-on-demand strategy makes it feasible to have many different plug-ins and still have reasonable performance </li></ul><ul><li>“ Extension points” make it easy for plug-ins to themselves be extendable </li></ul><ul><ul><li>Allows for multi-level extensibility </li></ul></ul><ul><ul><li>(Most architectures only support a single level of extensibility) </li></ul></ul><ul><li>Uses “explicit ports” to make plug-in connections clear </li></ul><ul><ul><li>Plug-ins say what they can extend </li></ul></ul><ul><ul><li>Helps support multi-layered extensibility </li></ul></ul><ul><li>Manifests help encapsulate plug-ins from each other (they can only use each other in specified ways) </li></ul><ul><ul><li>Again, helps multi-layered extensibility </li></ul></ul>
    47. 47. Eclipse plug-in architecture (cont.) <ul><li>Limitations: </li></ul><ul><ul><li>Extensibility points are tied to specific implementations </li></ul></ul><ul><ul><ul><li>Can’t have multiple swappable implementations of the same functionality </li></ul></ul></ul><ul><ul><li>Can’t have strict dependencies </li></ul></ul><ul><ul><ul><li>All components are optional </li></ul></ul></ul><ul><ul><ul><li>Can’t say “this plug-in only works when this other plug-in is available” </li></ul></ul></ul><ul><li>Reference: Evaluating the Eclipse Platform as a Composition Environment </li></ul>
    48. 48. SWT and JFace <ul><li>Standard Widget Toolkit </li></ul><ul><ul><li>Really just a widget set </li></ul></ul><ul><ul><li>JFace is the higher-level toolkit built on top of SWT </li></ul></ul><ul><li>Allows for portable plug-ins that use native widgets </li></ul><ul><li>Usable outside of Eclipse </li></ul><ul><ul><li>Opinionated claim: Best Java widget set </li></ul></ul><ul><li>Supports widget extensibility by allowing Java extensions of native widgets </li></ul>
    49. 49. Different types of Eclipse plug-ins <ul><li>Whole apps </li></ul><ul><li>C++ IDE (CDE) </li></ul><ul><li>Visual UI Editor (SWT/Swing Designer) </li></ul><ul><li>Aspect oriented language extension (AspectJ) </li></ul><ul><li>Profiler (EclipseProfiler) </li></ul>
    50. 50. Sample Eclipse plug-in <ul><li>[Show HelloWorld Eclipse plug-in] </li></ul>
    51. 51. How do you debug your Eclipse plug-in? <ul><li>Eclipse comes with tools to help build, run and debug Eclipse plug-ins </li></ul><ul><ul><li>Plug-in wizard </li></ul></ul><ul><ul><li>Runs separate instances of Eclipse for developing and testing </li></ul></ul><ul><ul><li>Provides support for the packaging of plug-ins </li></ul></ul><ul><ul><li>EclipseProfiler plug-in </li></ul></ul>
    52. 52. Eclipse resources <ul><li>Many high level articles </li></ul><ul><ul><li>Most on eclipse.org </li></ul></ul><ul><li>Relatively active mailing list </li></ul><ul><ul><li>Archived on eclipse.org, (poorly) searchable </li></ul></ul><ul><li>For many things, only reference is the Eclipse source code </li></ul>
    53. 53. Skinnable Apps
    54. 54. Skinnable Apps <ul><li>Is this research related? </li></ul><ul><li>Some history </li></ul><ul><ul><li>Remember Winamp 1? </li></ul></ul><ul><ul><ul><li>(That’s an mp3 player, by the way) </li></ul></ul></ul><ul><ul><li>Not intentionally skinnable </li></ul></ul><ul><ul><li>Someone figured out how to modify the bitmap resources in the compiled Winamp executable </li></ul></ul><ul><ul><li>Became wildly popular, then supported </li></ul></ul>
    55. 55. Winamp 2 skins
    56. 56. Winamp 3 <ul><li>More than just changing bitmaps </li></ul><ul><li>Let skin authors specify size and location of buttons, and simple scripting (MAKI scripts) </li></ul><ul><li>Used an XML-based language to define the location of UI elements, similar to resource editors </li></ul>
    57. 57. Winamp 3 skins <ul><li>[Show Winamp] </li></ul>
    58. 58. Sonique <ul><li>(Another mp3 player) </li></ul><ul><li>Flash-like graphic capabilities in a skin </li></ul><ul><li>[Show Sonique] </li></ul>
    59. 59. Skinnable Apps wrap up <ul><li>Natural evolution of a separation between UI and underlying functionality </li></ul><ul><li>A form of end-user programming </li></ul><ul><li>Many limitations as a plug-in architecture </li></ul><ul><ul><li>Difficult to trap events </li></ul></ul><ul><ul><li>Limiting even just considering UI capabilities </li></ul></ul>
    60. 60. Conclusions <ul><li>Different plug-in architectures support different type of extensibility </li></ul><ul><li>Plug-in programming is very different from regular GUI programming </li></ul><ul><li>Never get a cough before you have to give a presentation </li></ul>
    61. 61. Thanks! Good luck on homework 5!

    ×