- 1 Novembre 2011
- 49
- 0
- Miglior risposta
- 0
Io penso che il modo migliore per imparare a programmare, sia leggere e scrivere codice.
E quindi io sono intenzionato ad insegnarvi come si crea un semplicissimo e banale browser per navigare sul web, ma perchè proprio un browser?
Perchè un browser, sfrutta tanti argomenti di un linguaggio (stringhe, window form, rete, gestione file....), e mi sembrava l' esempio più pratico per far interagire tra di loro le basi di ciò che il C# ci offre.
Questa guida sarà semplice, e spero di non renderla troppo noiosa, quindi ora iniziamo ^^
In questo tutorial, per semplicità utilizzeremo Visual C# 2010, quindi se non lo possedete, scaricatelo da
Una volta scaricato ed installato, lo apriamo e andiamo su:
File --> Nuovo Progetto e selezionate Applicazione Window Form
La finestra che ci apparerà sarà la seguente:
Descrizione dei componenti:
INIZIAMO A LAVORARE
Le prime modifiche che porremmo al nostro browser sono le seguenti:
Ora, clicchiamo con il dasto destro del mouse su ognuno dei primi due bottoni, selezionando due immagini simili a
Poi, selezioniamo la ComboBox, e clicchiamo su proprietà, il n°5 del primo sreen.
Qui possiamo modificare tutto a nostro piacere, provate a modificare il BackColor (Colore sfondo), ForeColor (Colore bordo e scritte), Size (Grandezza, mettetela abbastanza lunga), etc.....
Stessa cosa potete fare con la ToolStrip.
Al ultimo bottone, siccome siete già esperti, decidete voi se inserirgli un immagine, oppute settare come scritta "Vai!", andando nelle proprietà modificando il campo "Text", siccome questo pulsante fara partire la navigazione leggendo l' indirizzo nella ComboBox.
Ora, clicchiamo il pulsante che avvia il Debug (n°4 del primo screen), e partirà il nostro programma.
A questo punto, il mio risultato è il seguente, non male :P
Vi ricordo inoltre che è possibile cambiare il nome della finestra, cambiare l' icona etc, selezionando la finestra, cliccate dove c'è scritto Form1 e si selezionerà, e poi smanettare in proprietà.
Poi adesso che siete in grado, aggiungete quello che volete, ad esempio la scritta "Indirizzo" prima della barra degli indirizzi, le scritte si chiamano label, reperibili sempre tra gli strumenti come fatto finora.
Inserire le Istruzioni
Finora, noi abbiamo soltato creato visualmente il browser, ma non è neancora in grado di navigare, poichè dovremo spiegargli come si fa.
Dovremo spiegargli che:
Se clicco il pulsante per avviare la navigazione, deve prelevare l' indirizzo inserito nella ComboBox (che sarebbe la barra degli indirizzi) e scaricare da quell' indirizzo la pagina html, e rappresentarla nel WebBrowser, e se poi vengono cliccate le due frecce, deve tornare indietr/avanti di pagina.
Ovviamente il computer non parla l' italiano, e quindi si deve ricorrere ai linguaggi di programmazione, vediamo come...
Prima di tutto, andiamo nelle proprietà della toolstrip, e una volta trovato il campo Text, inseriamo l' indirizzo iniziale, ad esempio Sciax2 Forum - Community di Giovani Webmaster
Poi, andiamo sulle proprietà del terzo bottone, quello che avvia la navigazione, nella parte alta, c'è l'icona di un fulmine: li sono conenute tutte le istruzioni e gli eventi, quindi clicchiamo.
Noteremo subito la presenza di un elemento chiamato click, quello gestisce un azione, quando l' utente clicca l' oggetto su cui è presente questa azione, nel nostro caso il bottone. Quindi, facciamo doppio click dove è bianco ( a destra).
Ora si aprirà una scheda contenente del codice, il quale serve a gestire tutti gli eventi del nostro porgramma, noi concentriamoci su questa porzione:
Questa gestirà tutti gli eventi, tutto ciò che succederà al momento che l' utente cliccherà il pulsante, allora aggiungiamo queste istruzioni... ^^
Nella prima riga, definiamo una stringa (insieme di caratteri) chiamata "indirizzo", la quale equivale al testo contenuto nella ComboBox, la nostra barra degli indirizzi.
La seconda, spiega al webBrowser di navigare all'
A questo punto possiamo testare il funzionamento del nostro Browser!
Semplicemente cliccando F5 o il pulsante di Debug.
Ecco il mio!!!:P
Siete sollevati dal vostro lavoro? ^^
Ora impostiamo i pulsanti per andare avanti e indietro di pagina, con lo stesso procedimento:
ritorniamo alla scheda di progettazione, andiamo sulle proprità del primo, doppio click sulla parte bianca di "Click", e tra le parentesi graffe di questa nuova istruzione, inseriamo:
e compiendo la stessa azione con il secondo pulsante, inseriamo
Quindi, avremo un codice totale alp iù simile a questo:
Bene, testiamo ancora se il nostro browser funziona, incluse le nuove impostazioni.
E io a questo punto mi riterrei soddisfatto del nostro lavoro, e se siete arrivati fin qui senza commettere alcun errore, vi faccio i miei più sentiti complimenti! :gururun:
Bene ragazzi, per ora è tutto, se trovare errori grammaticali, qualche incertezza e consiglio, non esitate a riferirmelo!
La guida non finisce qui, tra poco verranno aggiunte anche altre importanti funzioni, per rendere il browser al più simile a questo: http://www.sciax2.it/forum/c-c/c-nexus-browser-449613.html
Alla prossima ragazzi! I grazie sono benvenuti ^^
ps. ricordo che questa guida l'ho fatta io: testo, immagini, e codice sono 100% miei, ma per ciò, non mi assumo nessun diritto e/o Copyright, e lascio libero chiunque di utilizzare questa risorsa come vuole, anche non citando il mio nome, poichè non mi vanto di ciò che faccio, ma mi vanto di aiutare gli altri ad avvicinarsi al mondo della programmazione. Grazie per il tempo che mi avete dedicato!
--------------- AGGIUNTA AL POST ---------------
Ah, desideravo chiedere a un Moderatore se questa guida è abbastanza discreta per poter essere messa in rilievo.
Grazie per il contributo ^^
E quindi io sono intenzionato ad insegnarvi come si crea un semplicissimo e banale browser per navigare sul web, ma perchè proprio un browser?
Perchè un browser, sfrutta tanti argomenti di un linguaggio (stringhe, window form, rete, gestione file....), e mi sembrava l' esempio più pratico per far interagire tra di loro le basi di ciò che il C# ci offre.
Questa guida sarà semplice, e spero di non renderla troppo noiosa, quindi ora iniziamo ^^
In questo tutorial, per semplicità utilizzeremo Visual C# 2010, quindi se non lo possedete, scaricatelo da
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Una volta scaricato ed installato, lo apriamo e andiamo su:
File --> Nuovo Progetto e selezionate Applicazione Window Form
La finestra che ci apparerà sarà la seguente:
Descrizione dei componenti:
- Casella degli strumenti: al suo interno sono contenuti tutti gli elementi che potremo inserire nella finestra (pulsanti, aree di testo, finestre per salvare o apirte file, e addirittura calendari.
- Form Deigner: qui si può odificare visualmente la finestra del nostro programma, aggiungendone i componenti, trascinandoli dalla casella degli strumenti al punto desiderato.
- Due pulsanti per compilare, il primo compila solo il windows form, il secondo tutta la soluzione.
- E' il pulsante di debug, ovvero eseguire il programma, per scovare eventuali bug o malfunzionamenti. Ricordate che noi useremo sempre questo per avviare la nostra applicazione.
- Proprietà: Cliccate e vi uscirà qualcosa di simile alla casella degli strumenti, il suo scopo è di settare i componenti del programma (conenuti ed azioni di pulsanti, aree di testo, ma anche grandezza, titolo, tipo, visibilità etc della finestra o di altri componenti.)
INIZIAMO A LAVORARE
Le prime modifiche che porremmo al nostro browser sono le seguenti:
- Nel form designer settiamo la giusta grandezza della finestra
- Scorrendo un po' in basso, cerchiamo ToolStrip, compiendo un' azione di Drag&Drop (trascinamento), lo mettiamo nella parte alta della finestra
- Poi, sulla ToolStrip instaliamo 2 Button (serviranno per andare avanti e indietro per le pagine web), una ComboBox, ingrandendola in modo tale che assomigli a quella di un browser normale, e un altro button, che ci servirà per avviare la navigazione.
- Ora inseriamo il browser: cercatelo sempre tra gli strumenti, dovrete scorre un po' in basso per trovarlo, si chiama WebBrowser. Anchesso lo inserite nella finestra, questa volta facendogli occupare tutto lo spazio che rimane.
Ora, clicchiamo con il dasto destro del mouse su ognuno dei primi due bottoni, selezionando due immagini simili a
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
e Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Poi, selezioniamo la ComboBox, e clicchiamo su proprietà, il n°5 del primo sreen.
Qui possiamo modificare tutto a nostro piacere, provate a modificare il BackColor (Colore sfondo), ForeColor (Colore bordo e scritte), Size (Grandezza, mettetela abbastanza lunga), etc.....
Stessa cosa potete fare con la ToolStrip.
Al ultimo bottone, siccome siete già esperti, decidete voi se inserirgli un immagine, oppute settare come scritta "Vai!", andando nelle proprietà modificando il campo "Text", siccome questo pulsante fara partire la navigazione leggendo l' indirizzo nella ComboBox.
Ora, clicchiamo il pulsante che avvia il Debug (n°4 del primo screen), e partirà il nostro programma.
A questo punto, il mio risultato è il seguente, non male :P
Vi ricordo inoltre che è possibile cambiare il nome della finestra, cambiare l' icona etc, selezionando la finestra, cliccate dove c'è scritto Form1 e si selezionerà, e poi smanettare in proprietà.
Poi adesso che siete in grado, aggiungete quello che volete, ad esempio la scritta "Indirizzo" prima della barra degli indirizzi, le scritte si chiamano label, reperibili sempre tra gli strumenti come fatto finora.
Inserire le Istruzioni
Finora, noi abbiamo soltato creato visualmente il browser, ma non è neancora in grado di navigare, poichè dovremo spiegargli come si fa.
Dovremo spiegargli che:
Se clicco il pulsante per avviare la navigazione, deve prelevare l' indirizzo inserito nella ComboBox (che sarebbe la barra degli indirizzi) e scaricare da quell' indirizzo la pagina html, e rappresentarla nel WebBrowser, e se poi vengono cliccate le due frecce, deve tornare indietr/avanti di pagina.
Ovviamente il computer non parla l' italiano, e quindi si deve ricorrere ai linguaggi di programmazione, vediamo come...
Prima di tutto, andiamo nelle proprietà della toolstrip, e una volta trovato il campo Text, inseriamo l' indirizzo iniziale, ad esempio Sciax2 Forum - Community di Giovani Webmaster
Poi, andiamo sulle proprietà del terzo bottone, quello che avvia la navigazione, nella parte alta, c'è l'icona di un fulmine: li sono conenute tutte le istruzioni e gli eventi, quindi clicchiamo.
Noteremo subito la presenza di un elemento chiamato click, quello gestisce un azione, quando l' utente clicca l' oggetto su cui è presente questa azione, nel nostro caso il bottone. Quindi, facciamo doppio click dove è bianco ( a destra).
Ora si aprirà una scheda contenente del codice, il quale serve a gestire tutti gli eventi del nostro porgramma, noi concentriamoci su questa porzione:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
La seconda, spiega al webBrowser di navigare all'
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
contenuto nella stringa "indirizzo", che ripeto equivale al testo contenuto nella barra degli indirizzi.A questo punto possiamo testare il funzionamento del nostro Browser!
Semplicemente cliccando F5 o il pulsante di Debug.
Ecco il mio!!!:P
Siete sollevati dal vostro lavoro? ^^
Ora impostiamo i pulsanti per andare avanti e indietro di pagina, con lo stesso procedimento:
ritorniamo alla scheda di progettazione, andiamo sulle proprità del primo, doppio click sulla parte bianca di "Click", e tra le parentesi graffe di questa nuova istruzione, inseriamo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Quindi, avremo un codice totale alp iù simile a questo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Bene, testiamo ancora se il nostro browser funziona, incluse le nuove impostazioni.
E io a questo punto mi riterrei soddisfatto del nostro lavoro, e se siete arrivati fin qui senza commettere alcun errore, vi faccio i miei più sentiti complimenti! :gururun:
Bene ragazzi, per ora è tutto, se trovare errori grammaticali, qualche incertezza e consiglio, non esitate a riferirmelo!
La guida non finisce qui, tra poco verranno aggiunte anche altre importanti funzioni, per rendere il browser al più simile a questo: http://www.sciax2.it/forum/c-c/c-nexus-browser-449613.html
Alla prossima ragazzi! I grazie sono benvenuti ^^
ps. ricordo che questa guida l'ho fatta io: testo, immagini, e codice sono 100% miei, ma per ciò, non mi assumo nessun diritto e/o Copyright, e lascio libero chiunque di utilizzare questa risorsa come vuole, anche non citando il mio nome, poichè non mi vanto di ciò che faccio, ma mi vanto di aiutare gli altri ad avvicinarsi al mondo della programmazione. Grazie per il tempo che mi avete dedicato!
--------------- AGGIUNTA AL POST ---------------
Ah, desideravo chiedere a un Moderatore se questa guida è abbastanza discreta per poter essere messa in rilievo.
Grazie per il contributo ^^
Ultima modifica:
