tkinter GUI Designer

Alfons Mittelmeyer · Donnerstag 27. August 2015, 23:40

jens hat geschrieben:https://github.com/alejandroautalan/pygubu mal angesehen?

Hab mir mal dieses Video angeschaut: https://www.youtube.com/watch?v=wuzV9P8geDg
Das Design links mit dem Menü wirkt professioneller. Die Eingaben wurden gemacht, wie bei mir auch. Diese Listboxen biete ich auch. Das sind die Buttons mit dem Fragezeichen. Anscheinend könnte man auch die Widgets mit der Maus größer ziehen. Kann ich mal irgendwann machen. Den commamd kann man auch in der GUI binden. Geht auf Application.command_function. Aber das ist keine besonders gute Idee. Schränkt die Flexibilität ein. Die Funktion gui.get_widget ist genau die Gleiche, heißt dort builder.get_object. Aber alles in allem, gehen komplexe GUIs dort nicht. Und echt WYSIWYG - bei mir ist es tkinter Original - ist es auch nicht.

Was bestimmt nicht geht. Ich habe zwei zusätzliche Widgets: LinkLabel und LinkButton. Wenn man da draufdrückt, dann wird der Inhalt des betreffenden Containers gelöscht - etwa Frame - und dort etwas Neues nachgeladen. Die Frage ist nur, wie Ihr mit Eurer Art der Programmierung damit umgehen würdet.

Außerdem enthält der GUI Designer Möglichkeiten, ein langes Programm einfach durch Abspeichern von Teilen in kleinere Einheiten aufzusplitten. So etwas geht mit solchen Programmen auch nicht.

Gut, die Bedienung des GUI Designers und das Aussehen kann sicherlich noch um einiges verbessert werden. Dass ich alles auf einmal bis in das letzte Detail gleich ganz perfekt gestalte, würde etwas lange dauern. Aber mit Sicherheit kann man sagen, so eine Konzeption hat sonst niemand. Und in dieser - ganz simplen - Konzeption steckt viel drin, was sonst nirgendwo geht.

Trennung von Code und GUI ist eine gute Idee. Aber nur solange alles noch überschaubar ist. Will man zu 24 GUI Modulen auch noch 24 Code Module machen? Und was passiert, wenn man von den 24 GUI Modulen 12 löscht und dafür 20 nachlädt, und das immer wieder macht, bis es in die hundert geht?

Sirius3 · Freitag 28. August 2015, 08:44

@Alfons Mittelmeyer: Du schreibst immer nur, wie toll Dein eigener Designer ist, gesehen hat ihn außer Dir hier aber noch niemand. Perfekt muß es am Anfang noch nicht sein, daher "release early, release often".

jens · Freitag 28. August 2015, 08:52

Sirius3 hat geschrieben:"release early, release often".

+1

@Alfons Mittelmeyer: Ich will nicht sagen, das pygubu das non+ultra ist.
Ich frage mich nur, ob es nicht Sinnvoller ist, sich bei dem Projekt einzubringen, anstatt das Rad zum x-ten Mal neu zu erfinden

Was pygubu auch fehlt ist eine schöne Möglichkeit grid layouts *bequem* zu entwerfen. Denn auch dort muß man mit Zahlen hantieren.

wuf · Freitag 28. August 2015, 09:47

Hi Alfons

Da möchte ich mich Sirius3 und jens nur anschliessen. Von dir haben wir bis jetzt ausser viel schwer verdaubar geschriebenes nichts gesehen und das ist alles. Sorry dies kann sich in Zukunft vielleicht noch ändern. Hut ab! Mit dem GUI Designer for Tkinter hat Alejandro Autalan eine super Arbeit erbracht, welche bis jetzt noch nicht ebenbürtiges in diese Richtung für Tkinter hat. Eine Arbeit wo es sich lohnt darauf aufzubauen.

Gruss wuf

sparrow · Freitag 28. August 2015, 10:08

Alfons Mittelmeyer hat geschrieben:Die Frage ist nur, wie Ihr mit Eurer Art der Programmierung damit umgehen würdet.

Bei einem GUI-Designer möchte ich mir um meine Art der Programmierung gar keine Gedanken machen, wenn ich ehrlich bin. Wie der name ja schon sagt "designe" ich darin die GUI. Aus meinem Code, möchte ich die Elemente darin einfach erreichen können, wie das Toolkit das vorsieht.

Alfons Mittelmeyer hat geschrieben:Außerdem enthält der GUI Designer Möglichkeiten, ein langes Programm einfach durch Abspeichern von Teilen in kleinere Einheiten aufzusplitten. So etwas geht mit solchen Programmen auch nicht.

Neee, ist ja auch ein GUI-Designer. Warum sollte der Programme aufsplitten?

Alfons Mittelmeyer hat geschrieben:Trennung von Code und GUI ist eine gute Idee. Aber nur solange alles noch überschaubar ist. Will man zu 24 GUI Modulen auch noch 24 Code Module machen? Und was passiert, wenn man von den 24 GUI Modulen 12 löscht und dafür 20 nachlädt, und das immer wieder macht, bis es in die hundert geht?

Es ist immer eine gute Idee Geschäftslogik und Oberfläche zu trennen.
Und ich habe schon in ein paar Programmiersprachen mit GUIs gespielt. Ich habe nie "GUI-Module gelöscht" oder irgend etwas nachgeladen, das so spektakulär war, dass das hierzu zu passend scheint

snafu · Freitag 28. August 2015, 11:00

Alfons Mittelmeyer hat geschrieben:Trennung von Code und GUI ist eine gute Idee. Aber nur solange alles noch überschaubar ist. Will man zu 24 GUI Modulen auch noch 24 Code Module machen? Und was passiert, wenn man von den 24 GUI Modulen 12 löscht und dafür 20 nachlädt, und das immer wieder macht, bis es in die hundert geht?

Man muss ja nicht zu jedem GUI-Modul ein Code-Modul machen. Wenn man meint, dies tun zu müssen, dann hat man IMHO den Sinn der Trennung zwischen GUI und Geschäftlogik noch nicht verstanden.

Die GUI-Module stellen normalerweise die grafische Oberfläche deines Programms zusammen (z.B. verschiedene Fenster) basierend auf den Widgets, die dir dein GUI-Toolkit zur Verfügung stellt. Die Code-Module enthalten üblicherweise Hilfsfunktionen und Programmlogik, die beim Auftreten entsprechender Aktionen des Nutzers ausgeführt werden sollen.

Es ist durchaus denkbar, dass man Programmlogik zu einem bestimmten Bereich hat, die in einem einzigen Modul steckt, aber dass man daraus aus 3 verschiedenen Fenstern heraus zugreift und für jedes dieser Fenster wegen der Übersichtlichkeit ein eigenes GUI-Modul erstellt hat.

Das mit dem Löschen und Nachladen verstehe ich in dieser Form nach wie vor nicht. Vor allem: Wie kann man von den gedachten 24 Modulen plötzlich auf hunderte Module kommen? Dir ist schon klar, dass ein Modul in Python ein Singleton ist, d.h. dass maximal eine Instanz des Moduls im Speicher gehalten wird, egal wie oft du während der Interpreter-Sitzung einen Import dieses Moduls anweist?

jens · Freitag 28. August 2015, 11:06

Zumal ein GUI Designer, so wie ich verstehe, nur dazu da ist, einmal die GUI zusammen zu würfeln, aber dann war es das auch.
Das eigentliche Programm, für welches ich die GUI gemacht hab, soll nix mit dem GUI Editor zu tun haben...

Alfons Mittelmeyer · Freitag 28. August 2015, 11:07

jens hat geschrieben:@Alfons Mittelmeyer: Ich will nicht sagen, das pygubu das non+ultra ist.
Ich frage mich nur, ob es nicht Sinnvoller ist, sich bei dem Projekt einzubringen, anstatt das Rad zum x-ten Mal neu zu erfinden

Was pygubu auch fehlt ist eine schöne Möglichkeit grid layouts *bequem* zu entwerfen. Denn auch dort muß man mit Zahlen hantieren.

Es ist nicht sinnvoll, mich bei diesem Projekt einzubringen, weil pygubu Essentielles - zumindest nach meinen Vorstellungen - nicht kann. Ich kann nicht nur Zugriff auf die GUI anbieten, sondern auch Original tkinter generieren ohne gesonderten GUI Zugriff oder auch beides zusammen. Dann wird pygubu von etlichen sehr gelobt. Was pygubu hat, ist kein Problem, auch zu implementieren. Ich habe es mir angeschaut und gesehen, dass ich bei Zahlenangaben in den Config und Layout Options statt Entry Feldern Spinboxen nehmen sollte, dann ist bei Experimentieren mit padx oder Höhe und Breite die Bedienung schneller. Auch Höhe und Breite mit der Maus ziehen kann ich implementieren.

Aber, wie Du gesagt hast, fehlt bei pygubu die schöne Möglichkeit grid layouts *bequem* zu entwerfen. Dann laßt uns doch nachdenken, wie wir uns eine solche *schöne* Möglichkeit vorstellen und wie wir sie realisieren. Eine Idee dazu hatte ich gerade gehabt. Und ich sollte dazu ein Bildchen machen, wie es aussehen könnte.

jens · Freitag 28. August 2015, 11:12

Hast du schon mit den Entwicklern von pygubu gesprochen?!?

Fork + Pull request

Alfons Mittelmeyer · Freitag 28. August 2015, 12:15

jens hat geschrieben:Hast du schon mit den Entwicklern von pygubu gesprochen?!?

Fork + Pull request

Sorry, da gibt es nichts zu besprechen. pygubu ist ein anderes Konzept. Es handelt sich hier um einen getrennten GUI Designer, der wahrscheinlich nicht mal tkinter verwendet. Daraus werden Daten im xml Format generiert. Und daraus dann unter Python eine Python GUI erzeugt. Mein GUI Designer generiert zuerst einmal überhaupt keine Daten. Wenn Du auf grid drückst, dann wird der grid ausgeführt. Lediglich merkt sich der GUI Designer Referenzen auf die verwendeten Widgets. Und aus diesen Referenzen kann dann der Code generiert werden. xml könnte ich natürlich auch generieren. Aber wozu zuerst xml und aus xml dann wieder Python generieren, wie es pygubu tut, wenn man gleich python mit tkinter generieren kann?

Aber kommen wir mal zum gewünschten Grid Layout in Tabellenform. Ich würde mir vorstellen, dass man Anzahl Zeilen und Anzahl Spalten angibt und Höhe und Breite der Spalten. Dann bekommt man ein Grid Layout mit zusätzlich eingefügten Frames als Separatoren. Dann fügt man da seine Widgets ein und wirft zum Schluss die zusätzlichen Separatorframes auf Buttondruck wieder heraus.

So könnte dann die Vorlage für 2 Zeilen 3 Spalten ausssehen:
Bild

Das ist ein Grid Layout mit zusätzlich eingefügten Zeilen und Spalten mit Separatorframes. Der Platz dazwischen ist leer. Darin können dann die Widgets eingefügt werden.

Jetzt muss man sich Gedanken über die Bedienung machen. Was wäre mit Maus Doppelklick, um ein Widget, das noch kein Layout hat, darin zu positionieren?

Also, bitte Vorstellungen zur Bedienung formulieren, wenn Ihr so etwas wünscht.

sparrow · Freitag 28. August 2015, 12:24

Alfons Mittelmeyer hat geschrieben:Mein GUI Designer generiert zuerst einmal überhaupt keine Daten. Wenn Du auf grid drückst, dann wird der grid ausgeführt. Lediglich merkt sich der GUI Designer Referenzen auf die verwendeten Widgets. Und aus diesen Referenzen kann dann der Code generiert werden. xml könnte ich natürlich auch generieren. Aber wozu zuerst xml und aus xml dann wieder Python generieren, wie es pygubu tut, wenn man gleich python mit tkinter generieren kann?

Liest du die Beiträge in deinen Threads auch? Es wurde doch bereits geschrieben, wie das zum Beispiel im Qt-Designer läuft (Stichword .ui). Wozu zuerst XML und dann Python? Ganz einfach: XML-ist recht simpel und ein verbreitetes Format.
Die Frage, die du dir eigentlich stellen musst: Warum Python, und das Programm dadurch unnötig einschränken, wenn ich XML haben könnte, wofür es für so ziemlich jede Sprache etwas gibt um das schmerzfrei zu lesen. Wenn du Python-Code generierst, schränkst du die Zielgruppe erheblich ein, denn Tk wird ja nicht nur mit Python verwendet.

Alfons Mittelmeyer hat geschrieben:Also, bitte Vorstellungen zur Bedienung formulieren, wenn Ihr so etwas wünscht.

Ich würde sagen: zeig erst einmal das Programm, dann können wir uns über Vorstellungen bei der Bedienung unterhalten. Und damit meine ich keine Screenshots.

Alfons Mittelmeyer · Freitag 28. August 2015, 12:32

sparrow hat geschrieben:Ich würde sagen: zeig erst einmal das Programm, dann können wir uns über Vorstellungen bei der Bedienung unterhalten. Und damit meine ich keine Screenshots.

Sorry, wie soll ich ein Programm zeigen, das noch nicht existiert? Das war ein manuelles Gridlayout mit dem GUI Designer. Aber wenn Du das unbedingt sehen willst:

Code: Alles auswählen

Frame(bg='#a0a0a0',height='30',width='2').grid(row='1')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='1',row='0')
Frame(bg='#a0a0a0',height='30',width='2').grid(column='2',row='1')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='3',row='0')
Frame(bg='#a0a0a0',height='30',width='2').grid(column='4',row='1')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='5',row='0')
Frame(bg='#a0a0a0',height='30',width='2').grid(column='6',row='1')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='1',row='2')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='3',row='2')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='5',row='2')
Frame(bg='#a0a0a0',height='30',width='2').grid(row='3')
Frame(bg='#a0a0a0',height='30',width='2').grid(column='2',row='3')
Frame(bg='#a0a0a0',height='30',width='2').grid(column='4',row='3')
Frame(bg='#a0a0a0',height='30',width='2').grid(column='6',row='3')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='1',row='4')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='3',row='4')
Frame(bg='#a0a0a0',height='2',width='60').grid(column='5',row='4')

sparrow · Freitag 28. August 2015, 12:37

Alfons Mittelmeyer hat geschrieben:Sorry, wie soll ich ein Programm zeigen, das noch nicht existiert?

Du redest hier recht viel davon was ein Programm macht (anderen Programmen fehlt "Essentielles"), aber es existiert noch gar nicht?
Dann würde ich sagen: Butter bei die Fische, und wenn dann mal was da ist, dann Kommentare zur Bedienung und Nutzbarkeit einholen.

Alfons Mittelmeyer · Freitag 28. August 2015, 12:52

sparrow hat geschrieben:
Alfons Mittelmeyer hat geschrieben:Sorry, wie soll ich ein Programm zeigen, das noch nicht existiert?
Du redest hier recht viel davon was ein Programm macht (anderen Programmen fehlt "Essentielles"), aber es existiert noch gar nicht?
Dann würde ich sagen: Butter bei die Fische, und wenn dann mal was da ist, dann Kommentare zur Bedienung und Nutzbarkeit einholen.

Das Programm existiert, denn ich habe es. Es ist nur noch nicht veröffentlicht. Und bevor ich es veröffentliche, hätte ich gerne Informationen, was Ihr braucht und noch wünscht. Und der Wunsch war ein *schönes* Grid Layout.

BlackJack · Freitag 28. August 2015, 13:04

@Alfons Mittelmeyer: Wir brauchen und wünschen das Programm zu sehen, sonst macht das Diskutieren über Details von einem Programm das keiner ausser Dir kennt, wenig Sinn.

Alfons Mittelmeyer · Freitag 28. August 2015, 13:22

BlackJack hat geschrieben:@Alfons Mittelmeyer: Wir brauchen und wünschen das Programm zu sehen, sonst macht das Diskutieren über Details von einem Programm das keiner ausser Dir kennt, wenig Sinn.

OK, ist auch eine Idee. Dann ziehe ich mich für eine Zeit von der Diskussion zurück. Mache das Programm fertig - *schönes* GridLayout, die hier besprochenenen Interface Funktionen (auch zur Verwendung eigener Klassen), Generierung von tkinter Code und nicht nur DynTkInter Code (xml mache ich jetzt noch nicht), Ersetzung von Entries mit Zahlen durch Spinboxen, und noch schauen, was ich für PanedWindows und Menüs machen muss.

Wenn Ihr mir keine Vorstellungen für das GridLayout nennen wollt, muss ich mir eben selber den Kopf zerbrechen, wie Ihr das vielleicht wünschen würdet.

snafu · Freitag 28. August 2015, 13:30

Wann kommst du wieder? An Heiligabend?

Alfons Mittelmeyer · Freitag 28. August 2015, 13:57

snafu hat geschrieben:Wann kommst du wieder? An Heiligabend?

Wahrscheinlich, wenn ich die Bedienung des GridLayouts vorstelle. Für letzte Anmerkungen, bevor ich es veröffentliche.

Alfons Mittelmeyer · Freitag 28. August 2015, 14:05

sparrow hat geschrieben:Ich habe nie "GUI-Module gelöscht" oder irgend etwas nachgeladen, das so spektakulär war, dass das hierzu zu passend scheint

Gelöscht habe ich bisher auch keine. Bei großen Anwendungen oder wechselnden Teilanwendungen kann man es brauchen. Aber Nachladen möchte ich schon. Ihr benutzt ja auch import. Bei mir ist es eine Ladefunktion, die öfter als einmal aufrufbar ist und die nicht in ein Modul importiert. Das wäre etwa das Script, welches die fünf Teile des GUI Creators lädt:

Code: Alles auswählen

def main(parent):

	### NAME CreateFrame	
	CreateFrame = Frame(parent)
	gui.load_Script(CreateFrame,"guidesigner/CreateFrame.py")
	CreateFrame.grid(sticky='n',row='0')

	### NAME CreateAndLayout
	CreateAndLayout = Frame(parent)
	gui.load_Script(CreateAndLayout,"guidesigner/CreateAndLayout.py",)
	CreateAndLayout.grid(column='1',sticky='n',row='0')
	
	### NAME ConfigOptions
	ConfigOptions = LabelFrame(parent)
	gui.load_Script(ConfigOptions,"guidesigner/ConfigOptions.py")
	ConfigOptions.grid(row='0', column='2',sticky='n')

	### NAME DetailedLayout
	DetailedLayout = Frame(parent)
	gui.load_Script(DetailedLayout,"guidesigner/DetailedLayout.py")
	DetailedLayout.grid(row='0',column='3',sticky='n')

	### NAME Selection
	Selection = LabelFrame(parent)
	gui.load_Script(Selection,"guidesigner/Selection.py")
	Selection.grid(row = '0',column = '4', sticky='n')

	### CODE ===================================================

	ConfigOptions.grid_remove()
	DetailedLayout.grid_remove()

	### ========================================================

Diese Ladefunktion lädt das jeweilige Script und ruft darin die Funktion main mit parent Übergabe auf. Und auf diese Art und Weise lade ich insgesamt 24 Scripte

snafu · Freitag 28. August 2015, 14:15

Und `load_Script()` importiert die angegebene Datei und übergibt ihr über eine spezielle Schnittstelle das zuvor erstellte Exemplar des GUI-Widgets, oder wie muss ich mir das vorstellen?

EDIT: Achso, das ist wohl mit der "parent-Übergabe" an `main()` gemeint, richtig?