... Programare Multimedia ...

Cap 7. Aplicatii RIA.

Tehnologiile RIA permit crearea de aplicatii Web complexe. Scopul este acela de a estompa diferentele referitoare la interfete si timp de raspuns fata de aplicatiile desktop clasice.

7.1. Ajax

Tehnologia AJAX (Asynchronous JavaScript and XML) nu propune un limbaj nou ci un model nou de abordare a implementarii aplicatiilor Web. Intr-adevar, nu se propune nici un limbaj nou ci o modalitate noua de a combina tehnologiile existente.
Idea de baza pe care se sprijina Ajax este acea de a utiliza obiecte JavaScript de tip XMLHttpRequest pentru a face apeluri asincrone catre serverul de Web. In acest fel se va evita reincarcarea paginii Web ori de cate ori sunt necesare date de la server.
Aplicatiile Web care folosesc Ajax devin astfel mai mici, mai rapide si mai prietenoase.
Tehnologia Ajax este un standard actual, majoritatea navigatoarelor suportand XMLHttpRequest (Internet Explorer, Firefox, Chrome, Opera, Safari). In continuare se va prezenta o scurta functie care detecteaza tipul de browser si instantiaza obiectul XMLHttp in mod corespunzator:
function ajaxFunction()
{
 var xmlhttp;
 if (window.XMLHttpRequest) {
  // for IE7+, Firefox, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
   {
    // for IE6, IE5
    xmlhttp=new ActiveXObject
              ("Microsoft.XMLHTTP");
   }
   else
   {
     alert("Your browser does not
                 support XMLHTTP!");
   }
}

Proprietatile obiectului XMLHttpRequest sunt:
- onreadystatechange Permite implemenatrea unei functii care sa prelucreaze datele primite de la server. Aceasta functie va fi apelata automat de catre browser in momentul cand apar evenimente asociate unei cereri XMLHttp. Pentru crearea acestei functii poate fi utilizat codul:
xmlhttp.onreadystatechange=function()
{
  // prelucrarea datelor de la server
}
- readyState Aceasta proprietate pastreaza codul starii in care se afla raspunsul la ultima cerere efectuata. Valorile posibile sunt:
   0 Cererea nu a fost initializata
   1 Cererea este pregatita
   2 Cererea a fost trimisa
   3 Cererea este in procesare
   4 Cererea este completa
La fiecare modificare a valorii variabilei readyState browserul va executa automat functia asociata proprietatii onreadystatechange. Aceasta va testa incheierea cererii si apoi va prelucra datele primite:
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
     // Prelucreaza datele primite
  }
}
- responseText/responseXML Permite accesarea datelor din raspunsul serverului. Acestea sunt de obicei impachetate in format text sau XML.
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
    document.myForm.afisaj.value =
                xmlhttp.responseText;
  }
}
Pentru a trimite cererea catre server, programul va apela functiile open() si send() ale obiectului XMLHttpRequest. Functia open() primeste trei parametrii. Primul specifica metoda de transmitere a datelor (GET sau POST), cel de al doilea specfica care pagina de pe server (PHP, ASP etc.) va prelucra cererea, iar ultimul parametru trebuie sa fie true pentru apeluri asincrone. In cazul functiei send, parametrul va fi null in cazul apelurilor GET la pagini din acelasi director de pe server.
Pentru a modifica o portiune a paginii curente, aceasta portiune poate fi inclusa intr-un tag <div>. Exemplu:
// fisierul ajax1.html
<html>
<head>
<title>Exemplu Ajax </title>
<script type="text/javascript">
function ajax()
{
 var xmlhttp;
 if (window.XMLHttpRequest)
 {
   // code for IE7+, Firefox ... 
      xmlhttp=new XMLHttpRequest();
 }
 else
 {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject
              ("Microsoft.XMLHTTP");
 }
   
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4) {
    document.getElementById
      ('panou').innerHTML= 
           xmlhttp.responseText;     
    }
  }
  xmlhttp.open("GET","ajaxRepl.php",
                             true);
  xmlhttp.send(null);
}
</script>
</head>
<body>
<div id='panou'>
 <h2>Text HTML</h2><br>
 Textul este continut in fisierul HTML.
</div>

<form name="f1">
 <input type="button" name="Schimba" value="Schimba" onClick="ajax();">
</form>
</body>
</html>

// fisierul ajaxRepl.php
<?php
echo '<h2>Text PHP</h2><br>Text
                    generat din PHP';
?>

Pentru mai multe informatii consultati tutoriale Ajax la w3Schools, ajaxtutorials si tizag.

Pentru a crea aplicatii complexe se poate apela si la biblioteci ajax cum ar fi Google code, jQuery sau Dojo.

7.2. Adobe Flex

Adobe Flex a fost creat de Adobe Systems si este destinat crearii de aplicatii interactive RIA. El imbina formatul MXML (Macromedia XML) cu limbajul de tip script Actionscript. Rezultatul final este un fisier Flash (SWF) care cuprinde elemente de interfata interactive.
Framework-ul Flash este oferit de Adobe in regim open source. Pentru dezvoltarea eficienta a aplicatiilor se poate utiliza Adobe Flex Builder, oferit in regim comercial.  
Pentru utilizare in domeniul educatiei firma Adobe ofera licente gratuite de Adobe Flex Builder Professional.
Avantajul tehnologiei Flex consta si in posibilitatea de a rula apliactiile atat intr-un navigator Web cat si ca aplicatii desktop (prin intermediul Adobe AIR).
Un exemplu de utilizare a tehnologiei Flex poate fi vizualizata la urmatoarea adresa Web - Design-Contact-Form-Flex.

7.3. SVG

SVG (Scalable Vector Graphics) este un limbaj de tip XML care permite definirea imaginilor vectoriale pentru Web. Avantajul unui format vectorial in fata unui format bitmap (gif, jpg, png) consta in posibilitatea de a o apropria/departa sau redimensiona fara a pierde calitatea. De asemenea formatul SVG permite animarea oricarui atribut utilizat la definirea imaginii. In plus fisierul care descrie o imagine este mai mic decat fisierul echivalent bitmap, este editabil si cu editoare de text obisnuite si poate fi tiparit la orice rezolutie de imprimare cu rezultate asemanatoare.  
O serie de companii precum Sun Microsystems, Adobe, Apple, IBM si Kodak au fost implicate activ in dezvoltarea acestui standard. 
Acest standard W3C este suportat la ora actuala de multe navigatoare. In plus se poate utiliza un plug-in  de la Adobe (Adobe SVG Viewer) pentru navigatoarele care nu suporta direct standardul (ex. Internet Explorer).
Exemplu de imagine SVG:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns= "http:// www.w3.org/2000/svg">

    <circle cx="100" cy="50" r="40"
    stroke="black" stroke-width="2"
    fill="red"/>

</svg>

In plus se poate iclude o imagine SVG intr-un fisier HTML cu ajutorul tagului iframe:
<iframe src="rect.svg" width="300" height="100">
</iframe>

Principalele taguri definite de SVG pentru forme grafice sunt:
    • Rectangle <rect>
    • Circle <circle>
    • Ellipse <ellipse>
    • Line <line>
    • Polyline <polyline>
    • Polygon <polygon>
    • Path <path>

In plus exista o serie de taguri pentru a defini diverse efecte:
    • feBlend
    • feColorMatrix
    • feComponentTransfer
    • feComposite
    • feConvolveMatrix
    • feDiffuseLighting
    • feDisplacementMap
    • feFlood
    • feGaussianBlur
    • feImage
    • feMerge
    • feMorphology
    • feOffset
    • feSpecularLighting
    • feTile
    • feTurbulence
    • feDistantLight
    • fePointLight
    • feSpotLight

Pentru mai multe informatii se poate consulta tutorialul de la w3Schools.