Category: Development

Serwis OpenEdge – Telerik Kendo UI

W niniejszym “odcinku” pokażę jak wykorzystać utworzony wcześniej serwis REST OpenEdge jako źródło danych w produkcie Telerik Kendo UI.

Mamy więc gotowy serwis i działający serwer aplikacji PAS.

Kendo UI, to zestaw bibliotek tworzących interfejs webowy oparty na HTML5 i JavaScript.

Należy pobrać plik ZIP i rozpakować w lokalnym katalogu.
Zawiera on bibliotekę funkcji JavaScript dla obiektów JSDO oraz przykładowe pliki HTML. Każdy z takich plików zawiera linki do dalszych bibliotek na stronach Progressa i Telerika.
Pliki te wygodnie jest otwierać w Notepad++.

Otwórzmy w Notepad++ plik Our_Sample.html. W sekcje HEAD znajdują się odnośniki do zewnętrznych bibliotek.

Nas bardziej interesuje sekcja SCRIPT, a dokładniej parametry serviceURI, catalogURI oraz resourceName, które powinny mieć wartości zgodne z utworzonym serwisem.

Po edycji tych parametrów plik HTML wygląda następująco:

Klikając na nagłówek kolumny dane są sortowane wg jej wartości. Można przeciągnąć nagłówek kolumny do górnej strefy i wtedy dane będa pogrupowane. Można także edytować, kasować i tworzyć nowe rekordy.

Pozostałe pliki html prezentują dane z serwisów zewnętrznych. Np. Other_KendoUIPieChart.html

Co teraz? Chciałbym pokazać jak wykorzystać dane z naszego serwisu w Telerik Platform for OpenEdge, ale przedtem trzeba wziąć na warsztat system Rollbase. Do Telerika jednak niedługo wrócimy.

Development , , , ,

Tworzenie serwisów OpenEdge cz. II

W poprzedniej części pokazałem jak stworzyć projekt oraz serwis OpenEdge. Teraz zajmiemy się utworzeniem logiki biznesowej aby wystawić przez ten serwis dane z bazy Progress.

W widoku Project Explorer klikamy prawym klawiszem myszy na podkatalog AppServer i wybieramy New -> Business Entity.

Tworzymy nową klasę obiektu biznesowego np. Customer. Pamiętajmy, że w nazwie rozróżnia się wielkość liter. Można opcjonalnie wypełnić pola Description i Purpose. Klikamy Next.

Ekran Select a schema file. Wybieramy aktywne połączenie z bazą danych oraz tabelę Customer. (W tym miejscu możemy zamiast połączenia z bazą wskazać przygotowany wcześniej plik schematu, w którym będzie zdefiniowany ProDataSet z kilkoma tabelami). Zauważmy listę operacji, jakie zostaną zdefiniowane w klasie. Domyślnie są to CRUD czyli: Create, Read, Update, Delete i takie zostawiamy.

Klikamy Finish.

Można zauważyć, że w projekcie pojawiły się nowe zasoby (podkatalog AppServer): plik klasy Customer.cls, plik customer.i z definicjami ProDataSeta dsCustomer oraz tablicy tymczasowej ttCustomer.

Plik Customer.cls zawiera gotowe metody dla operacji CRUD. Dane będą przekazywane między bazą OpenEdge a ProDataSetem. Możemy modyfikować te metody dla naszych potrzeb. Teraz jednak zostawiamy je w stanie domyślnym.

Teraz nowy obiekt biznesowy trzeba dodać do serwisu. Rozwijamy Defined Services i prawym klawiszem klikamy na Edit.

Ekran Edit an ABL Service. Nic tu nie zmieniamy. Next.

Ekran Create a Data Object service. Zaznaczamy zdefiniowane wcześniej zasoby, czyli klasę Customer. Zanotujmy składnię URI, przez którą będzie dostęp do naszych zasobów OpenEdge w serwisie REST. Finish.

W podkatalogu static został wygenerowany plik mobile6.json zawierający opis serwisu. Zajrzymy do niego za chwilę.

Otwieramy widok Servers i uruchamiamy naszą instancję appservera oepas1 . Może to potrwać kilka minut.

Po uruchomieniu appservera PAS wpisujemy w przeglądarce www link:

http://localhost:8810/mobile6/rest/mobile6Service/Customer

Widać, że udostępniliśmy tabelę Customer poprzez serwis REST.

Jeśli chcemy podejrzeć plik json, możemy go odszukać i otworzyć na dysku lub wpisać poniższy link:

http://localhost:8810/mobile6/static/mobile6Service.json

Następnym razem pokażę prosty przykład jak wykorzystać gotowy serwis z technologią Telerik.

Development , , ,

Tworzenie serwisów OpenEdge cz. I

Chcę teraz napisać o tworzeniu serwisów typu REST, które są bardzo przydatne w integracji danych pochodzących z baz OE z nowym front-endem np. Rollbase, Telerik Kendo UI czy z urządzeniami mobilnymi.

Wspomniałem o tym w zeszłym miesiącu w artykule o JSDO.

Serwisy tworzymy w Progress Developer Studio for OpenEdge. Zakładam, że mamy skonfigurowane środowisko: w zakładce Servers widzimy : Pacific AppServer (domyślna nazwa oepas1)

oraz w Preferencjach mamy zdefiniowane połączenie z bazą danych sports (kopia bazy sports2000).

Gdyby były problemy z dojściem do tego miejsca, to bardzo proszę o wiadomość. Opis jest tutaj.

Proces tworzenia nieznacznie różni się od tego miejsca w OE 11.5 od OE 11.6. Najpierw zajmiemy się wersją OE 11.5.

Tworzymy nowy projekt OpenEdge (nazwa np. mobile5), wybieramy typ Mobile. Klikamy Next.

Pojawia się ekran Select AVM and Layout Options. Nic tu nie zmieniamy, klikamy Next.

Następny ekran: Define AppServer content module. Zaznaczamy, który serwer aplikacji będzie obsługiwał nasz serwis. Tutaj wybieramy PAS, czyli oepas1. (Gdybyśmy chcieli użyć tradycyjnego OE AppServera, to moglibyśmy wybrać restbroker1).

Zaznaczamy Publish changes immediately i Next.

Ekran Create a Mobile service. Upewniamy się, że zaznaczona jest opcja Create a Mobile service oraz jako Supported servers wybrany oepas1. Klikamy Next.

Ekran Create a Mobile App. Ponieważ nie budujemy aplikacji mobilnej, a jedynie serwis, odznaczamy tę opcję. Next.

Ekran Define PROPATH. Nic nie zmieniamy. Next.

Ekran Select database connections. Dodajemy do projektu istniejące połączenie z bazą danych (zdefiniowane wcześniej). Klikamy Next.

Ostatni ekran: Static Web Pages, zawiarający konfigurację folderów serwisu. Nic tu nie zmieniamy. Klikamy Finish. Tworzony jest nowy projekt.

Po utworzeniu powinniśmy zobaczyć zasoby projektu jak poniżej.

Teraz zrobimy to samo dla OE 11.6.

Tworzymy nowy projekt OpenEdge (nazwa np. mobile6), wybieramy typ ABL Web App (dla klasycznego AppServera wybieramy typ Data Object). Klikamy Next.

Ekran Provide ABL Web App deploy details.

Zaznaczamy Web Application: Deploy as WebApp, Sopported servers: oepas1 oraz Publish changes immediately. Klikamy Next.

Na ekranie Ceate an ABL Service zaznaczamy typ serwisu: Data Object (Annotated RPC) i klikamy Next.

Ekran Select AVM and Layout Options. Nic tu nie zmieniamy, klikamy Next.

Kolejny ekran Define PROPATH. Nic nie zmieniamy. Next.

Ekran Select database connections. Dodajemy do projektu istniejące połączenie z bazą danych. Klikamy Finish i czekamy aż serwis zostanie utworzony.

W drugiej części zajmiemy się wystawianiem danych z bazy OpenEdge poprzez utworzony serwis.

 

Development , , ,

JSDO – JavaScript Data Object

Zanim napiszę o tworzeniu serwisów REST, wykorzystaniu danych OpenEdge w produktach Rollbase czy Telerik, trzeba przyswoić sobie pewne nowe pojęcia.
Jednym z nich jest omówiony wcześniej Pacific AppServer. Obecnie zajmiemy się progressowymi obiektami JSDO.
Obiekty te zapewniają wsparcie dla złożonego modelu danych oraz API do manipulowania danymi przy zachowaniu pełnej integralności.

Pierwotnym wykorzystaniem JSDO były aplikacje mobilne jednakże, jak wspomniałem, wykorzystuje się je także w integracji z innymi produktami.

Obiekty po stronie klienta zapewniają dostęp do zasobów wystawionych jako serwis WWW oraz upraszczają mapowanie pomiędzy danymi JSDO i elementami HTML. Zasobami tymi są logika biznesowa ABL oraz dane OpenEdge. Najczęściej wykorzystuje się dane z ProDataSetów, które z kolei mapują dane z baz OpenEdge.

jsdo mapping

JSDO komunikuje się z serwerem aplikacji (OE AppServer, PAS) wysyłając i odbierając dane.
Może wykonywać operacje CRUD (Create, Read, Update, Delete) zdefiniowane w obiektach Business Entity (BE) lub wywoływać metody na AppServerze.

Wszystko to razem, dla kogoś kto zetknął się z nową technologią po raz pierwszy, wydaje się być zbyt skomplikowane. jsdo mapping Niejednokrotnie słyszałem od Was podczas spotkań, że lepiej jest zostać przy znanej technologii, bo tutaj nie za bardzo wiadomo o co chodzi. Jednakże wiele elementów, o których mówię jest zautomatyzowanych. Np. tworząc w OE Developer’s Studio, w danym projekcie nowy obiekt typu Business Entity, mogę wskazać na tablicę z której chcę mapować dane (patrz rysunek). Tworzą się wtedy automatycznie ProDataSet i zasoby REST, a mapowanie PDS JSDO jest automatyczne. Jeśli zachodzi potrzeba mogę edytować metody CRUD dla BE itd. Pokażę wkrótce jak to zrobić.

Katalog JSDO – definiuje logiczny schemat oraz mapowanie do zdalnego źródła danych. Katalog ten zawiera plik JSON (JavaScript Object Notation).
Katalog określa również API do wywoływania zdalnej logiki biznesowej (poza podstawowymi operacjami CRUD).
Katalog ten jest niezbędny jeśli chcemy wykorzystać JSDO jako zewnętrzne źródło danych w innych produktach.

Z danych JSDO można korzystać na różne sposoby. Poniżej przedstawiam przykład przygotowany przez PSC i Telerik. Istnieje zdefiniowany serwis OE, przekazujący dane poprzez JSDO. Mamy podany katalog JSDO z plikiem JSON.

<!DOCTYPE html>
<html>
<head>
<title>Simple JSDO Usage</title>
<script src=”http://oemobiledemo.progress.com/jsdo/progress.jsdo.3.1.js”></script>
</head>
<body><!– results will be written here by JavaScript –><script>
(function () {var serviceURI = “http://oemobiledemo.progress.com/MobilityDemoService”,
catalogURI = serviceURI + “/static/mobile/MobilityDemoService.json”;

// create a new session object
var session = new progress.data.Session();
session.login(serviceURI, “”, “”);
session.addCatalog(catalogURI);

// create a JSDO
var jsdo = new progress.data.JSDO({ name: ‘dsCustomer’ });
jsdo.subscribe(‘AfterFill’, onAfterFillCustomers, this);

// calling fill reads from the remote OE server
jsdo.fill();

// this function is called after data is returned from the server
function onAfterFillCustomers(jsdo, success, request) {
// for each customer record returned
jsdo.eCustomer.foreach(function (customer) {
// write out some of the customer data to the page
document.write(customer.data.CustNum + ‘ ‘ + customer.data.Name + ‘<br>’);
});
}

}());
</script>
</body>
</html>

Obsługa powyższego przykładu jest zrealizowana głównie przy pomocy dwóch obiektów: Session – zarządzanie sesją i autoryzacją oraz JSDO – dostęp do danych OpenEdge poprzez informacje zawarte w katalogu JSDO.

Jak działa ten przykład możecie sprawdzić TUTAJ.

Development
1 … 3 4 5