Coltul meu de invatatura

Am lansat un nou concurs!

Lucia Negreanu — Sat, 02 Jan 2010 19:01:28 +0000

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!

Tutorial HTML

Lucia Negreanu — Sun, 18 Oct 2009 18:54:25 +0000

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 …). 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

la

Exemplu:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

2. Tagurile de paragraf: care sunt folosite pentru a seta configurari speciale ale unui paragraf
html>

Acesta este primul paragraf.

Acesta este al doilea paragraf.

Al treilea paragraf.

3. Tagurile de link – folosite pentru a marca un link si este de forma

acesta/">http://www.piticiiprogramatori.blogspot.com”>Acesta este un link.

- 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
html>

ActionScript

Lucia Negreanu — Fri, 04 Sep 2009 13:03:53 +0000

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.

Originile Flex

Lucia Negreanu — Fri, 04 Sep 2009 12:05:11 +0000

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.

Din nou Flex

Lucia Negreanu — Tue, 01 Sep 2009 11:43:19 +0000

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.

Voi face pagina concursului Zilele Informaticii Dejene!

Lucia Negreanu — Wed, 26 Aug 2009 10:12:56 +0000

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!)

Scriu articole

Lucia Negreanu — Thu, 20 Aug 2009 13:01:40 +0000

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!!

Codul sursa al aplicatiei

Lucia Negreanu — Fri, 31 Jul 2009 10:54:48 +0000

Categoria 1: Serviciul HTTP cu returnarea unui text

"1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml"
    layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    backgroundImage="" >
	
		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");
	        }
		]]>
	

	"handlePlain(event);" fault="handleFault(event);" id="plainRPC" resultFormat="text"
	    url="http://examples.adobe.com/flex3/exchangingdata/text/plainHttpService.php"
	    useProxy="false">
	    
	        {zipcode.text}
	        {weight_lb.text}
	    
	

	"56" y="32" text="Zip Code" width="55" height="18" textAlign="right" fontWeight="bold"/>
	"56" y="58" text="Weight" width="55" height="18" textAlign="right" fontWeight="bold"/>
	"130" y="32" id="zipcode" width="160" height="22"/>
	"130" y="58" id="weight_lb" width="160" height="22"/>
	"130" y="95" label="Get Shipping Options" click="plainRPC.send();" width="160" height="22"/>

	"56" y="150" id="shippingOptions" width="310" height="133" fontWeight="bold"/>

Categoria 2: Serviciul HTTP cu returnarea unui XML

"1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml" layout="absolute">

	
		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");
	        }
		]]>
	

    "handleXML(event);" fault="handleFault(event);" id="xmlRPC" resultFormat="e4x"
    	url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/xml/xmlHttpService.jsp" useProxy="false">
	    
	        {zipcode.text}
	        {weight_lb.text}
	    
	

	"56" y="32" text="Zip Code" width="55" height="18" textAlign="right" fontWeight="bold"/>
	"56" y="58" text="Weight" width="55" height="18" textAlign="right" fontWeight="bold"/>
	"130" y="32" id="zipcode" width="160" height="22"/>
	"130" y="58" id="weight_lb" width="160" height="22"/>
	"130" y="95" label="Get Shipping Options" click="xmlRPC.send();" width="160" height="22"/>
	"{shippingInfo}"
		x="80" y="141" width="262" height="92" id="shippingOptionsList" editable="false" enabled="true">
	    
	        "Service" dataField="service" />
	        "Price" dataField="price" />

Fisierul ColdFusion

PlainHttpService.cfm

"true" />

"Shipping"
          method="getShippingOptions" argumentcollection="#url#"
	 returnvariable="myResult" />

"i" from="1" to="#ArrayLen(myResult)#">
	#myResult[i].service#: #dollarFormat(myResult[i].price)#

XmlHttpService.cfm

"true" />


	"Shipping"
          method="getShippingOptions" argumentcollection="#url#"
	 returnvariable="myResult" />
  
	"userXML">
	  
		"i" from="1" to="#ArrayLen(myResult)#">
			
		
	  
	
  

"yes" type="text/xml; charset=UTF-8">
#userXML#

Shipping.cfc


	"getShippingOptions" access="remote" returntype="array">
		"zipcode" type="any" required="yes" >
		"pounds" type="any" required="yes">

		var options=ArrayNew(1)>
		var baseCost=(zipcode / 10000) + (pounds * 5)>

		
		"Next Day">
		
		
		"Two Day Air">
		
		
		"Saver Ground">
		

		
	

	"getShippingOptions_CFQuery" access="remote" returntype="query">
		"zipcode" type="any" required="yes" >
		"pounds" type="any" required="yes">

		var options=ArrayNew(1)>
		var baseCost=(zipcode / 10000) + (pounds * 5)>

          
	   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);

Fisiere PHP

Partea a II-a Schimb de date

Lucia Negreanu — Thu, 30 Jul 2009 13:45:44 +0000

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

Aplicatiile Flex sunt fisiere SWF.
Flex este un mediu de programare centrat pe programator folosit pentru a crea aplicatii internet bogate.F
Aplicatiile realizate in Flex sunt redate folosind Flash Payer 9.
Fisierele Flash RIAs, Flex SWF sunt prelucrate de utilizator..
Flex se poate conecta la servere de aplicatii folosind ColdFusion, PHP, ASP.NET si Java.
Se poate prelua text simplu sau XML prin HTTP.
Puteti prelua mesaje Simple Object Access Protocol (SOAP) folosind servicii WEB.
Puteti utiliza obiecte Java la distanta (POJOs, JavaBeans, EJBs and ColdFusion Components) folosind serviciul de date LiveCycle.

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:

Creati o interfata de utilizator folosind MXML care sa poata accepta furnizarea unui cod postal si a unei greutati.
Sa scrieti o metoda si o rutina de tratare a evenimentelor folosind ActionScript.
Sa trimiteti datele furnizate de un utilizator prin serviciul HTTP printr-un apel de la ColdFusion, PHP, Java sau ASP.NET.
Sa returnati raspunsul prin text simplu sau XML.
Sa populati un camp de text provenind de la un apel de la serviciul HTTP cu date returnate.
Sa populati un DataGrid provenind de la apel de la serviciul HTTP cu date returnate.

Crearea componentei Tile in MXML

Lucia Negreanu — Wed, 29 Jul 2009 09:02:22 +0000

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.

"100%" height="100%"
    dataProvider="{photoFeed}">

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.

"100%" height="100%"
    dataProvider="{photoFeed}">
    
        
            "125" height="125"
                paddingBottom="5"
                paddingLeft="5"
                paddingTop="5"
                paddingRight="5">

                "75" height="75"
                    source="{data.thumbnail.url}"/>

                "{data.credit}"/>

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.

Numele fisierului este FlickrThumbnail.
Componenta de baza este VBox.
Setati dimensiunile (latimea si lungimea) la 125.

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.

"100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">

16. Compilati si rulati aplicatia creata.