PageControl | BVA-System

Posts Tagged ‘PageControl’

Aktualisierte Oberfläche

Dienstag, März 5th, 2013

Das heutige Versionsupdate bringt eine deutliche Änderung an der Oberfläche mit sich. Im Dezember letzten Jahres habe ich damit begonnen, eine animierte Pagecontrol-Komponente zu entwickeln. Mein Ziel war es, das die nicht immer benötigte Baumansicht bei Bedarf ausgeblendet werden kann. Dadurch sollte mehr Platz für die Bildansichten geschaffen werden. Nebenbei wollte ich noch ein Problem des bisher eingesetzten Pagecontrols beseitigen.  Dort wurde nämlich der Focus nicht sichtbar dargestellt. Beide Ziele konnte ich nun zufriedenstellend erreichen, so dass in der Version 2.1.3.59-dev das alte Pagecontrol nicht mehr vorhanden ist.

Animiertes Pagecontrol

Startet man das BVASystem das erste mal, nach der Installation der neuen Version, fällt sofort die geänderte Oberfläche ins Auge. Die beiden Seiten der Baumansicht sind nun vertikal ausgerichtet. Die Baumansicht ist festgepinnt, so das noch keine Animationen erfolgen. Zum Ausblenden der Baumansicht muss dann zuerst die Pin-Nadel gelöst werden. Verlässt man anschließend mit der Maus den Bereich der Baumansicht, so wird diese ausgeblendet. Ausnahme hierbei ist, wenn die Baumansicht den Eingabefokus besitzt. Dann nämlich bleibt die Ansicht stehen, bis sich der Eingabefokus ändert. Dies soll verhindern, das der Bereich ausgeblendet wird, wenn man eigentlich eine Tastatureingabe vornehmen möchte. Beim Beenden des Programms wird der Status (angepinnt/nicht angepinnt) der Baumansicht gespeichert und beim nächsten Programmstart genauso wieder eingestellt. 

BVASystem mit geöffneter Baumansicht

BVASystem mit geöffneter Baumansicht

Damit die Optik einheitlich erscheint, wurde das Pagecontrol für die Bildansichten ebenfalls ersetzt. Eine Animation ist bei diesem Steuerelement nicht möglich, da es wenig sinnvoll ist, den Hauptbereich der Anwendung auszublenden.

BVASystem mit minimierter Baumansicht

BVASystem mit minimierter Baumansicht

Auf den beiden Bildern sieht man deutlich, wie durch den gewonnenen Platz, eine größere Anzahl von Miniaturbildern angezeigt werden kann. Mein Ziel habe ich also erreicht.

Änderungen an der Bildinformationsansicht

Damit habe ich nun endlich die erste große Baustelle abgeschlossen und kann mich auf die nächste große Baustelle stürzen. Bereits im letzten Artikel hatte ich angekündigt, die Logik hinter den Bildinformationspanel zu aktualisieren. Gerade gestern bin ich damit fertig geworden, die neuen Algorithmen zu integrieren. Und nicht nur das: Ich habe es ebenfalls geschafft, das nun einzelne Panel aus- und auch wieder eingeblendet werden können. Prinzipiell ist es möglich, Panel in beliebiger Reihenfolge ein- und auszublenden. Allerdings ist es nur bedingt möglich, das ausgeblendete Panel in gleicher Größe und Position wieder einzublenden. Ändert sich die Struktur der Ansicht zu stark, wird das Panel dann neu initialisiert. Somit entsteht immer eine valide Ansicht, bei der die gewählten Bildbereiche in möglichst optimaler Größe platziert werden.

Ausblick

In der nächsten Version habe ich mir vorgenommen, einige kleinere Bugs/Unschönheiten in der Oberfläche zu beseitigen. Außerdem habe ich vor, mich weiterhin auf die Großbaustelle Bildinformationsansicht zu konzentieren. In  rund 3 Wochen soll es möglich sein, zwei Bildinformationspanel per Drag&Drop zu tauschen. Bis dahin steht aber noch einiges an Arbeit vor mir … 

Prototyp: Animiertes Pagecontrol (Teil 2)

Freitag, Februar 8th, 2013

Vor einigen Tagen wurde mir bewusst, das ich gerade viel zu viele offene Punkte versuche gleichzeitig zu bearbeiten. Daher habe ich mich entschlossen, etwas gezielter an den Sachen zu arbeiten, die ich relativ schnell abschließen kann. Meine erste Wahl fiel auf das animierte Pagecontrol.

In der letzten Woche habe ich soviel Zeit wie möglich in diese Komponente und die dazugehörige Test-Anwendung gesteckt. Ich denke das ich nun soweit bin, das ich alle benötigten Eigenschaften und Funktionen umgesetzt habe, das ich an die Integration der Komponente ins BVASystem denken kann. Geplant ist diese Integration nun für die Version 2.1.3.59-dev, also in 3-4 Wochen.

Testanwendung für animiertes Pagecontrol Teil 2

Testanwendung für animiertes Pagecontrol Teil 2

Für die Neugierigen habe ich wieder die Testanwendung zum Download zusammengepackt. Auf der ersten Seite des animierten Pagecontrols, welches sich auf der rechten Seite befindet , sind nun einige Steuerelemente zur Bedienung des animierten Pagecontols auf der linken Seite zu finden. So können zum Beispiel die Beschriftungen, die Sichtbarkeit der einzelnen Seiten und sogar die Animationsgeschwindigkeit geändert werden. Weiterhin befinden sich auf dem rechten Pagecontrol auf Seite 2, 2 Knöpfe. Damit kann jeweils ein weiterer Dialog geöffnet werden. In dem ersten kann das animierte Panel, welches sich nach oben bzw. nach unten öffnet getestet werden. Der zweite Dialog zeigt ein animiertes Pagecontrol, bei dem die Animationsmöglichkeit deaktiviert wurde. Letzteres werde ich benötigten, damit ich auch die Pagecontrols ersetzen kann, wo die Animation unerwünscht ist. Mir ist dies wichtig, damit die Pagecontrols alle gleich aussehen.

Prototyp: Animiertes Pagecontrol

Samstag, Januar 12th, 2013

Am Ende des letzten Jahres schrieb ich, das ich an einem Prototypen arbeite, der die Oberfläche des BVASystems stark verändern wird. Da ich nun alle größeren Probleme scheinbar gelöst habe, möchte ich den Prototypen heute vorstellen. Besonders daran ist diesmal, das ich zum ersten Mal eine Änderung nicht direkt in der Bilddatenbank umgesetzt habe. Ihr könnt euch den Prototypen herunterladen und quasi selber einmal ausprobieren.

Vorstellung

Das wichtigste an einer Bilddatenbank sind natürlich die Bilder und daher sollten sie den größten Teil der Oberfläche einnehmen. Je mehr Funktionen nun allerdings in das Programm integriert werden, desto kleiner wird der Bereich, der für die Fotos übrig bleibt. Daher habe ich mir gedacht, das es gut wäre, wenn nicht ständig benötigte Oberflächenelemente ausgeblendet werden können. Entstanden ist dabei ein animiertes Pagecontrol, welches  an der linken oder rechten Seite eines Dialoges angeordnet werden kann. Fährt man mit der Maus über den Beschriftungsbereich der Komponente, so wird sie durch eine kleine Animation geöffnet. Solange man sich mit der Maus über dem geöffneten Pagecontrol befindet, kann dieses ganz normal benutzt werden. Verlässt man den Bereich, so wird das Control wieder auf den Beschriftungsbereich reduziert. Zusätzlich hat man rechts oben noch die Möglichkeit das Pagecontrol zu fixieren. 

Testanwendung für animiertes Pagecontrol

Testanwendung für animiertes Pagecontrol

Geplanter Einsatz im BVASystem

Im BVASystem möchte ich das animierte Pagecontrol an 2 Stellen einsetzen. Als erstes ist geplant den jetzigen Bereich, in dem die Verzeichnis- bzw. Datenbankstruktur dargestellt werden, durch ein animiertes Pagecontrol zu ersetzen. Sofern das animierte Pagecontrol nicht von euch fixiert wird, steht dadurch fast die gesamte Monitorbreite zur Darstellung der Fotos zur Verfügung.  In der Standard-Installation wird das Pagecontrol wohl fixiert sein, damit die gewohnte Oberfläche noch vorhanden bleibt. Es wäre dann eure Entscheidung, ob ihr den Bereich immer sehen wollt, oder ob er nur bei der Auswahl eines neuen Ordners sichtbar sein soll. Auf der rechten Seite ist ein weiteres Pagecontrol geplant, auf dem Möglichkeiten zur Filterung der aktiven Bildliste geschaffen werden sollen. Beispielsweise soll es möglich sein, das nur noch die Fotos angezeigt werden, die ihr mit 5 Sternen bewertet habt. Oder es sollen nur die Bilder angezeigt werden, die mit der Kamera „X“ aufgenommen habt. Das Pagecontrol zur Filterung der Bildliste wird in der Standardinstallation nicht fixiert sein. 

Zeitplanung

Ich denke, das noch einige Zeit vergehen wird, bis das animierte Pagecontrol seinen Weg in das BVASystem findet. Es sind noch eine Menge von Details zu erledigen, damit die Komponente alle benötigten Eigenschaften erhält. Ich habe vor, die Komponente außerhalb des BVASystems fertig zu stellen und vor allem zu testen. Über meine Fortschritte dabei werde ich sicher hier im Blog berichten. Sobald die Komponente fertig ist, wird die Ersetung auf der linken Programmseite kein Problem sein und recht zügig erfolgen. Die Filterungsfunktionen werden dann um einiges aufwendiger, da hier nicht nur eine bestehende Komponente ausgetauscht werden muss. Wahrscheinlich werde ich mit der Filterung erst beginnen, sobald ich meine aktuelle Arbeit an den Schlagworten abgeschlossen habe.

Seltsames Hint-Verhalten

Mittwoch, Juni 15th, 2011
PageControl mit Hint

PageControl mit Hint

Ich habe ja schon viele komische Sachen in der Zeit erlebt, in der ich Delphi programmiere. Das Hint-Verhalten der TPageControl und TTabsheet Komponenten ist mir völlig unlogisch. Dem Tabsheets kann man wunderbar jeweils einen Hint zuweisen. Dieser wird aber nur angezeigt, wenn man sich innerhalb des Clientbereiches des Tabsheets bewegt. Wofür braucht man da bitte schön einen Hint? In dem Bereich liegen normalerweise weitere Oberflächenelemente mit eigenständigen Funktionen. Dort wo man den Hint bräuchte, nämlich auf dem Reiter zum wechseln der Tabsheets, erscheint er nicht. Auf den Reitern wird der Hint angezeigt, den man dem PageControl zugewiesen hat.  Also für alle Reiter der gleiche.

TBVAPageControl

Nun habe ich mir die Mühe gemacht, dieses Verhalten dahingehend zu korrigieren, das es für meine Zwecke einsetzbar ist. Ich habe eine  neue Komponente TBVAPageControl von TPageControl abgeleitet. Falls jemand das TBVAPageControl benötigen sollte: Hier ist es.

Das neue PageControl kann genauso wie das TPageControl verwendet werden, nur das Hint-Verhalten ist halt ein anderes. Beim TBVAPageControl werden die Hints nur noch auf den Reitern angezeigt. Sie sollen als Erklärung dienen, was dem Anwender beim Wechsel auf die jeweilige Seite erwartet. Die Tabsheets selber zeigen keine Hints an und auch das PageControl hat keinen eigenen Hint mehr. In der Entwicklungsumgebung setzt man seine Wunschhints einfach bei den jeweiligen Tabsheets. Der Hint des PageControls bleibt leer.

Wie funktioniert das ganze?

Eigentlich ist das TBVAPageControl ziemlich simpel. Im Mousemove Event wird überprüft, welcher der Reiter sich an der Mausposition befindet. Wenn ein Reiter bestimmt werden konnte, wird der Hint des jeweiligen Tabsheets dem PageControl zugewiesen. Befindet sich die Maus auf keinem Reiter oder verlässt die Maus das PageControl, so wird der Hint des PageControls wieder gelöscht.  Zu erwähnen ist vielleicht noch, das ich das PageControl um ein OnMouseEnter und ein OnMouseLeave Event erweitert habe, da diese in der Standardimplementierung nicht vorhanden waren.