Edit Rename Changes History Upload Download Back to Top

Nyx


Software with:Style
Technology Preview 1: Nyx

Contents

  1. About
  2. License
  3. Quick Start
  4. Downloading
  5. Presentation
  6. Feedback
  7. Re-Use
  8. Capabilities
  9. Technology Preview 2
  10. Class Structure

About

Nyx is the code name for the first Technology Preview of with:Style. with:Style is a CSS rendering engine. Please read the overview of with:Style.

This is not a release candidate for with:Style, it is a Technology Preview which is very much a work in progress and will have a few 'warts' and rough edges. The pre-requisite of VisualWorks v7.1 or higher is required as well as a working knowledge of Smalltalk, HTML, XML and some CSS.

License

The use of this software acknowledges that you have read this agreement, understand it and agree to be bound by its terms and conditions.

All title to and copyrights in with:Style, the accompanying materials, and any copies of with:Style are owned by the authors. You may not redistribute with:Style in any other form but the original provided by the authors.

You may install and use this software provided that it is for evaluation or demonstration purposes only. Express permission must be given by the authors to use with:Style for any other purpose.

You may not rent, lease or lend this software. You may not obtain commercial profit from the use of with:Style without express permission from the authors.

This license is effective until terminated. You may terminate it at any time by removing all copies of the software and accompanying materials.

This software and accompanying materials are provided "as is" and without warranties as to performance or suitability for any purpose or any other warranties whether expressed or implied.

The user must assume the entire risk of using with:Style.

Quick Start

  1. Connect to the Cincom Public Repository
  2. Load the Nyx bundle
  3. In the VW Launcher, select Tools --> Nyx Development Browser
  4. Enter the url http://www.w3.org
  5. To really challenge Nyx, try a couple of Zen Garden designs: release one and Erratic Blue
  6. Experiment and imagine the possibilities for your software!

Downloading

The source code for Nyx is available in Cincom's Public Store. If you require write access to the Public Store, please see the access instructions. Otherwise, you can connect to the public store with a username of guest and a password of guest for read only access. The connection environment for the public store is currently: store.cincomsmalltalk.com:5432_store_public.

A introductory presentation about with:Style and Nyx is available for download and if you would like to use it for a demonstration to your colleagues, you have our permission to do so. The presentation has been done with PowerPoint. We've been led to believe that it will also work using OpenOffice.

Feedback

Please send us emails about bugs you've found, non-compliances that you would like to see addressed soon. Positive feedback is also appreciated so that we can gauge how much interest there is in this release. Please address feedback to: Michael Lucas-Smith, Steve Aldred and Rowan Bunning.

Re-Use

The most core re-use of with:Style is currently by embeding a subcanvas of NyxBrowserWidget in to your own windows. It has the following API for giving it content.

Capabilities

Initially we have focused on rendering XML to a GUI screen using CSS2, much the way Mozilla and Internet Explorer do. Those two browsers have typically focused their efforts on HTML, whereas we have focused our work more on CSS2. Any object structure that can be used to construct a View hierarchy can be rendered using CSS2 inside VisualWorks using with:Style.

With a typical website, we end up with four hierarchies of information:

  1. HTML/XML DOM Tree
  2. CSS Styles Tree
  3. View Tree
  4. Layout Tree

The View Tree is used to distinguish the difference between an Element (something that can change style) and a Node (something that cannot, such as XML.Text). The View Tree then constructs the Layout Tree using whichever CSS styles apply to the nodes in the View Tree.

All this is done for you in the example Nyx.NyxViews.BrowserWindow, a demo web browser, which can be found in the package NyxGraphicalUserInterface. An option to open this browser can be found in the Tools menu of the VisualWorks Launcher.

A developer's version of the demo browser, Nyx.NyxViews.BrowserDeveloperWindow, can be found in the package NyxDevelopmentUtilities. This version provides timers, a mouse position monitor and two tree's, the document's DOM tree and the layout tree. It also includes a right click context menu to aid inspecting and debugging. There is also a Debug menu provided to drop the HTTP cache and CSS cache if required.

When working with content on the Internet via HTTP, resources have a mime type. For example, a web page has a mime type of text/html. An image may have a mime type of image/jpeg. This mime type allows with:Style to use the appropriate parser on the resource to make it suitable for displaying.

For example, HTML and XML are parsed using the VisualWorks XML parser or the TwoFlower HTML parser. CSS is parsed using the with:Style CSS Parser (this can be found as Nyx.Css.StylesheetParser in the package NyxCSS) and Images are handled with standard VisualWorks image classes.

To get a resource, you can use: 'http://www.w3.org' asURI nyxResource.

Any resource that is fetched over HTTP is cached in the ResourceManager. Currently, we do not attempt conditional GETS, so the cached version may be out of date. If this is the case, self destroyResourceManager can be used to dump the cache. This can be called from any object.

The resource handler class structure is made by subclassing Nyx.Resourcing.ResourceHandler. It has a class-side method of mimeTypes which is used to map handler class to resource mime type.

On top of the VisualWorks XML code we have added some useful shortcut methods such as nyxNamespaceURI, to return the namespace URI that we are currently in. Namespace aliases are not sufficient to identify a unique kind of XML element.

After a DOM tree is constructed, it is common to want to do a postInitialize. doPostInitialize on XML.Document is provided to do this. You may override #postInitialize any subclass of XML.Node to give it behaviour.

In XML attributes can be in a different namespace to the namespace of the element on which they occur. For example <p newnamespace:hl="2">. To provide specific handling behaviour on #postInitialize for out-of-element-namespace attributes, simply subclass AttributeHandler and implement #namespace on the class side and #handleElement: on the instance side.

A more robust version of #nodesDo: is #nyxNodesDo: which will traverse in to attributes as well as elements.

The method #sourceURI is set by the Resources to allow you to know the source of an XML.Document for later use. One use is resolving relative URL's. See #resolvedHref and #href.

By default, #userData on XML.Element has been set up to be a Dictionary. For modifying the XML node tree, we've added #addNewNode:, #removeNode:, #removeFromParent and #nyxAttributeAt: If we're parsing an XML document and validation has been turned off, the DTD will no longer be fetched because of an override in NyxXMLCore.

To create context specific errors in your postInitialize methods while parsing an XML document, you may wish to consider subclassing the class Message, which has subclasses such as Error, MissingURLError, etc. This gives the system a consistent way of reporting errors to the user - inline in the document - instead of with modal dialog boxes. The same mechanism can be provided by server side dynamic validating applications, by adding XML with the same namespace as used in Error or Message.

One core problem with XML is that it is simply information unless you apply behaviour to it. In the object oriented world it becomes obvious associating behaviour with information is extremely important. There are many ways to transform XML in to Objects in Smalltalk, but by subclassing XML.Element, you can preserve the XML DOM tree while still keeping specialised behaviour. This is the way with:Style has implemented some parts of XHTML1.

Simply subclass XML.Element and on its class side you may wish to implement #namespace, to specify what namespace you're expecting the XML to be in. By default, your class is matched by namespace + the XML's tag. The default tag matching is done by comparing your class's name to the XML's tag. If you wish to change this behaviour, implement #type on the class side.

You may also do the same with XML.Attribute's - but be warned that the VisualWorks XML parser does not apply namespaces to XML.Attributes until after they have been instantiated, making the technique described above currently broken for XML.Attributes.

The best description of these can be found at w3.org's specification for DOM2 events and XML Events. Please read them first:
DOM2 Events and XML Events.

The Smalltalk implementation is significantly easier. To add interest to an event, you can call, for example:

self addCaptureEvent: 'xforms-insert' do: [:node :signal | self insert]
Variants on this set up call are addCaptureEvent:observing:do:, addBubbleEvent:do:, addBubbleEvent:observing:do:.

To kick off a signal, simply call signalEvent: 'xforms-insert' from the signaling node, such as the node that wants to hear it.

XML Events is implemented in Nyx, but it does not hook up to any scripted code yet.

At the moment, Nyx supports a wide variety of common CSS attributes which are listed below. It supports CSS1 and CSS2 syntax structures, but not CSS3 which provides the ability to match on XML namespaces. We intend to add this support soon. We currently ignore !important inside CSS, it does not alter the score of a CSS style.

For more information about CSS, you can read the most appropriate spec here: CSS2 Specification.

The rest of this section will be spent discussing non-compliances only, not compliances. Whilst not wanting to be too negative, it is easier for us to cite what is not (fully) supported rather than try to list all the features we do support. Hopefully, using with:Style will make it obvious that we are doing well considering that this is not a release candidate.

XIncludes are normally used to include other bits of text or XML in to a document transformation in XSL, but they can also be used in Nyx to fetch other documents while displaying the main document. If you are interested in using XIncludes, please see the XIncludes spec. We currently do not support fallback's.

HTML4 is only partially supported. Most websites on the Internet use tables for layout and because Nyx does not include Tables support, those websites may look rather odd. A good example of this is slashdot. Websites that use newer CSS techniques for layout look much better, such as the W3C.

For HTML4, we use the TwoFlower's HTML parser and NyxTwoFlowerBridge. The NyxTwoFlowerBridge package is LGPL'd as required by TwoFlower's LGPL license. We do not yet transform font tags, which give old HTML4 pages colour and font changes. Any website that uses the style attribute or element, or includes a stylesheet will look much better though, as with:Style will pick that up.

For HTML in general, anchors will signal their activateOn: method and have the demo browser go to their specified href. Images are also supported with scaling by specifying width and height.

Horizontal Rules (hr) do not draw, but they do leave an extra line of space for them to make layout look nicer. Breaks (br) do the same. Most of HTML is actually controlled by the default stylesheet's CSS. You can find this method in Nyx.Css.Stylesheet>>defaultCss.

The next Technology Preview - Kyx - will support a much richer editing environment than Nyx does. But as a taste test we've included the ability to click anywhere on a page and type - the text will come out in the same style that you clicked in. This is a very primitive technology at the moment and includes very obvious bugs such as not moving the cursor to a new line when you wrap.

Reverse Video selecting has been included, but you cannot use it to over-type, cut, copy or paste yet.

In the future this whole area will be extended for use with XForms or general XML document authoring. In the demo browser we have included Open and Save menu options for playing with the editor functionality.

Note: If you press backspace, a character 8 will be inserted, which is not valid for XML; you will not be able to open the file again.

Performance is always an issue with highly interactive software like this. We've found the current speed of the system to be acceptable for most reasonably sized documents. Speed will continue to be an important part of with:Style's development in the future.

If you intend to run the tests, you will need more than 128 meg's of ram to have all browser windows open at once. A large number of resources are pulled in to use in the test cases. Machines with less than 256 megs of ram quickly begin to thrash. You may wish to consider only running 10 tests at a time.

If you choose to try and use the Nyx preview of with:Style in some other Smalltalk application please be aware that any API's starting with the 'nyx' prefix will be renamed in later versions. Yes, we know the point of API's is they don't change but remember this is a technology preview not a pre-release version.

Technology Preview 2: Kyx

Details on the upcoming release of Technology Preview 2 can be found in the presentation, available for download from the download section of these release notes.

Class Structure

Some important class structures: XML Classes
XML.Node
   XML.Element
   XML.Text
   XML.Comment
   XML.Document

View Classes

Nyx.NyxViews.ViewNode
   ViewBox
      ViewComment
      ViewDocument
   ViewText

Layout Display Classes

Nyx.NyxViews.LayoutNode
   LayoutBlockStatic
      LayoutBlockAbsolute
         LayoutBlockFixed
      LayoutBlockFloatLeft
         LayoutBlockFloatRight
      LayoutBlockRelative
      LayoutBlockDocument
   LayoutInline
      LayoutText
   LayoutLine

Mouse Interaction

Nyx.NyxViews.NyxCaretPoint
   Nyx.HoverCaretPoint

Drawing Classes

Painter
   Background
   Border
   ListStyle

CSS Styles

Nyx.Css.StyleSetter
   ...(many)...
Nyx.Css.StyleStrategysetter
   ...(many)...

Widget Classes

NyxBrowserView
   NyxBrowserDeveloperView

NyxBowserWidget
   NyxBrowserDeveloperWidget

NyxBrowserWindow
   NyxBrowserDeveloperWindow


Edit Rename Changes History Upload Download Back to Top