ZAWWW-2st1.2-l08.tresc-1.0

Z Studia Informatyczne
Przejdź do nawigacjiPrzejdź do wyszukiwania

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 (http://en.wikipedia.org/wiki/Swedish_chef). Do wykonania ćwiczenia potrzebne jest zintegrowane środowisko Developer 10.1.3 (do pobrania z http://otn.oracle.com).

1. Uruchom narzędzie JDeveloper

2. Z menu głównego wybierz File->New->Application. Wybierz kategorię General i typ Application. Kliknij przycisk OK.

ZAWWW-2st1 2-l08 tresc-1 0 01.png

3. Podaj nazwę aplikacji Laboratoria. Kliknij przycisk OK.

ZAWWW-2st1 2-l08 tresc-1 0 02.png

4. Automatycznie pojawi się okno dialogowe z pytaniem o nazwę i lokalizację projektu. Wpisz nazwę projektu Web Services 1 i kliknij przycisk OK.

ZAWWW-2st1 2-l08 tresc-1 0 03.png

5. Kliknij prawym przyciskiem myszy na ikonie projektu Web Services 1. 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.

ZAWWW-2st1 2-l08 tresc-1 0 04.png

6. Automatycznie otworzył się asystent tworzenia obiektów proxy. Na pierwszym ekranie kliknij przycisk Dalej >. Wpisz w pierwszym polu adres deskryptora usługi sieciowej http://a3.x-ws.de/cgi-bin/bork/service.wsdl i naciśnij klawisz Tab. Kliknij przycisk Dalej >.

ZAWWW-2st1 2-l08 tresc-1 0 05.png

7. W kolejnym kroku asystenta pozostaw proponowany docelowy adres URL i kliknij przycisk Dalej >.

ZAWWW-2st1 2-l08 tresc-1 0 06.png

8. W kolejnym kroku asystenta kliknij przycisk Dalej >.

ZAWWW-2st1 2-l08 tresc-1 0 07.png

9. Zmień nazwę pakietu dla generowanych obiektów proxy na webservices. Kliknij przycisk Zakończ.

ZAWWW-2st1 2-l08 tresc-1 0 08.png

10. W edytorze została otwarta automatycznie wygenerowana klasa proxy o nazwie IBaseDataTypesClient. Przejdź do metody main() i znajdź komentarz „Add your own code here". Wprowadź 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 {
    webservices.IBaseDataTypesClient myPort =
                new webservices.IBaseDataTypesClient();
    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(); }
}

11. Uruchom aplikację przez naciśnięcie klawisza F11 i zaobserwuj wynik działania.

ZAWWW-2st1 2-l08 tresc-1 0 09.png

12. 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 Web Services 1 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.

ZAWWW-2st1 2-l08 tresc-1 0 10.png

13. Na pierwszym oknie asystenta kliknij przycisk Dalej >. Wprowadź nazwę pliku: form.html. Kliknij przycisk Dalej >.

ZAWWW-2st1 2-l08 tresc-1 0 11.png

14. W ostatnim kroku asystenta wprowadź tytuł strony: Swedish Chef i kliknij przycisk Zakończ.

ZAWWW-2st1 2-l08 tresc-1 0 12.png

15. Strona form.html zostanie otwarta w edytorze wizualnym. W pierwszej kolejności zastosujemy gotowy szablon CSS. W tym celu w oknie Components (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.

ZAWWW-2st1 2-l08 tresc-1 0 13.png

16. W oknie Components wybierz z listy rozwijanej element HTML Forms. Przekopiuj do katalogu %JDEV_HOME%\jdev\mywork\Laboratoria\Web Services 1\public_html plik swedish_chef.jpg. Plik pojawi się w nawigatorze obiektów w gałęzi Web Content. Przeciągnij plik i upuść na polu edycji.

ZAWWW-2st1 2-l08 tresc-1 0 14.png

17. Ustaw kursor w polu edycji pod obrazkiem i z listy komponentów przeciągnij i upuść element Form. Automatycznie otworzy się okno z właściwościami formularza. Jako akcję wpisz swedishchef, metoda wywołania serwletu to GET, sposób kodowania parametrów to text/plain. Kliknij przycisk OK.

ZAWWW-2st1 2-l08 tresc-1 0 15.png

18. Kliknij myszką wewnątrz elementu formularza i wpisz tekst: „Please enter the text to be translated". Pod tekstem upuść przeciągnięty z listy komponentów 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.

ZAWWW-2st1 2-l08 tresc-1 0 16.png

19. Pod polem memo przeciągnij i upuść komponent Submit Button. W automatycznie otwartym oknie właściwości wpisz jako atrybut Value tekst „Ask the Chef to translate…" i kliknij przycisk OK.

ZAWWW-2st1 2-l08 tresc-1 0 17.png

20. Ostateczny wygląd formularza powinien być następujący.

ZAWWW-2st1 2-l08 tresc-1 0 18.png

21. 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 Web Services 1 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.

ZAWWW-2st1 2-l08 tresc-1 0 19.png

22. W pierwszym oknie asystenta tworzenia serwletów kliknij przycisk Dalej >. W drugim oknie wybierz wersję Servlet 2.4\JSP 2.0 (J2EE 1.4). Kliknij przycisk Dalej >. W kolejnym kroku wpisz nazwę serwletu SwedishChef, nazwę pakietu webservices, upewnij się że zostanie wygenerowana metoda doGet(). Kliknij przycisk Dalej >

ZAWWW-2st1 2-l08 tresc-1 0 20.png

23. Upewnij się, że do deskryptora instalacji web.xml zostanie dopisane odwzorowanie serwletu. Kliknij przycisk Zakończ.

ZAWWW-2st1 2-l08 tresc-1 0 21.png

24. Kod serwletu 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.

package webservices;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.*;
import javax.servlet.http.*;
import webservices.IBaseDataTypesClient;

public class SwedishChef extends HttpServlet {
  private static final String CONTENT_TYPE = "text/html";

  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();

    IBaseDataTypesClient chiefProxy = null;
    try {
      chiefProxy = new IBaseDataTypesClient();
    } 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("

The Chief says:  " + chefTranslation +
                " 

");
    out.println("</body></html>");
    out.close();
  }
}

25. Przejdź do pliku form.html. Uruchom aplikację naciskając klawisz F11.

ZAWWW-2st1 2-l08 tresc-1 0 22.png
ZAWWW-2st1 2-l08 tresc-1 0 23.png

Źródło: „https://wazniak.mimuw.edu.pl/index.php?title=ZAWWW-2st1.2-l08.tresc-1.0&oldid=33865”