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