Tutorial 16: TextArea
The MaxGUI Beginner Tutorial Series - Tutorial 16: TextArea
(c) Assari Feb 8 2006
Ins Deutsche übersetzt von simi
Dieses Gadget wird kräftig ausgenützt von der MaxIDE und ich denke, es hat genügend Funktionalität, um ein grosses Programm zu unterstützen. Weil es sich bei all diesen Tutorials um Beginnertutorials handelt, werden wir uns nicht zu fest in die extremen Möglichkeiten einarbeiten
Weil dieses Tutorial ziemlich lang ist, hab ich hier alle Sachen die besprochen werden aufgelistet. Das erleichtert dir das Navigieren durch die verschiedenen Themen. Aber es ist wie immer eine Logik hinter der Reihenfolge.
Ein TextArea mit CreateTextArea erstellen
Wie immer starten wir einfach, und steigern das Niveau kontinuierlich. Die erste Funktion, mit der wir starten, ist natürlich CreateTextArea.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Forever End |
Nach dem ausführen des obigen Codes, erscheint ein kleiner Bereich, wo wir Sachen eingeben können. Es fühlt sich so ähnlich wie Notepad an.
|
Text in TextAreas mit AddTextAreaText hinzufügen
Es gibt verschiedene Wege, Text in unser TextArea einzufügen. Der Einte ist, indem man wie oben, einfach den Text mit der Tastatur eingibt. Der andere Weg ist, indem man ihn programmtechnisch mit der AddTextAreaText-Funktion hinzufügt.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) AddTextAreaText(MyText,"Franz jagt im komplett verwahrlosten ") AddTextAreaText(MyText,"Taxi quer durch Bayern.") Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Forever End |
Wir können nun den Text von den obigen beiden Zeilen in unserem TextArea sehen.
|
Beachte, dass CreateTextArea drei verschiedene Styles haben kann. Zum einten, den Voreingestellten, den wir in diesem Tutorial immer benutzen. Dann gibt es noch TEXTAREA_WORDWRAP, welcher zu lange Zeilen automatisch umbricht, und TEXTAREA_READONLY, der das Editieren der Zeilen verhindert.
Function CreateTextArea:TGadget(x,y,w,h,group:TGadget,style=0) |
Text in einem TextArea mit SetTextAreaText ersetzen
Eine andere interessante Funktion ist SetTextAreaText, die uns erlaubt, Text in unserem TextArea einzufügen oder zu ersetzten.
Function SetTextAreaText( textarea:TGadget,text$,pos=0,length=TEXTAREA_ALL,units=TEXTAREA_CHARS ) |
Der untenstehende Code ersetzt das Wort jagt (4 Zeichen lang, an 6. Stelle) durch fährt.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) AddTextAreaText(MyText,"Franz jagt quer durch Bayern.") SetTextAreaText(MyText,"fährt",6,4) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Forever End |
Beachte das Wort fährt an Stelle von jagt.
|
Text von einer Datei mit ReadStream und AddTextAreaText in ein TextArea einfügen
Oft wir der Text im TextArea von einer Datei geladen. Das folgende Programm liest ein Beispielsprogramm in das TextArea. Wir lesen jede Zeile aus, und fügen sie in unser TextArea mit der AddTextAreaText-Funktion ein. Der Trick dabei ist, dass man nach jeder Zeile ein "~n" anhängt, was zu einer neuen Zeile führt. ReadStream öffnet die Datei und mit ReadLine lesen wir Zeile für Zeile aus.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) Local In:Tstream=ReadStream(Blitzmaxpath()+"/samples/spintext/spintext.bmx") While Not Eof(In) Local text:String=ReadLine(In) AddTextAreaText(MyText,Text+"~n") Wend CloseStream(In) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Forever End |
Beachte auch, wie nun eine vertikale Scrollbar erscheint. Da der Texthöhe grösser als die TextArea-Höhe ist, ist dies nötig. Dies wird automatisch von MaxGUI gemacht.
|
Die Schrift in einem TextArea mit SetTextAreaFont ändern
Lass uns sehen, wie wir unser TextArea so stylen können, dass es wie die MaxIDE aussieht. Lass uns zuerst die Schrift auf die programmierfreundlichere Courier New wechseln. Wir müssen Zuerst die Schrift via LoadGUIFont laden und dann können wir diese via SetTextAreaFont setzen. Beachte dass wir, bevor wir Text hinzufügen, die Schrift ändern müssen, dass eine Veränderung stattfindet.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) Local GUIFont:TGuiFont=LoadGuiFont( "Courier New",12) SetTextAreaFont(MyText,GUIFont) Local In:Tstream=ReadStream(Blitzmaxpath()+"/samples/spintext/spintext.bmx") While Not Eof(In) Local text:String=ReadLine(In) AddTextAreaText(MyText,Text+"~n") Wend CloseStream(In) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Forever End |
Beachte nun, dass unsere Schrift nun auf Courier, Grösse 12 gewechselt hat.
|
Die Text- und Hintergrundfarbe in einem TextArea mit SetTextAreaColor ändern
Wir können die Hintergrund- und Schriftfarbe mit SetTextAreaColor mit zweimaligem Benutzen wechseln - einmal, um die Hintergrundfarbe und einmal für den Wechsel der Schrift-/Vordergrundfarbe.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) Local GUIFont:TGuiFont=LoadGuiFont( "Courier New",12) SetTextAreaFont(MyText,GUIFont) Local In:Tstream=ReadStream(Blitzmaxpath()+"/samples/spintext/spintext.bmx") While Not Eof(In) Local text:String=ReadLine(In) AddTextAreaText(MyText,Text+"~n") Wend CloseStream(In) SetTextAreaColor(MyText,1,81,107,True) SetTextAreaColor(MyText,255,255,50,False) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Forever End |
Die Syntax für SetTextAreaColor ist:
Function SetTextAreaColor( textarea:TGadget,r,g,b,bg=False ) |
r(ot), g(rün) und b(lau) sind die Farbanteile für die gewünschte Farbe. bg ist true, wenn wir die Hintergrundfarbe setzen wollen, oder false für die Vordergrundfarbe.
|
Mit TextAreaLen die Anzahl Zeichen und Zeilen in einem TextArea zählen
Lass uns nun eine andere, interessante Funktion ansehen, die wir für unser TextArea benutzen können.
Wir können ein paar "Statistiken" über unser TextArea mit TextAreaLen erstellen. TextAreaLen hat folgende Syntax:
Function TextAreaLen( textarea:TGadget,units=TEXTAREA_CHARS ) |
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) Local GUIFont:TGuiFont=LoadGuiFont( "Courier New",12) SetTextAreaFont(MyText,GUIFont) Local In:Tstream=ReadStream(Blitzmaxpath()+"/samples/spintext/spintext.bmx") While Not Eof(In) Local text:String=ReadLine(In) AddTextAreaText(MyText,Text+"~n") Wend CloseStream(In) SetTextAreaColor(MyText,1,81,107,True) SetTextAreaColor(MyText,255,255,50,False) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End End Select Local char:Int=TextAreaLen(MyText,TEXTAREA_CHARS) Local lines:Int=TextAreaLen(MyText,TEXTAREA_LINES) SetStatusText MyWindow,"Anzahl Zeichen="+char+" | Anzahl Zeilen="+Lines Forever End |
We can now see a running total of the number of characters and lines in our TextArea. Go ahead and key in some text and insert a couple of lines you will see the text on the status line changing.
Wir können nun in der Statuszeile die Anzahl der Zeichen und Zeilen in unserem TextArea sehen. Gib ein bisschen Text ein, und füge ein paar Zeilen hinzu - so wirst du sehen, wie sich die Zahlen verändern.
|
Text ändern in einem TextArea mit TextAreaText
TextAreaText ist eine sehr nützliche Funktion, die uns erlaubt, den Text im TextArea zurückzubekommen und für weiter Manipulationen in unserem BlitzMax-Programm zu benutzen.
Function TextAreaText$( textarea:TGadget,pos=0,length=TEXTAREA_ALL,units=TEXTAREA_CHARS ) |
Zum zeigen, wie wir diese Funktion nutzen können, lass uns den Code von einem früheren Programm wie unten abändern und uns gleichzeitig eine andere, nützliche Funktion, TextAreaCursor, kennen lernen.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) AddTextAreaText(MyText,"Franz jagt quer durch Bayern") Local cursorpos:Int Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_GADGETSELECT cursorpos=TextAreaCursor(MyText) End Select SetStatusText MyWindow, "Text = "+TextAreaText(MyText,0,cursorpos) Forever End |
Führe obiges Programm aus, und klicke irgendwo in den Text. Du siehst, wie sich der Text in der Statusbar ändert. Der Text startet vom Start (pos=0) und endet bei der Cursoposition, wo wir klicken. Die Cursorposition können wir mit der TextAreaCursor-Funktion bekommen.
|
Beachte auch den Event, EVENT_GADGETSELECT, den wir benutzen um eine Aktion im TextArea festzustellen.
Case EVENT_GADGETSELECT cursorpos=TextAreaCursor(MyText) |
Eine Wort oder eine Zeile in einem TextArea mit TextAreaText auswählen
Ein TextArea hat die interessante Eigenschaft, dass bei einem Doppelklick das Wort unter dem Cursor ausgwählt wird. Bei einem Dreifachklick wir die ganze Zeile selektiert. Lass uns sehen, wie wir einen Nutzen aus diesem Verhalten ziehen können:
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) AddTextAreaText(MyText,"Franz jagt quer durch Bayern") Local cursorpos:Int Local SelectedLength:Int Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_GADGETSELECT cursorpos=TextAreaCursor(MyText) SelectedLength=TextAreaSelLen(MyText) End Select SetStatusText MyWindow, "Text ="+TextAreaText(MyText,cursorpos,SelectedLength) Forever End |
Wir haben schon wieder einen neue Funktion kennen gelernt, TextAreaSelLen, die uns die Länge des selektierten Textes zurückgibt. TextAreaCursor gibt nun die erste Position des selektierten Textes zurück, statt der Cursorposition, wie im vorherigen Beispiel.
|
Das Format eines Textabschnittes in einem TextArea mit FormatTextAreaText ändern
Jetzt machen wir etwas komplizierteres. Wir werden eine Aktion, die du bei der MaxIDE siehst, implementieren. Nämlich das Schlüsselwort-Highlighting.
Um dies zu machen, benötigen wir die FormatTextAreaText-Funktion, die folgende Syntax hat:
Function FormatTextAreaText( textarea:TGadget,r,g,b,flags,pos=0,length=TEXTAREA_ALL,units=TEXTAREA_CHARS ) |
Diese Funktin erlaubt uns ausgewählte Teile des Textes, via die r,g,b-Parameter und über die flags (du musst mit den Flags experimentieren, um herauszufinden, was sie bewirken; die Hilfe schweigt darüber) zu formatieren.
So, lass uns sehen, wie wir ein sehr simples Syntax-Highlighting mit dieser Funktion hinkriegen. Der einfachheit halber werden wir nur 2 Schlüsselwörter haben.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("TextArea-Beispiel", 40,40,400,400) Global MyText:TGadget=CreateTextArea(0,0,380,360,MyWindow) Local GUIFont:TGuiFont=LoadGuiFont( "Courier New",12) SetTextAreaFont(MyText,GUIFont) Local In:Tstream=ReadStream(Blitzmaxpath()+"/samples/spintext/spintext.bmx") While Not Eof(In) Local text:String=ReadLine(In) AddTextAreaText(MyText,Text+"~n") Wend CloseStream(In) SetTextAreaColor(MyText,1,81,107,True) SetTextAreaColor(MyText,255,255,50,False) Local cursorpos:Int Local SelectedLength:Int Local MyWord:String Local Keyword:String="SetColor |DrawText |" Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_GADGETSELECT cursorpos=TextAreaCursor(MyText) SelectedLength=TextAreaSelLen(MyText) MyWord=TextAreaText(MyText,cursorpos,SelectedLength) If Instr(KeyWord,MyWord+"|") Then .. FormatTextAreaText(MyText,0,255,0,0,Cursorpos,SelectedLength) End Select SetStatusText MyWindow,"Der Cursor ist beim Wort: "+MyWord Forever End |
Wenn wir das obige Programm kompilieren und ausführen, können wir auf einen Text im TextArea klicken, und das Wort unter dem Cursor wird hervorgehoben, wenn es auch in unserer Liste vorkommt. In der Statusbar wird auch noch das Wort unter dem Cursor angezeigt.
|
At the moment our program only recognises two keywords, go ahead and modify to program so that it can recognise more keywords. Perhaps you may want to change the color it highlights to by changing the rgb values.
Im Moment kann unser Programm nur zwei Schlüsselwörter hervorheben. Ändere das Programm so ab, dass es mehr Schlüsselwörter kennt. Du kannst auch die Highlightfarbe ändern, in dem du die rgb-Werte veränderst.
Zum Schluss...
Wie du sehen kannst, ist das TextArea ein sehr mächtiges und flexibles Gadget. Diejenigen, die mit MaxIDE programmieren, benutzen das TextArea immer wenn sie am coden in BlitzMax sind.
Ich werde diesesmal nicht die Sachen aufzählen, die wir gelernt haben, denn diese sind schon am Anfang des Tutorials aufgelistet