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

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

Internetes alkalmazás rétegei

Háromrétegű Web architektúra

Internetes alkalmazásfejlesztés

3

Többrétegű architektúra példa


4

Thin/Thick-client Vékony kliens (Thin-client) – Böngésző-független – Sok forduló a Web szerver és a kliens gép között

Vastag kliens (Thick-client) – Böngésző-függő – Látványos Web-lapok – Gyors interaktív funkciók


5

Technológiai eligazodás Windows Forms Windows Presentation Foundation (WPF) WPF with Explorer (XBAP) WPF/E (Silverlight) ASP.NET ASP.NET with AJAX


6

Alkalmazásfejlesztési csapat tagjai Web fejlesztő Programozó HTML szerző Grafikus Web adminisztrátor Adatbázis adminisztrátor


7

HTML alapok összefoglalása

Alap HTML tagok (1) HTML konténer tagok Karakter formázó HTML tagok Sorformázó HTML tagok 1.2 – – – – –

P H1, H2, stb. BR, NOBR PRE CENTER

1.1

1.3

1.4 1.5 1.6


9

Alap HTML tagok (2) Kép (IMG) 1.7 Hiperhivatkozás (A) – A HREF attribútum megadásának lehetőségei

Listák létrehozása – Rendezetlen lista (UL) 1.8 – Rendezett, sorszámozott lista (OL) – Lista elemek (LI)


1.9

10

HTML tábla TABLE elem

1.10

– Táblasorok (TR) – Táblacellák (TD)

Táblázatok formázásának attribútumai – – – –

BORDER CELLSPACING, CELLPADING 1.11 BGCOLOR, BACKGROUND 1.12 COLSPAN, ROWSPAN 1.13

HTML táblák egymásba ágyazása – Összetett Web lap megjelenítése táblaként 1.14 Internetes alkalmazásfejlesztés

11

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


12

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


1.23

13

Cascading Style Sheet

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. Internetes alkalmazásfejlesztés

15

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


16

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

Elem példa: – #elem {font-color:green} Internetes alkalmazásfejlesztés

17

CSS használata Magába a tagba is rakható stílus információ

2.1

– Kivételes körülmények között

Stíluslap szintaktikája 2.2 Globális stíluslap a /HEAD szekcióban HTML LINK tag használata 7.6

2.3

– Az elsődlegeshez ezt célszerű használni

Osztályok – Stílus osztályok – Globális osztályok – Pszeudoosztályok

2.4 2.5 2.6


18


19

DHTML alapok

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. Internetes alkalmazásfejlesztés

21

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


22


23

Kliensoldali script alkalmazása HTML komment technikát lehet használni – <SCRIPT Language=JScript>


24

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


25

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ő.


26

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 Internetes alkalmazásfejlesztés

27

Jscript vezérlőszerkezetek if (feltétel { // igaz ág } else { // hamis ág }

for (x=1;x<=10;x++) { // ciklusmag }


28

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. Internetes alkalmazásfejlesztés

29

ActiveX control Szintaktika: • • 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: – …..

• CodeBase tulajdonság adja meg a control URL-jét – Akkor kell, ha le kellene tölteni, mert nincs a user gépén.


30

Java appletek Szintaktika: • <APPLET code=valami.class id=kutya /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(?!) Internetes alkalmazásfejlesztés

31

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 Internetes alkalmazásfejlesztés

32

document objektum Metódusok – open, write, close, createElement, insertAdjacentElement, insertBefore

Tulajdonságok – body, cookie, title

Események

5.4

– onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx

Kollekciók – all, frames, forms Internetes alkalmazásfejlesztés

33

További DHTML objektumok navigator objektum – Csak tulajdonságadatai vannak

event objektum

5.5

– srcElement, type, propertyName, fromElement, toElement, returnValue tulajdonságok – A cancelBubble szerepe

form objektum

5.6

– A document.forms kollekcióból származtatható


34

XML alapok

XML (Extensible Markup Language) Az SGML (Standard Generalized Markup Language) subset-je Platform-független adatátadás – – – – – –

Bármilyen dokumentum Adatrekord Objektum adatokkal és metódusokkal Grafikai UI elem Séma információ Meta elem (pl. Channel Definition Format) Internetes alkalmazásfejlesztés

36

XML példa Matrix <szereplő>Keanu Reeves <szereplő>Laurence Fishburne Csinibaba <szereplő>Gálvölgyi János Tímár Péter Internetes alkalmazásfejlesztés

37

Az XML előnyei (1) Keresések értelmesebbek lehetnek: – Könyvkeresésnél pl. ma a "Bill Gates"a róla szóló és az általa írt könyveket is kihozza – Az egymással inkompatibilis adatbázisokban való kombinált keresés megoldható

Az adat a séma révén az értelmezési és validálási infot is hordozza Egy XML a szervertől függetlenül is kezelhető, sőt módosítható is. Granuláris update: nem kell az egész lapot letölteni, ha csak egy adatsor változott Internetes alkalmazásfejlesztés

38

XML előnyei (2) Független a UI-től, ezért a user ízlésének megfelelő prezentációt lehet hozzá csatolni – Hasonló a mail-merge-höz

Jól tömöríthető az adatátadásnál – A tagok szabályos ismétlődő szerkezete jól fekszik a tömörítő eljárásoknak – A HTTP 1.1 szerverek és kliensek már ki is használják ezt.


39

Névterek (Namespaces) A különböző XML dokumentumok összekapcsolásakor a tagok megkülönböztetése miatt kell Példa: • <partner:nev> <partner:vezeteknev>Nagy <partner:keresztnev>Pál 1235801 Internetes alkalmazásfejlesztés

40

Adat és prezentáció szétválasztása HTML – A Web lap "szöveges", nem változó része

CSS – A HTML rész stílus információi

XML – A Web lap "adat" része. (Minden, ami változhat)

XSL (Extensible StyleSheet Language) – Az "adat" rész stílusinformációi


41

XML dokumentum szabályok Kezdő és záró tag mindig kell (well-formed document) • Rövidítés lehetséges, pl.:

Kisbetű/nagybetű különbségre érzékeny! Az XML dokumentum gyökéreleme egyedi Unicode-os karakterkészletet használ (1 karakter=16 bit) Az attribútumok megadásakor idézőjelek használata Internetes alkalmazásfejlesztés

42

XML Data Island Az adatsziget egy XML a HTML lap belsejében – Inline megadás • <XML ID="Valami"> Matrix

– SRC hivatkozás • <XML ID="Valami" SRC="film.xml"

– Script tag • <SCRIPT LANGUAGE="xml" ID="Valami"> … stb. Internetes alkalmazásfejlesztés

43

XML ágak elérése a DOM-ból Valami.documentElement • A komplett gyökér elemet éri el

Valami.documentElement.childNodes • A gyökér alatti ágak kollekcióját éri el

Valami.documentElement.childNodes.item(0). nodeName • A gyökér alatti első ág nevét adja vissza • nodeName helyett a text a tartalmat adná vissza • nodeName helyett a childNodes.item(0).text eggyel beljebb menne a hierarchiában. Internetes alkalmazásfejlesztés

44

XML attribútumok elérése Valami.documentElement.childNodes.item(n).attri butes.item(z).nodeName • Az első szinten található n-edik ág z-edik attribútumának a neve

Valami.documentElement.childNodes.item(n).get Attribute("nyelv") • Az első szinten található n-edik ág "nyelv" nevű attribútumának az értéke


45

További elemek az XMLDOM-ban Data Island elemeinek elérése • Valami.XMLDocument.documentElement.stb.

Namespace elemek elérése – xmlns:partner="//www.et.hu/x" esetén: • • • •

nodeName a teljes nevet adja vissza prefix-szel együtt namespaceURI az URI nevet vagy ""-t ad vissza prefix a példában "partner" baseName a prefix nélküli nevet adja vissza

adottTag.xml – A teljes XML string-et adja vissza Internetes alkalmazásfejlesztés

46

XMLDOMDocument Kétféle interfész létezik: – XMLDOM Interface (COM prog. Interface) – XMLDOM Objects (ActiveX interface)

XMLDOMDocument objektum létrehozása – VBScript • Set xmldok = CreateObject("Microsoft.XMLDOM")

– Jscript • Var xmldok = new ActiveXObject("Microsoft.XMLDOM")

– Visual Basic • Dim xmldok = New DOMDocument Internetes alkalmazásfejlesztés

47

XML file betöltése xmldok.load("//et/kakukk.xml") • xmldok.loadXML("….")

Aszinkron (default) és szinkron betöltés • xmldok.async = false (még a load előtt) • xmldok.abort-ra az aszinkron betöltés leállítható • Az értelmezés elhalasztható xmldok.validateOnParse = false (ezt is a load előtt) • Hiba esetén a parseError ad információt

Mentés • xmldok.save(Server.MapPath("Minta.xml")) Internetes alkalmazásfejlesztés

48

Dokumentumágak elérése Set root = xmldok.documentElement For Each gyerek In root.childNodes MsgBox gyerek.text Next Set yNode=xmldok.documentElement. nodeFromID("xxxyyzz") Set yNodeList=xmldok.documentElement. getElementsByTagName("film") vagy Set yNodeList=xmldok.documentElement. selectNodes("film/cím") Internetes alkalmazásfejlesztés

49

Új ágak beépítése createNode(típus,név,namespaceURI) • Az egyes típusokra külön createTípus metódusok léteznek

createElement példa: • Set ujElem = xmldok.createElement("film") ujElem.setAttribute("nyelv","német") ujElem.text = "akármi" xmldok.documentElement.childNodes.item(3). appendChild ujElem

Egyéb lehetőségek • replaceChild, removeChild, insertBefore


50

XMLDOMNode (1) Információ a Node-ról • hasChildNodes() igaz vagy hamis • nodeName prefix:név formában • nodeType és nodeTypeString NODE_ELEMENT 1 NODE_ATTRIBUTE 2 NODE_TEXT 3 NODE_CDATA_SECTION 4 stb. • parsed logikai iagz, ha ellenőrzött • specified attribútumoknál, ha van default vagy meg van adva • Xml az adott node xml string-ként Internetes alkalmazásfejlesztés

51

XMLDOMNode (2) Adat olvasása és írása • nodeValue • nodeTypedValue • Text

Navigálás az adott Node-ból • parentNode, firstChild, lastChild, previousSibling, nextSibling, ownerDocument tulajdonságok • childNodes kollekció • attributes kollekció révén jutunk el az attribútumokhoz • definition visz el a sémához


52

XSL Extensible Stylesheet Language – Olyan, mint a mail-merge, ahol az XSL a template, és az XML az adat – Hasonlít az ASP ciklushoz és a Tabular Data Controlhoz – Kétféle modell ötvözhető • Template-driven model • Data-driven model


53

Egyszerű XML-XSL-HTML példa <portfolio xmlns:dt="urn:schemas-microsoftcom:datatypes"> OTP Bank Rt. <jel>OTP <árf dt:dt="number">16000 … … Internetes alkalmazásfejlesztés

54

HTML template

Jel Név Árfolyam

… … …


55

A template "feltöltése" (1) <xsl:stylesheet xmlns:xsl="//www.w3.org/TR/WD-xsl"> <xsl:template match="/"> Internetes alkalmazásfejlesztés

56

A template "feltöltése" (2) <xsl:for-each select="portfolio/részvény">

Jel Név Árfolyam

<xsl:value-of select="jel"/> <xsl:value-of select="név"/> <xsl:value-of select="árf"/>


57

XSL alapszabályok <xsl:for-each> tag adja meg az elemhalmazt <xsl:value-of select="minta"> – Az elemhalmazon belül egy gyereket azonosít – A select adja meg az XSL pattern-t • A file-könyvtár struktúrához hasonlít, de sima perjellel • Az elért adat (attribútum, érték) kerül a hívás helyére

A navigáció az aktuális node-nál indul


58

HTML template szabályok Well-formed HTML (nyitó és záró tagok) Kisbetű/nagybetű a tagokban fontos – Legyenek nagybetűsek!

Minden attribútum idézőjelek vagy aposztrófok között legyen HTML és HEAD tag sem maradhat ki Csak a következő karakter egyedek vannak – < > & " '

A scriptek belsejében sem lehetnek más jelek – <SCRIPT>


59

HTML tag új attribútuma <xsl:attribute name="TITLE"> <xsl:value-of select="jel"/> adatai a <xsl:value-of select="@tőzsde"/>-ról származnak … Csak akkor lehet "TITLE"-t adni, ha még nincs neki. A tag előtt kell lennie, hogy a -re vonatkozzon Internetes alkalmazásfejlesztés

60

Feltételes template-ek  <xsl:value-of select="jel"/> <xsl:if test="@tőzsde[.='BSE']">* <xsl:attribute name="STYLE">color: <xsl:choose> <xsl:when test="price[. $le$ 25]">red <xsl:otherwise>green Internetes alkalmazásfejlesztés

61

"for-each" rendezése <xsl:for-each select="portfolio/részvény" order-by="árf"> Lehet csökkenő is • order-by = "-árf"

Több szempont is megadható • order-by = "mező1; -mező2" • order-by = "date(mező1);-number(mező2)"

Ha a select-beli adatra akarunk rendezni: • <xsl:for-each select="portfolio/részvény/név" order-by="-." Internetes alkalmazásfejlesztés

62

XSL pattern Egy egyszerű query nyelvhez hasonlít • • • •

portfolio/részvény az összes ilyen node portfolio/*/név példa a joker használatára portfolio/részvény/* 3 részvény esetén 9 elemet ad portfolio/részvény[jel]/név csak azok, amelyeknek van "jel" node-juk • portfolio/részvény[jel='OTP']/árf csak az 'OTP' jelű részvények árfolyama jön le • portfolio/részvény[@tőzsde="BSE"] csak a BSE-n lévő részvények jönnek le • portfolio/részvény/@tőzsde csak az attribútum értékpár jön vissza Internetes alkalmazásfejlesztés

63

Active Server Pages alapfogalmak (Egy kis történelem)

ASP környezet IIS 3.0-tól felfele létezik az ASP. Állapotkezelés – A stateless HTTP-vel szemben biztosítja a userenkénti, alkalmazásonkénti, illetve szerverenkénti állapotkezelést.

MS ActiveX Data Objects (ADO) – Adatbáziskezelés megvalósítása

ASP komponensek is használhatók Nyelvek: VBScript, JScript, Perl Internetes alkalmazásfejlesztés

65

ASP file tartalma és nyelve Az ASP file tartalma: – Sima szöveg – HTML – Script • Kliens oldali • Szerver oldali (<% ……….%>)

Script nyelvek – VBScript – Jscript – Perl Internetes alkalmazásfejlesztés

66

ASP szintaktikai elemek Határolójelek – <…….> a HTML határolójelei – <%……..%> az ASP Script határolójelei – Response.Write helyett sima egyenlőségjel • Példa: Ez a lap <% =Now %> -kor lett frissítve.

– Script példa: • <SCRIPT RUNAT=Server | Client LANGUAGE=VBScript | JavaScript> …… itt van maga a script


67

Scriptek és HTML vegyítése Példa: <% If Time < #12:00:00PM# Then %> Good Morning <% Else %> Good Afternoon <% Endif %>


68

Beépített (built-in) objektumok Request Response Application Session Server


69

Request objektum A böngésző által küldött információ – Browser A böngészőt adja vissza – LogonUserIdentity WindowsIdentity objektumot ad

Gyűjtemények – QueryString A kérdőjel utáni paraméterek – Cookies Adott változó tartalma • Példa: Request.Cookies("Dolgozo")("Nev")

– ClientCertificate (Kulcs[almező]) • Secure Sockets Layer (SSL) használatakor https lesz a sima http helyett

– Files

Az upload-dal feljött fájlok Internetes alkalmazásfejlesztés

70

HTML Form készítése 3 lehetőség van – Statikus .HTM egy formCX-szel adatot ad át egy .ASPnek – .ASP küld adatot egy másik .ASP-nek – .ASP küld adatot önmagának (self-posting)

Megvalósítás: –
• Begyűjti az adatokat és a SUBMIT gombra elküldi a kakukk.asp-nek.


71

Az átküldött adatok elérése Példák – X = Request.Form("mezőnév") – X = Request.Form("mezőnév")(n) • Ha ugyanazzal a mezőnévvel több textbox is van • Az index nélkül vesszőkkel elválasztott string jön

– Request.Form("mezőnév").Count • Ezzel lehet megtudni, hogy hány azonos nevű van

– IsEmpty(Request("mezőnév") • Ez dönti el, hogy van-e adat a mezőben. • Self-posting-nál így dönthető el, hogy első hívás vagy önhívás történt-e Internetes alkalmazásfejlesztés

72

QueryString gyűjtemény QUERY_STRING szerver változóba kerül a kérdőjelet követő rész – Request.QueryString("mezőnév")

A sima Request helyett akkor kell, ha nem formból jött ide a felhasználó – pl. http://www.x.y/kakukk.asp?kutya=d&m=n

REQUEST_METHOD nevű szerver változó – X=Request.ServerVariables ("REQUEST_METHOD") • "POST" vagy "GET" lesz az X értéke


73

Response objektum (1) Információ küldése a böngészőnek Tulajdonságadatok – Buffer • True esetén visszatartja a küldést, amíg az ASP le nem fut.

– Expires • Meddig érvényes a lap a Cache-ben percekben.

– ExpiresAbsolute • Meddig érvényes a lap abszolút időben mérve.


74

Response objektum (2) Metódusok – Write • Sima egyenlőségjellel helyettesíthető

– Redirect • Buffer=True esetén átszállhatunk egy másik ASP-re • Response.Redirect "http://www.x.y/h.asp"

– End • Pufferezett esetben ekkor küldi el a böngészőnek

– Clear • Ha mégse küldjük el, akkor az End helyett ez jön. Internetes alkalmazásfejlesztés

75

Response objektum (3) Cookies gyűjtemény – Cookie: a felhasználó gépén tárolt adat. – A böngészőben értesítés kérhető, sőt le is tiltható a használata. – Példa: • Response.Cookies("Kakukk") = "Valami" Response.Cookies("Dolgozo")("Nev") = "Kovács"

– Tulajdonságok • Secure • Haskeys (True vagy False)


76

Application objektum Metódusok • Lock és Unlock az objektum zárolására

Események • Application_OnStart és Application_OnEnd • A Global.Asa-ban kell ezeket deklarálni

Változók • Application("Macska") = "Nokedli" X = Application("Macska")

Gyűjtemények • Contents • StaticObjects

Az összes változó

Jel	Név	Árfolyam
<xsl:value-of select="jel"/>	<xsl:value-of select="név"/>	<xsl:value-of select="árf"/>

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

Recommend Documents