Skip to content

GhoUl

A Cubus Sapiens oldal

Archívum

Címke: vizualizáció

Úgy néz ki, egyelőre Balage Debug Visualisation projektje még fut egy darabig, nem ért véget azzal, hogy megkapta rá a jegyét. Nemrég volt egy újabb release, most pedig én egy régi ígéretemnek tettem eleget, és készítettem hozzá egy bemutató videót.

A videó nagyon egyszerű: megmutatom, hogy egy komplex debug eljárás esetén (hiszen egy másik Eclipse példányban futtatott plugin projektet tesztelek vele) hogyan használható ez a plugin.

Mindenesetre jöjjön a lényeg:

Megfelelő igény esetén esetleg arról is fogok beszélni, hogy hogyan készült a videó – most csak annyit mondanék róla, hogy teljesen nyílt szoftverek felhasználásával készült – eltekintve a youtube felületén hozzáadott annotációktól.

Ami viszont vicces volt, hogy feltölteni macerás: a fájl lassan töltődik fel, és időnként megszakadt közben a net – ebben az esetben pedig az AJAX-os feltöltő script végtelen ciklusba került, és nem töltött fel semmit, de nem is vette észre, hogy vége a dalnak. Talán majd egyszer ezt is javítják (vagy nekem javul meg a netem :D ).

Aki figyelemmel kisérte a nem rég [[Debug vizualizáció Eclipse-hez|bejelentett]] projektet, az már tudhat róla, hogy pár hónapja működik egy eclipse update site a honlapon. Az említett projekt [[http://code.google.com/p/debugvisualisation/|honlapján]] egy ideje már bejelentettük a létezését, de az itteni kihirdetés idő és kedv hiányában késett egy kicsit.

Tehát a lényeg: az eclipse menüben Help/Software Updates../Available Software/Add Site..: http://eclipse.cubussapiens.hu

Jelenleg egyetlen feature található rajta, de ahogy az időnk engedi, ez a kör bővülhet. Addig is használjátok egészséggel ezt az egyet, és nyugodtan küldjetek hibajelzést/kivánságot a projekt oldalára.

Találtam egy érdekes szolgáltatást: a [[http://www.wordle.net]] címen található Java alkalmazás egy különféle szavakat jelenít meg egymás mellett. Például egy feltöltött szöveg szavait, a [[http://www.delicious.com|Delicious ]] szolgáltatás címkéit, vagy egy szabadon választott, RSS-képes oldal jellemző kifejezéseit.

Nem álltam meg, és előállítottam az oldal jellemző listáját. Íme:
Szólista kifejtve a síkban

Más oldala hogyan néz ki?

Kicsit féltem a feladattól, mikor Stampie előállt az ötletével, hogy mit adjak be házi feladatnak Nyilt Fejlesztőrendszerekre. Sőt, akkor ő is csak viccelt vele. Akkor egyikünk se gondolta volna, hogy ennyire jól fog elsülni. A néhány hetes projekt eredménye egy eclipse nézet, ami a debug folyamatban az aktuálisan elérhető változókat jeleníti meg egy gráfban. Ehhez a Zest keretrendszert használtam, ami egy az egyben megoldja a gráf megjelenítését, és keretrendszert ad a csomópontok automatikus elrendezéséhez. A feladat innentől csak annyi, hogy összekanalazzuk a debug folyamatból az adatokat és a megfelelő formában beleszórjuk egy Zest megjelenítőbe.

Sokáig nem tudtam hogy álljak neki, hetekig bogarásztam az eclipse forrását, mire megtaláltam hogyan is juthatok hozzá a megfelelő adatokhoz. A megoldás végül is egyszerűnek bizonyult. Eclipse-ben a debug folyamat diszkrét lépésekre oszlik, mint például indítás, breakpointhoz érkezés, léptetés, folyamat befejezése, stb.. Minden lépés végén triggerelődik egy esemény a folyamat állásáról, ezt kell figyelni:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class DebugContextListener implements IDebugContextListener {

public void debugContextChanged(DebugContextEvent event) {
if ((event.getFlags() & DebugContextEvent.ACTIVATED) > 0) {
contextActivated(event.getContext());
}
}

private void contextActivated(ISelection context) {
if (context instanceof StructuredSelection){
Object data = ((StructuredSelection) context).getFirstElement();
if (data instanceof IStackFrame) {
//itt megkaptuk a StackFrame-et
}else{
//véget ért a debug folyamat
}
}
}

}

A Listener-t a következő módon tudjuk beregisztrálni a rendszerbe:

1
DebugUITools.getDebugContextManager().addDebugContextListener(new DebugContextListener(this));

A fent látható módon várhatunk a debug állapotot reprezentáló IStackFrame adatstruktúrára. A struktúra többek között tartalmazza a Variables nézetben is látható változókat. Ezeket a változókat akarjuk megjeleníteni. Érdemes leszögezni, hogy ebben a kontextusban a változók (IVariable) csak referenciák a tényleges adatokra (IValue). Tehát az értékek felelnek meg a csomópontoknak, míg a változók az éleknek. Ez alapján már igazán gyerekjáték volt az adatokat bedobálni egy Graph-ba (persze elöbb érdemes felépíteni egy modellt, amin megjelenítés elött elrendezhetünk pár hasznos műveletet, mint a gráf “lusta” megjelenítése, vagy a csomópontok szűrése). Ami további nehézséget okozott, az a Zest kritikán aluli dokumentáltsága, így többnyire csak próbálgatásokkal sikerült megértenem a működését.

Lényeg a lényegben, hogy ma (azaz már tegnap) elfogadták házi feladatként, és így terv szerint pár apró csiszolással kiadtam a 0.5.0 verziót. A projektnek létrehoztam egy oldalt a Google Code-on, onnan leszedhető a forrás is, egy telepíthető bináris csomag és további információk a projektről. Végezetűl egy kis felsorolás arról, hogy mit is tud a cucc, azaz fícsörz:

  • Változók és referenciék gráf alapú megjelenítése, a gráf automatikus elrendezése választható algoritmus alapján
  • A gráf lusta módon van megjelenítve, az egyes csomópontok gyermek-csomópontjai csak akkor jelennek meg, ha a felhasználó dupla kattintással kinyitja a csomópontot. A csomópontok hasonló módon be is zárhatóak
  • A gráf-rendező algoritmusok extension-point-on csatlakoznak a nézethez, ami lehetővé teszi, hogy bárki hozzácsatoljon egy saját, Zest-tel kompatibilis algoritmust.
  • A Zest-ben beépítetteken kívül csináltam egy szimulált hűtésen alapuló algoritmust is, ami ugyan lassú, de az esetek nagy hányadában jobb elrendezést biztosít, mint a többi.
  • Típusfüggő szűrést végzek a csomópontokon, így pl. egy ArrayList-nél csak a releváns gyermekelemek (A listában tárolt elemek) jelennek meg.
  • Természetesen a szűrők is extension-point-tal vannak csatlakoztatva, hogy ezen a ponton is tetszőlegesen kiegészíthető a cucc.

Még néhány link: