• Meetings e Workshop
    l'associazione organizza workshop e meeting periodici

  • HowTo e manuali
    come costruire da te gadget elettronici e come programmarli

  • Hacking della PS3
    howto su come installare linux ed effettuare altri hack

  • Una comunità organizzata
    entra a far parte di una associazione organizzata e attiva

  • Strumenti di supporto
    per mantenersi in contatto e favorire la cooperazione

beginner - Progettiamo e realizziamo la nostra prima interfaccia PDF Stampa E-mail
Scritto da Giovanni Ruta - Sekhem   
Giovanni Ruta - Sekhem

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


 

Commenti  

 
+1 #1 salvo 2015-05-19 07:49 Complimenti per la leggibilita del sito, ce da cavarsi gli occhi. Citazione
 
 
#2 Blac]{out 2016-04-03 10:31 stiamo lavorando alla versione beta
purtroppo il tempo è tiranno e tutti lavoriamo

dacci un occhio e dimmi se ti pare meglio
http://beta.grayhats.org/
Citazione
 

Aggiungi commento


Codice di sicurezza
Aggiorna


grayhats.org, Powered by Joomla!; Joomla templates by SG web hosting
valid xhtml valid css