Projektowanie systemu workflow przy użyciu narzędzia BizAgi Studio
Część 3
Projektowanie formularzy
Instytut Systemów Informatycznych, Wydział Cybernetyki, Wojskowa Akademia Techniczna
Paweł Mieteń, Jarosław Koszela
Projektowanie formularzy
Kolejnym krokiem w tworzeniu aplikacji przy użyciu BizAgi Studio jest projektowanie formularzy na poszczególnych etapach procesu.
Rysunek . BizAgi Studio - wejście w tryb definiowania formularzy
Klikamy w napis „Define Forms” aby narzędzie wyświetliło nam diagram procesu w trybie definiowania formularzy.
Aby przejść do definiowania formatki, trzeba kliknąć na element procesu, na którym chcemy ją zdefiniować.
Rysunek . Narzędzie do definiowania formatki
W oknie Data Binding widoczny jest zestaw danych oraz formularzy dodatkowych, które możemy umieścić na definiowanym oknie. W celu dodania elementu na formatkę należy przeciągnąć dany element na główne okno. Nowy element dodawany jest z ustawieniami domyślnymi, możemy je modyfikować po przez menu kontekstowe oraz po przez okno Properties.
Złożenie wniosku o poprawę egzaminu
Projektowanie interfejsu rozpoczniemy od aktywności „Złożenie wniosku o poprawę egzaminu”. Docelowo chcemy, aby formatka ta wyglądała w następujący sposób:
Rysunek . Wygląd zaprojektowanej formatki w przeglądarce internetowej
Rysunek . Dodane elementów grupujących
Z górnego paska elementów dwukrotnie wybieramy Group i przeciągamy go na główny ekran. Dodane dwa elementy grupujące nazywamy odpowiednio Dane studenta i Wniosek.
Rysunek . Grupa „Dane studenta” – Ustawienie trybu tylko do odczytu
Z okna Data Binding na obszar Dane studenta przeciągamy trzy elementy:
App->Wniosek->Student->fullName
App->Wniosek->Student->contactEmail
App->Wniosek->Numer indeksu
Dwóm pierwszym elementom zmieniamy nazwy opisowe na Student i E-mail oraz ustawiamy je w tryb tylko do odczytu. Można to uczynić przez okno właściwości lub przez menu kontekstowe.
Natomiast pole Numer indeksu ustawiamy na wymagane w menu kontekstowym wybierając opcję Required->True.
Rysunek . Grupa „Wniosek"
Następnie z okna Data Binding na obszar Wniosek przeciągamy trzy elementy i ustawiamy następujące właściwości:
App->Wniosek->Student->Data złożenia
Ustawiamy tryb tylko do odczytu
App->Wniosek->Student->Uwagi studenta
We właściwościach ustawiamy parametr Render Type na wartość Extended Text
App->Wniosek->WybranePrzedmioty
Domyślnie tabelka z przedmiotami pojawi się bez kolumn. W celu dodania ich należy z okna Data Binding przeciągnąć właściwość które chcemy wyświetlić. W naszym przypadku dodajemy App->Wniosek->WybranePrzedmioty->Przedmiot->Nazwa
Nowo dodanej kolumnie ustawiamy właściwość tylko do odczytu
W celu dodania kolumny z opcją usuwania na tabelce trzeba ustawić właściwość Allow Delete
Kolejnym krokiem konfigurowania listy przedmiotów jest definicja formatki, która pozwoli przypisać przedmiot. W tym celu z okna właściwości wybieramy opcje New Form przy opcji Add Form. Narzędzie uruchomi nowy edytor formularza, na którym dodamy opcję wybierania przedmiotów.
Rysunek . Formularz wybierania przedmiotu
Na formularz przenosimy element App->Wniosek->WybranePrzedmioty->Przedmiot a następnie zmieniamy typ kontrolki na Combo Box.
Rysunek . Zmiana typu kontrolki przy użyciu menu kontekstowego
W celu zmiany typu kontrolki używamy okna właściwości lub menu kontekstowego.
Używając dolnych zakładek można przeskakiwać między formularzem głównym i podrzędnymi.
Ostatnim krokiem w definiowaniu pierwszej formatki jest ustawienie walidacji tak, aby użytkownik musiał wybrać minimum jeden przedmiot.
Rysunek . Ustawienie walidacji na liczbę wybranych przedmiotów
Aby dodać takie obostrzenie należy na właściwościach tabelki z przedmiotami rozwinąć grupę Advanced i kliknąć opcję Grid Validation. Otworzy się narzędzie pozwalające zdefiniować walidację. W pierwszym kroku dodajemy ‘Countera’ używając przycisku Add Counte. Nadajemy mu nazwę w drugim polu wybieramy opcję Table Info a w trzecim Row Count. W drugim kroku Dodajemy walidacje wybierając wcześniej zdefiniowany element, operator porównania Equal oraz wpisując wartość 0. Oznaczać to będzie, że jeśli liczba przedmiotów będzie równa zero to zostanie wygenerowany błąd. W ostatnim kroku ustawiamy komunikat błędu i wciskamy przycisk OK.
Przyjmowanie wniosku do rozpatrzenia
W tym kroku dziekanat będzie mógł, zweryfikować wniosek od strony formalnej podejmując jedną z trzech decyzji: Odrzucenie warunkowe, Odrzucenie definitywne, Przyjęcie. Dodatkowo będzie mógł dopisać uwagi, które w przypadku odrzuceń będą wymagane.
Rysunek . Formatka podejmowania decyzji przez dziekanat
BizAgi studio pozwala nam definiować formatki reużywalne, dzięki czemu raz zdefiniowany zestaw kontrolek możemy użyć na wielu formularzach. Dane studenta oraz lista przedmiotów wybranych są obszarami, które z pewnością będą potrzebne na wielu stepach. W związku z tym utworzymy dwa formularz Dane studenta oraz Wybrane przedmioty.
Rysunek . Tworzenie formatki reużywalnej
W celu utworzenia nowej formatki w oknie Data Binding, z menu kontekstowego z węzła Forms wybieramy opcję New Form.
Rysunek . Nadanie nazwy formularzowi Dane studenta
Po dodaniu nowego formularz w oknie właściwości, należy nadać mu nazwę we właściwości Display Name. Jako pierwszy utworzymy formularz Dane studenta.
Rysunek . Formularz Dane studenta
Na formularz przeciągamy element grupujący nadając mu nazwę Student. Następnie przeciągany 5 elementów:
App->Wniosek->Student->fullName
App->Wniosek->Student->contactEmail
App->Wniosek->Numer indeksu
App->Wniosek->Punkty ECTS
App->Wniosek->Uwagi studenta
Każdy z nich ustawiamy, jako nieedytowalny, gdyż będzie to tylko formatka informacyjna.
Po dodaniu elementów zapisujemy formatkę. Używając dolnych tabów przechodzimy na główne okno, na które możemy przeciągnąć nowozdefiniowaną formatkę. Definicja ta znajduje się w oknie Data Binding->Forms->Dane studenta
Kolejną formatką do zdefiniowania jest lista wybranych przedmiotów, postępujemy w sposób analogiczny aby utworzyć kolejny formularz.
Rysunek . Nadanie nazwy formularzowi Wybrane przedmioty
Po dodaniu nowego formularz w oknie właściwości, należy nadać mu nazwę we właściwości Display Name.
Rysunek . Dodanie listy przedmiotów
Na pusty formularz przeciągamy element Wybrane przedmioty.
Rysunek . Dodanie kolumny do tabeli z listą przedmiotów
Z okna Data Binding przeciągamy element App->Wniosek->WybranePrzedmioty->Przedmiot->Nazwa na obszar tabelki w celu dodania kolumny z nazwą przedmiotu. Domyślnie kolumna dodaje się w trybie edytowalny.
Rysunek . Okno właściwości dla listy danych
Chcemy aby lista ta była nieedytowalna w związku z tym ustawiamy dwie właściwości:
Editable = False
Display Form Fields As Readonly =True
Tak zdefiniowany formularz zapisujemy I przechodzimy do głównego, aby umieścić na nim listę przedmiotów.
Pod listą przedmiotów umieszczamy jeszcze dwa elementy
App->Wniosek->Decyzja dziekanatu
Ustawiamy wymagalność pola
Submit on changed istawiamy na True tak aby po zmianie wartości mogła zmienić się wymagalność pola Uwagi dziekanatu.
App->Wniosek->Uwagi dziekanatu
Zmianiamy Render Type na Extended Text
Chcemy, aby pole Uwagi dziekanatu było wymagane w przypadku odrzucenia wniosku w związku z tym ustawiamy właściwość Require na Expresion I definiujemy zależność.
Rysunek . Definicja wyrażenia na wymagalność pola
Na linie warunku przeciągamy wartość Decyzja dziekanatu, gdyż od tej wartości ma zależeć wymagalność. Operator porównania ustawiamy na „is difference to „. Na końcu wybieramy Wartość Przyjęcie. Całe wyrażenie oznacza, że pole będzie wymagane jeśli wartość Decyzja dziekanatu będzie różna od Przyjęte. Na końcu wciskamy przycisk Finish.
Dokonanie wymaganych czynności
Na tym etapie workflow definiujemy formatkę używając wcześniej przygotowanych formatek Dane studenta i Wybrane przedmioty oraz dodatkowo dodając elementy Uwagi dziekanatu i Uwagi studenta. Formatka ta przedstawia się następująco:
Rysunek . Definicja formatki na kroku "Dokonanie wymaganych czynności"
Przyjmowanie wniosku
Podczas aktywności dziekana formatka będzie przedstawiała dane o studencie, listę przedmiotów oraz kontrolkę do podjęcia decyzji.
Rysunek . Definicja formatki na kroku " Przyjmowanie wniosku"
Wpłynięcie pieniędzy, Przygotowanie kart poprawkowych, Wprowadzenie danych do systemu E-dziekanat, Wydanie dokumentów
Na zestawie pozostałych kroków użytkownik będzie miał do wglądu dane o studencie oraz listę przedmiotów. Użytkownik nie będzie wprowadzał żadnych dodatkowych danych do systemu a jedynie po przez przycisk dalej będzie potwierdzał, że zrealizował dane zadanie.
Rysunek . Definicja formatki na krokach: Wpłynięcie pieniędzy, Przygotowanie kart poprawkowych, Wprowadzenie danych do systemu E-dziekanat, Wydanie dokumentów
Wyszukiwarka