.: HosiriS :.

Informatica e non solo

Progettiamo e realizziamo la nostra prima interfaccia

Posted by hosiris su marzo 16, 2011

Si lo so: i programmi senza interfaccia sono molto più veloci e consumano meno risorse!
Purtroppo mi sono reso conto che, nonostante tutte le spiegazioni date, il 90% degli utenti vuole vedere qualcosa di colorato…
Ed allora ho iniziato a studiare le WxWidget, da affiancare a C++ o a Python che ci permettono di creare applicazioni compatibili con tutti i sistemi.

Esporrò quello che, secondo il mio modo di lavorare, può essere un buon metodo di progettazione e sviluppo dell’interfaccia.
Gli strumenti di cui ci serviremo sono:

  • Pencil: Applicazione standalone o estensione per Firefox che permette di progettare interfacce grafice;
  • wxGlade: programma per la realizzazione di interfacce grafiche che genera automaticamente i lcodice C++ o Python
  • wxPython: binding delle librerie wxwidget per python

Io ho preferito utilizzare la versione di Pencil standalone, perchè il mio firefox è già troppo carico… Questo programma tramite una semplice interfaccia ci permette di progettare la nostra grafica:

Cosa farà questa prima applicazione? Faremo un programmino che prende in input un indirizzo e restituisce le coordinate. Quindi ho immaginato la mia interfaccia come segue:

Dopo aver realizzato l’interfaccia che più ci piace (facciamolo con calma, perchè è meglio avere una idea chiara su come deve essere il risultato perchè sarà difficile dopo fare grosse modifiche), apriamo wxGlade e realizziamo la vera interfaccia:

Queste operazioni sono poco piacevoli, ma vi assicuro che ne vale la pena: ricordatevi di associare gli eventi ai pulsanti, date le giuste label, posizionate correttamente gli elementi (non scrivo come fare perchè le varie documentazioni sono molto esplicative). Quando abbiamo impostato tutti i parametri, definiamo il file di output su cui salvare il codice e selezioniamo il tast “Generate Code”.

Eseguendo il file generato, vedremo che il programma funziona senza problemi. Non rimane quindi che modificare il comportamento degli elementi. Io ho previsto solo due funzioni “OnLocalize” e “OnCancel”: il primo restituirà le coordinate dell’indirizzo immesso, il secondo cancellerà il contenuto degli elementi.
Apriamo il file sorgente e cerchiamo la definizione delle due funzioni (wxGlade fa tutto per noi, genera gli eventi e li collega ai pulsanti corretti) e modifichiamo il contenuto coem segue:

    def OnLocalize(self, event): # wxGlade: MyFrame.
        URL2 = "http://maps.googleapis.com/maps/api/geocode/json?address=%s&sensor=false" % self.text_ctrl_1.GetValue().replace(" ", "+")
        googleResponse = urllib.urlopen(URL2)
        jsonResponse = json.loads(googleResponse.read())
        pprint.pprint(jsonResponse)
        #data_address = json.dumps([s['formatted_address'] for s in jsonResponse['results']], indent=3)
        data_lat = json.dumps([s['geometry']['location']['lat'] for s in jsonResponse['results']], indent=3)
        data_lon = json.dumps([s['geometry']['location']['lng'] for s in jsonResponse['results']], indent=3)
        self.label_1.SetLabel("Ti trovi alle coordinate:\n latitudine => %s\n longitudine => %s" % (data_lat,data_lon))
        event.Skip()
    def OnCancel(self, event): # wxGlade: MyFrame.
        self.text_ctrl_1.SetValue("")
        self.label_1.SetLabel("")
        event.Skip()

Ricordiamoci di caricare le giuste librerie:

import urllib
import json
import pprint

Non vi rimane che salvare ed eseguire il programma:

Se eseguite il programma da un terminale, vedrete anche l’intero array JSON con tutte le informazioni che potete elaborare, per l’esempio mi è sembrato sufficiente usare solo le coordinate.

Magari tutto questo non rende giustizia ai vari strumenti presentati, ma voglio invitarvi a fare una modifica all’interfaccia… aggiungete un pulsante ad esempio! Rigenerate il codice usando lo stesso file del progetto precedente, cosa notate? Ebbene si: wxGlade ha modificato solo le classi dell’interfaccia, lasciando inalterato il codice aggiunto da noi!

Spero di essere stato esaustivo: Buon divertimento!

3 Risposte to “Progettiamo e realizziamo la nostra prima interfaccia”

  1. blackout said

    bella questa

  2. Allanon said

    pure iooo;
    mizzeca sono indeciso se giocherellare con le gtk per gnome o sfruttare wxwidgets e la potente wxglade

    Io uso gnome e adoro gnome ^_^

    • hosiris said

      Ho scelto le wxwidgets solo per l’altissima compatibilità con tutti i sistemi. Se vuoi sviluppare solo per GNOME vai pure di gtk, ho letto le specifiche della v3 e m’è venuta la pelle d’oca😀 E poi dobbiamo diversificare le nostre conoscenze no?

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: