1 / 214

Internetes alkalmazásfejlesztés

Internetes alkalmazásfejlesztés. Endrődi Tamás. HTML alapok. Alap HTML tagok (1). HTML konténer tagok Karakter formázó HTML tagok Sorformázó HTML tagok P H1, H2, stb. BR, NOBR PRE CENTER. 1.1. 1.2. 1.3. 1.4. 1.5. 1.6. Alap HTML tagok (2). Kép (IMG) Hiperhivatkozás (A)

ajaxe
Download Presentation

Internetes alkalmazásfejlesztés

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internetes alkalmazásfejlesztés Endrődi Tamás

  2. HTML alapok

  3. Alap HTML tagok (1) • HTML konténer tagok • Karakter formázó HTML tagok • Sorformázó HTML tagok • P • H1, H2, stb. • BR, NOBR • PRE • CENTER 1.1 1.2 1.3 1.4 1.5 1.6

  4. Alap HTML tagok (2) • Kép (IMG) • Hiperhivatkozás (A) • A HREF attribútum megadásának lehetőségei • Listák létrehozása • Rendezetlen lista (UL) • Rendezett, sorszámozott lista (OL) • Lista elemek (LI) 1.7 1.8 1.9

  5. HTML tábla 1.10 • TABLE elem • Táblasorok (TR) • Táblacellák (TD) • Táblázatok formázásának attribútumai • BORDER • CELLSPACING, CELLPADING • BGCOLOR, BACKGROUND • COLSPAN, ROWSPAN • HTML táblák egymásba ágyazása • Összetett Web lap megjelenítése táblaként 1.11 1.12 1.13 1.14

  6. HTML keret (Frame) • Frame és Frameset szerepe • COLS attribútum • In-line keretek alkalmazása (IFRAME) • Frameset-ek egymásba ágyazása • Navigálás a keretek között • TARGET attribútum 1.15 1.16 1.17

  7. További HTML elemek • COMMENT • FIELDSET és LEGEND • MAP • SPAN és DIV • XMP • A karakter egyedek használata 1.18 1.19 1.20 1.21 1.22 1.23

  8. Cascading Style Sheet

  9. A CSS előnyei • A tartalom szétválasztható a formától • Önállóan tervezhető és újrafelhasználható • A régi technikában számos szöveg grafikaként jelent meg, ami lassú • A CSS csak egyszer megy le a kliens gépre, és nem laponként külön-külön • Egységes megjelenés • Külön CSS lehet a képernyőre, és külön a nyomtatóra.

  10. CSS vezérlés • Láthatóság (visibility) • Megjelenítés (Display) • pl. reflow (maradjon-e üres hely, vagy az alatta lévők feljebb kússzanak) • Z-sorrend (Z order) • Az adott elem relatív mélysége • Web Embedding Font Tool (WEFT) • Csak az IE használja

  11. CSS szabályok definiálása • Szintaktika: • szabályhatáskör {attr:érték;attr:érték;…} • Tag példa: • body {font-family:ariel;font-size:10;} • Osztály példa: • .error {font-color:red} • A pont (.) jelenti azt, hogy ez egy osztályszabály

  12. CSS használata 2.1 • Magába a tagba is rakható stílus információ • Kivételes körülmények között • Stíluslap szintaktikája • Globális stíluslap a /HEAD szekcióban • HTML LINK tag használata • Az elsődlegeshez ezt célszerű használni • Osztályok • Stílus osztályok • Globális osztályok • Pszeudoosztályok 2.2 2.3 7.6 2.4 2.5 2.6

  13. DHTML alapok

  14. A DHTML komponensei (1) • Document Object Model • Objektumok, tulajdonságok, metódusok, események • Dynamic Styles • Dinamikus stílus beállítás lehetősége • A stílus élesen elválik a tartalomtól • Dynamic Positioning • A betöltést követő helyváltoztatás lehetőségét nyújtja. • Animáció készítésének lehetősége.

  15. A DHTML komponensei (2) • Dynamic Contect • A tartalom dinamikus változtathatósága • Elemek beillesztése, illetve törlése • Szöveg és egyéb attribútumok módosítása • Data binding • Adathordozó vezérlőelemek beépíthetősége

  16. Kliensoldali script alkalmazása • HTML komment technikát kell használni • <SCRIPT Language=VBScript><!-- Function Valami() …….. End--></SCRIPT> • Ha a böngésző nem ért VB-ül, akkor ignorálja, mert kommentnek tekinti. 5.2 5.3

  17. VBScript szabályok • VBScript-nél csak Variant adattípus van. • A típust a VarType fg-vel lehet lekérdezni. • Nem lehet konstans deklarálni. • Automation objektumok: • Dictionary, Err, FileSystemObject, TextStream • Szerveroldali VBScript-ben tilosak: • InputBox, MsgBox, GetObject függvények

  18. Jscript szabályok • Java-tól függetlenül jött létre • Pontosvessző az utasítások végén • Nem kötelező használni! • Kommentjelek ( //, illetve /*…..*/ ) • Változódeklaráció • var Kakukk • Érzékeny a kisbetű-nagybetű különbségre! • A deklaráció nem kötelező.

  19. Jscript műveletek • Boole algebrai műveletek: • && AND • | | OR • ! NOT • Matematikai műveletek: • A Math objektum metódusai: • x = Math.PI • y = Math.LN10 • z = Math.max(num1, num2) • String változók objektumként működnek

  20. Jscript vezérlőszerkezetek if (feltétel { // igaz ág }else { // hamis ág } For (x=1;x<=10;x++) { // ciklusmag }

  21. Kliensoldali programozás elemei • Az IIS simán leküldi a böngészőnek • Tipikusan UI elemek • ActiveX control és Java applet • ActiveX control • ToolBox-ból kényelmesen felrakható • Bármit megtehet a user gépén • A VBScript és a Jscript nem tudott a file rendszerbe belenyúlni • Certificate és Authenticode mechanizmus • Eldöntheti a user, hogy letölti vagy sem.

  22. ActiveX control • Szintaktika: • <OBJECT classid="clsid:registryszám" id=név <PARAM NAME="Year" VALUE="1999"> …..</OBJECT> • A classid egy Global Unique Identifier (GUID) • az időből (msec), és • az aktuális gép infoból csinál egy hexa számot • A PARAM tagban lehet serverscript is, pl: • <PARAM NAME <%=változó%>….. • CodeBase tulajdonság adja meg a control URL-jét • Akkor kell, ha le kellene tölteni, mert nincs a user gépén.

  23. Java appletek • Szintaktika: • <APPLET code=valami.class id=kutya <PARAM NAME=Ez VALUE="Az">/APPLET> • Toolbox-ra felrakható, és újrafelhasználható • A class file gépfüggetlen byte kódból áll. • .java file-ból generálja a Java compiler • Egy applet több .class-ból is állhat. • Intranet=ActiveX, Internet=Applet • A legjobb a sima HTML(?!)

  24. window objektum • Metódusok • open, showModelDialog, showModelessDialog, close, navigate • Tulajdonságok • document, event, history, location, navigator • Események • onload, onbeforeunload, onunload, onfocus, onblur • Kollekció • frames

  25. document objektum • Metódusok • open, write, close, createElement, insertAdjacentElement, insertBefore • Tulajdonságok • body, cookie, title • Események • onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx • Kollekciók • all, frames, forms 5.4

  26. További DHTML objektumok • navigator objektum • Csak tulajdonságadatai vannak • event objektum • srcElement, type, propertyName, fromElement, toElement, returnValue tulajdonságok • A cancelBubble szerepe • form objektum • A document.forms kollekcióból származtatható 5.5 5.6

  27. Behavior • Script encapsulation (component) • Szintaktikai alakja: • {behavior:string}, ahol a string lehet: • "url(a1.htc) url(a2.htc)…" • "url(#objID)" • "url(#default# név)" • Dinamikus hozzárendelés is használható: • addBehavior(), removeBehavior() • Elkészítés eszköze: • VBScript, Jscript, Windows Scripting Components (WSC) vagy C++

  28. HTC referencia (1) • ATTACH (eseménykezelő hozzárendelése) • <PUBLIC:ATTACH EVENT=sNev FOR=document | element | window ONEVENT=sFg ID=sID/> • METHOD (dokumentumból hívható) • <PUBLIC:METHOD NAME=sNev INTERNALNAME=sIntNev ID=sID/> • PROPERTY (dokumentumban használható) • <PUBLIC:PROPERTY NAME=sNév ID=sId INTERNALNAME=sIntNév GET=sFg1 PUT=sFg2 PERSIST=bPersist VALUE=vKezdőÉrték/>

  29. HTC referencia (2) • EVENT (a dokumentumnál lép fel) • <PUBLIC:EVENT NAME=sNév ID=sID/> • COMPONENT (a legkülső konténer) • <PUBLIC:COMPONENT NAME=sNev ID=sID URN=sURN>….</PUBLIC:COMPONENT> • element objektum • A komponensen belül az elem elérésére szolgál • createEventObject és fire metódusok

  30. HTC referencia (3) • Speciális behavior események • ondocumentready • Amikor a dokumentum ellenőrzött (parsed) • oncontentready • Az adott elem ellenőrzött (parsed) • ondetach • Amikor az elemről leszedtük a behavior-t (pl. egy removeBehavior metódussal vagy az ablak bezárásával)

  31. HTC referencia (4) • Fontos tulajdonságadatok • style.behavior • Így lehet hozzáférni a behavior-hoz. • behaviorUrns • Az adott elemhez rendelt behavior-ok URN-jeinek kollekciója • document.all.urns("x") • Azokat az elemeket adja vissza, amelyekhez az adott behavior-t rendeltük. • scopeName • A namespace-t adja vissza (XMLNS:név) • tagURN • A namespace helyettesítő értékét adja vissza (XMLNS:név="http:…")

  32. Default Behavior elemek • Multimédia elemek • img, anim, animation, audio, video, media, seq, time, par • clientCaps (információ a böngészőről) • download (egy letöltés végigvitele) • startDownload metódussal • anchor, httpFolder (folder nézet megjelenítése)

  33. Perzisztencia • Előnyei • Keresésnél megmarad a régi keresőkifejezés • A fastruktúra úgy jön be, ahogy hagytuk • Űrlap adatokat nem kell ide-oda cipelni, amíg nincs minden kitöltve • Vásárlókosárnál az eddig bejelöltek megmaradnak. • userData • Jobb, mint a cookie, mivel session-ök közt is működik (64K/lap) • save és load metódus • Tárolás: XML Store • saveFavorite, saveHistory, saveSnapshot

  34. Custom Tag használata • Példa: • <HTML XMLNS:SAJAT><STYLE> @media all {SAJAT\: IGAZIT { text-align:justify; width:500} }</STYLE>…<SAJAT:IGAZIT>….….</SAJAT:IGAZIT>

  35. Dinamikus tulajdonságok • Sok helyen a scriptek helyett elég egy képlet • Excel-szerű táblázat automatikusan frissülő összesen cellával. • Elem pozíciója az egértől függ. (drag & drop) • Időzített elemmozgatás valósítható meg • Metódusok • object.setExpression(sProperty,sKif,sNyelv) • bSiker=object.removeExpression(sProperty) • document.recalc() implicit függőségeknél • vKif=object.getExpression(sProperty)

  36. Dinamikus tartalom • sajatH1.innerText = "Új szöveg" • sajatH1.innerHTML = "Új <I>szöveg</I>" • sajatH1.outerText = "Valami" • sajatH1.outerHTML="<SPAN>..</SPAN>" • Ez lecseréli a <H1> tagot <SPAN>-re • Figyelem! Csak a window.onload után!

  37. Mouse Capture • Adott objektumhoz rendelhetjük az egéresemények kezelését • object.setCapture • Ha pl. az object egy DIV, akkor a benne lévő összes elemnél a DIV-beli eseménykezelés él. • object.releaseCapture • Megszüntetés (fellép az onlosecapture esemény) • Példa: • Dinamikus pop-up menü készíthető, ami mindig az aktuális objektum tulajdonságadatait mutatja • Kétszintű lebomló menü is előállítható

  38. Adatkezelés a DHTML segítségével

  39. DHTML adatbázis komponensek • Data Source Objects • Az adatot biztosítja a Web lap számára • Data Consumers • Az adat megjelenítéséről gondoskodik • Binding Agent • A szinkronizálásért felelős • Table repetition agent • A szinkronizálásért felelős

  40. DHTML adat architektúra

  41. DSO objektumok • Tabular Data Control (TDC) • Remote Data Services (RDS) • Régebben ADC volt a neve) • JDBC applet • XML adatforrás objektum • MSHTML adatforrás objektum

  42. A DSO feladatai és működése • Feladatok: • Meghatározza hogyan néz ki az adat • Lehozza az adatot a Web lapra • Manipulál az adattal • Visszajuttatja a módosításokat a szerverre. • Aszinkron vagy szinkron transzport. • Az aszinkron a javasolt. • OLE DB API-t kell tudni az adatszolgáltatónak.

  43. Tabular Data Control (TDC) • ActiveX control az IE 4.0-ban • Mezőszeparátorokkal elválasztott mezők és sorszeparátorokkal elválasztott sorok. • A legtöbb adatbázis-kezelő képes ilyet előállítani. • UseHeader=True • Az első sor a mezőinfot tartalmazza

  44. A TDC tulajdonságai és metódusai • Tulajdonságok • DataURLAz adatfile URL címe. • FieldDelimA vessző az alapértelmezés. • RowDelimAz NL az alapértelmezés. • SortPontosvesszőkkel elválasztott mezőlista. A mezőnév előtt + vagy - állhat. • FilterSzűrőfeltétel. • Metódusok • ResetVégrehajtja a rendezést és a szűrést.

  45. Remote Data Service (RDS) • Komplexebb és robosztusabb, mint a TDC. • Data-marshalling (Spec. MIME formátum) • Kétirányú kapcsolat az adatbáziskezelőkkel. • Komponensek • RDS.DataControl (kliensoldalon) • RDS.DataFactory (szerveroldalon) • SubmitChanges(RDS.DataControl metódusa) • A módosítások élesítése. • Csak a módosított rekordok mennek át a szerverre.

  46. Remote Data Service (2) • A kliensoldalon a következő szükséges: <OBJECT id=valami classid="clsid:…….."><PARAM name="Server" value="http://X.Y.hu"><PARAM name="Connect" value="DSN=kakukk"><PARAM name="SQL" value="select * from g"> </OBJECT> • Protokollok: • HTTP • HTTPS • DCOM • in-process COM

  47. XML adatforrás objektum • XML = Extensible Markup Language • Az adatformátum leírását tartalmazza. • Bármilyen TAG használható, nemcsak a normál HTML tagok. • XML Parser kell az értelmezéshez. • (XMLDSO.class nevű JAVA)

  48. Data Consumers • Adatfogyasztó elemek • Normál HTML elemek • ActiveX-ek • Java appletek • Attribútumok • DATASRCAz adatelem (pl. TDC) ID-je • DATAFLDMelyik mezőhöz kapcsoljuk az adott HTML elemet. • DATAFORMATAS"text" vagy "html" lehet. • DATAPAGESIZEHány sor jelenjen meg egyszerre.

More Related