Antonio Feliziani
a- a+

Le Web Parts

Al momento attuale i portalisono pieni zeppi di informazioni ed altro, ma questo a volte soffoca gli utentio altresì rende loro meno vivibile gli stessi.

Per fare fronte a questa problematica portali come Live.com, Msn.com, o lostesso Google.com rendono disponibile all’utente finale la possibilità dipersonalizzarsi l’interfaccia e gli strumenti.

Di default l’interfaccia è standard ma l’utente puù decidere dove spostare icomponenti o magari personalizzare gli stessi o la globalità dell’interfaccia,i lati più belli fondamentamente sono 2

1) L’utentefà tutto in un’interfaccia User Friendly e non deve avere nessuna conoscenzaspecifica se non quelle da normalissimo navigatore web.

2) Questisettaggi verranno tenuti in memoria e riproposti all’accesso successivo

Questi componenti sono dapprima stati inseriti in Sharpoint Portal Server epoi con l’avvento di .Net 2.0 proposti a noi come componenti per rendere piùinterattivi i nostri siti.

Essenzialmente questi componenti permettono una personalizzazione del nostrosito, in base alla progettazione fatta inizialmente tra WebPart e Zone doveandranno disposte le Web part, questopuò essere utile per un webmaster che vuole vendere un template di sitofacimente personalizzabile dal cliente che lo inserirà nel proprio spazio web(quindi senza interattività utente finale) oppure all’utente finale che personalizzerà la propria HomePage delportale con le news in RSS di proprio gradimento e magari le scadenze delleproprie aste su Ebay. Andiamo ora a dare un'occhiata ai principi fondamentalidelle WebPart.


Questi sono I componenti che in maniera quasi totalmente NoCode cipermetteranno la grande interattività citata.

L’immagine che segue invece è un’esempio dell’interfaccia interattiva che cipropone google con il drag and drop dei componenti da una posizione ad un’altratra le sue caratteristiche di rilievo.

 

Aggiungere le Web Parts alla vostra applicazione

ASP.net 2,0 come abbiamovisto nella prima immagine ci fornisce dei componenti pronti all’uso perapprofittare di questa nuova funzionalità propostaci, essi risiedono nellatoolbox Web Parts alla nostra Sinistra ma dobbiamo sapere che questi sono solol’inizio di ciò che possiamo creare !

Andiamo quindi ora a creare una piccola applicazione web per sperimentarequeste nuove funzionalità

Ci sono due modi per aggiungere una WebPart alla pagina :

· Inserendoun Controllo già esistente alla pagina

· Oppurecreando un’UserControl con funzionalità create da noi e poi inserirlo allapagina

In etrambi i casiaggiungiate i vostri controllo, dovrete comunque aggiungere due compoentifondamentali, un WebPartManager e diversi WebPartZone a seconda delle esigenzedi formattazione grafica.

· WebPartManager: Controlla tutte le WebParts inserite nellapagina

· WebPartZone: Gestisce degli spazi dove muovere – editare ivostri controlli

Andiamo ora a creare una WebParts tramite un UserControl
1. In primo luogo lanciamoVisualStudio2005 e creiamo un nuovo progetto Web che chiamiamo "C: Webparts1."

2. Inseriamo ora un controllo WebPartMenuManager all’interno della nostrapagina Default.aspx.

3. Ora per gestire gli spazi doveandremo a inserire le nostre WebParts dobbiamo inserire delle WebPartsZone, perquesto scopo andremo a creare una tabella larga 700px con una riga e 3 colonne, andremo ad inserirenella prima nella terza e nella quinta Dei WebPartZone specificando per essi lalarghezza di 200px

Con questa operazione avremo una situazione molto simile a quella qui sottoindicata nell’immagine.


Ovviamnte ognuno di noi potrà personalizzare con le propriedimezioni e quantità lo schema sopra indicato.

4. Ora è tempo diaggiungere un controllo alla pagina per dargli una certa funzionalità.
Trasciniamo quindi il nostro Controllo Calendar sulla WebPartZone1.
Applichiamo la formattazione Simple al controllo del calendario

5. Ora andiamo in visualizzazione Source della pagina Default.aspx, ed aggiungiamo al controllo calendar lapropietà title, essa non è conteplata didefault ma passato il calendar cone WebPart questa andrà a costituire il titolodello stesso.
Posto qui sotto il codice di esempio della modifica da apportare:

:Calendar ID="Calendar1"

title="La data di oggi"

runat="server" BorderWidth="1px"

Font-Names="Verdana"

..



La vostra forma avrà preso l’aspetto immortalato nell’immagine sottostante.



7. Per vedere la nostra Webparts in azione premiamo il tasto F5 dalla nostratastiera.
Una volta andata in debug la nostra applicazione vedremo il nostro calendar,e potremo notare in alto a destra Minimize Close che ci permetterà di chiuderedel tutto il nostro componente o altriemnti di trasformarlo nello statominimizzato come si vede nell’immagine seguente.



8. Ora stoppiamo il debug e torniamo all nostra istanza di visual studio

Creiamo ora una WebPart utilizzando un UserControl

Andiamo ora a costruire una WebParts tramite un UserControl, una voltacreate basterà trascinare la stessa detro a una WebPartZone.Creiamo ora unanostra inferfaccia personalizzata per il motore di ricerca Google chechiameremo Google.aspx

1. First you need to createa new control. Add a new Web User control to your project by right-clicking onthe project name in Solution Explorer and then selecting Web User Control. Namethe Web User control "Google.ascx."

2. Prima di poter creare il nostro controllo andremo ad inserire una cartella che conterrà tuttele immagini della nostra applicazione, la chiameremo “Images” , con iltasto destro sul nostro progetto New Folder. Ora salviamo dalla pagina diGoogle l’immagine in Header…oppure ne creiamo una personalizzata, e la salviamocome Google.gif in C:Webparts1Images



3. Ora aggiungiamo all nostro controllo una tabella 2x2 Layout -> Insert Tableche ci servirà per ordinare in modo gradevole i contenuti.Ora nella prima cellaandiamo andiamo ad inserire l’immagine salvata, poi nella cella sottostanteaggiungiamo una textbox rendendola della lunghezza giusta per lo scopo ein fine di fianco aggungiamo il bottoneCerca, come vedete nel’immagine sottostante.


4 ora è venuto il momento di aggiungere il codice per gestire questo controllo,semplicemnte passeremo una query string sull’url della destinazione, quindidoppio click sul bottone e aggiungiamo il seguente codice.

 

Protected Sub btnSearch_Click(ByVal sender As Object, _

ByVal e As System.EventArgs) _

Handles btnSearch.Click

Response.Write(Page.IsValid)

Dim queryStr As String = HttpUtility.UrlEncode(txtSearch.Text)

Response.Redirect("http://www.google.com/search?q=" & queryStr)

End Sub

5. Possiamo ora trascinare il nostro componente all’interno del secondo WebPartZonedisponibile, quindi attraverso l’auto format diamo uno stile diverso dalprecendete allo stesso


6. Notiamo quindi a questo punto che il nostro controllo è privo di titolo quindi aggiungiamo l’attributo title al nostro controllo mettendo come valore "GoogleSearch":

Customizziamo le nostreWebPart, di default le WebPartsereditano il layout grafico imposto dal WebPartZone che le ospita, le WebPartsstesse hanno degli elementi grafici aloro volta che le catarrerizzano, che possono essere ad esempio semplicementegli Hyperlinks degli stati (Edit, Close, Minimized, ecc), per variare glistessi con elementi grafici visuali come icone o immagini basterà impostarli alivello superiore di WebPartsZone e tutti quelli che verranno ospitatierediteranno a loro volta. Quindi nel nostro caso dobbiamo specificarlo per le3 istanze del componente..

1. Prima di tutto dobbiamo trovare o creare le nostre icone per gli stati CloseEdit Restore Minimized e, in seguito inserirle all’interno della cartellaImages precedentemente creata

2. Ora assegniamo le nostre icone ai WebPartsZone tramite interfacciagrafica dal tool delle proprietà ad esempio...=>CloseVerb => ImageUrl=> nostra Gif altrimenti da codice in questo modo :

 

CloseVerb.ImageUrl="Images/Close.gif"

EditVerb.ImageUrl="Images/Edit.gif"

MinimizeVerb.ImageUrl="Images/Min.gif"

RestoreVerb.ImageUrl="Images/Restore.gif"

3. Premiamo quindi F5 e andiamo inanteprima di debug e possiamo già vedere che i nostri hiperlink si sonotrasformati in elementi grafici come si può vedere nell’immagine che segue



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Luca
Ti è piaciuto l'articolo?