A táblázathoz kapcsolódó helpek és tutorialok itt alapvetően még a flash elgondoláshoz vannak rendelve, javascriptes metódushoz megoldások: http://www.activewidgets.com/

Táblázat prioritási sorrend

Azzal kapcsolatban, hogy a személyek admin-táblázatában milyen adatokhoz tartozó oszlopokat fogunk megjeleníteni lásd a csatolt oszlopbeosztás adminban4.xls nevű fájlt.A publikus felületen kicsit más lesz az oszlopkiosztás (de persze ez is állítható a user által).

A táblázat tervezett képességeit két csoportba osztottuk prioritási szempontból, az első csoport az elsődleges prioritású, a második csoportba tartoznak a kiegészítő feature-ök. Az első csoportba, mint majd látni fogod, alapvetően a Cell renderer által megadandó jellemzők és legfontosabb táblázatkezelési dolgok kerültek.

maga a táblázat:

1

1. CSOPORT_____________________________________________

1. Adatok behívása a szimpla flash-táblába

Egyszerű alap táblázat beillesztéseEz nagyjából oké, a mostani táblát az alábbi címen lehet megnézni: http://emir.elte.hu/~garipeti/emir_teszt/ itt ugyanúgy kell belépni, mint egyébként, majd a tablazat.html tagot kell beírni az URL cím végére: http://emir.elte.hu/~garipeti/emir_teszt/tablazat.html ide az adatbázis egy kis darabja van csak bvetöltve a flash-tábla teszteléséhez

Ami az alapkiszerelésből még hiányzik: vízszintes görgetősáv beillesztése,

2. táblázat és cellaszélesség

el kellene érni, hogy egy bizonyos táblázatszélességig (pl. 750-800 pixel illetve ideális esetben a böngésző által enegedett szélességig) szabadon nyújtózkodhasson a táblázat.A flash egyik hátrányaként szokták emlegetni, hogy csak fix táblaszélességgel lehet dolgozni benne, én azonban találtam az oldal szélességéhez alkalmazkodó működő megoldásokat, pl. itt: http://www.asfusion.com/blog/entry/mxna-reader-built-with-cfforms

A cellák szélességéhez egy fix értéket gondoltunk megadni, amin belül wordwrap funkció törné több sorba a szöveget

gondolom itt alapvetően a következők játszanak: http://www.tufat.com/demo/datagrid/flash7/index.html //Word wrap / autosize. "headerWordWrap" allows the text within the header to wrap. "autoSizeRows" allows the cell text to wrap (in a manner similar to how HTML text wraps in tags).

macromedia cellrenderer: http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002108.html

karakterek száma/sor megoldás: http://www.bgxcomponents.com/flashWordWrap.htm

plussz egy post: http://www.flashmx2004.com/forums/lofiversion/index.php/t7746.html

3. linkek hozzárendelése a celladatokhoz

hogy mint a jelenlegi táblázatban (http://emir.elte.hu/~garipeti/emir/szemelyek.php) be lehessen lépni az egyes emberek adatlapjára

2

4. oszlopok hozzáadása illetve elvétele

Egy listából kiválaszthatja, hogy milyen oszlopokat kíván a meglevőekhez hozzáadni, ill. elvenni (ezt egy külön ablakban tehetné meg pl. checkboxok kipipálásával)

5. magyar karakterek helyes megjelenítése a fejlécekben

feltöltő, szülidő stb. rendes magyar karakterekkel legyen kiírva (gondolom itt a programozó egyik feladata, hogy jól adja át a táblázatnak az UTF8-ban a karaktereket)

6. képek, ikonok beillesztése a cellákba

képek a cellában lásd pl.: http://philflash.inway.fr/htmlrdtip1/index.html

7. vezérlők: checkbox, lenyílómenü, rádiógomb stb. beillesztése a cellákba

checkbox: http://www.bgxcomponents.com/flexibleListExamples.htm http://www.flash-db.com/Tutorials/cellrenderer/

másik példa lenyílóra és checkboxra: http://www.merhl.com/webdevblog/index.php?itemid=3&catid=3 leírása: http://merhl.com/webdevblog/index.php?itemid=18

checkbox jól jön a sorok kijelöléséhez, illetve a vezérlők jól használhatók a név feltöltésnél is:

8. cellaadatok formázása

dőlt, félkövér stb. betűszín, betűtípus megadásának lehetősége, szöveg balra, jobbra, középre zárásapéldául: http://philflash.inway.fr/htmlrdtip1/index.html ill.: http://www.tufat.com/demo/datagrid/flash7/index.html macromedia leírás: http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002231.html

9. többelemű cellák rendezése

a) az elemek ABC-sorba rendezése egy cellán belül, pl:

személy neve foglalkozásADY Endre költőKOSZTOLÁNYI Dezső író,

költő, műfordító

PETŐFI Sándor költőműfordítóPINTER, Harold drámaíró

3

b) többelemű cellák több sorba „szétdobva” rendezése (pluszban ha pl. foglalkozás szerint rendez, egy foglakozáson belül a nevek legyenek ABC-rendbe, tehát a sorrendben az író Beckett legyen előrébb mint a szintén író Kosztolányi)

foglalkozás szerint rendezve külön sorokba szétdobva a fenti többelemű cella:személy neve foglalkozásBECKETT, Samuel íróKOSZTOLÁNYI Dezső íróJÓZSEF Attila költőKOSZTOLÁNYI Dezső költőPETŐFI Sándor költőKOSZTOLÁNYI Dezső műfordító

10. magyar és külföldi nevek megjelenítési módja a névlistában

a Filmvilághoz hasonlóan a magyar nevek simán jelenjenek meg, az angol sorrendű neveknél pedig elöl álljon a vezetéknév majd után jöjjön vesszővel elválasztva a keresztnév (plusszban a vezetékneveket a táblázatban szedjük kiskapitálissal):

KOVÁCS Péter JánosPETŐFI SándorSMITH, Peter JohnWATSON, Tom

(Nem tudom, hogy ez a táblázati dolgokhoz vagy inkább a pogramozóhoz tartozik, biztonság kedvéért azért neked is ideírom)

11.táblázatban sorszámok feltüntetése

– vegyünk fel sorszámot is a névlistához, hogy lássuk, hány feltöltött embernél tartunk:1. Samuel BECKETT

2. KOSZTOLÁNYI Dezső3. PETŐFI Sándorstb.

12.szerkeszthető/zárolt állapot jelölése

valahogy jelölni, szerkeszthető-e a táblázat adott cellájában lévő elem (pl. a cella jobb felső sarkában lévő kis színes háromszöggel mint az Excelben)

13.görgetés oszlopon való kattintás nélkül is

soxor elég frusztráló, hogy flashben csak azután lehet görgetni a táblázatot, hogy az ember ráklikkelt. A cél az lenne, hogy ne kelljen rákattintani a táblázatra ahhoz, hogy görgetni lehessen, elég legyen, hogy fölötte van az egér.

4

ha minden igaz erről szól az alábbi link http://asji-lab.blogspot.com/ „scrollRect : easy 'masking'” postja, vagy legalábbis valamilyen hasonló görgetést segítő megoldásról

itt leginkább arról van szó, hogy ne kelljen a táblázatra kattintani ahhoz, hogy az „fókuszban” legyen, elég legyen a táblázat fölé vinni az egeret

14.Táblázat betűméretének állítása

– a táblázat betűméretének állíthatóvá tétele, hogy a user gazdálkodhasson a rendelkezésére álló hellyel

2. CSOPORT_____________________________________________

15. lockolható sorba állítható oszloprendezés

lockolt oszlopnál a következő oszlopra kattintás az addigi sorbarendezésen belül rendez sorba(a táblázatban ezt jelöli a kis piros lakat, a mellette levő szám azt mutatja, hogy az adott oszlop hányadik a sorba rendezésben)

16.drag and drop módon átrendezhető oszlopsorrend

az oszlop a fejléc megfogásával a kívánt helyre húzható (erre még nem találtam használható leírást, de úgy tűnik, megoldható, ráadásul egy nagyon fontos és hálás funkció)

17.egyszerre több sor kijelölésének lehetősége

itt az okosok azt javasolják, hogy a Ctrl gombot lenyomva tartó multiple select megoldás helyett jobb inkább a checkboxos kijelölést alkalmazni, lásd: http://c82.net/article.php?ID=25 példa: http://c82.net/samples/checklist-samples.html lásd még: http://www.bgxcomponents.com/flexibleListExamples.htm

18.táblázat szűrés lenyílómenüvel ill. gombbal

lenyílómenüvel: http://philflash.inway.fr/dgcbfilter/dgcbfilter.html gombbal: http://philflash.inway.fr/dgfilter/dgfilter.html

19.mouse overre megjelenő tooltip alapadatokkal, képpel (bár lehet, a fényképes névjegyet a sok előre feltöltendő adat miatt jobb tán külön kis info-ablakban nyitni – lásd köv. pontot – s a tooltipet meghagyni súgó szerepben)

az általam eddig talált legjobb tooltip készítő alkalmazás ez: http://www.mojavelinux.com/projects/domtooltip/

5

tooltip flashben: http://www.bgxcomponents.com/tooltipExamples.htm http://www.bgxcomponents.com/tooltip.htm

20.Felbukkanó ablak a fényképes névjegy-infóhoz

popo up jellegű ablak flashbe ágyazott javascripttel: http://www.flash-db.com/PopUp/JavaScriptPopUp.php

21.helyi menü (menüpontok pl: keresés az adott elemre - lefúrás, ugrás az elem adatlapjára, az adott elem módosítása stb.)

egy megoldás többszintű menüvel: http://www.brianshih.com/wp-content/images/library_context_menu.png

adatmódosítás a cellában: http://www.flashsupport.com/bonus/datagrid/datagrid_advanced.html

ezen a dolgon még kicsit agyalni kell, valószínűleg az a szerencsésebb megoldás, ha a bal egérgombbal jön elő egy ilyesmi menü, ahol meghatározhatja, mit akar tenni (de kaphat esetleg a bal egérgomb egy meghatározott alapművelet és esetleg lehet játszani a jobb egérgombos kontext menüvel is lásd: http://www.webwasp.co.uk/tutorials/b16-right-click/context-menu-tute.php éshttp://www.actionscripts.org/tutorials/intermediate/context_menu/index.shtml bár ez a windows szmötyi persze sokkal randább, de lehet neki esetleg hasznos funkciót találni

22.táblázat beállításai

táblázat beállításai link – a táblázat tulajdonságait lehet beállítani egy vezérlőfelületen keresztül, saját beállításokat elmenteni

23.táblázat keretéhez tartozó dolgok

keresőkifejezés kiírása találatok számának kiírása találatszám/oldal beállításának lehetősége találati listák kedvencekbe mentése (mint a Filmvilágnál) (drag and rop kedvencekbe

húzás: http://www.asfusion.com/mxna/ találatok léptetése (mint a Filmvilágnál)

szűrés bal menüben megadható kategóriák szerint, valamint lenyílóval és checkbox segítségével: http://www.asfusion.com/mxna/

6

24.flash táblázat kinyomtatása

http://philflash.inway.fr/dgprint/index.html

http://www.bgxcomponents.com/flashPrintDatagrid.htm

http://www.macromedia.com/cfusion/exchange/index.cfm?view=sn110#loc=en_us&view=sn111&viewName=Flash%20Extension&authorid=60639501&page=0&scrollPos=0&subcatid=0&snid=sn111&itemnumber=3&extid=1011922&catid=0

25.hierarchikus alábontás

egyes sorok alatt megjeleníthető kibontások 2-3 szintigDeclarative relationshierarchypéldául: http://www.telerik.com/r.a.d.controls/Grid/Examples/Hierarchy/DeclarativeRelations/DefaultCS.aspx és http://www.telerik.com/r.a.d.controls/Grid/Examples/Hierarchy/ThreeLevel/DefaultCS.aspx valamint: http://www.telerik.com/r.a.d.controls/Grid/Examples/Hierarchy/TwoTablesAtLevel/DefaultCS.aspx

ezeknék egy elég bonyolult nestelt beépülő altáblázattal van ez megoldva, ami elég macerás, valószínűleg egyszerűbb megoldani egy afféle virtuális alábontással, ahol egyszerűen új sorok szúródnak egy megadott adott sor után, mint pl. az iTunes szoftverének esetében (http://www.apple.com/itunes/ az átmeneti munkadesignhoz pl. ebből koppintottunk több elemet), ahol bal oldalon a „radio” gomb választásánál megjelennek a csoportba rendezett adók, majd egyiket kiválasztva az alábontás:

7

26.rögzíthető fejléc illetve bal oldali oszlop

példa: http://www.richinternetapps.com/archives/000101.html (ez inkább elvi lehetőség, valószínűleg nem fogjuk hazsnálni, meg elég macerás is az egymás mellé rakott két szinkronizált táblázattal)

27.összeolvasztott cellák

Merge headers

pl.: http://www.penguinblotter.com/colspan.html

esetleg kvázi módon trükkel http://www.tufat.com/demo/datagrid/flash7/index.html //Hide header separator. Allows the header separator to be hidden for any column (the small bar which separates the headers).myGrid.getColumnAt(1).setStyleProperty( "showHeaderSeparator", false );

__________________________________________________

8

egyéb érdekességek

könyvtárfa beépítésehttp://philflash.inway.fr/treeedrd/treeedrd.html

kijelölési terület egérrellásd: http://www.telerik.com/Default.aspx?PageId=2212

Általános flash problémák kiküszöböléselásd a a flash or no flash postot: http://asji-lab.blogspot.com/

linkelés és back gomb: http://mannu.livejournal.com/263246.html bookmark flashben: http://www.klynch.com/apps/flashlinking/index.html#id=1

esetleg érdekes lehet actionscripthez: Using asfunction in an UIComponent like TextArea http://www.bgxcomponents.com/flashAsfunctionTextArea.htm

több sor kijelölése és együttes rendezésehttp://webmail.mbn.ch/table/dyntable.php

sor és cella kiválasztás eltérő színnelhttp://www.activewidgets.com/grid.howto.style.columns/mouseover.html

szerkesztés a cellában parancsikonnal: http://www.telerik.com/r.a.d.controls/Grid/Examples/Programming/CommandItem/DefaultCS.aspx

csoportosítás design: http://www.telerik.com/r.a.d.controls/Grid/Examples/GroupBy/OutlookStyle/DefaultCS.aspx

beépített adatmódosító: http://www.telerik.com/r.a.d.controls/Grid/Examples/DataEditing/UserControlAlternative/DefaultCS.aspx http://www.telerik.com/r.a.d.controls/Grid/Examples/Styles/EditRowStyle/DefaultCS.aspx

némi háttér:AJAX és FLASH előnyök hátrányokhttp://www.jonathanboutelle.com/mt/archives/2005/03/flash_rias_vs_j.html

9