Promotic

Wytworzenie graficznej części aplikacji

W tej chwili można uruchomić wytworzoną aplikację. Aplikacja zawiera zmienne "Temperature", "Power" oraz Status kotła, lecz użytkownik żadną z nich nie widzi, co jest oczywiście bardzo poważnym mankamentem. Dlatego następnie wytworzysz panel graficzny kotła, który będzie wyświetlał wybrane informacje oraz obiekty sterowania.

Wytworzenie panela:

Do foldera "Boiler1" dodaj znanym już sposobem nowy obiekt typu "PmaPanel – Grafika użytkownika" i nazwij go "Panel". Obiekt tego typu będzie w drzewie Pma obiektów reprezentować graficzną postać panela. Tekst określony w konfiguratorze "Tytuł panela" zobaczy użytkownik w liście paneli aplikacji. Dlatego do nazwy panela wprowadź na przykład tekst: Panel of boiler no. 1. Tekst wprowadzony w konfiguratorze "Identyfikator Web komponentu" określa iunikalną nazwę strony panela w ramach całej aplikacji. Do identifikatora Web komponentu wprowadź na przykład tekst: boiler1panel. Pozostałe konfiguratory pozostaw bez zmiany.



Wytworzenie graficznej postaci panela:

Dotychczas zdefiniowałeś, jaką nazwę będzie mieć panel, obecnie jednak musisz określić jak będzie dany panel naprawdę wyglądać, tzn. jakie będzie wyświetlać teksty, dane lub obrazki, jakie będą wykorzystane kolory, wielkości, itd.
To jest wykonywane w karcie "Grafika", która działa jako edytor grafiki panela PmaPanel. Do tego panela (który na początku jest pusty) będziesz umieszczać Pmg obiekty.



Wytworzenie 1. Pmg obiektu do wyświetlania mocy w formie liczbowej:

Poprzez dwukrotne kliknięcie lewym przyciskiem myszki do pustej powierzchni panela lub po naciśnięciu przycisku zostanie wyświetlone okno oferujące paletę Pmg obiektów. Okno to składa się z lewej i prawej części.



W lewej części znajduje się lista grup Pmg obiektów, w prawej części znajduje się lista poszczególnych konfiguracji Pmg obiektu danego typu.
Wybierz "Liczba rzeczywista z tłem" a w konfiguratorze "Nazwa obiektu" napisz temperature.

Po wyborze Pmg obiektu w oknie konfiguracyjnym ustaw jego podstawowe parametry a następnie wstaw przy pomocy krzyża nawigacji.
Przecunięciem myszki określisz pozycję Pmg obiektu na powierzchni panela. Naciśnij i trzymaj lewy przycisk myszki a następnie przesuwaniem kursora określ jego rozmiar. Później zwolnij przycisk myszki.







Obiekt zostanie równocześnie "zaznaczony", tzn. na jego brzegach oraz rogach znajduje się 8 małych niebieskich kwadratów. Przy pomocy nich można dowolnie zmieniać rozmiar obiektu, ewentualnie możesz cały obiekt przesuwać.

Notatka: Jeżeli chcesz obiekt usunąć, wtedy wybierz aktywny Pmg obiekt i naciśnij klawisz Delete.

Pmg obiekt jest ulokowany, należy jednak ustawić niektóre jego dalsze właściwości, zwłaszcza dane, które powinien wyświetlać. Domyślnie obiekt ten wyświetla wartość statyczną "50.5", nam jednak jest potrzebne, żeby wyświetlał liczbę, która przedstawia temperaturę kotła.

Edycja właściwości wytworzonego Pmg obiektu:

Poprzez dwukrotne kliknięcie lewym przyciskiem myszki na wybrany obiekt zostanie wyświetlone edytor grafiki panela PmaPanel.



Po lewej znajduje się drzewo obiektów danego panela, po prawej konfiguratory aktywnego obiektu.

Wiele konfiguratorów posiada obok swej nazwy przycisk "dynamicznego" powiązania danych a za nim (po prawej) znajduje się pole edycji wartości statycznej.

Notatka: Dla demonstracji do obrazka jest dodana czerwona linia oddzielająca lewą (dynamiczną) od prawej (statycznej) części konfiguratorów.

Za pomocą statycznych konfiguratorów można trwale ustawiać wybrane wartości lub właściwości, na przykład kolor, tekst, itd. Dynamiczne powiązania danych umożliwiają powiązać wartości/właściwości z konkretną zmienną w aplikacji.

Ażeby możliwe byłoby wyświetlenie wartości temperatury kotła, jest konieczne powiązać zawartość pola tekst z zmienną zawierającą taką wartość. W tym celu w konfiguratorze "Wartość" użyj przycisk powiązania danych.

Wytworzeniem powiązania danych zapewnisz, że określona właściwość Pmg obiektu będzie się zmieniać w zależności od wartości powiązanej zmiennej. Domyślnie każdy panel graficzny (a tym również Pmg obiekt) są odświeżane dwukrotnie za sekundę (można to zmienić w obiekcie PmaRoot w karcie "Aplikacja" w konfiguratorze "Period odświeżania ekranów"). Pmg obiekt podczas nowego odświeżenia zawsze sobie stwierdzi nową wartość właściwości i dostosuje się do niej.

Wybierz powiązanie danych "PP - Powiązanie danych z właściwością Pma obiektu". W konfiguratorze "Obiekt" wybierz zmienną (obiekt) o nazwie "Temperature". Zaznacz konfigurator "Ścieżka względna względem".

Notatka: Ścieżkę do obiektu "Temperature" można wprowadzić bezwzględnie lub względnie. W naszym przypadku jest lepiej zastosować ścieżkę względną. Dzięki temu można folder Boiler1 na przykład skopiować i powiązanie danych zostaną powiązane z właściwymi danymi. W przypadku zastosowania bezwzględnego powiązania danych dane zostałyby powiązane z zmienną Temperature w "Boiler1".

W ten sposób wytworzyłeś powiązanie danych między konfiguratorem obiektu PmgNumber a właściwością Value (wartością) zmiennej "Temperature". W przycisku powiązania danych obecnie znajduje się "PP", co oznacza, że w dan konfigurator jest powiązany z właściwością Pma obiektu. Wszystko potwierdź przy pomocy przycisku "OK".



Wytworzenie Pmg obiektów do wyświetlenia wartości zmiennej:

Wartości zmiennej można wyświetlić nietylko tekstem, ale również graficznie. Wytwórz nowy obiekt złożony typu Słupek (PmgBarBox). W konfiguratorze "Nazwa obiektu" napisz temperature1 a w konfiguratorze "Tytuł" napisz Temperature.



Złożone Pmg obiekty można edytować na dwa sposoby:
1. Naciśnij przycisk w pasku narzędzi a następnie wybierz wymagany podobiekt.
2. Poprzez dwukrotne kliknięcie lewym przyciskiem myszki na wybrany obiekt zostanie wyświetlony Edytor obiektów Pmg. W jego drzewie "rozwiń" złożony Pmg obiekt a następnie wybierz konkretny podobiekt.


Powiązanie danych dla zmiany wysokości słupka wytworzysz w podobny sposób jak w przypadku pola tekstowego.



Wytworzenie Pmg obiektów do wprowadzania wartości zmiennej:

W tym samym panelu teraz wytworzysz Pmg obiekt, przy pomocy którego będzie możliwe wprowadzić wartość mocy. Taki Pmg obiekt do wprowadzania wartości wytworzysz poprzez skopiowanie już istniejącego Pmg obiektu:

- kliknięciem myszki wybierz obiekt PmgNumber, który chcesz skopiować
- Naciśnij klawisz Ctrl (tzn. operację kopiowania), kursor myszki ustaw ponad zaznaczonym obiektem, naciśnij lewy przycisk myszki i przesuń ją w miejsce, gdzie powinien znajdować się nowy obiekt. Kopiowany obiekt zostanie umieszczony po zwolnieniu przycisku myszki.
- W karcie "Obiekt", w konfiguratorze "Nazwa obiektu" napisz power.
- Następnie ustaw obiekt tak, by móc wprowadzać wartości. Typ edycji: Edycja w miejscu wartości.




Powiązanie danych wytwórz w podobny sposób jak w przypadku poprzednich Pmg obiektów i połącz obiekt ten ze zmienną "Power".

W oknie palety Pmg obiektów w grupie "Suwak (PmgSlider)" wybierz pozycję Suwak z podziałką" (obiekt typu PmgSliderBox). W konfiguratorze "Nazwa obiektu" napisz power1 oraz nazwij ją "Power".



Powazanie danych wytwórz tak samo jak w poprzednich przypadkach i połącz obiekt ten (w konfiguratorze "PmgSlider > Slider > Wartość") ze zmienną "Power".



Wszelkie zmiany w edytorze grafiki potwierdź naciskając przycisk
© MICROSYS, spol. s r. o.