Cel care neglijeaza invatatura in tinerete, pierde trecutul si este mort pentru viitor!
Am lansat o prima pagina WEB de popularizare a CONCURSULUI INTERJUDETEAN “PRIMAVARA MICILOR PROGRAMATORI” pe situl didactic.ro la adresa:
http://scoli.didactic.ro/ccd_dej/
SAU LA ADRESA:
http://primavaramicilorprogramatori.wordpress.com/
Va astept sa participati cu drag!
Ne propunem sa studiem cateva lucruri de baza despre HTML. Acest tutorial nu-si propune sa faca din cel ce il pargurge un guru in HTML ci mai mult sa-i deschida ochii in aceasta directie.
HTML este un limbaj de descriere a paginilor de WEB. Nu este un limbaj de programare ci un limbaj de marcare a textului.
HTML utilizeaza tag-urile de marcare pentru a descrie paginile WEB.
Ce sunt de fapt tag-urile HTML?
Tag-urile sunt cuvinte cheie inconjurate de paranteze “unghi” (de exemplu <b>…</b>). Tag-urile apar in general pereche.
Sa vedem 4 exemple de taguri HTML – poate cele mai cunoscute:
1. Tagurile de titlu: sunt definite de la <h1> la <h6>
Exemplu:
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
2. Tagurile de paragraf: care sunt folosite pentru a seta configurari speciale ale unui paragraf
html>
<body>
<p>Acesta este primul paragraf.</p>
<p>Acesta este al doilea paragraf.</p>
<p>Al treilea paragraf.</p>
</body>
</html>
3. Tagurile de link – folosite pentru a marca un link si este de forma <a>
<html>
<body>
<a href=”http://www.piticiiprogramatori.blogspot.com”>Acesta este un link.</a>
</body>
</html>
- va aparea pe ecran textul “Acesta este un link.” iar cnd se face click pe el se va incarca pagine blogului de programare.
4.Tag de imagine – folosit pentru a marca o imagine <img>
html>
<body>
<img src=”nume_imagine.jpg” width=”104″ height=”142″ />
</body>
</html>
ActionScript este un limbaj de programare bazat pe programarea orientata obiect (OOP) si este utilizat si de Flex.
La fel ca toate limbajele de programare, ActionScript are si el propria sintaxa. ActionScript 1.0 a fost introdus in sintaxa lui actuala deodata cu lansarea lui Flash 5, fiind prima versiune complet programabila de Flash.
Cand a aparut Flash 6 MX s-a largit foarte mult mediul de programare deoarece au fost adaugate foarte multe functii de control care sa permita programarea mai buna a elementelor de film.
Flash 7 MX 2004 a adus la randul lui inbunatatiri fata de versiunile lui anterioare introducand versiunea 2.0 a ActionScript.
Initial a fost creat Adobe Flash Professional care este un mediu integrat de dezvoltare (IDE) iar Flash Player-ul este o masina virtuala care poate fi exploatata de utilizatori pentru a rula fisiere flash. Din pacate Flash-ul a fost creat de minti ale artistilor plastici si utilizeaza conceptul de cronologie care nu este la indemana multor dezvoltatori.
Astfel a aparut Flex-ul din nevoia de a dezvolta un pachet de instrumente pe care sa le inteleaga si sa le poata folosi dezvoltatorii. Astfel el a propus folosirea unui flux de lucru si modele de programare in loc de conceptul de cronologie.
Flex a fost lansat initial ca o aplicatie J2EE (platforma care da posibilitatea executarii unor aplicatii Java pe partea de server) sau ca o librarie de taguri JSP.
~~~~~~~~~~~~~~~
Tehnologia Java Server Pages (JSP) este cea mai populara metoda de a crea interfete Web pentru aplicatiile care ruleaza pe platforma Java, creata de Sun. Ea se bazeaza pe tehnologia numita Java Servlets fiind, de fapt, o completarea a acesteia in ideea crearii cat mai facile a paginilor Web dinamice.
Punctul central al tehnologiei o reprezinta asa-numitele pagini JSP care suntde fapt fisiere text care combina descrieri HTML cu cod Java. Paginile JSP sunt gestionate si accesibile prin intermediul unui server de aplicatii. Acesta primeste cereri venite prin HTTP de la un browser Web. Daca o cerere refera o pagina JSP, serverul prelucreaza local pagina respectiva si, in functie de continutul acesteia, genereaza dinamic o pagina HTML pe care o trimite, ca raspuns, browser-ului. Este important de retinut faptul ca toate prelucrarile legate de paginile JSP se fac pe partea de server, acestea nefiind niciodata transmise in forma originala catre client. In plus, trebuie retinut faptul ca serverul de aplicatii include si o masina virtuala Java in care ruleaza atat codul Java intalnit in paginile JSP cat si obiectele instantiate de acesta. Pentru cei interesati, facem precizarea ca procesul de prelucrare pe partea de server a paginilor JSP presupune, de fapt, crearea unor clase Java Servlet care urmeaza regulile scrise in pagina JSP si include codul Java din aceasta. Clasele astfel generate sunt apoi compilate si rulate in masina virtuala amintita.
Un alt element important este ca orice aplicatie Web JSP trebuie sa fie instalata (deployed) in serverul de aplicatii inainte de a putea fi rulata. Instalarea presupune copierea paginilor JSP si a claselor Java folosite de acestea in locatii bine stabilite de catre serverul de aplicatie utilizat, eventual intr-o forma arhivata de tip .jar (Java Archive) sau .war (Web Archive).
~~~~~~~~~~~~~~~
Flex si Flash ofera utilizatorului date in timp real, adica acesta nu mai trebuie sa se conectaeze la serverul dumneavoastra in momentul cand decide sa schimbe felul in care se incarca pagina sa WEB.
Daca in codul sitului dumneavoastra folositi tehnologii ca ASP, JSP sau PHP, atunci serverul de WEB ar trebui sa fie in mod continuu interogat de utilizator. Daca insa situl foloseste Flasj si Flex, atunci utilizatorul nu va avea nevoie de pink de la server pentru ca situl lui sa functioneze.
Sa revenim la ce am inceput mai demult: sa invatam FLEX.
Deci, ce este FLEX?
Flex este un framework free cu care poti realiza diverse aplicatii pentru construirea si intretinerea de aplicatii interactive WEB.
Calatoria pe drumul intelegerii si invatarii Flex-ului va fi foarte interesanta pentru ca vom discuta despre Flash, ActionScript, MXML precum si despre pasii cei mai importanti in realizarea propriului site WEB.
Desi Flexul este uimitor de performant in crearea unor pagini WEB dinamice, el are totusi niste limitari datorate in primul rand Flash-ului. Totusi el are o foarte mare putere de acoperire a cererii de situri dinamice ale clientilor actuali putand fi folosit la crearea cu succes a unor situri bogate in aplicatii WEB, chiar si a unor harti Yahoo.
Azi voi incepe sa lucrez la situl Zilelor Informaticii Dejene editia a X-a care a fost la finalul lunii mai al anului scolar 2008-2009.
Desi nu sunt recompensata pentru asta, desi d-na ministru sau alti mari conducatori nu sunt impresionati de astfel de chestii, munca celor peste 400 de participanti din acest an trebuie aratata intregii lumi ca merita. Macar prin atat. O postare a lucrarilor lor pe Internet. Sa vada toata lumea cat sunt de talentati.
Vizitati pagina!!! O sa merite!!!
(Voi comunica linkul la care veti gasi noul site!)
Am inceput sa scriu articole pe diverse teme. Mi se pare destul de atragator. In orice caz sunt nevoita sa citesc foarte mult ceea ce nu strica nimanui, nu?
Am gasit cativa oameni care aveau nevoie de articole si eu am fost cea care le-a scris. Au fost multumiti sper.
Cel mai bine ar fi sa ma pun la punct cu engleza ca ar fi si mai multa treaba de facut.
Mai vedem!!
Categoria 1: Serviciul HTTP cu returnarea unui text
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" backgroundAlpha="0" backgroundImage="" > <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; public function handlePlain(event:ResultEvent):void { shippingOptions.htmlText = event.result.toString(); } public function handleFault(event:FaultEvent):void { Alert.show(event.fault.faultString, "Error"); } ]]> </mx:Script> <mx:HTTPService result="handlePlain(event);" fault="handleFault(event);" id="plainRPC" resultFormat="text" url="http://examples.adobe.com/flex3/exchangingdata/text/plainHttpService.php" useProxy="false"> <mx:request xmlns=""> <zipcode>{zipcode.text}</zipcode> <pounds>{weight_lb.text}</pounds> </mx:request> </mx:HTTPService> <mx:Label x="56" y="32" text="Zip Code" width="55" height="18" textAlign="right" fontWeight="bold"/> <mx:Label x="56" y="58" text="Weight" width="55" height="18" textAlign="right" fontWeight="bold"/> <mx:TextInput x="130" y="32" id="zipcode" width="160" height="22"/> <mx:TextInput x="130" y="58" id="weight_lb" width="160" height="22"/> <mx:Button x="130" y="95" label="Get Shipping Options" click="plainRPC.send();" width="160" height="22"/> <mx:Text x="56" y="150" id="shippingOptions" width="310" height="133" fontWeight="bold"/> </mx:Application>
Categoria 2: Serviciul HTTP cu returnarea unui XML
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; [Bindable] private var shippingInfo:XMLList; public function handleXML(event:ResultEvent):void { shippingInfo = event.result.option as XMLList; } public function handleFault(event:FaultEvent):void { Alert.show(event.fault.faultString, "Error"); } ]]> </mx:Script> <mx:HTTPService result="handleXML(event);" fault="handleFault(event);" id="xmlRPC" resultFormat="e4x" url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/xml/xmlHttpService.jsp" useProxy="false"> <mx:request xmlns=""> <zipcode>{zipcode.text}</zipcode> <pounds>{weight_lb.text}</pounds> </mx:request> </mx:HTTPService> <mx:Label x="56" y="32" text="Zip Code" width="55" height="18" textAlign="right" fontWeight="bold"/> <mx:Label x="56" y="58" text="Weight" width="55" height="18" textAlign="right" fontWeight="bold"/> <mx:TextInput x="130" y="32" id="zipcode" width="160" height="22"/> <mx:TextInput x="130" y="58" id="weight_lb" width="160" height="22"/> <mx:Button x="130" y="95" label="Get Shipping Options" click="xmlRPC.send();" width="160" height="22"/> <mx:DataGrid dataProvider="{shippingInfo}" x="80" y="141" width="262" height="92" id="shippingOptionsList" editable="false" enabled="true"> <mx:columns> <mx:DataGridColumn headerText="Service" dataField="service" /> <mx:DataGridColumn headerText="Price" dataField="price" /> </mx:columns> </mx:DataGrid> </mx:Application>
Fisierul ColdFusion
<cfsetting enablecfoutputonly="true" /> <cfinvoke component="Shipping" method="getShippingOptions" argumentcollection="#url#" returnvariable="myResult" /> <cfloop index="i" from="1" to="#ArrayLen(myResult)#"> <cfoutput>#myResult[i].service#: #dollarFormat(myResult[i].price)#<br /></cfoutput> </cfloop>
<cfsetting enablecfoutputonly="true" /> <cfsilent> <cfinvoke component="Shipping" method="getShippingOptions" argumentcollection="#url#" returnvariable="myResult" /> <cfoutput> <cfxml variable="userXML"> <options> <cfloop index="i" from="1" to="#ArrayLen(myResult)#"> <option> <service>#myResult[i].service#</service> <price>#myResult[i].price#</price> </option> </cfloop> </options> </cfxml> </cfoutput> </cfsilent> <cfcontent reset ="yes" type="text/xml; charset=UTF-8"> <cfoutput>#userXML#</cfoutput>
<cfcomponent> <cffunction name="getShippingOptions" access="remote" returntype="array"> <cfargument name="zipcode" type="any" required="yes" > <cfargument name="pounds" type="any" required="yes"> <cfset var options=ArrayNew(1)> <cfset var baseCost=(zipcode / 10000) + (pounds * 5)> <cfset options[1] = structNew() /> <cfset options[1].service="Next Day"> <cfset options[1].price=baseCost * 4> <cfset options[2] = structNew() /> <cfset options[2].service="Two Day Air"> <cfset options[2].price=baseCost * 2> <cfset options[3] = structNew() /> <cfset options[3].service="Saver Ground"> <cfset options[3].price=baseCost> <cfreturn options> </cffunction> <cffunction name="getShippingOptions_CFQuery" access="remote" returntype="query"> <cfargument name="zipcode" type="any" required="yes" > <cfargument name="pounds" type="any" required="yes"> <cfset var options=ArrayNew(1)> <cfset var baseCost=(zipcode / 10000) + (pounds * 5)> <cfscript> qOptions = queryNew("service, price"); newRow = QueryAddRow(qOptions, 3); temp = QuerySetCell(qOptions, "service", "Next Day", 1); temp = QuerySetCell(qOptions, "price", baseCost * 4, 1); temp = QuerySetCell(qOptions, "service", "Two Day Air", 2); temp = QuerySetCell(qOptions, "price", baseCost * 2, 2); temp = QuerySetCell(qOptions, "service", "Saver Ground", 3); temp = QuerySetCell(qOptions, "price", baseCost, 3); </cfscript> <cfreturn qOptions> </cffunction> </cfcomponent>
Fisiere PHP
In aceasta parte a tutorialului vom parcurge pasii pentru realizarea unei aplicatii Shipping Costs (costuri de transport).
Aplicatia va contine doua campuri: campul pentru afisarea codului postal din 5 cifre si un camp pentru afisarea greutatii care poate fi transportata maritim. In partea de jos vom constru un buton a carui apasare va determina afisarea unui mesaj text simplu intr-o caseta de text.
Primii pasi in invatare
Descoperiti cum trimiteti parametrii furnizati de utilizator de la serverul sitului si cum se pot prelua rezultatele atat ca text simplu cat si ca XML.
Puncte cheie in realizarea aplicatiei de Shipping Costs
In acest modul veti invata sa lucrati cu serviciile HTTP. Folosirea serviciului de date LiveCycle face obiectul altui tutorial.
Ce veti invata in cadrul aplicatiei Shipping Costs?
Veti invata sa:
1. In modul Design folositi componenta TileList. Dupa componenta HBox si inainte de inchiderea tagului Application adaugati componenta TileList cu latimea si lungimea de 100%.
Legarea datelor photoFeed XML cu componenta TileList
2. Folosind modul Source, localizati componenta TileList si adaugatii atributul dataProvider cu valoarea {photoFeed} pentru a lega datele de componenta tile. (Amintiti-va sa inchideti linia pentru dataProvider.)
dataProvider="{photoFeed}">
Crearea in componenta Tile a motorului de randare a miniaturilor (thumbnails)
3. Acest item randeaza fiecare item din TileList. In interiorul componentei TileList adaugati proprietatea itemRenderer.
4. Creati o componenta layout pentru fiecare item randat. In interiorul proprietatii itemRenderer, adaugati componenta Component.
<mx:TileList width="100%" height="100%" dataProvider="{photoFeed}"> <mx:itemRenderer> <mx:Component> </mx:Component> </mx:itemRenderer> </mx:TileList>
5.Creati layout (aspectul) elementului (itemului) rendere care se va folosi. In interiorul componentei Component, adaugati componenta VBox care sa aiba atributele: width=125, height=125. Adaugati paddingBottom, paddingTop, paddingRight and paddingLeft fiecare cu valoarea 5.
6.In interiorul componentei VBox, creati o componenta Image cu atributele width=75 si height=75. ItemRenderer transmite valorile componentei Image. Adaugati in componenta Image atributul source cu valoarea {data.thumbnail.url} pentru a o popula cu imagini.
7. Dupa componenta Image, creati o componenta Text cu atributul txt avand valoarea {data.credit} pentru ca pe ecran sa apara numele autorului.
<mx:TileList width="100%" height="100%" dataProvider="{photoFeed}"> <mx:itemRenderer> <mx:Component> <mx:VBox width="125" height="125" paddingBottom="5" paddingLeft="5" paddingTop="5" paddingRight="5"> <mx:Image width="75" height="75" source="{data.thumbnail.url}"/> <mx:Text text="{data.credit}"/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:TileList>
8. Salvati si rulati aplicatia. Ar trebui sa vedeti o forma. Dati un termen de cautare. Ar trebui ca pe ecran sa apara imagini.
Separa afisarea thumbnailurilor intr-o componenta separata
9. Creati o noua componenta: File > New > MXML Component parcurgand urmatorii pasi.
10. Folosind modul Source, localizati componenta TileList.
11. Taiati componentele Image si Text din componenta VBox din TileList, si lipiti-o in FlickrThumbnail.mxml.
12. Adaugati urmatoarele atribute in componenta VBox: paddingBottom, paddingTop, paddingRight si paddingLeft fiecare avand valoarea 5; horizontalScrollPolicy si verticalScrollPolicy, ambele fiind setate pe valoarea off; si horizontalAlign cu valoarea center.
13. Folosind modul Source, localizati componenta TileList in template FlickrRIA.mxml.
14. Stergeti din cod componentele itemRenderer, Component, and VBox .
15. Adaugati atributul itemRenderer la componenta TileList avand valoarea FlickrThumbnail.
<mx:TileList width="100%" height="100%" dataProvider="{photoFeed}" itemRenderer="FlickrThumbnail"> </mx:TileList>
16. Compilati si rulati aplicatia creata.
