This web is incomplete. We are working on it!!'''''

Development New User Editor

We want to design a graphical interface more focused to a level user, and so, a simpler design than the current one.

The Current Problem Editor

Now there is a class diagram, where we can to see a simplification:

In this diagram we see the major classes that make up the graphical interface, and the zones where it interacts with the rest of the program, that are in different colors.

This editor is well designed and programmed, but is specific to this type of interface, ie if pondering a completely new interface, we would have to modify many classes of graphics interface layer.

Now, we show the current problem view:

descripcion

And now, with an scheme of the most important components of the graphical interface:

Model View Components

The Idea of the New Change

This new graphical interface, it must be simpler than the previous one and with the possibility of linking the component graph of the editor (canvas2D) and the component graph of the solution, which until now have remained separate.

This will allow the user to see, how the model changes if the resolution of the problem is correct.

We want to make a new structure of the GUI, with more possibilities for future changes. We create a parallel structure (sister) to class ProblemEditor, which also implements the interface Editor and extends from ProblemView.

The idea is that once the design of the new structure is created, the ProblemEditor class will undergo a transition to the new classes structure in an orderly manner. ProblemEditor (as AdvancedProblemEditor) will adapt to the new classes structure.

The New Structure View

As mentioned before, we will create a parallel structure to the current GUI, once completed, we can make an orderly transition of current classes to new structure.

In general, the new structure will be separated in two types of interfaces, one that shows the problem only, and other that also can to edit:

ProblemVisualization

We can see the separation between viewer classes and edit classes. From these two classes, we can extend as much as we want, becoming a GUI more complicated. If we want to make another type of GUI totally different or likes a class, just have to make a sister class. More specifically, a more specific graphic for the new structure would be as follows:

We see that we have inserted the same differentiation idea to the class ProblemEditorToolBar and ProblemEditorMenu. To get a clearer idea of the differentiation of each class, we can follow the same image but with different views of each class:

As mentioned before, this change in structure is also reflected in the menu bar. Now, we differentiate between a menu bar with viewing options, other which editing options add, and finally one with the option of viewing the solution:

These are the options that each class includes:

  • ProblemViewMenu: visuals options.
    • File
      • Open
      • Print
      • Quit
    • Tools
      • Preferences
    • Help
      • About
  • ProblemEditMenu: Inherits all of the above and adds edit options.
    • File
      • Save
      • Save As
    • Edit
      • Undo
      • Redo
      • Show Element Form
  • ProblemSolutonMenu: Inherits all of the above and adds Show Solution option.
    • Solution
      • Show Solution

Tool Bar

Also in the tool bar, we differentiate between a tool bar with viewing options, other which editing options add, and finally one with the circles options.

Based on the current Tool Bar ProblemEditor:

The ProblemViewerToolBar remove all edit buttons, leaving only display options:

The options in order are:

  • Open
  • Print
  • ShowGrid
  • AdjustToGrid
  • IncGrid
  • DecGrid
  • ShowAll
  • ShowGeometry
  • ShowPoints
  • Zoom
  • Zoom to fit
  • Information

The ProblemViewerEditorToolBar incorporates the above options, plus all the edit options that they do not have to do with circles:

The options in order are:

  • Open
  • Save
  • Print
  • Undo
  • Redo
  • Remove
  • Selection and move
  • Invert current selection
  • Remove selected elements
  • ShowGrid
  • AdjustToGrid
  • IncGrid
  • DecGrid
  • ShowAll
  • ShowGeometry
  • ShowPoints
  • Zoom
  • Zoom to fit
  • Information
  • Add Point
  • Add Line
  • Add Parallel
  • Add Perpendicular
  • Add Segment
  • Rotate Line
  • Add AngleLL
  • Add DistPP
  • Add DistPL
  • Add OnPL
  • Change constraint value
  • Update constraint value

The ProblemViewerEditorWithCirclesToolBar add all circles options, and is same that the current ToolBar (ProblemEditor):

ProblemView

descripcion

This is the more basic view, it includes only the control to show models (the !Canvas2D).

ProblemViewer

descripcion

This view is similar to a typical GUI. Only you can open and display models, so this is linked to a ProblemViewerToolBar and a ProblemViewMenu.

ProblemViewerEditor

descripcion

This view incorporates all the editing options less the circles options, so is linked to a ProblemViewerEditorToolBar and a ProblemEditMenu.

NewProblemEditor

descripcion

Is the transition from the current class ProblemEditor?, has the same functionality, so is linked to a ProblemViewerEditorWithCirclesToolBar and a ProblemSolutionMenu.

NewAdvancedProblemEditor

descripcion

It's the same class, bur now extends of NewProblemEditor.

UserProblemEditor

descripcion

The new view, we can say that is a version of the current ProblemEditor, incorporating new concepts of change to facilitate interaction with the user. In the next section we explain step by step all the differences that have this GUI.

The UserProblemEditor

Attachments