Zaawansowane aplikacje internetowe laboratorium

Transkrypt

1 Zaawansowane aplikacje internetowe laboratorium Web Services (część 1). Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię usług sieciowych (ang. Web Services). Aplikacja składa się z formularza HTML i serwletu. Podstawowym zadaniem aplikacji jest tłumaczenie, za pomocą usługi sieciowej, tekstu podanego przez użytkownika na język Szwedzkiego Kucharza ( Do wykonania ćwiczenia potrzebne jest zintegrowane środowisko JDeveloper Studio (do pobrania z 1. Uruchom narzędzie JDeveloper. 2. Z menu głównego wybierz File->New. W nowym oknie wybierz kategorię General i typ Applications. Z menu po prawej wybierz Generic Application i kliknij przycisk OK.

2 3. W kolejnym oknie, w polu Application name wpisz Laboratoria. W polu Directory wybierz ścieżkę gdzie ma zostać zapisana aplikacja. Domyślną ścieżką JDeveloper 11 jest katalog mywork: C:\JDeveloper\mywork\Laboratoria Jeśli nie masz praw dostępu do dysku C:\, wpisz inną ścieżkę. Pole Application Package Prefix pozostaw puste. Kliknij przycisk Next.. 4. W kolejnym oknie w polu Project name wpisz WebServices1. Kliknij przycisk Finish.

3 W środkowej części środowiska JDeveloper pojawi się nowa zakładka Laboratoria Overview. Zamknij zakładkę klikając krzyżyk po prawej od nazwy zakładki. 5. Kliknij prawym przyciskiem myszy na ikonie projektu WebServices1. Z menu kontekstowego wybierz opcję New W oknie kategorii rozwiń gałąź Business Tier i zaznacz kategorię Web Services. Z listy dostępnych elementów w oknie po prawej stronie wybierz Web Service Proxy. Kliknij przycisk OK.

4 6. Pojawi się kolejne okno kreatora. Kliknij przycisk Next.

5 7. W kolejnym oknie zaznacz opcję JAX-RPC Web Logic Style. Kliknij przycisk Next.

6 8. W kolejnym oknie w polu WSDL Document URL, wpisz adres: Pole Mapping File pozostaw puste. Kliknij przycisk Next.

7 9. W kolejnym oknie, pole Package Name wpisz webservices. Kliknij przycisk Next.

8 10. W kolejnym oknie kliknij przycisk Next.

9 11. W kolejnym oknie rozwiń okno Ports, po prawej stronie i wybierz IBaseDataTypes. Kliknij przycisk Next.

10 12. W ostatnim oknie kliknij przycisk Finish.

11 Następuje proces generowania proxy. Do projektu WebServices1, są dodawane zewnętrzne źródła. Po lewej stronie w oknie projektu pojawiły się zaimportowane klasy.

12 13. W edytorze została otwarta automatycznie wygenerowana klasa proxy o nazwie BorkPortTypePortClient.java. Przejdź do metody main() i znajdź komentarz add your code here. Wprowadź w miejscu komentarza, kod testujący, czy usługa sieciowa działa poprawnie. Po modyfikacji kod metody main() powinien być następujący: public static void main(string[] args) { try { BorkPortTypePortClient client = new BorkPortTypePortClient(); client.setportcredentialproviderlist(); webservices.borkporttypeportclient myport = new webservices.borkporttypeportclient(); System.out.println("calling " + myport.getendpoint()); String texttotranslate = "We are going to bake a chicken for supper"; String cheftranslation = myport.bork(texttotranslate); System.out.println("The Chef says: " + cheftranslation); } } catch (Exception ex) { ex.printstacktrace(); } Zapisz wszelkie zmiany w pliku BorkTypePortClient.java przy pomocy kombinacji klawiszy Ctrl+S. 14. Uruchom aplikację przez naciśnięcie kombinacji klawiszy klawisza Ctrl + F11 lub poprzez kliknięcie prawym przyciskiem myszy na pliku BorkPortTypePortClient.java w drzewie projektu aplikacji, w katalogu webservices i wybraniu z menu kontekstowego opcji Run. Zaobserwuj wynik działania. Sprawdzenie się powiodło. Usługa szwedzkiego kucharza działa właściwie.

13 15. W kolejnym kroku zaprojektujemy wygodniejszy interfejs dla usługi sieciowej. W tym celu zbudujemy formularz HTML umożliwiający podawanie tekstu do tłumaczenia. Kliknij prawym przyciskiem myszy na projekcie WebServices1 i wybierz z menu kontekstowego opcję New W oknie kategorii rozwiń gałąź przy kategorii Web Tier i zaznacz kategorię HTML. W oknie z prawej strony zaznacz element HTML Page. Kliknij przycisk OK. 17. W kolejnym oknie w polu File Name zamień untitled1.html na form.html. Kliknij przycisk OK. 18. Strona form.html zostanie otwarta w edytorze wizualnym. W pierwszej kolejności zastosujemy gotowy szablon CSS.

14 W tym celu w oknie Component Pallete (w prawym górnym rogu obszaru roboczego) wybierz z listy rozwijanej pozycję CSS, a następnie przeciągnij i upuść szablon o nazwie JDeveloper na puste białe pole edycji pliku form.html. Jeśli okno Component Pallete jest niewidoczne, wybierz z panelu zakładkę View- > Component Palette, lub użyj skrótu Ctrl+Shift+P. W kolejnym oknie zapisz plik CSS pod nazwą jdeveloper.css. Kliknij przycisk Save.

15 19. Przekopiuj do katalogu C:\JDeveloper\mywork\Laboratoria\WebServices1\public_html plik swedish_chef.jpg. Plik pojawi się w nawigatorze obiektów w gałęzi Web Content. Jeśli plik jpg jest niewidoczny, naciśnij symbol dwóch strzałek w oknie Application Nawigator o nazwie Refresh : Przeciągnij plik swedish_chef.jpg i upuść na polu edycji formularza form.html.

16 20. Przeciągnij i upuść element Form z okna Component Palette (zakładka HTML) pod obrazek w pliku form.html.. Automatycznie otworzy się okno z właściwościami formularza. W polu Action wpisz swedishchef, w polu Method wybierz get, natomiast w polu EncType wybierz text/plain. Pole Name pozostaw puste. Kliknij przycisk OK.

17 21. Kliknij myszką wewnątrz elementu formularza (pomiędzy pomarańczowymi ramkami pod zdjęciem) i wpisz tekst: Please enter the text to be translated. Wciśnij klawisz Enter. Pod tekstem upuść przeciągnięty z Component Palette (zakładka HTML) element TextArea. Automatycznie otworzy się okno z właściwościami komponentu. Wpisz nazwę komponentu: texttotranslate, liczba kolumn 30, liczba wierszy 5. Kliknij przycisk OK. Wciśnij klawisz Enter.

18 22. Dodaj do formularza form.html przycisk Submit Buton z okna Component Palette (zakładka HTML), upuść go pod wcześniej dodanym elementem TextArea. W automatycznie otwartym oknie właściwości, pole Name pozostaw puste oraz wpisz tekst Ask the Chef to translate. jako atrybut Value i kliknij przycisk OK.

19 23. Ostateczny wygląd formularza form.html, powinien być następujący: 24. Ostatni krok to przygotowanie serwletu który przyjmie parametr wysłany z formularza (tekst do tłumaczenia), utworzy obiekt-proxy do usługi, dokona tłumaczenia i wyświetli wynik. Kliknij prawym przyciskiem myszy na ikonie projektu WebServices1 i z menu kontekstowego wybierz New Rozwiń gałąź kategorii Web Tier i zaznacz kategorię Servlets. W prawej części okna wybierz element HTTP Servlet. Kliknij przycisk OK.

20 25. W kolejnym oknie wybierz Servlet 2.5 / JSP 2.1 (Java EE 1.5).

21 26. W kolejnym kroku, w polu Class, wpisz SwedishChef, w polu Package, wybierz webservices. W polu Generate Content Type, wybierz HTML. Upewnij się że opcja doget() w sekcji Implement Methods jest zaznaczona. Kliknij przycisk Next.

22 27. W kolejnym oknie w polu Name, wpisz SwedishChef oraz w polu URL Pattern wpisz /swedishchef. Upewnij się, że opcja Specify a name and mapping for the servlet jest zaznaczona. Kliknij przycisk Next.

23 28. W kolejnym oknie kliknij tylko przycisk Finish.

24 29. Kod serwletu Swedishchef.java został załadowany do edytora. Zaimportuj klasę obiektów-proxy do usługi sieciowej, odczytaj parametr przesłany z formularza, dokonaj tłumaczenia na język Szwedzkiego Kucharza i wyświetl wynik. Ostateczna postać kodu serwletu powinna być następująca: public class SwedishChef extends HttpServlet { private static final String CONTENT_TYPE = "text/html; charset=windows-1250"; public void init(servletconfig config) throws ServletException { super.init(config); } public void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setcontenttype(content_type); PrintWriter out = response.getwriter();

25 BorkPortTypePortClient chiefproxy = null; try { chiefproxy = new BorkPortTypePortClient(); } catch (Exception e) { e.printstacktrace(); } String texttotranslate = request.getparameter("texttotranslate"); String cheftranslation = chiefproxy.bork(texttotranslate); } } out.println("<html>"); out.println("<head><title>swedishchef</title></head>"); out.println("<body>"); out.println("<img src=\"swedish_chef.jpg\">"); out.println("<p>the Chief says: <i> " + cheftranslation +" </i></p>"); out.println("</body></html>"); out.close(); Nie zapomnij usunąć z sekcji <body> linijki: out.println("<p>the servlet has received a GET. This is the reply.</p>"); zastępując ją dwoma linijkami kodu: out.println("<img src=\"swedish_chef.jpg\">"); out.println("<p>the Chief says: <i> " + cheftranslation +" </i></p>"); Zapisz wszelkie zmiany w pliku Swedishchef.java przy pomocy kombinacji klawiszy Ctrl+S.

26 30. Uruchom aplikację, klikając prawym przyciskiem na pliku form.html w oknie Application Nawigator (katalog Web Content) i wybierz Run lub użyj kombinacji klawiszy CTRL+F11. Należy chwilę poczekać na konfigurację i uruchomienie serwera IntegratedWebLogicServer. Po informacji Deployment Finished. automatycznie uruchomi się aplikacja w naszej domyślnie ustawionej przeglądarce internetowej. Jeśli przeglądarka nie uruchamia się automatycznie, klikamy na wygenerowany Target URL: lub przeklejamy adres do przeglądarki ręcznie i klikamy Enter.

27 31. Okno w przeglądarce powinno wyglądać tak: Wpisz dowolny tekst który chcesz, aby szwedzki kucharz przetłumaczył i naciśnij przycisk Ask the Chef to translate.

28