Mozilla just opened the new source repository (mozilla-central) meaning the next release features will start landing. David Baron posted about landing new CSS selectors. Robert O’Callahan posted about some kick-ass SVG-based CSS effects used to style HTML. This totally rocks and will help push SVG into more of a leading role on the Web.
Look for more cool features, big and small, to start landing with increasing frequency. Some will help chrome developers while others are focused on web developers.
Adobe’s Ryan Stewart has a post on the friction between Open Web advocates and “RIA vendors”. I think Ryan does a good job describing the work being done at Adobe (and Microsoft) to become active in a larger ecosystem, namely open source and cross-platform. There are a couple bits I want to respond (emphasis mine):
I think it’s indicative of wider problems between the “open web” and RIA vendors. The basic issue is that everyone’s too combative. I wish more open web people would look at what both Microsoft and Adobe are doing and see that all in all, the RIA solutions are becoming more open, not less. In fact, I’d argue that RIAs have moved the entire web in a more open direction.
I think Ryan’s use of the term “RIA” to indicate a “proprietary vendor plugin” will cause confusion. Rich Internet Applications can be created without the need for proprietary vendor plugins. Also, what Adobe has done around open sourcing parts of their plugin system has been welcomed by everyone. However, there are still large chunks of closed source and encumbered file formats that work against the Open Web.
I’m not sure if RIAs will ever be as fully open as the open web advocates want, but think how far applications in the browser have come (as far as openness) since the days of ActiveX enhancements in IE.
As I have stated, RIAs can be fully open and, as a card carrying Open Web advocate, those make me happy. However, how far have Adobe and Microsoft come from the days of ActiveX vendor plugins? Last time I checked, ActiveX was still the technology of choice for Flash and Silverlight on IE. Honestly, even if Flash and Silverlight were completely open source, the fact they are plugins and not native Web standards will be a stumbling block for many Open Web folks.
They’ve [Flash and Silverlight] pushed the web forward in a way that it seemed the open web groups couldn’t (video, vector graphics, easy cross platform/browser development).
Yes, they have pushed the Web forward, I’ll admit that. The resurgence of SVG and the new & elements are evidence of that. But then Linux is a platform too, and I suppose that Mozilla could market Firefox as the one, true cross platform Web platform – but we don’t. We encourage choice and competition. We want developers to have choice too and not be locked into a single stack. Let me know when Flash can run a Silverlight application.
I was clickety-clicking my way around the Internet and came across the Connected Ventures website. The first thing that I noticed was the “bubble menu” system used on the site. Then I noticed it was written in Flash. Surely, I thought, SVG could be used to create bubble menus too.
SVG is a nice way to create vector graphics on the web and even embedded in HTML pages. Sometimes you might embed other markup into SVG and that’s where foreignObject comes in. From the W3 SVG1.1 spec:
The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
One of the most common uses (IMO) of using foreignObject is to embed HTML into SVG. The examples that come to mind are:
Using HTML to simplify text wrapping – SVG’s text wrapping abilities are far from convenient. Using tspan to create multiline text ranges is a pain. On the other hand, using an HTML p, div, or span is much easier. You also get list and formatting support. Here is an example of using HTML in SVG for text handling.
Using SVG transforms on HTML content – SVG’s transformation capabilities are fairly cool and can do things that HTML can’t. However, it is possible to use SVG transformations on a foreignObject that holds HTML. Here is an example of SVG transforming (rotating and translating) HTML content.
Note: These examples will only work in a recent Firefox 3 alpha (or any browser that supports SVG foreignObject). And yes, these examples could have been done as SVG embedded in HTML or XUL as well.
I am always interested to see other people use some of my code in a new way. Therefore, I was pretty happy to see a demo of my RichDraw VML/SVG editor hooked up to some really cool XMPP/Jabber collaboration code.
I was a little surprised how “popular” my XUL/E post became. The demo viewer page alone has over double the hits of the second place page. In that post, I demonstrated how Mozilla’s rendering engine (Gecko) could be embedded in Internet Explorer and used to display rich XUL applications and advanced SVG and canvas graphics. Of course, XUL/E is a play on Microsoft’s brand-new-fantastic-sliced-bread WPF/E technology and Mozilla is not mounting a XUL/E initiative (but I can dare to dream).
However, the Mozilla ActiveX control is real and is a quick and easy way to embed a Mozilla web browser not only in Internet Explorer, but any development environment that supports ActiveX controls, including .NET WinForms. Adam Lock’s pages have a lot of information on the control. If you want a current build of the control, download XULRunner, as the control is distributed in that package.
In the comments of my XUL/E post, some asked about using the control as an alternative to Adobe’s SVG ActiveX control. This is certainly possible, but not ideal in it’s current form. However, some small changes could make it much more feasible. One change would be making the control a default viewer for the SVG MIME type. Doing so would allow the control to automatically display SVG whenever IE navigated (directly or by link) to an SVG resource.
I already have a patch to do that exact thing for the XUL MIME type.
WPF is the coolest thing an MFC programmer has ever seen. Of course, developers who have been working with declarative markups (HTML, SVG, XUL or Laszlo) and RAD form builders (Delphi and VB) are not hyperventilating. Sure, its nice that Microsoft has introduced a development platform that is actually easy to use, but such platforms have been around a while. Now, WPF/E is ready to take rich internet application (RIA) development by storm. Its not the first (XUL, Flash, Flex and Laszlo are not betas), but Microsoft’s entry is not to be taken lightly.
The WPF/E hype and the quest for a non-Adobe SVG viewer in Internet Explorer (IE) made me to start to wonder what it would take to get Mozilla’s platform running in IE. Turns out, it’s easier than I thought:
Get XULRunner on your Windows machine. (From Mozilla or as part of my XUL Explorer)
Register the Mozilla ActiveX control
Mark control “Safe” or Tweak IE’s security. (You can register and mark the control safe using this patch)
Done!
This could even be made easier (zero steps) by creating a CAB file for XULRunner and adding code to the Mozilla ActiveX control to mark itself “safe”.
Control Setup using Patch
Unzip the patch files to wherever you installed XULRunner. If you just installed XUL Explorer, XULRunner is in a subfolder.
Execute “mozactivex-reg.bat”
For those of you wondering about the “patch”. It simply registers the Mozilla ActiveX control and then adds 2 registry keys to the control that tell Windows that the Mozilla control is “Safe for initialization” and “Safe for scripting”. See this Microsoft page for more information.
XUL/E Samples
These samples can be run in Firefox (any platform) and IE (windows). Make sure you have installed and configured the Mozilla ActiveX control. The difference between these links and the ones on a previous post is that these are displayed using a special “viewer” HTML page.
Its been a couple months since I released RichDraw. At the time I was looking around at the state of browser-based drawing and diagraming tools. Most were Java or ActiveX based. Now, I am finding lots of pure Javascript API’s and tools.
There also seems to be more of a push to create API’s, making it easier to create cross-browser applications. Each browser seems to support a slightly different technology. Even when they overlap, browser implementations are not always interoperable. Javascript wrappers are a big help.
Here are some Javascript libraries focused on cross-browser drawing:
Draw – Has the makings of a full-blown flowcharting tool. Many shape types and support for connectors. Currently IE only, but since it is built on RichDraw, Firefox and Opera could be supported as well.
Rich text editing is a feature that is finding it’s way into manynewwebapplications. It’s becoming a feature that users can’t live without. We are also starting to see some graphical editing applications. In an effort to satisfy a potential, future, demand to have graphical editing everywhere (it could happen), I created a Javascript component called RichDraw.
RichDraw works in IE 6+, Firefox 1.5+ and Opera 9, using VML or SVG as the underlying renderer. Opera 9 has a small issue with the way I adjust/offset the mouse coordinates, but I’ll look into that. Currently the component supports:
Creating basic shapes (rectangle, rounded rectangle and ellipse) and lines.
Selecting shapes.
Deleting selected shapes.
Dragging shapes with mouse.
Setting fill color.
Setting line color and width.
Retrieving the markup.
I don’t know if there are any real uses for RichDraw in it’s current state. There is a lot that could be done to enhance RichDraw and make it more usable. Probably the most important feature would be loading markup back into the editor. On the surface, that’s easy enough to add. However, there could be situations where the markup is saved from IE (VML) and loaded back into Firefox (SVG). This would not work. I am planning on converting the VML to SVG when retrieving and converting it back when loading. That way RichDraw always appears to be using SVG. I will build from my IESVG code to handle the conversions.
I made some changes to the IESVG behavior. I am trying to get better feature coverage without making the rendering too slow. I have been testing the code using some SVG images from different places, trying to figure out what parts of SVG seem to be more important than others. Recents chanegs include:
Basic support for gradient fills. It’s pretty weak and may have not SVG-correct.
Basic support for svg:g elements.
Switched code to use DOM methods (appendChild and replaceChild) instead of slower, string-based methods.
I plan to add more support for gradients. I also plan to add some scripting support. You can do scripting now, but you need to treat the elements as VML, not SVG. I plan to add some methods to the VML elements to make them appear more SVG-like when scripting.
Files can be downloaded from here. I added the SVG lion to the samples:
