Right Said Fred (or was it Taz?)

Inre och yttre skönhet

Denna veckan har jag jobbat med både inre skönhet i applikationen i form av omstrukturering men även yttre skönhet i form av lite nytt gränssnitt. Själv så tycker jag att det blev lite bättre och lite renare samt enklare i gränssnittet. Så här blev resultatet:

Dessa saker har ändrats i gränssnittet:

• Mindre topbar
• Inga dropdowns
• Länk (gul) till ändra namn och ny grupp
• Ikon med länk till en hjälpsida
• Varje grupp har två stycken actions till höger, inställningar och ny scribble
• För chrome har nu alla textareaor css-regeln resize:none

Förutom detta så har jag då jobbat med lite omskrivningar av koden. Det jag har gjort är:

• Alla modeller är statiska
• Lyfte ur kod ifrån main_controller och skapade ett objekt för grupper

Kan tyckas som en kort lista men främst omskrivningarna tog sin tid som även gav fler fördelar – läs längre ner. Sedan spenderade jag 6 till 7 timmar att testa och försöka få ihop en fin lösning för att flytta en scribble mellan grupper men efter jag lagt ner så mycket tid så hade jag nästan en lösning fast det skulle ha tagit många timmar till för att slutföra så jag avbröt det och tog bort koden. Men om jag skulle implementera en sådan funktion så vet jag nu att då måste man skapa en egen drag’n'drop-funktionalitet med en trigger (dubbelklick eller shift-tangenten t.ex) för override med area-begränsningen (drag’n'drop endast inom gruppen)

Jag satt och testade om jag vid en override bara kunde ändra contraint som redan finns i jQuery Window-pluginet men detta fungerade inte alls. Den inställningen kan bara göras vid initiering och inte efteråt. Sedan satt jag även och testade med jQuery UI’s draggable och droppable men då fick jag problemet att draggable tog över drag’n'drop-funktionen så det inte blev någon begränsning inom gruppen. Det gick inte heller att skriver över specifika funktioner i draggable (drag, start, stop, create t.ex) så att den inte tog hand om drag’n'drop men då slutade droppable att fungera.

Så den lösning som jag kom en bra bit med var att ha egen drag’n'drop via DOM level 2  (kod ifrån en tidigare kurs så jag skrev inte allt ifrån noll) och sen måste man ha events som kan reagera eller beräkna när en scribble har släppts i en annan grupp. Ett alternativ kan eventuellt vara om man kan skapa ett skal för draggable (utan drag’n'drop dock) som är kompatibelt med droppable. Men som sagt; det skulle ha tagit minst lika lång tid till så jag la ner det p.g.a tidsbrist.

När jag skriver detta så trillar det ner en idé till.. om man använder draggable + droppable och sen implementerar man en egen constraint-funktion så man inte kan dra utanför en grupp – om man kan avbryta en drag’n'drop i en event i draggable förstås.

Omstruktureringen

Det blev väldigt många fördelar tycker jag med omstruktureringen och främst att lyfta ut koden för en grupp till ett eget objekt. Dessa förbättringar blev det:

• Ansvaret för en grupp ligger i ett eget objekt istället för i en controller
• Vid lägga till/ta bort grupp så ändras html-strukturen direkt istället för att rendera om alla grupper
• Lättare att implementera och hantera funktionaliteten för actions i en grupp
• Bättre koduppdelning för framtida utveckling
• Mindre databasanrop då rendering av ny grupp/ta bort grupp sker direkt i html-strukturen

Förutom dom punkterna så gjorde jag även så att då en ny grupp läggs till eller en grupp tas bort så centreras scribbles för dom andra grupperna.

Textareaor

Som jag nämde ovan så la jag till en css-regel så iaf chrome inte skulle automatiskt lägga till resize. Dock så är det en regel specifik för chrome så det är inte någon standard. Det kan vara intressant att skriva hur man löser en sådan sak och det jag fann så finns det främst två stycken lösningar. Den första är:

textarea {
     resize:none
 }

.. och som sagt; bara för chrome. Detta var som det jag valde därför att den andra lösningen skulle betyda att jag måste lägga till events då en scribble ändrar storlek och göra nya beräkningar. Så här ser den andra lösningen ut som är fullt css-kompatibel i alla webbläsare:

textarea {
   width:400px !important;
   min-width:400px !important;
   max-width:400px !important;
   height:400px !important;
   min-height:400px !important;
   max-height:400px !important;
 }

Som synes så specifierar man alltså bland annat min och max-höjd samt anger att reglerna är kritiska att följa (!important).

Tangentbordskommandon

Denna punkten tycker jag låter väldigt intressant och funderade på om det är nått som kan läggas till men sen kom jag fram till att det vore bara ett begränsat antal kommandon man kan lägga till på smidigt sätt så jag övergav den tanken. Om man skulle ha ett snabbkommando för settings i en grupp och då det är fler grupper; hur skulle man bygga snabbkommandon då?

Ajax back and forward

Även denna tycker jag låter väldigt intressant men framförallt nyttigt.. dock inte användbart i min applikationen därför att jag bara har en “sida” som allting lever på.

Dynamisk grafik

Detta är redan något som finns sen i implementationen och främst manipulering av html-dokumentet. Ett exempel är då jQuery UI dialog används så lägger jag in html-koden (en div-tagg) för dialogen i slutet av html-dokuemntet för att sedan låta pluginet sköta magin och göra det till en fin dialog. När användaren sedan är klar (ok eller cancel) så tas div-taggen med dialogen bort ifrån dokumentet.

Avslutning

Jag tycker själv det här projektet blev riktigt bra och med lite mer jobb så kommer jag definitivt att visa upp denna applikationen i min portfölj. Dessutom kan jag tänka mig att det är en användbar applikation i riktiga situationer och inte bara en skoluppgift.

Projektet kan beskådas här och koden finns här (deployment 1.0-mappen som är lite rensad från filer som inte behövs).

Tags: användargränssnitt, Javascript, javascriptmvc, textarea

This entry was posted on Friday, March 18th, 2011 at 12:16 am and is filed under RIA. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.