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

Podobne dokumenty