브라우저 히스토리

IBM® 웹 사이트(http://www.ibm.com)에 액세스한 다음 IBM Rational® Cafes(http://www.ibm.com/rational/cafe)에 액세스하면 어떤 상황이 발생하는지 고려하십시오. 두 개의 다른 웹 페이지는 원격 서버에서 제공되며, 브라우저에서 이전다음 단추를 클릭하여 두 사이트 각각을 재방문할 수 있습니다. 이와 대조적으로 Rich UI 애플리케이션의 기본 처리는 브라우저에서 단독으로 수행됩니다. 애플리케이션은 새 컨텐츠를 렌더링할 수 있고, 시각적 업데이트를 위해 서버에 액세스할 수도 있지만 대부분의 경우 이전다음 단추가 사용 안함 상태이거나 다른 웹 사이트에 대해 직접 처리를 수행합니다.

Rich UI에서 분리 웹 페이지로 식별할 화면 컨텐츠를 결정합니다. 히스토리의 함수를 액세스하여 의사결정을 강제 수행하며, 이는 제품에서 제공된 Rich UI 핸들러 파트입니다. 히스토리에 대한 작업을 통해 런타임 시 브라우저 히스토리에 페이지를 지정할 수 있으며 이전다음 단추를 사용하여 애플리케이션의 다른 페이지에 액세스할 수 있습니다. 또한 사용자의 브라우저 닫기 시도에 응답할 수 있습니다.

브라우저 히스토리 메커니즘은 주어진 웹 페이지의 상태를 저장하지 않습니다. 애플리케이션에 맞는 동작을 코딩해야 합니다.

브라우저 히스토리 및 이벤트 응답 설정

브라우저 히스토리와 이벤트 응답을 설정하려면 다음과 같이 하십시오.
  1. Rich UI 애플리케이션에서 다음 아웃라인에서와 같이 히스토리를 기반으로 하여 Rich UI 핸들러를 선언하십시오.
    import com.ibm.egl.rui.history.History;
    import com.ibm.egl.rui.history.HistoryChanged;
    import com.ibm.egl.rui.history.OnBeforeUnloadMessageFunction;
    
    Handler MyApplication Type RUIHandler { onConstructionFunction=start }
       myHistory History {};
    end

    히스토리를 기반으로 한 변수를 선언하여 사용자 브라우저에 표시되는 웹 주소에 #empty를 추가합니다. 이후의 처리와 관련하여 empty는 새 페이지의 이름입니다. 새 페이지는 원래 웹 페이지만 유지하는 브라우저 소유의 히스토리가 아닌 애플리케이션 특정 브라우저 히스토리에 추가됩니다.

  2. 예를 들어 on-construction 함수를 사용하여 특정 사용자 이벤트의 응답에서 실행되는 함수(이벤트 핸들러)에 대한 액세스를 설정할 수 있습니다.
    • 이러한 이벤트는 브라우저 히스토리에 새 페이지를 추가하거나 다른 페이지를 탐색하는 것과 같은 이벤트입니다. 나중에 새 페이지를 추가하거나 이동하는 방법을 볼 수 있습니다. 먼저 이벤트 핸들러를 설정하는 방법에 대해 설명합니다.
      새 페이지 이벤트에 대한 사용자 정의 응답을 사용으로 설정하려면 addListener 함수를 호출하고 코딩하는 이벤트 핸들러를 참조하십시오. 다음은 addListener 함수의 호출 예입니다.
      myHistory.addListener(myHistoryChanged);
      다음 위임 파트는 참조된 이벤트 핸들러의 특성에 대한 아웃라인입니다.
      Delegate
         HistoryChanged(newPageName String in)
      end

      표시된 대로 새 페이지 이벤트에 대한 이벤트 핸들러는 문자열을 허용합니다. addListener를 호출하고 사용자 정의 함수를 참조하는 경우 사용자 정의 함수는 브라우저가 empty라는 초기 페이지를 추가하고 후속 페이지를 추가하는 경우에 호출됩니다. 각각의 경우 사용자의 브라우저는 웹 주소를 표시하고 페이지 이름을 포함하는데, 이 웹 주소는 이후에 파운드 기호(#)로 표시되는 주소 서브세트입니다. 또한 EGL 런타임은 함수에 대한 페이지 이름을 제공합니다.

      다음은 사용자 표시의 위젯으로 가정되는 myLabel이 있는 새 페이지 이벤트 이후에 호출되는 이벤트 핸들러의 예입니다.
      function myHistoryChanged(newPageName String in)
         myLabel.text = "History was changed. Current page name is "+ newPageName;
      end

      addListener를 여러 번 실행하여 여러 개의 새 페이지 이벤트 핸들러를 등록할 수 있습니다. 참조된 함수는 등록 순서 대로 실행됩니다. 동일한 함수를 여러 번 등록한 경우에도 모든 등록이 적용됩니다.

    • 두 번째 이벤트는 사용자의 브라우저 또는 브라우저 탭 닫기 시도입니다.
      이 경우 keepUserOnPage 함수를 호출하고 코딩하는 이벤트 핸들러를 참조하십시오. 다음은 keepUserOnPage 함수의 호출 예입니다.
      history.keepUserOnPage(stayHere);
      다음 위임 파트는 참조된 이벤트 핸들러의 특성에 대한 아웃라인입니다.
      Delegate
         OnBeforeUnloadMessageFunction() returns(String)
      end

      표시된 대로 브라우저 닫기 이벤트에 이벤트 핸들러는 문자열을 리턴합니다. 이 문자열은 사용자가 확인하거나 브라우저 닫기를 되돌 수 있는 대화 상자에 표시됩니다.

      다음은 브라우저 닫기 이벤트 이후에 호출되는 이벤트 핸들러의 예입니다.
      function stayHere() returns(String)
      		return ("Close the application?");
      	end

브라우저 히스토리에 항목 추가

addToHistory 함수를 호출하여 애플리케이션 특정 브라우저 히스토리에 항목을 추가합니다. 다음 예에서는 myNewPage라는 페이지를 추가합니다.
myHistory.addToHistory("myNewPage");
영향은 다음과 같습니다.
  • 새 페이지 이벤트 핸들러가 실행됩니다. 이 예에서는 핸들러 이름이 myHistoryChanged입니다.
  • 이전 단추를 클릭하면 브라우저의 웹 주소에 이전 페이지의 이름이 포함되고 다음 단추가 사용 가능하게 됩니다.

이전 페이지 탐색

애플리케이션의 이전 페이지를 탐색할 수 있습니다. 다음은 코드 예입니다.

myHistory.goBack();
영향은 다음과 같습니다.
  • 새 페이지 이벤트 핸들러가 실행됩니다. 이 예에서는 핸들러 이름이 myHistoryChanged입니다.
  • 브라우저의 웹 주소가 적절하게 변경됩니다.
  • 이후의 탐색(다음과 이전)이 변경되어 새 웹 주소를 반영합니다.

다음 페이지 탐색

애플리케이션의 다음 페이지를 탐색할 수 있습니다. 다음은 코드 예입니다.

myHistory.goForward();
영향은 다음과 같습니다.
  • 새 페이지 이벤트 핸들러가 실행됩니다. 이 예에서는 핸들러 이름이 myHistoryChanged입니다.
  • 브라우저의 웹 주소가 적절하게 변경됩니다.
  • 이후의 탐색(다음과 이전)이 변경되어 새 웹 주소를 반영합니다.