| 10 | | Both these templates have a container object with the id "moduleslot" where the Blocks are appended on creation. |
| 11 | | |
| 12 | | All div.block objects in this "moduleslot" can be dragged and dropped for manual arrangement, dragging only works from the title bar. |
| 13 | | |
| 14 | | The Blocks consist of a titlebar (used for minimizing, closing and drag&drop), a menu bar and a content area. |
| 15 | | |
| 16 | | Blocks are added to the moduleslot with the JS function "addBlock(url,id)" and minimized with "foldBlock(object)" (blocks.js). |
| 17 | | |
| 18 | | There are separate kinds of blocks for Tables, Views, Maps, searches etc., and they all should have an icon in the left corner of the title bar that identifies their content type. They all have their own template, JS file and stylesheet. |
| | 8 | All interaction with the mapping and database system works through these basic concepts. |
| | 9 | |
| 21 | | Most functionality of the GUI is implemented using [http://www.jquery.org jQuery] (v1.4), and to this point, the following plugins are also used: [http://p.sohei.org/jquery-plugins/clickmenu/ ClickMenu], [http://www.datatables.net/ datatables], [http://docs.jquery.com/Plugins/livequery liveQuery], [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ tooltip] . |
| | 12 | The GUI is implemented using [http://www.jquery.org jQuery] (v1.4), and to this point, the following plugins are also used: [http://p.sohei.org/jquery-plugins/clickmenu/ ClickMenu], [http://www.datatables.net/ datatables], [http://docs.jquery.com/Plugins/livequery liveQuery], [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ tooltip]. |
| 24 | | |
| 25 | | == Philosophy (old...) == |
| 26 | | The philosophy for the interface is as follows |
| 27 | | - conceptually separate objects (tables, views, maps, searches ...) get visually separate representations, for sakes of clear communication, called "'''blocks'''" |
| 28 | | - since it will not suffice to separately work with each "block" on it's own, the user must be able combine blocks in every imaginable way and number |
| 29 | | - the interface either visually or textually guides the user toward his own goal without intterrupting the workflow or visually distracting the user |
| 30 | | - Every block can be a starting point for the users work. |
| 31 | | - visual consistency ensures that the users knows what everything that is visually represented does, (in many cases) before even using it, and things that look the same should do the same thing |
| 32 | | - Limitations of the technology (backend) should be incorporated into the gui in a suggestive manner, in order to not create false expectations or misunderstandings |
| 33 | | [[br]] |
| 34 | | Until now, it seems the best ''approach'' to meet all these requirements is this: |
| 35 | | - The starting point for the user should always be the '''home environment''' - the page that comes up directly after login, from where the user can open and manage the different workspaces, communicate with other users etc. |
| 36 | | - The home environment should be a block on its own. |
| 37 | | - The whole workspace consists of a '''stack''' of blocks, compiled by the user during his work |
| 38 | | - blocks can be added to the stack, closed, minimized (hidden), manually arranged; the stacks should be persistent, even savable |
| 39 | | - Work done in one block - object type e.g. a View - that implies changes to another object - possibly of another object type, e.g. a Table - directs the user directly to its own, separate block (e.g. by opening it and/or scrolling down to it). [[br]] This ensures that the users know what they are doing (if one for example wanted to change data inside a View, the actual changes would have to be done to the Table since the View only assembles data from different Tables; hence it would make sense to open a new block for the affected Table underneath the View-block, and directly jump to the line and column to be changed, then let the user make the changes there, and on confirmation of the changes show what happened to the View) |
| 40 | | - A set of distinct, suggestive icons is used for the different object types and actions; text on buttons should be reduced to a minimum, graphical buttons with tooltip-text cause the least visual "white noise", especially compared to textual buttons. |
| 41 | | |
