Aplikacje WWW – laboratorium STRUTS
Transkrypt
Aplikacje WWW – laboratorium STRUTS
Aplikacje WWW – laboratorium STRUTS Drupiewski Bartosz, Ejsymont Maciej Celem ćwiczenia jest przygotowanie aplikacji internetowej z wykorzystaniem technologii STRUTS. Prezentowane ćwiczenia zostały wykonane w środowisku Oracle JDeveloper 11.1.1.9 (do pobrania ze strony: http://www.oracle.com/ ) . Ćwiczenie 1 W tym ćwiczeniu zostanie stworzony serwlet wyświetlający wpisane przez użytkownika informacje. ● włączamy środowisko Oracle jDeveloper i wybieramy opcję Default Role ● po włączeniu programu klikamy File->New ● wybieramy Generic Application i klikamy OK ● w następnym oknie określamy nazwę aplikacji i pakietu i klikamy NEXT ● w następnym oknie nadajemy nazwę projektowi i w oknie dostępnych technologii klikamy dwukrotnie na STRUTS efekt: klikam y przycisk NEXT a w następnym oknie FINISH · W strukturze plików utworzonej aplikacji naleŜy znaleźć plik struts-config.xml i rozpocząć jego edycję. · Z palety komponentów należy wybrać komponent typu Page i umieścić go w obszarze edycyjnym. Należy określić jego nazwę jako Dane osobowe. Po dwukrotnym kliknięciu na utworzonej ikonie system zaproponuje utworzenie odpowiadającego mu pliku. Na stronach kreatora należy zaakceptować wartości domyślne dla ustawień tworzonego pliku JSP · W pliku ApplicationResources.properties należy dodać następujące wpisy person.title=Dane Osobowe person.subtitle=Wprowadz dane: - Następni należy przejść do edycji utworzonej strony, korzystając z palety komponentów (biblioteka Struts Bean) umieścić na stronie element typu message i następnie ustawić jego właściwości,robi się to w oknie property inspector w dolnym prawym rogu ekranu · Podobnie należy postąpić z kolejnym dodanym elementem typu message - w ten sam sposób należy dodać STRUTS HTML ERRORS tak samo dodajemy STRUTS JAVASCRIPT i formName ustawić na personForm - · Kolejnym elementem do umieszczenia na stronie jest formularz, początkowo trzeba wybrać formularz HTML COMMON FORM, po zakończeniu edycji wizualnej trzeba go zmienić jego znaczniki na html:form - · Z palety HTML Common naleŜy wybrać tabelę i umieścić ją wewnątrz formularza(powinna posiadać 7 - wierszy i 2 kolumny) · W pliku ApplicationResources.properties należy dodać następujące wpisy person.firstname=Imie: person.lastname=Nazwisko: person.birthdate=Data urodzenia (YYYY-MM-DD): person.age=Wiek (jezeli nie podano daty urodzenia): person.phone=Numer telefonu (XXX.XXX.XXXX): person.email=Email: person.explain.1=* pole obowiązkowe - · W lewej kolumnie ostatniego wiersza tabeli na stronie dane osobowe umieścićprzycisk RESET pochodzący z palety STRUTS HTML , natomiast w prawej kolumnie przycisk SUBMIT - · Następnie z prawej strony tabeli-formularza należy wstawić pola tekstowe do wpisywania danych. Są to elementy typu Text Field z palety STRUTS HTML. Dla każdego z nich należy ustawić właściwość Property na jedną z wartości: firstname,lastname, birthdate, age, phone, email · Po wykonaniu powyższych kroków formularz powinien wyglądać następująco - Należy pamiętać o zmianie znaczników <form></form> na <html:form></html:form> i sprawdzeniu czy przed <javascript> dodał się znacznik <html:errors/> kod pliku Dane_osobowe.jsp widoczny po klknięciu na dole okna edycji zakładki script powinien wyglądać następująco <%@ page contentType="text/html;charset=windows-1250"%> <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%> <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>untitled</title> </head> <body> <p> <bean:message key="person.title"/> </p> <p> <bean:message key="person.subtitle"/> </p> <p> <html:errors/><html:javascript formName="personForm"/> </p> <html:form action="/przetwarzanie"> <table cellspacing="2" cellpadding="3" border="1" width="100%"> <tr> <td width="50%"><bean:message key="person.firstname"/></td> <td width="50%"> <html:text property="firstname"/> </td> </tr><tr> <td width="50%"> <bean:message key="person.lastname"/> </td> <td width="50%"> <html:text property="lastname"/> </td> </tr><tr> <td width="50%"> <bean:message key="person.birthdate"/> </td> <td width="50%"> <html:text property="birthdate"/> </td> </tr><tr> <td width="50%"> <bean:message key="person.age"/> </td> <td width="50%"> <html:text property="age"/> </td> </tr><tr> <td width="50%"> <bean:message key="person.phone"/> </td> <td width="50%"> <html:text property="phone"/> </td> </tr><tr> <td width="50%"> <bean:message key="person.email"/> </td> <td width="50%"> <html:text property="email"/> </td> </tr><tr> <td width="50%"> <html:reset/> </td> <td width="50%"> <html:submit/> </td> </tr> </table> </html:form><bean:message key="person.explain.1"/> </body> </html> -w edycji Diagramu pliku struts-config.xml z palety komponentów z zakładki STRUTS PAGE FLOW do okna edycji przeciągamy ikonę ACTION - dodajemy ją w taki sam sposób jak stronę Dane osobowe, nazywamy ją /przetwarzanie a następnie klikamy dwukrotnie i zgadzamy się na propozycje ustawień klikając OK -· Następnym krokiem jest wskazanie pliku struts-config.xml i stworzenie beana, który będzie obsługiwał stworzony właśnie formularz - Następnie należy skonfigurować utworzonego beana -Typ beana należy określić jako: org.apache.struts.validator.DynaValidatorForm, a nazwę: personForm · Podobnie należy postąpić z właściwością Form Property · Tym razem jednak typem jest java.lang String, a nazwą: firstname · Podobnie należy określić właściwości dla pozostałych elementów formularza Na diagramie przepływu sterowania należy jeszcze umieścić element typu Page i nazwać go: dane_zweryfikowane. Następnie trzeba wybrać element Forward i kliknąć najpierw na ikonę akcji Przetwarzanie a następnie na ikonę dane_zweryfikowane Po podwójnym kliknięciu na dane_zweryfikowane utworzona zostanie strona JSP na której należy umieścić element typu Message i jako pole key tego elementu wpisać: valid.ok . Odpowiedni opis tego komunikatu należy też umieścić w pliku ApplicationResources.properties: valid.ok = Dane poprawne. ● na końcu pliku struts-config.xml, przed zamknięciem znacznika </struts-config> dodajemy <!-- Validator Configuration --> <plug-in className="org.apache.struts.validator.ValidatorPlugIn"> <set-property property="pathnames" value="/WEB-INF/validator-rules.xml, /WEB-INF/validation.xml" /> </plug-in> ● do folderu WEB-INF dodajemy pliki validation.xml oraz validator-rules.xml zapoznajemy się z plikiem validation.xml w celu zrozumienia tworzenia zasad walidacji ● do pliku ApplicationResources properties dodajemy # general error msgs errors.header=<font size="4"><UL> errors.prefix=<LI><span style="color: red"> errors.suffix=</span></LI> errors.footer=</UL></font> errors.invalid={0} jest nieprawidlowy. errors.maxlength={0} nie moze byc wieksza niz {1} znakow. errors.minlength={0} nie moze byc krotsze niz {1} znakow. errors.range={0} is not in the range {1} through {2}. errors.required={0} to pole jest wymagane. errors.byte={0} must be an byte. errors.date={0} is not a date. errors.double={0} must be an double. errors.float={0} must be an float. errors.integer={0} must be an integer. errors.long={0} must be an long. errors.short={0} must be an short. ● w pliku struts-config.xml modyfikujemy zawartość action-mapping <action-mappings> <action path="/przetwarzanie" type="nazwa_pakietu.PrzetwarzanieAction" input="/Dane_osobowe.jsp" name="personForm"> <forward name="success" path="/dane_zweryfikowane.jsp"/> </action> </action-mappings> ● uruchamiamy program poprzez kliknięcie prawym przyciskiem na stronę Dane_osobowe.jsp i wybranie opcji RUN ============================================ Ćwiczenie drugie Stworzymy Beana, który pozwoli wyświetlić wpisane informacje na stronie potwierdzającej weryfikację danych. Klikamy prawym przyciskiem na ikonkę pakietu w menadżerze aplikacji i klikamy New… Wybieramy Java Class i nazywamy ją UserBean ● wpisujemy wewnątrz następujący kod package struts123456789; public class UserBean { private String firstname; private String lastname; private String birthdate; private String age; private String phone; private String email; public UserBean(String firstname, String lastname,String birthdate,String age,String phone,String email) { this.firstname=firstname; this.lastname=lastname; this.birthdate=birthdate; this.age = age; this.phone=phone; this.email=email; } // public String getUsername() { // return this.username; // } // // public String getPassword() { // return this.password; // } public String getFirstname() { return firstname; } public String getLastname() { return lastname; } public String getBirthdate() { return birthdate; } public String getAge() { return age; } public String getPhone() { return phone; } public String getEmail() { return email; } } ● modyfikujemy metodę execute klasy PrzetwarzanieAction.java public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { DynaValidatorForm userForm = (DynaValidatorForm)form; String firstname = (String)userForm.get("firstname"); String lastname= (String)userForm.get("lastname"); String birthdate= (String)userForm.get("birthdate"); String age= (String)userForm.get("age"); String phone= (String)userForm.get("phone"); String email= (String)userForm.get("email"); UserBean userBean = new UserBean(firstname,lastname,birthdate,age,phone,email); request.setAttribute("userData", userBean); return mapping.findForward( "success"); } ● do pliku dane_zweryfikowane.jsp dodajemy kolejno STRUTS BEANS MESSAGE i obok nich STRUTS BEAN WRITE ● elementom Message przyporządkowujemy wartości identyczne jak w tabelce na strone Dane_osobowe.jsp ● elementom Write ustawiamy name: userData a elementom property kolejno firstname, lastname itd ● efekt, po wpisaniu prawidłowych danych ukazuje się następujące okno