Building Muscular Graphical Editors in Flex (BFUG March 2009)
Joe Berkovitz is speaking about Building Muscular Graphical Editors in Flex.
Focus on how people build and edit visual documents. Amazed at the problems that come up building visual editors like that.
Ran into lots of issues while building Noteflight. Ended up creating Moccasin framework for working with visual editors. Moccasin is also being used in InfraRed5's new RedLine site editing tool.
He gave a quick demo of Noteflight. Tool for creating and sharing musical scores with a little social interaction thrown in. Selection has different modes: individual object, group of objects (sequence or collection), and a passage. Undo and redo are built in to almost everything.
Uses MVC with a few tweaks. Views emit events that are fed to Mediators which perform actions on a Controller which edits the Model. Models are abstract and non visual. Layouts are visual grouping of model but not drawn.
Undo History <- Document <- Layout Context <- View Context
^ ^ ^ ^
\-> Model <- Layouts <- Views
Model, Layouts, and Views are collection of objects that are cooperating, but all belong to a single object, the context or document they are operation in.
Sometimes when you need to print you need to make visual tweaks so that it looks better, in this case just have a separate view context.
Don't like using events for what should be a function call.
Standard undo/redo wisdom is to use a command pattern. ICommand, execute(), undo(), and redo(). Commands are stateful, need to create them.
Instead constrain the model to only allow, property change, child add, or child remove. Bindable properties will dispatch events for you. For collections and change events you need to bubble them up in your model. Then you only need to listen to the root.
UndoHistory needs to open group/close group. Makes many micro modifications that are recorded. Undo or redo called on undo history controller.
How do you track dirty versus clean? Bookkeeping in undo history.
He gave a demo of InfraRed5's RedLine site builder which is also using Moccasin.
Moccasin is on Google Code. MVCS framework, XML based model, "smart wrappers", object selection management, group based undo/redo, mouse gesture/object handle support, scalable document views.
Moccasin wraps a model object to handle events. Moccasin includes simple world which is an application to show how the framework is used. Uses a feedback layer sitting in front of objects. Ran through an example of changing the Square object to have a width and height instead of just a size.
View registers mediators that it wants to use.
How to persist state of views? Have separate model that hte views manage.
Likes domain specific frameworks instead of monolithic frameworks.
Moccasin more focused on UI design and layout versus client/server work that Cairngorm uses.