Creare il proprio browser

Oggi vedremo come creare il proprio personalissimo browser in pochi semplici passi.
Prima di tutto creiamo un nuovo stack e mettiamoci dentro un rettangolo che chiamiamo areabrowser, questo sarà lo spazio dove apparirà il contenuto delle pagine web. Ridimensionando a mano il rettangolo, si ridimensionerà automaticamente l'area dove appariranno le pagine; questo è un sistema molto semplice per gestire manualmente l'area del browser. Esempio:

Poi mettiamo il seguente codice:

On OpenCard
   put the windowid of this stack into tID
   put revBrowserOpen(tID,"http://www.google.com") into browserid
   set the curbrow of this card to browserid
   put the rect of graphic "areabrowser" into temp
   revBrowserSet browserid,"rect", temp
   revBrowserSet browserid,"showBorder","true"
end OpenCard

function browserid
   put the curbrow of this card into temp
   return temp
end browserid

on ChiudiBrowser   
   revBrowserClose BrowserId()
end ChiudiBrowser

on CloseStack
   chiudibrowser
end CloseStack



Notate la funzione browserid() che ho scritto, è solo una scorciatoia per non dover scrivere tutte le volte put the curbrow of this card into browserid . Questo esempio vi mostra come le funzioni dovrebbero essere utilizzate, solo come scorciatoie, e come invece bisognerebbe utilizzare i messaggi per tutto il resto.

Altra nota: chiudere il browser è importante, altrimenti mentre programmate in Livecode, Livecode salverebbe lo stato della finestra quando chiudete ed ad ogni nuova apertura avreste un browser in più. Questo non vale quando create l'eseguibile, perchè l'eseguibile non si automodifica e quindi riparte ogni volta da zero.

La possibilità di avere più browser nella stessa finestra o card permette di avere la navigazione a linguette, oppure il rendering contemporaneo di più pagine nella stessa finestra del programma.
Sorvolando su queste considerazione, ogni volta che riaprite il programma avrete una cosa simile a questa:

Adesso mettiamo i pulsanti per la navigazione e il campo di digitazione degli indirizzi web:

Per fortuna Livecode contiene le funzioni di navigazione già pronte. Quindi per i pulsanti i codici sono semplicissimi.
Per il pulsante indietro abbiamo:

on mouseUp   
   revBrowserBack browserId()   
end mouseUp

Per il pulsante avanti:

on mouseUp
   revBrowserForward browserId()
end mouseUp

Per il pulsante aggiorna:

on MouseUp
   revBrowserRefresh browserid()
end MouseUp



Per il pulsante stop:

on mouseUp
   revBrowserStop browserId()
end mouseUp

Per il pulsante vai:

on mouseUp
   revBrowserSet browserId(), "url", the text of field "indirizzo"
end mouseUp

e per il campo indirizzo:

on returninfield
   send MouseUp to button "Vai"
end returninfield

on enterinfield
   send MouseUp to button "Vai"
end enterinfield

Adesso possiamo aggiungere qualche tocco grafico in più, ad esempio mettere un'animazione quando carica una pagina. Il metodo migliore è usare una immagine GIF animata, che chiameremo animazione.gif:

Livecode ha già integrati i messaggi quando il browser comincia a caricare e quando finisce, riesce perfino a dirci quale browser sta caricando; i messaggi sono browserBeforeNavigate e browserDocumentComplete. Senza addentrarci troppo in essi, che potete leggere nel dizionario integrato in Livecode, sappiate che potete aggiungere il seguente codice alla card per avere l'animazione che comincia ad animarsi e che si ferma:

on browserBeforeNavigate
   set the repeatCount of image "animazione.gif" to -1
end browserBeforeNavigate

on browserDocumentComplete
   set the repeatCount of image "animazione.gif" to 0
   set the currentFrame of image "animazione.gif" to 1
end browserDocumentComplete

Finito! Potete divertirvi ad aggiungere qualche elemento grafico, migliorare i pulsanti, ma non serve altro.

Eccoun esempio di un altro browser fatto il Livecode:

Ora potete divertirvi ad aggiungere la navigazione a linguette o in parallelo, come accennato in questo post.  Oppure utilizzare revBrowserGet() e revBrowserSet per interagire con il testo e i form contenti nel browser.
Inoltre potete fantastiche anteprime dei siti con revBrowserSnapshot