Slide 1

Increasing the Automation of a Toolkit without Reducing its Abstraction and User-Interface Flexibility

Prasun DewanUniversity of North Carolina#GUI ImplementationUser InterfaceInteractive Application LibrarySemantics I/O Routines50%50%Sutton & Sprague 78Myers 95Toolkit#Model-based SystemsModelUser InterfaceModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidget#Limitations: Encapsulated ModelModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetUser InterfaceEncapsulated Model#Solution 1: Predefined InterfacesTool-defined interfaces (JTable, Jtree)Model-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetUser InterfaceLow abstraction flexibilityEncapsulation with no programmer-defined types#Solution 2: Public VariablesModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetUser InterfaceModel with public variablesProgrammer-defined types with no encapsulationEngelson et al 96Low abstraction flexibility#Solution 3: Manual MappingModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetUser InterfaceEncapsulated ModelDeveloper Provided External StructureOnly one-level structure currentlyTedious/error prone, special languageNicholas, Myers, Rothtrock 06Ponnekanti, Lee, Fox, Hanrahan, et al 01Gajos et al 05Hodes & Katz 01#Our Solution : Automatic MappingModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetUser InterfaceEncapsulated Model#Limitation: Lack of UI FlexibilityModel-based ToolToolkitHighly Customized User InterfaceRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetModelUniformity!#The Case Against Uniformity

Grudin 89PPT Print DialogEclipse Print Dialog#Solution 1: High ParameterizationHighly Parameterized Model-based ToolToolkitHighly Customized User InterfaceRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetModelDeveloper Provided ParametersDemo The flexibility of widget generation addresses this approach#Developer Provided Widget StructureOur Solution : Appearance Independent AutomationHighly Parameterized Model-based ToolToolkitHighly Customized User InterfaceRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetModelOther opportunities for automation?#Goals: High Abstraction/UI FlexibilityModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetEncapsulated ModelAutomatically map encapsulated models to conventional data typesAutomation of features that show little variabilityAutomation independent of UI appearanceHighly Customized User Interface#Encapsulated Objectpublic class ABMISpreadsheet {double height, weight; DynamicEnum name;public double getHeight() {return height; }public void setHeight(double newHeight) {height = newHeight;}public double getWeight() {return weight; }public void setWeight(double newWeight) {weight = newWeight;}public double getBMI() {return weight/(height*height);} public DynamicEnum getName() { return name;}public void setName(DynamicEnum newVal) {name = newName;}}Conventions for code understandabilityRecord data type#Bean Programming Patternpublic class C{}public get() { ...}public void set( newValue) { ...}Property: Typed, Named Unit of Exported Object StateName

Type Read-onlyEditableobtainP()Relationship among method signatures allowing extraction of object semantics.Prolog-like UnificationDesign pattern#public class ABMISpreadsheet {double height, weight; DynamicEnum name;public double getHeight() {return height; }public void setHeight(double newHeight) {height = newHeight;}public double getWeight() {return weight; }public void setWeight(double newWeight) {weight = newWeight;}public double getBMI() {return weight/(height*height);} public DynamicEnum getName() { return name;}public void setName(DynamicEnum newVal) {name = newName;}}BeanBox UI Generation

BMI readonly property not displayedName programmer-defined properties not displayedBean patterns map to recordsPatterns for other types?BeanBox is not a user-interface tool!#Examplepublic interface BMIList { int size(); BMISpreadsheet bmiSpreadsheetAt(int index); void insertBMISpreadsheetAt(BMISpreadsheet newElement, int index); void removeBMISpreadsheetAt(int index) ; }List data type#17Patterns for Variable-Sized Collection@StructurePattern(StructurePatternNames.VECTOR_PATTERN)public interface C{public void add ( t);public At (int index); public int size();public Any setAt( t, int index);public Any removeAt(int index); public Any removeAt( t);}Arbitrary Type.Read methodsWrite methods (optional)Pattern based on VectorUnconstrained Type (void or T in practice)An optional annotation explicitly indicates kind of patternArbitrary Element Designation#18Shape Pattern@StructurePattern(StructurePatternNames.LINE_PATTERN)public interface Line { public int getX(); public void setX(int newVal); public int getY(); public void setY(int newVal); public int getWidth(); public void setWidth(int newVal); public int getHeight() ; public void setHeight(int newVal);}A line/rectangle/textbox/label must have properties describing its bounding box (X, Y, Width, Height) (plus several optional properties.)An optional annotation explicitly indicates kind of shape.Name of type used if annotation missing.Shape patterns built on top of Bean pattern.#Dynamically Registered Mapper ClassesModel-based ToolToolkitList Type InterfaceEncapsulated ModelUser InterfaceVector MapperList MapperBean MapperRecord Type InterfaceLine Type InterfaceNew mapper classes created when patterns changeEnum Type Interface#Goal 1: Automatic MappingModel-based ToolToolkitRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetUser InterfaceEncapsulated ModelDynamically Registered , Pattern-Specific Mappers#Goal 2: Appearance Independent AutomationHighly Parameterized Model-based ToolToolkitHighly Customized User InterfaceRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetModelDeveloper Provided Widget StructureOther opportunities for automation?#Appearance-Dependent AutomationObjectEditor.edit(bmiSpreadsheet)

#

Manual Step: Create the Widget StructureControl WidgetsModel State WidgetsSyntactic Sugar WidgetsParameter State WidgetsState Widgets#Binding Methods to Control WidgetsComponent[] parameterComponents = {incrementTextField};ObjectEditor.bind(bmiSpreadsheet, subtractPounds, decreaseWeightButton, parameterComponents);Method DesignationControl WidgetParameter State Widget#ObjectEditor.bind(bmiSpreadsheet, name, nameComboBox);Atomic Model State BindingAtomic model componentAtomic state widgets#bind (bmiList, jTable)Composite BindingComposite ModelComposite Widget#Goal 2: Appearance Independent AutomationHighly Parameterized Model-based ToolToolkitHighly Customized User InterfaceRecordFormEnumMenuData TypeAutomatic creation of widgetAutomatic widget updateAutomatic data updateWidgetModelDeveloper Provided Widget StructureOther opportunities for automation?Semantic validation of user input#Other Opportunities for Automation

Undo/redo arbitrary commandCopy/cut/delete/paste arbitrary object Dynamically change enable, editable, hidden status of widgets

Save/load arbitrary objectLuxuries that typically get added lateAppearance independent?#Appearance Independent?

#Appearance Independent

Developer provides the control and state widgets to invoke the operationsTool provides predefined models implementing these operationsObjectEditor.bindToUndo(undoMenuItem); Developer binds widgets to model operations#Key: Programming PatternsUndo/redo arbitrary command/Copy/cut/delete/paste arbitrary object Dynamically change enable, editable, hidden status of widgetsSave/load arbitrary objectData type patternsInput validationPrecondition patternsUndo patterns#Undo/Redo Automation(Hierarchical) Command Object(Hierarchical) Command Object(Hierarchical) Command Object(Hierarchical) Command Object(Hierarchical) Command ObjectHistory objects that manipulates command objects in response to command creation, undo and redo(Hierarchical) command objects undo/redo (sequence of) commandsUndoExecuteApplication independentApplication dependent#Set-Last Examplepublic void setCell(int row, int col, double newVal) { matrix [row, col] = newVal;}public double getCell(int row, int col) { return matrix [row, col];}#Set-Last Pattern and Command CreatorCommand object creationCommand object execution1. store set, p1 .. pN, newVal set( p1, pN, newVal) get( p1, p2, pN) 2. oldVal get( p1, p2, pNset( p1, pN, newVal)Command object undoset( p1, pN, oldVal)#Set-First Example and Pattern set( newVal, p1, pN) get( p1, p2, pN) public void setCell(double newVal, int row, int col) { matrix [row, col] = newVal;}public double getCell(int row, int col) { return matrix [row, col];}#Inverse Examples and Patternpublic void add(int amount) { }public double subtract(int amount ) {} public void on() { }public double off(){} ( p1, pN) ( p1, pN) #Add-First Examples and Pattern ( newVal, p1, pN) ( p1, pN) public void insertCellAt(double newVal, int row, int col) {}public double removeCellAt(int row, int col) { }public void push(double newVal) {}public double pop(int row, int col) { }#Add-Last Examples and Pattern ( 0 && height > 0;}public double getBMI() {assert (preGetBMI());return weight/(height*height);}

Precondition of method M()boolean preM()#public boolean preRestoreHeightAndWeight() {return height != initialHeight || weight != initialWeight; }public void restoreHeightAndWeight() {assert preRestoreHeightAndWeight();height = initialHeight;weight = initialWeight;}

Preconditions of Non Getters/Setters

#ObjectEditor Uses Preconditions

#ObjectEditor Uses Preconditions

#ObjectEditor Uses Precondition

The menu item for a method is disabled when its precondition not met#Some Ignored Aspects of ObjectEditor

No more time spent on OE in semester course than was done here.Focus on programming and not ObjectEditor#CS 110 (Non-Programmers) Project

#CS 110 (Non-Programmers) Project

#CS 401(HS-Programmers) Project

#CS 401(HS-Programmers) Project

#CS 401(HS-Programmers) Project

#CS 401(HS-Programmers) Project

#CS 401(HS-Programmers) Project

#CS 401(HS-Programmers) Project

Several additional Internal classes (Scanner, parser, undoer, )#CS 401(HS-Programmers) Project

Several more classes that are not displayed in the UI (Scanner/Parser) Several alternatives tried (e.g. delegating vs. inheriting scanner)#Monolithic Number ScannerThus, if the argument is: 2 3 100 The output should be of the form:Numbers: 2 3 100 Sum: 105 Product: 600#Number and Word Scanner Object

Iterator Interface#Two Movable Avatars

Multiple RepresentationsStructured ObjectConstraints#Variable-Size Collections

Really complex constraints and object compositionVisualization#Inheritance

Token and Shape Hierarchies#Parsing and More Object Composition

Abstract classes

Observable to avoid refreshReplace inheritance with delegationException handling, undo and assertions#Dynamic Registration

#Record Interfacepublic interface ConcreteRecord { Vector fieldNames(); Class fieldType (String fieldName); Object get (String fieldName); Object set (String fieldName, Object value); boolean isReadOnly (String fieldName); boolean preRead (String fieldName); boolean preWrite (String fieldName); boolean validate (String fieldName, Object value); }#