연습 1.5: 경매 사이트 목록을 검색하고 목록 세부사항을 제공하는 포틀렛 추가

시작하기 전에 연습 1.4: 사용자 정보 작성 및 편집을 위한 페이지 작성을 완료하십시오.

이 연습에서는 협업 작동(Click-to-Action 메커니즘을 사용하여 데이터를 소스 포틀렛에서 대상 포틀렛으로 송신)을 제공하는 추가 포틀렛을 작성합니다. 소스 포틀렛(ListingSearch)은 세션 Bean을 사용하여 경매 항목 데이터에 액세스합니다. ListingSearch 포틀렛을 사용하여 특정 목록을 찾으면, 대상 ListingDetail 포틀렛은 검색으로 찾은 항목에 대한 자세한 정보를 표시합니다. 모든 경우에서 먼저 포틀렛을 작성해야 합니다.

ListingSearch 포틀렛 작성

ListingSearch 포틀렛을 작성하려면 다음을 수행하십시오.

  1. 프로젝트 탐색기에서 동적 웹 프로젝트 폴더를 펼친 후 AuctionPortlet 프로젝트 폴더를 찾으십시오. 프로젝트 폴더를 마우스 오른쪽 단추로 클릭하고 새로 작성 > 포틀렛을 선택하십시오.
  2. 새 포틀렛 마법사의 초기 페이지에서 기본 이름 접두부ListingSearch로 변경하십시오.
  3. Faces 포틀렛 단일 선택 단추를 선택하십시오.
  4. 다음을 클릭하십시오.
  5. 응용프로그램 이름 드롭 다운 목록에서 AuctionPortlet 응용프로그램을 선택하십시오.
  6. 포틀렛 제목 필드에 ListingSearch를 입력하십시오.
  7. 완료를 클릭하십시오.

ListingSearchDetailView.jsp가 편집 분할창에 열립니다.

데이터 테이블을 ListingSearch 포틀렛 페이지에 추가

Page Designer에 ListingSearchView.jsp 파일이 열려 있는 상태에서, 다음 단계를 수행하여 세션 Bean 데이터를 ListingSearch 페이지에 대한 데이터 소스로 추가하십시오.

  1. 기본 컨텐츠를 여기에 놓으십시오 텍스트를 삭제하십시오.
  2. EJB 세션 Bean 오브젝트를 팔레트의 데이터 드로어에서 파일로 끌어 오십시오.
  3. 세션 Bean 마법사가 열리면 새 EJB 참조 단추를 클릭하십시오.
  4. AuctionPortletEAR 및 AuctionEJB50 폴더를 펼치고 ListingFacade를 선택하여 엔터프라이즈 Bean 참조를 작성하십시오. 완료를 클릭하십시오.
  5. 세션 Bean 마법사에서 다음을 클릭하십시오.
  6. 포틀렛 페이지의 입력 필드에 사용될 findByTitle(String title) 인터페이스를 선택하고 다음을 클릭하십시오.
  7. title 필드가 선택되었는지 확인하십시오. 옵션을 클릭하십시오.
  8. 레이블 필드에 찾기를 입력하십시오. 확인을 클릭하십시오.
  9. 다음을 클릭하십시오. 그러면 마법사의 결과 양식 페이지가 표시됩니다. 이 페이지에서, 데이터베이스로부터 데이터를 검색하여 표시할 데이터 테이블을 정의하십시오.
  10. 포틀렛 페이지에서 사용할 데이터 테이블에 적절한 열을 개별적으로 선택, 조직 및 구성할 수 있도록 모든 열을 선택 취소하려면 없음을 클릭하십시오. 그런 후 다음 열에 대해 선택란을 선택하십시오.
  11. 위 아래 화살표 단추를 사용하여, 선택한 데이터 열을 위의 단계에 표시된 순서대로 이동하십시오.
  12. itemid 열에 대한 레이블 값을 선택한 다음, 항목 ID로 변경하십시오.
  13. 완료를 클릭하여 UserAdminView.jsp 페이지의 기본 사용자 인터페이스를 생성하십시오. 사용자 인터페이스는 다음과 같이 표시됩니다.
    ListingSearchView.jsp
  14. 파일을 저장하십시오.

UserAdmin 페이지에 Java 페이지 코드 추가

Java 페이지 코드를 추가하려면 다음을 수행하십시오.

  • 나중에 포틀렛 컨텐츠를 새로 고칠 때 다시 사용되도록 세션 범위에title 매개변수를 저장하십시오.
  • 세션 범위에 저장된 값이 제목 입력 필드에 표시되도록 매개변수를 초기화하십시오.
  • 세션 범위에 저장된 title 매개변수를 사용하여 결과 데이터를 초기화하십시오.
  • EJB 참조 논리 및 코드를 추가하여 호출 및 결과를 사용자 인터페이스에 바인드하려면 다음을 수행하십시오.

    1. Page Designer의 팝업 메뉴에서 페이지 코드 편집을 선택하십시오.
    2. 다음 굵은체 코드를 doListingFacadeLocalFindByTitleAction()에 입력하십시오.
      public String doListingFacadeLocalFindByTitleAction() {
          String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
          getSessionScope().put("title", title);
              try {
              listingFacadeLocalFindByTitleResultBean = 
              	getListingFacadeLocal().findByTitle(title);
              } catch (Exception e) {
                  logException(e);
          }
          return null;
      }
      
    3. 다음 굵은체 코드를 getListingFacadeLocalFindByTitleParamBean()에 입력하십시오.
      public ListingFacadeLocalFindByTitleParamBean getListingFacadeLocalFindByTitleParamBean() {
          if (listingFacadeLocalFindByTitleParamBean == null) {
              listingFacadeLocalFindByTitleParamBean = new ListingFacadeLocalFindByTitleParamBean();
              String title = (String)getSessionScope().get("title");
              listingFacadeLocalFindByTitleParamBean.setTitle(title);
          }
          return listingFacadeLocalFindByTitleParamBean;
      }
      
    4. 다음 굵은체 코드를 getListingFacadeLocalFindByTitleResultBean()에 입력하십시오.
      public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
          if (listingFacadeLocalFindByTitleResultBean == null) {
              String title = (String)getSessionScope().get("title");
              if (title != null) {
              try {
              listingFacadeLocalFindByTitleResultBean = getListingFacadeLocal().findByTitle(title);
              } catch (Exception e) {
                  logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByTitleResultBean;
      }
      
    5. ListingSearchView.java를 저장하십시오.

    ListingDetail 포틀렛 작성

    ListingDetail 포틀렛을 작성하려면 다음을 수행하십시오.

    1. 프로젝트 탐색기에서 동적 웹 프로젝트 폴더를 펼친 후 AuctionPortlet 프로젝트 폴더를 찾으십시오. 프로젝트 폴더를 마우스 오른쪽 단추로 클릭하고 새로 작성 > 포틀렛을 선택하십시오.
    2. 새 포틀렛 마법사의 초기 페이지에서 기본 이름 접두부ListingDetail로 변경하십시오.
    3. Faces 포틀렛 단일 선택 단추를 선택하십시오.
    4. 다음을 클릭하십시오.
    5. 응용프로그램 이름 드롭 다운 목록에서 AuctionPortlet 응용프로그램을 선택하십시오.
    6. 포틀렛 제목 필드에 ListingDetail을 입력하십시오.
    7. 완료를 클릭하십시오.

    ListingDetailView.jsp 파일이 편집 분할창에 열립니다.

    데이터 양식을 ListingDetail 포틀렛 페이지에 추가

    Page Designer에 ListingDetailView.jsp 파일이 열려 있는 상태에서, 다음 단계를 수행하여 세션 Bean 데이터를 ListingDetail 페이지에 대한 데이터 소스로 추가하십시오.

    1. 기본 컨텐츠를 여기에 놓으십시오 텍스트를 삭제하십시오.
    2. EJB 세션 Bean 오브젝트를 팔레트의 데이터 드로어에서 파일로 끌어 오십시오.
    3. 세션 Bean 마법사가 열리면 ejb/ListingFacade를 선택하고 다음을 클릭하십시오.
    4. findById(Integer itemid) 인터페이스를 선택하십시오. 이 인터페이스는 포틀렛 페이지의 입력 필드에 사용됩니다.
    5. 다음을 클릭하십시오.
    6. itemid 필드가 선택되었는지 확인하십시오. itemid 열에 대한 레이블 값을 선택한 다음, 항목 ID:로 변경하십시오.
    7. 옵션을 클릭하십시오.
    8. 레이블 필드에 찾기를 입력하십시오. 확인을 클릭하십시오.
    9. 다음을 클릭하십시오. 그러면 마법사의 결과 양식 페이지가 표시됩니다. 이 페이지에서, 데이터베이스로부터 데이터를 검색하여 표시할 데이터 양식을 정의하십시오.
    10. 포틀렛 페이지에서 사용할 데이터 테이블에 적절한 필드를 개별적으로 선택, 조직 및 구성할 수 있도록 모든 필드를 선택 취소하려면 없음을 클릭하십시오. 그런 후 다음 필드에 대해 선택란을 선택하십시오.
    11. 위 아래 화살표 단추를 사용하여, 선택한 데이터 필드를 위의 단계에 표시된 순서대로 이동하십시오.
    12. 완료를 클릭하여 ListingDetailView.jsp 페이지의 사용자 인터페이스를 생성하십시오. 사용자 인터페이스는 다음과 같이 표시됩니다.
      ListingDetailView.jsp
    13. 파일을 저장하십시오.

    UserAdmin 페이지에 Java 페이지 코드 추가

    Java 페이지 코드를 추가하려면 다음을 수행하십시오.

  • 나중에 포틀렛 컨텐츠를 새로 고칠 때 다시 사용되도록 세션 범위에itemid 매개변수를 저장하십시오.
  • 세션 범위에 저장된 값이 항목 ID 입력 필드에 표시되도록 매개변수를 초기화하십시오.
  • 세션 범위에 저장된 itemid 매개변수를 사용하여 결과 데이터를 초기화하십시오.
  • EJB 참조 논리 및 코드를 추가하여 호출 및 결과를 사용자 인터페이스에 바인드하려면 다음을 수행하십시오.

    1. Page Designer의 팝업 메뉴에서 페이지 코드 편집을 선택하십시오.
    2. 다음 굵은체 코드를 doListingFacadeLocalFindByIdAction()에 입력하십시오.
      public String doListingFacadeLocalFindByIdAction() {
          Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
          getSessionScope().put("itemid", itemid);
              try {
              listingFacadeLocalFindByIdResultBean = 
              	getListingFacadeLocal().findById(itemid);
              } catch (Exception e) {
                  logException(e);
          }
          return null;
      }
      
    3. 다음 굵은체 코드를 getListingFacadeLocalFindByIdParamBean()에 입력하십시오.
      public ListingFacadeLocalFindByIdParamBean getListingFacadeLocalFindByIdParamBean() {
          if (listingFacadeLocalFindByIdParamBean == null) {
              listingFacadeLocalFindByIdParamBean = new ListingFacadeLocalFindByIdParamBean();
              Integer itemid = (Integer)getSessionScope().get("itemid");
              listingFacadeLocalFindByIdParamBean.setItemid(itemid);
          }
          return listingFacadeLocalFindByIdParamBean;
      }
      
    4. 다음 굵은체 코드를 getListingFacadeLocalFindByIdResultBean()에 입력하십시오.
      public ItemData getListingFacadeLocalFindByIdResultBean() {
          if (listingFacadeLocalFindByIdResultBean == null) {
              Integer itemid = (Integer)getSessionScope().get("itemid");
              if (itemid != null) {
              try {
              listingFacadeLocalFindByIdResultBean = 
                           getListingFacadeLocal().findById(itemid);
              } catch (Exception e) {
                  logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByIdResultBean;
      }
      
    5. ListingDetailView.java를 저장하십시오.

    ListingSearch 포틀렛에 협업 링크 추가

    용어 협업 포틀렛은 페이지의 포틀렛이 서로 정보를 공유하여 상호 작용하는 기능을 말합니다. 포털 페이지에 있는 하나 이상의 협업 포틀렛은 소스 포틀렛에서 조치 또는 이벤트에 의해 트리거된 소스 포틀렛의 변경사항에 대해 자동으로 반응할 수 있습니다. 즉, 이벤트의 대상인 포틀렛은 사용자가 페이지의 다른 포틀렛에서 반복적인 변경사항이나 조치를 수행하지 않아도 되도록 반응할 수 있습니다. 협업 작동 구현에 사용되는 메커니즘을 Click-to-Action 이벤트라고 합니다.

    소스 포틀렛의 아이콘을 사용하여 Click-to-Action 이벤트를 실행하십시오. 아이콘은 조치의 대상 목록을 포함하는 팝업 메뉴를 나타냅니다. 사용자가 특정 대상을 선택하고 나면, 특성 브로커는 해당되는 포틀렛 조치 양식으로 데이터를 대상에 전달합니다. Click-to-Action 전달 메소드를 사용하면, 사용자는 클릭만으로 소스 포틀렛에서 하나 이상의 대상 포틀렛으로 데이터를 전송할 수 있으므로, 대상이 조치에 반응하여 결과가 있는 새 창을 표시합니다.

    ListingSearch 및 ListingDetail 포틀렛 사이에 협업 작동을 설정하려면 다음을 수행하십시오.

    1. Page Designer에서 ListingSearchView.jsp를 여십시오. (프로젝트 탐색기에서 AuctionPortlet 및 WebContent 폴더를 펼친 후 파일을 두 번 클릭하십시오.)
    2. 포틀렛 팔레트 드로어에서 Click-to-Action 출력 특성 오브젝트를 끌어서 레이블이 {itemid}인 데이터 테이블의 출력 필드에 놓으십시오.

      참고: Click-to-Action 출력 특성 오브젝트를 출력 필드상에(앞 또는 뒤가 아니라) 놓도록 하십시오. 출력 필드는 다음과 같이 사각형 상자에 강조표시되어 있어야 합니다.
      출력 특성을 출력 필드에 놓기
      (출력 필드 선택사항을 보려면 대화 상자를 옆으로 이동해야 할 수도 있습니다.)

    3. Click-to-Action 출력 특성 삽입 대화 상자에서 다음 값을 제공하십시오. 파일을 저장하십시오.
    4. 올바른 Click-to-Action 코드를 추가했는지 확인하려면 소스 보기를 열어 다음 코드가 파일에 포함되어 있는지 확인하십시오.
      <h:outputText id="text3"
      	value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
      	styleClass="outputText">
      	<f:convertNumber />
      </h:outputText>
      	<c2a:encodeProperty type="itemid" 
      		namespace="http://auctionportlet" name="itemid"
      		value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
      	</c2a:encodeProperty>
      
      강조표시된 value 속성에 주의하십시오. 출력 특성이 페이지에 올바르게 추가되지 않으면 이 속성이 누락됩니다.

    다음은 ListingSearch를 소스 포틀렛으로 식별하는 단계입니다. 다음과 같이 ListingDetail을 대상 포틀렛으로 사용되도록 설정하십시오.

    1. 프로젝트 탐색기에서 AuctionPortal > 포틀렛 배치 설명자를 펼치십시오. ListingDetail 포틀렛의 팝업 메뉴에서 협업 > 대상 사용을 선택하십시오.
    2. 협업 포틀렛 사용 대화 상자에서 데이터 유형 필드에 itemid를 입력하십시오.
    3. 조치 필드 옆에 있는 찾아보기 단추를 클릭하고 /ListingDetailView.jsp > form1 > button1을 선택하십시오. 확인을 클릭하십시오.
    4. 협업 포틀렛 사용 대화 상자에서 레이블 필드에 세부사항 표시를 입력하십시오. 확인을 클릭하십시오.

    Click-to-Action 소스가 올바르게 식별되는지 확인하려면 프로젝트 탐색기의 포틀렛 배치 설명자 폴더로 돌아가십시오. 소스 포틀렛(ListingSearch)과 대상 포틀렛(ListingDetails)을 나타내는 아이콘은 다음과 같아야 합니다.
    Click-to-Action 포틀렛

    Listing 포틀렛에서 협업 작동 테스트

    ListingSearch 및 ListingDetail 포틀렛이 의도한 대로 작동하는지 확인하려면 이 포틀렛을 테스트 환경에서 실행해야 합니다.

    포틀렛을 실행하려면 다음을 수행하십시오.

    1. 프로젝트 탐색기에서 AuctionPortlet 프로젝트를 선택하고 팝업 메뉴에서 실행 > 서버에서 실행을 선택하십시오.
    2. 이미 WebSphere Portal v5.1 테스트 환경을 정의했으므로 테스트 환경을 선택한 후 서버 선택 마법사에서 완료를 클릭하십시오.
    3. 포틀렛이 브라우저에 표시됩니다. 여기에서 사용자가 포털 사이트에서 보게 되는 입력 필드, 단추 및 레이아웃을 볼 수 있습니다.
    4. ListingSearch 포틀렛에서, 모든 항목을 나열하기 위한 와일드 카드 검색 문자 %를 입력한 후 찾기 단추를 클릭하십시오. 제출 단추 아래에 있는 테이블은 검색 문자열과 일치하는 경매 항목을 표시합니다.
    5. 항목 ID 열에서 Click-to-Action 아이콘(Click-to-Action 아이콘)을 클릭하여 목록 ID를 ListingDetail 포틀렛에 송신하십시오. ListingDetail 포틀렛에 검색으로 찾은 항목에 대한 자세한 정보가 표시됩니다.

    다음 연습을 진행하기 전에 테스트 환경 서버를 중지하십시오. 테스트 환경 서버를 중지하려면 서버 보기에서 테스트 환경 서버를 선택하고 서버 중지 도구 모음 단추 서버 중지를 클릭하십시오.

    이제 연습 2.1: 포틀렛 응용프로그램을 표시할 새 포털 작성을 시작할 수 있습니다.

    피드백
    (C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.