tehnologija ajax za uporabniku prijaznejše poslovne

22
Tehnologija AJAX za uporabniku prijaznejše poslovne spletne aplikacije Janko Mivšek Eranova d.o.o. [email protected]

Upload: others

Post on 18-Nov-2021

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Tehnologija AJAX za uporabniku prijaznejše poslovne

Tehnologija AJAX za uporabniku prijaznejše poslovne spletne aplikacije

Janko MivšekEranova [email protected]

Page 2: Tehnologija AJAX za uporabniku prijaznejše poslovne

Vsebina

UvodZačetkiGradnikiUporabaPrihodnostArhitektura

Page 3: Tehnologija AJAX za uporabniku prijaznejše poslovne

AJAX?

Page 4: Tehnologija AJAX za uporabniku prijaznejše poslovne

AJAX

(Asynchronous JavaScipt And XML)

Page 5: Tehnologija AJAX za uporabniku prijaznejše poslovne

AJAX spada k *.2.0

Splet 2.0Bogate spletne aplikacije (RIA)“Družabne” aplikacijeWiki, RSS, spletni dnevniki, ...Spletne “kaše” (mashups)

Podjetje 2.0 (Enterprise 2.0)

Mehurček 2.0 ?

Page 6: Tehnologija AJAX za uporabniku prijaznejše poslovne
Page 7: Tehnologija AJAX za uporabniku prijaznejše poslovne

Vir: Adaptive Path Inc. 2005

AJAX model spletnih aplikacij

Page 8: Tehnologija AJAX za uporabniku prijaznejše poslovne

Vir: Adaptive Path Inc. 2005

Page 9: Tehnologija AJAX za uporabniku prijaznejše poslovne

Gradniki AJAX

XMLHttpRequestDogodki nad elementiAJAX komponente

samodejna polja (autocomplete fields)urejanje na mestu (in-place editing)...

AJAX knjižnicePrototype, Scriptaculous, ...

Page 10: Tehnologija AJAX za uporabniku prijaznejše poslovne

Osveževanje dela spletne strani

Najpogostejši vzorec uporabeNajbolj uporabenNajbolj priporočljivNa osnovi določenega dogodka osvežimo del strani:

anElementToClickOn onClickUpdate: anElementToUpdate

Page 11: Tehnologija AJAX za uporabniku prijaznejše poslovne

WebDemoApp>>ajaxUpdateTimeExample     | e element |     e := WebElement new.     e addTextH4: 'Example 1: Update element from server (AJAX)'.     element := self ajaxTimeElement.     e         add: element;         addBreak;         add: ((WebElement new addText: 'click here to update')             onClickUpdate: element);         addBreak.     ^e 

WebDemoApp>>ajaxTimeElement     | e |     e := WebElement new.     e style: '{background­color: #eee }'.     e addTextBold: Timestamp now printString.     ^e 

Page 12: Tehnologija AJAX za uporabniku prijaznejše poslovne

Enostavni primeri uporabe AJAX

Page 13: Tehnologija AJAX za uporabniku prijaznejše poslovne

Samodejno polje

Page 14: Tehnologija AJAX za uporabniku prijaznejše poslovne

Urejanje na mestu

Page 15: Tehnologija AJAX za uporabniku prijaznejše poslovne

Kombinacija AJAX elementov

Page 16: Tehnologija AJAX za uporabniku prijaznejše poslovne

Tabele, razvrščanje, filtri

Page 17: Tehnologija AJAX za uporabniku prijaznejše poslovne

COMET-osveževanje po potrebi

Spletni element osvežimo takoj, ko se njegova vsebina spremeni na strežnikuBrez periodičnega osveževanja elementa!Osveževanje v obratni smeri: strežnik->odjemalec

Page 18: Tehnologija AJAX za uporabniku prijaznejše poslovne
Page 19: Tehnologija AJAX za uporabniku prijaznejše poslovne

Združevanje GUI in spletnih aplikacij

Page 20: Tehnologija AJAX za uporabniku prijaznejše poslovne

Sp

letn

i str

ežn

ik

Urlpreslikave

Varnost

Seje

Statistika

Skrbništvo

Model

Predstavitev

Po

mož

ne

stor

itve

Ogrodje predstavitve

Spletna aplikacija v Aida/Web

Page 21: Tehnologija AJAX za uporabniku prijaznejše poslovne

AJAX v Aida/Web

Spl

etn

i str

ežn

ik

Urlpreslikave

Varnost

Seje

Statistika

Skrbništvo

Model

Predstavitev

Po

mož

ne

sto

ritve

Ogrodje predstavitve

Ajax podporaP

roto

typ

e

Scr

ipta

culo

us

Page 22: Tehnologija AJAX za uporabniku prijaznejše poslovne

Zaključek

[email protected]

Vprašanja?