TurboGears - ToscaWidgets Forms

Uno degli aspetti più essenziali di qualsiasi applicazione web è presentare l'interfaccia utente per un utente. HTML fornisce un tag <form> che viene utilizzato per progettare un'interfaccia. Gli elementi del modulo come input di testo, radio, select ecc. Possono essere utilizzati in modo appropriato. I dati inseriti dall'utente vengono inviati sotto forma di messaggio di richiesta HTTP allo script lato server mediante il metodo GET o POST.

Lo script lato server deve ricreare gli elementi del modulo dai dati della richiesta http. Quindi, in questo effetto, gli elementi del modulo devono essere definiti due volte: una volta in HTML e di nuovo nello script lato server.

Un altro svantaggio dell'utilizzo di form HTML è che è difficile (se non impossibile) rendere dinamicamente gli elementi del form. L'HTML stesso non fornisce alcun modo per convalidare l'input dell'utente.

ToscaWidgets2

TurboGears si basa su ToscaWidgets2, una libreria flessibile per il rendering e la convalida dei moduli. Utilizzando ToscaWidgets, possiamo definire i campi del modulo nel nostro script Python e renderli utilizzando un modello HTML. È anche possibile applicare la convalida al campo tw2.

La libreria ToscaWidgets è una raccolta di molti moduli. Alcuni moduli importanti sono elencati di seguito:

• tw2.core- Fornisce funzionalità di base. I widget in questo modulo non sono pensati per essere disponibili per l'utente finale.

• tw2.forms- Questa è una libreria di moduli di base. Contiene widget per campi, insiemi di campi e moduli.

• tw2.dynforms - Contiene la funzionalità dei moduli dinamici.

• tw2.sqla - Questa è un'interfaccia per il database SQLAlchemy.

tw2.forms

Contiene una classe Form, che funge da base per i moduli personalizzati. Esiste una classe TableForm utile per il rendering dei campi in una tabella a due colonne. ListForm presenta i suoi campi in un elenco non ordinato.

La tabella seguente mostra i tipi di campi più comunemente usati nel modulo tw2.forms -

Sr.No.	Campi e descrizione
1	TextField Un campo di immissione di testo a riga singola
2	TextArea Campo di immissione di testo su più righe
3	CheckBox Presenta una scatola rettangolare controllabile con etichetta
4	CheckBoxList Caselle di controllo PF gruppo selezionabili in più
5	RadioButton Un pulsante di attivazione / disattivazione per selezionare / deselezionare
6	RadioButtonList Gruppo di pulsanti di opzione che si escludono a vicenda
7	PasswordField Simile a Textfield ma le chiavi di input non vengono rivelate
8	CalendarDatePicker Consente all'utente di scegliere una data
9	SubmitButton Pulsante per inviare un modulo
10	ImageButton Pulsante cliccabile con un'immagine in alto
11	SingleSelectField Consente la selezione di un singolo elemento da un elenco
12	MultipleSelectField Consente la selezione di più elementi dall'elenco
13	FileField Campo per il caricamento del file
14	EmailField Un campo di immissione e-mail
15	URLField Un campo di input per inserire l'URL
16	NumberField Una casella numerica
17	RangeField Un cursore numerico

Nell'esempio seguente, viene costruito un modulo che utilizza alcuni di questi widget. Sebbene la maggior parte di questi widget siano definiti in tw2.forms, CalendarDateField è definito nel modulo tw2.Dynforms. Quindi entrambi questi moduli insieme a tw2.core vengono importati all'inizio -

import tw2.core as twc
import tw2.forms as twf
import tw2.dynforms as twd

Un modulo ToscaWidgets è una classe derivata da tw2.forms.formclasse base. I widget richiesti vengono inseriti all'interno di un oggetto Layout. In questo esempio,TableLayoutsi usa. I widget vengono visualizzati in una tabella a due colonne. La prima colonna mostra la didascalia e la seconda colonna mostra il campo di input o di selezione.

Un oggetto TextField viene creato utilizzando il seguente costruttore:

twf.TextField(size, value = None)

Se non menzionato, l'oggetto TextField assume una dimensione predefinita ed è inizialmente vuoto. Durante la dichiarazione dell'oggetto TextArea, è possibile menzionare il numero di righe e colonne.

twf.TextArea("",rows = 5, cols = 30)

L'oggetto NumberField è un TextField che può accettare solo cifre. Le frecce su e giù vengono generate sul bordo destro per aumentare o diminuire il numero al suo interno. Il valore iniziale può anche essere specificato come argomento nel costruttore.

twf.NumberField(value)

Appena a destra di una casella CalendarDatePicker, viene visualizzato un pulsante del calendario. Quando viene premuto, viene visualizzato un selettore della data. L'utente può digitare manualmente una data nella casella o selezionarla dal selettore della data.

twd.CalendarDatePicker()

L'oggetto EmailField presenta un TextField, ma il testo in esso deve essere in formato e-mail.

EmailID = twf.EmailField()

Il modulo seguente ha anche un RadioButtonList. Il costruttore di questa classe contiene un oggetto List come valore del parametro options. Verrà visualizzato un pulsante di opzione per ciascuna opzione. La selezione predefinita viene specificata con il parametro value.

twf.RadioButtonList(options = ["option1","option2"],value = option1)

CheckBoxList esegue il rendering delle caselle di controllo per ciascuna opzione nell'elenco.

twf.CheckBoxList(options = [option1, option2, option3])

L'elenco a discesa è chiamato come campo SingleSelect in questa libreria ToscaWidgets. Gli elementi in un oggetto Elenco corrispondenti al parametro delle opzioni formano l'elenco a discesa. La didascalia visibile è impostata come valore del parametro prompt_text.

twf.SingleSelectField(prompt_text = 'text', options=['item1', 'item2', 'item3'])

Per impostazione predefinita, il modulo visualizza un pulsante Invia con la didascalia "salva". Per visualizzare un'altra didascalia, creare un oggetto SubmitButton e specificarlo come parametro valore.

twf.SubmitButton(value = 'Submit')

Il modulo viene inviato a un URL, che viene specificato come valore del parametro di azione del modulo. Per impostazione predefinita, i dati del modulo vengono inviati tramite il metodo http POST.

action = 'URL'

Nel codice seguente, un modulo denominato AdmissionForm è progettato utilizzando i widget spiegati sopra. Aggiungi questo codice in root.py prima della classe RootController.

class AdmissionForm(twf.Form):
   class child(twf.TableLayout):
      NameOfStudent = twf.TextField(size = 20)
      AddressForCorrespondance = twf.TextArea("", rows = 5, cols = 30)
      PINCODE = twf.NumberField(value = 431602)
      DateOfBirth = twd.CalendarDatePicker()
      EmailID = twf.EmailField()
      Gender = twf.RadioButtonList(options = ["Male","Female"],value = 'Male')
      Subjects = twf.CheckBoxList(options = ['TurboGears', 'Flask', 'Django', 'Pyramid'])

      MediumOfInstruction = twf.SingleSelectField(prompt_text = 'choose',
         options = ['English', 'Hindi', 'Marathi', 'Telugu'])
			
      action = '/save_form'
      submit = twf.SubmitButton(value ='Submit')

Ora salva questo codice qui sotto come twform.html nella directory dei modelli -

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:py = "http://genshi.edgewall.org/"
   lang = "en">
   
   <head>
      <title>TurboGears Form Example</title>
   </head>
   
   <body>
      <div id = "tw form">
         ${form.display(value = dict(title = 'default title'))}
      </div>
   </body>
   
</html>

Nella classe RootController (in root.py), aggiungi la seguente funzione del controller:

@expose('hello.templates.twform')
def twform(self, *args, **kw):
   return dict(page = 'twform', form = MovieForm)

Nella classe AdmissionForm, abbiamo stipulated/save_formcome URL di azione. Quindi aggiungisave_form() funzione in RootController.

@expose()
def save_movie(self, **kw):
   return str(kw)

Assicurati che il server sia in esecuzione (utilizzando gearbox serve). accederehttp://localhost:8080/twform nel browser.

Premendo il pulsante di invio invierà questi dati a save_form() URL, che visualizzerà i dati del modulo sotto forma di un oggetto dizionario.

{
   'EmailID': u'[email protected]', 
   'NameOfStudent': u'Malhar Lathkar', 
   'Gender': u'Male', 
   'PINCODE': u'431602', 
   'DateOfBirth': u'2015-12-29', 
   'Subjects': [u'TurboGears', u'Flask', u'Django'], 
   'MediumOfInstruction': u'', 
   'AddressForCorrespondance': u'Shivaji Nagar\r\nNanded\r\nMaharashtra'
}