Własny interfejs aplikacji – przegląd kontrolek i test działania

6

Nudziliście o demówkę wiele razy, więc w końcu znalazłem czas i przygotowałem małą aplikację do potestowania. Co prawda nie są w niej zawarte wszystkie komponenty, bo nie wszystkie są gotowe, a i pełna ich funkcjonalność też nie jest przedstawiona. Choć tyle powinno wystarczyć – mało nie jest.

Demówka po uruchomieniu powinna wyglądać tak:

demo.png

Okno powinno przykrywać cały ekran, łącznie z paskiem zadań. Kolorowa ramka z oknem ma taki rozmiar a nie inny – na potrzeby demówki jest nieduża. We właściwej aplikacji zajmuje 90% powierzchni ekranu, a obszar ze znakiem wodnym stanowi niewielki margines (zwykle nieco większy po bokach).

No dobrze, teraz czas na opis zawartości, ale nie opiszę szczegółowo każdej z nich, bo dnia mi braknie.


Na kolorowym pasie (po lewej stronie) są zwykłe małe przyciski, separatory, przyciski zakładek i znacznik aktywnej zakładki. Zwykłe przyciski nie mają przypisanych akcji po kliknięciu. Przyciski zakładek zmieniają zawartość widoczną wewnątrz okna, więc można poklikać.

U góry jest grid z kolorami interfejsu – po kliknięciu w daną kostkę, okno zostanie przemalowane na dany kolor. Niebiestki jest domyślny, choć sam preferuję pomarańczowy i czerwony.

Pod separatorem są boksy ze zgrupowanymi kontrolkami dla zakładek. Pierwsza zakładka zawiera jedną dużą formatowalną etykietę, a na dole są nieformatowalne będące linkami – po lewej poziomy link, po prawej pionowy. Druga zakładka zawiera dużą etykietę oraz trochę przycisków z przypisanymi etykietami – można poklikać. Trzecia zakładka zawiera etykietę i trzy duże przyciski, w dwóch stylach.

Wszystkie kontrolki obsługują hinty – większość z nich pokazuje je automatycznie, z wyjątkiem tabelki kolorów. W niej hinta pokazuje się i ukrywa prawym przyciskiem myszy. Wszystkie kontrolki dają się stylować na żywo – po kliknięciu w kostkę koloru interfejs zostanie przemalowany.

Po kliknięciu w przycisk 4:3 interfejs zostaje wyszarzony, po ponownym znów pokolorowany. Oryginalnie ten przycisk służy do czegoś innego, jednak nie miałem czasu na zmianę grafik. Samo wyszarzanie interfejsu, we właściwej aplikacji, realizowane jest przed pokazaniem innego okna modalnie – tutaj robi się to ręcznie, tylko dla podglądu możliwości.


No cóż – pobawcie się, poklikajcie, have fun. Gdzieniegdzie mogą pojawić się błędy – nie wszystkie bugi zdołałem załatać, więc nie zdziwcie się, jeśli coś nie zostanie prawidłowo odmalowane (bo głównie z tym miewam problemy). Część funkcjonalności nie jest jeszcze zaimplementowana – np. focus i sterowanie klawiaturą (jeszcze zastanawiam się nad wyglądem focusa).

W załącznikach spakowana demówka – częstujcie się. Jeśli podoba się to komentujcie lub łapka w górę – jak tam chcecie. Jeśli macie pytania to pytajcie, jeśli coś się nie podoba to krytykujcie. Jestem otwarty na dyskusję i ew. propozycje.

@lampasss @cerrato ;)


Edit: załącznik demo.zip wymieniłem na ten zawierający poprawnie działającą demówkę. Dla potomnych się przyda, aby nie musieli czytać całego wątku i szukać odpowiednio działającej wersji.

0

Fajne.... ale nawet się nie uruchamia :(
Windows 7 prof. wisi w zadaniach i tyle.....

0

Moment, sprawdzę na swoim Win7 i dam znać.

0

Ładnie to wygląda.
Mógłbyś napisać conieco więcej do czego takie gui przygotowujesz.

0

Sprawdziłem pod Windows 7 64-bit – działa prawidłowo. Sprawdzę co jeszcze może być powodem problemów. Gdyby komuś demówka nie uruchamiała się to podajcie proszę informacje o systemie.

@lampasss: nie chcę podawać zbyt wielu szczegółów. Będzie to program narzędziowy, po części prezentacyjny/wizualizacyjny, z którym do czynienia będą mieli ogólnie rozumiani przedstawiciele handlowi, ale też ich klienci – stąd konieczność niestandardowego interfejsu.

Program musi ładnie wyglądać, skoro będzie przedstawiał ładnie wyglądające rzeczy. ;)

0

no niestety u mnie nie działa, nawet po restarcie kompa.
może jakieś dll do tego potrzeba ??

0

Na "prawdziwym" Win7 nie działa, ale za to u mnie na Linux Mint 18.2 (uruchomienie oczywiście z użyciem Wine) poszło od razu bez jakichkolwiek problemów ;)
Działa ładnie, widać że dużo pracy w tą apkę wsadziłeś.

0
_JarekZ napisał(a):

może jakieś dll do tego potrzeba ??

Nie, program korzysta wyłącznie z bibliotek systemowych. Zestaw używanych funkcji znajduje się już w Win2000, więc dziwię się dlaczego nie startuje. Chyba że brakuje Ci jakichś systemowych .dll. ;)

cerrato napisał(a):

Na "prawdziwym" Win7 nie działa […]

To chyba mój jest nieprawdziwy, bo działa bez zająknięcia… :/

0

@_JarekZ: jeśli możesz to sprawdź nową wersję – demo.zip

Zmieniłem sposób wyświetlania formularza, bo coś mi wsMaximize podejrzanie wyglądał – teraz formularz w konstruktorze przyjmuje rozmiar domyślnego ekranu. Dodałem też kod sprawdzający ładowanie fontów – jeśli się nie uda to wyskoczy informacja i program zakończy działanie.

1
furious programming napisał(a):

@lampasss: nie chcę podawać zbyt wielu szczegółów. Będzie to program narzędziowy, po części prezentacyjny/wizualizacyjny, z którym do czynienia będą mieli ogólnie rozumiani przedstawiciele handlowi, ale też ich klienci – stąd konieczność niestandardowego interfejsu.

Nie chcę się czepiać, ale... to jakieś kuriozum jest. Bo jak mam to rozumieć?
Że aplikacja dla klientów wymaga **niestandardowego ** interfejsu?

Powiem tak; każdy niestandardowy element dla standardowego użytkownika, to niestandardowy problem dla supportu tego systemu.

Program musi ładnie wyglądać, skoro będzie przedstawiał ładnie wyglądające rzeczy. ;)

Przecież jedno nie wyklucza drugiego - może wyglądać ładnie, schludnie i profesjonalnie na standardowym UI.
A może wyglądać jak paw po bełcie zapity browarem i zagryziony bułą na ciepło z grzybkami i papryką, na super niestandardowych kontrolkach.
Albo vice-versa :)
Inaczej - użycie jakichkolwiek kontrolek nie sprawi, że będzie to wyglądało dobrze samo z siebie.

Twoje wygląda dobrze.
Ale nieintuicyjnie.

Dobra, to dopiszę... ;-)
Gdzie nieintuicyjnie polega głownie na tym, że nie widać na pierwszy oka:

  1. Gdzie można kliknąć; te ołówki inne obrazki są bardzo ładne. Ale nie sugerują, że są klikalne. Gdyby te elementy były na czymś takim jak toolbar, to by się rozumiało samo przez się. Ale tak nie jest i... ja mam lekką konfuzję.
  2. Większy problem to widoczność, a raczej jej brak, aktywności danej zakładki; gdyby ie było napisane first/second tab to bym się nie zorientował na szybko. Sugerowałbym obramowanie dookoła aktywnej zakładki, albo marker. Dam przykład od siebie, czy widać co jet aktywne (strzałki wskazują na marker aktywnej zakładki)?
    dfPageControlMarker.png
0

niestety dalej to samo
mam ESET-a ale jego wyłączenie nic nie dało
Próbowałem wyłączać usługi np mssql,klucz HASP-a comarchowy,firebirda itd.
Nic to nie pomogło. Z drugiej strony aplikacja uruchamia się VirtualBox-ie Windows10.
To jest jakiś początek projektu, gdzie nie ma chyba "zaawansowanej technologii kosmicznej", więc powinien działać. Do tworzenia aplikacji używam delphi (różne wersje) i wszystko śmiga -również na moim kompie. Może się nie za bardzo znam (dopiero 15 lat zajmuje się delphi) ale gdzieś masz błąd. Aplikacja jest prosta, mała, nie wymaga mega zasobów więc powinna działać na każdym kompie z windowsem. Tym bardziej, że jak piszesz ma to być większy projekt to chyba musisz to posprawdzać. Aplikacja "wisi" w menadżerze zadań, nie pobiera zasobów procesora, nic nie wyświetla. W związku z tym zrób jakiegoś loga do pliku i ewentualnie zapisuj tam jakieś komunikaty.

1

Demo z pierwszego posta się odpaliło normalnie natomiast demo z drugiego posta:
avast.png
i potem:
info.png
Oczywiście na konta z ograniczeniami mam wywalone i wszystko z poziomu administratora.

Win 10 64bit

0
wloochacz napisał(a):

Nie chcę się czepiać, ale... to jakieś kuriozum jest. Bo jak mam to rozumieć?
Że aplikacja dla klientów wymaga **niestandardowego ** interfejsu?

[…]

Hmm… jak teraz na to patrzę to faktycznie, brzmi dziwnie. W każdym razie na myśli miałem to, że stadardowe komponenty wizualnie po prostu nie pasują – projekt jest specyficzny i potrzebuje specyficznego podejścia.

To też nie jest tak, że ubzdurałem sobie, że standardowy interfejs na bank jest zły i kropka. Pierwsze podejście do tego projektu (w roku 2011) nie bazowało na customowych kontrolkach. Wykonałem wstępny zarys głównych okien, pokombinowałem z różnymi standardowymi kontrolkami i różnym ich układem. No nie pasowało…

Z drugiej strony, miałem na uwadze kilka innych narzędzi, o zbliżonej funkcjonalności, ale nieco innym przeznaczeniu lub dużo uboższych. Niektóre w postaci aplikacji przeglądarkowych, kilka jako apki desktopowe z płyt z gazet. Wszystkie używały nietypowego interfejsu (w przypadku tych przeglądarkowych to nawet nie dziwne) i to było to – dawały odpowiednią funkcjonalność, jednocześnie wyglądając schludnie, ładnie. Zupełnie nietypowo (inny układ elementów niż w systemowych oknach), można by powiedzieć, że nieintuicyjnie, jednak styl pasował do całości.

Dlatego też postawiłem na niestandardowy wygląd.

Powiem tak; każdy niestandardowy element dla standardowego użytkownika, to niestandardowy problem dla supportu tego systemu.

Owszem, zgadzam się. Jednak niestandardowy interfejs nie jest tutaj problemem – kontrolki nie są zależne od systemu (ba, nawet od platformy), nie są również zależne od bieżącego schematu. Problem leży głębiej, ale o tym niżej. ;)

Twoje wygląda dobrze.
Ale nieintuicyjnie.

To co mam teraz może się jeszcze zmienić, a zmieniało się już kilka razy. Szukam dobrych rozwiązań, bazując na istniejących aplikacjach i stronach www, jednocześnie próbując nowych, nietypowych schematów.

Z tą nieintuicyjnością też nie należy przesadzać. Rozumiem i wiem, że układ elementów jest nieco inny niż w typowych aplikacjach desktopowych. Z drugiej strony, dzisiejszy przeciętny Kowalski potrafi dostosować się do najróżniejszych interfejsów – nie ma obcykanych wyłącznie systemowych narzędzi. Przykładem są strony internetowe – każda wygląda inaczej, każda ma inny układ elementów i nie stanowi to problemu dla użytkowników. A kto dziś nie szwęda się po internetach. ;)

Ja wiem, ryzyko nieogarniania istnieje – jestem tego świadomy. Mimo wszystko dokładam wszelkich starań, aby intuicyjność i spójność była jak najwyższa. Przede mną jeszcze sporo pracy.

_JarekZ napisał(a):

To jest jakiś początek projektu, gdzie nie ma chyba "zaawansowanej technologii kosmicznej", więc powinien działać.

Nie ma w nim kosmosu, w sumie żadnego. Można to sobie zobrazować w ten sposób, że kładzie się na formie same standardowe komponenty, nadpisuje się im handlery WM_PAINT i maluje inaczej. To w sumie tyle, bo dynamicznego zarejestrowania fontów też raczej kosmosem nazwać nie można. ;)

Do tworzenia aplikacji używam delphi (różne wersje) i wszystko śmiga -również na moim kompie. Może się nie za bardzo znam (dopiero 15 lat zajmuje się delphi) ale gdzieś masz błąd.

Daj spokój, na pewno coś mam zwalone. Problem w tym, że demówkę wyklikałem na szybko, kod uzupełniający kontrolki danymi również i coś musiałem przeoczyć. Bugów oczywiście też nie wykluczam – póki co to dość eksperymentalny twór.

Aplikacja jest prosta, mała, nie wymaga mega zasobów więc powinna działać na każdym kompie z windowsem.

Taki jest cel – każdy Windows, od XP wzwyż, żadnych dodatkowych bibliotek czy frameworków.

Tym bardziej, że jak piszesz ma to być większy projekt to chyba musisz to posprawdzać. Aplikacja "wisi" w menadżerze zadań, nie pobiera zasobów procesora, nic nie wyświetla. W związku z tym zrób jakiegoś loga do pliku i ewentualnie zapisuj tam jakieś komunikaty.

Właściwy projekt podczas rozruchu wykonuje bardzo dużo różnych czynności, a dołączona tutaj demówka tylko ładuje fonty z zasobów. Druga wersja którą podałem w poprzednim poście, dodatkowo wykrywa czy fonty się ładują poprawnie i jeśli nie – Application.Run nie jest wywoływany, więc proces powinien zakończyć działanie. Skoro nie kończy działania, to fonty ładują się prawidłowo, więc coś innego jest problemem.

Dodam do tej demówki logowanie i zobaczymy gdzie się wyłoży.

babubabu napisał(a):

Demo z pierwszego posta się odpaliło normalnie natomiast demo z drugiego posta: […]

Najśmieszniejsze jest to, że druga wersja od pierwszej różni się tym, że zmieniłem WindowState formularza z wsMaximize na wsNormal, dodałem poniższą linijkę do konstruktora:

Self.BoundsRect := Screen.Monitors[0].BoundsRect;

i dorzuciłem jeden warunek w głównym pliku projektu. Nie mam zielonego pojęcia dlaczego Avast się czepia… :/

0

No dobrze, żeby ograniczyć liczbę błędów, które mogłem popełnić z pośpiechu, zaremowałem wszystko co niestandardowe w kodzie. Aplikacja nie posiada osadzonych fontów, nie ładuje ich podczas rozruchu, prawie wszystkie zdarzenia są odpięte, okno nie rozciąga się na pełny ekran. Ogólnie jedyne co ten program robi to tworzy okno w standardowy sposób. Jeśli w systemie nie macie fontów Ubuntu i Oswald to zostaną użyte jakieś domyślne, systemowe.

@_JarekZ: jeśli nadal okno nie będzie chciało pojawić się na ekranie, to znaczy, że bug siedzi gdzieś głęboko.


PS: tutaj skan pliku – plik jest czysty, antywirusy nie powinny zgłaszać zagrożenia.

0

Miałem zadać to pytanie wcześnie ale czy nie ma to może jakieś związku z HighDPI? Ja sprawdzałem program pod 1440x900 i FullHD. Może większe rozdzielności albo inne proporcje ekranu stanowią jakiś problem, skoro w grę wchodzi rysowanie?

0
Clarc napisał(a):

Miałem zadać to pytanie wcześnie ale czy nie ma to może jakieś związku z HighDPI?

Raczej nie – demówka nie korzysta z trybu Hi-DPI, ta opcja jest odznaczona, DPI awareness też.

Ja sprawdzałem program pod 1440x900 i FullHD. Może większe rozdzielności albo inne proporcje ekranu stanowią jakiś problem, skoro w grę wchodzi rysowanie?

Nie ma to żadnego znaczenia, jeśli chodzi o tę demówkę i nawet właściwą aplikację. Główny projekt co prawda bazuje na rozdzielczości, ale tylko do ustalenia rozmiaru głównego okna. Tyle że testowałem ten algorytm na różnych systemach, z różnymi rozdzielczościami i nigdzie nie było takiego problemu, że okno w ogóle nie pojawia się na ekranie. Ale to jeśli o właściwy projekt chodzi – demówka niczego takiego nie robi.

Jeśli ostatnia dodana demówka (dwa posty wyżej) nie pokazuje okna na ekranie, to problemem nie są moje kontrolki, ani nawet sama demówka, bo nie ma ona wpływu na wyświetlanie okna – tym standardowo zarządza klasa Application.

0

to demo działa błyskiem, nawet na moim kompie ;);)

0

Heh, no to teraz mam zagwozdkę… bo niczego kłopotliwego nie znajduję.

Dobra, dorzucam tylko ładowanie fontów. W razie problemów wyskoczy MessageBox. ;)

0

nie działa i nie ma komunikatu

0

Czyli wychodzi na to, że ładowanie fontów z zasobów nie działa jak należy. Albo po prawidłowym załadowaniu fontów program z jakiegoś innego powodu głupieje. Przyjrzę się temu.

0

Windows 10.

„jałowe demo” działa. Ostatni build nie. Nic się nie pojawia, ale proces wisi.
Zatrzymany pod debugerem wygląda za każdym razem tak samo:

z.png

1

U mnie 3 pierwsze wersje działy a ostatnia daje messageboxa:
err.JPG
i się wyłącza. Widać, że aplikacja jest bardzo wrażliwa na środowisko.

0

Może, ktoś sprawdził wcześniej, ale czy uruchamiacie jako admin? Może 'używanie WINAPI' jakoś jest podejrzane dla niektórych AV?

0

@furious programming Jak ładujesz czcionkę z zasobów, bo u mnie błąd jak u @Clarc. Kiedyś w jakimś swoim programie robiłem coś co wymagało ładowania czcionek z tego co pamiętam robiłem to tak jak tutaj i nie było problemu.

0

@kAzek: w skrócie, każdy z trzech fontów ładowany jest w ten sposób:

// FHandles – tablica uchwytów
// FONT_RESOURCE_NAMES – tablica nazw zasobów

var
  LStream: TLazarusResourceStream;
var
  LFontKind: TFontKind;
  LCount: UInt32;
begin
  {..}

    for LFontKind in TFontKind do
    begin
      LStream := TLazarusResourceStream.Create(FONT_RESOURCE_NAMES[LFontKind], 'TTF');
      try
        FHandles[LFontKind] := AddFontMemResourceEx(LStream.Memory, LStream.Size, nil, @LCount);

        if (FHandles[LFontKind] = 0) or (LCount = 0) then
        begin
          UnloadFontResources();
          Exit;
        end;
      finally
        LStream.Free();
      end;
    end;

    SendMessage(HWND_BROADCAST, WM_FONTCHANGE, 0, 0);

  {..}
end;

I pod WinXP działa to bez problemu, pod Win7 też i pod Win10 też – na tych trzech systemach testowałem.


Niezłe jajca z tego wychodzą. Dodałem troszkę logów do klasy ładującej fonty. Oprócz głównego okna programu (o ile się pojawi), wyskoczy także konsola z logami. Jeśli fonty zostaną pomyślnie zainstalowane z zasobów, końcowa część logów powinna wyglądać tak:

Instaling embedded fonts:

font_oswald_light - stream created
font_oswald_light - handle: 1601477651, count: 1
font_oswald_light - stream freed

font_ubuntu_regular - stream created
font_ubuntu_regular - handle: 2071756860, count: 1
font_ubuntu_regular - stream freed

font_ubuntu_bold - stream created
font_ubuntu_bold - handle: 3162244010, count: 1
font_ubuntu_bold - stream freed

fonts succesfully installed

W razie problemów końcowa zawartość będzie inna. W przypadku wyjątku, w konsoli pojawi się info o jego klasie i jego treść. W każdym razie będzie widać, że coś nie gra. Najlepiej będzie odpalić to demo z poziomu konsoli.


PS: poprzednie demo zrypałem – nie przejmujcie się nim.
PPS: hintami w konsoli nie przejmujcie się – dotyczą małej redundancji podczas ładowania danych komponentów.
PPPS: program nie zostawia po sobie śmieci w systemie – po zakończeniu działania procesu (bez względu na to w jaki sposób się go zakończy), system i tak w razie czego zwolni zasoby.

0

W tej wersji u mnie wszystko działa jak powinno Win 10 64bit (czcionki załadowane). Kod ładowania też raczej w porządku chociaż jak pisałem jak korzystałem bezpośrednio z WinApi FindResource itd.

0

Też można, choć więcej pisania. Zobaczymy czy ostatnia demówka komuś się nie pokaże na ekranie.

0

Teraz działa. Tylko okna nie da się przesuwać, ale to rozumiem „celowe”.

0

Teraz font jest jakiś zepsuty. Nachodzą litery na siebie.
W pierwszym demie nie ma tego problemu.

ff.png

0

Coś ten font nie zainstalował się prawidłowo. Widać to np. w nagłówku etykiety – odstępy pomiędzy słowami to Canvas.TextWidth(' '), czyli coś jest nie tak z samym fontem lub obsługą Canvas. Odstępy pomiędzy słowami też są dziwne – raz zbyt wąskie, a raz zbyt szerokie.

@Azarien: masz już w systemie fonty Oswald i Ubuntu?


Edit: Znam już przyczynę tego problemu. W tej ostatniej demówce, ładowanie fontów było wykonywane po utworzeniu głównego formularza w pamięci. Dlatego reader zasobów przypisał inne fonty, bo tych dynamicznie instalowanych jeszcze nie było.

Usunąłem oba fonty z systemu, zresetowałem kompa. Włączyłem demówkę i miałem jeszcze większą kaszanę:

demo.png

Przeniosłem ładowanie fontów na sam początek (bo tak jest w oryginale) i teraz działa prawidłowo. Nieco zmodyfikowałem demówkę, bo teraz najpierw wyświetla logi instalowania fontów i trzeba wcisnąć Enter aby kontynuować. Bo później trzewia LCL czyszczą konsolę i wyświetlają swoje hinty.

Podsumowując – teraz wszystko działa jak należy. Przynajmniej powinno, bo kod posprzątałem i ułożyłem tak jak ma być (bez ładowania danych do kontrolek). Ostatnie słowo i tak należy do @_JarekZ – to jedyny tester, któremu okno nie pojawia się na ekranie.

Przy okazji – bardzo dziękuję wszystkim za testy. Nie spodziewałem sie takiego ruchu w tym wątku. :D

1 użytkowników online, w tym zalogowanych: 0, gości: 1