65. XPages 사용자 정의 컨트롤(3) 고급 검색의 3

RecordView 컨트롤의 두 파일에 대한 전체 코드는 본문 말미에 나와 있습니다.비록 완전하지만, 이 두 파일만으로는 RecordView 컨트롤러가 정상적으로 작동하지 않습니다. 이 두 파일에서 다른 사용자 정의 컨트롤러를 인용하여managed bean으로서의 starrow를 호출했기 때문입니다.xsp.앱의 방법은 이 코드들을 모두 더해도 여전히 자족하지 않는다. 왜냐하면 starrow에 있기 때문이다.xsp.App 클래스에서 또 다른 보조 클래스의 코드를 호출했다.그래서 이 두 파일의 코드는 필자가 이전의 많은 글에서 제시한 코드처럼 직접 사용할 수 없고 RecordView 컨트롤의 전모를 보여주기 위해 참고 역할을 한다.XPages 사용자 정의 컨트롤 (3) 고급 검색 시리즈의 세 편의 글은 다시 사용할 수 있는 컨트롤을 소개하기보다는 사용자 정의 컨트롤을 실례로 해부하여 그 구조를 보여주고 그와 관련된 지식과 기술을 창설하고 사용하며 XPages로 여러 조건의 조회를 실현하는 것이다.통용되는 컨트롤러를 제공할 수 없다. 앞에서 언급한 여러 조건 조회의 인터페이스가 구체적인 수요에 따라 디자인해야 하는 것을 제외하고는 두 가지 이유가 있다.첫째, 여러분이 이미 보신 사용자 정의 컨트롤의 기능은 컨트롤 자체의 두 파일을 제외하고 다른 사용자 정의 컨트롤에 의존할 수 있습니다. 다른 디자인 요소에 저장된 서버 쪽 자바스크립트와 자바 코드에faces-config가 필요합니다.xml 프로필의managed bean 설정입니다.이러한 분산성, 게다가 사용자 정의 컨트롤러의 명칭 자체가 전역적으로 유일한 보증이 없기 때문에 본고에서 소개한 이러한 사용자 정의 컨트롤러에 대해 시스템이 자체로 가지고 있는 컨트롤러처럼 서로 다른 응용 프로그램에서 쉽게 다시 사용하기 어렵다.두 번째 이유는 XPages 기술 자체의 브라우저 간 능력과 안정성과 관련이 있기 때문입니다.필자는 8.5.3의 환경에서 63. XPages 사용자 정의 컨트롤(3) 고급 검색 중 하나에서 언급한 직원 출근 체크 시스템을 켰다. 브라우저 테스트를 할 때IE 9과Firefox에서 여러 조건 조회 인터페이스가 정상적으로 작동하는 것을 발견했지만 시작 날짜를 입력하는 두 날짜 상자는 약간의 차이를 보였다. 일기 상자와 같은 줄의 직원 이름을 입력하는 편집 상자가 수평적으로 일치하도록 하기 위해 필자는 이 두 컨트롤에 CSS 속성을 추가했다.시스템 사용자가 사용하는 IE 버전을 확보할 수 없기 때문에 필자는 IE 9이 자체로 가지고 있는 개발 도구로 IE 8, 7과 Quicks 모델을 모의하였는데 결과는 매우 실망스럽다.어떤 모드에서는 날짜 상자가 정상적으로 보이고, 어떤 모드에서는 정상적으로 작동하지 않지만, 어떤 모드에서는 둘 다 안 된다.어쩔 수 없이 필자는 브라우저가 가능한 상황에서 최신IE9모드(아래 코드의 페이지의beforeRenderResponse 이벤트에서 이 SSJS를 볼 수 있음)를 사용하도록 지시하는 기교를 사용할 수 밖에 없다. 그러면 사실상 문제를 철저히 해결하지 못한다.구성 요소 기반의 사용자 인터페이스 기술을 선택했기 때문에 컨트롤러가 브라우저를 뛰어넘을 수 있다는 것은 기본적인 요구이다. 안타깝게도 XPages는 이 점에서 잘하지 못했다. 8.5.1 버전에서 날짜 컨트롤러는 IE 8을 지원하지 않기 때문에 같은 기교를 사용하여 브라우저로 하여금 IE 7의 모델을 모의하게 해야 한다(http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Date_Time_Picker_XPages_8.5.1_and_Internet_Explorer_8).실제로 XPages Extension Library의 Dojo 날짜 컨트롤을 사용하면 이런 문제가 없을 것입니다.시간이 Lotus Domino 9에 이르렀고 상황은 또 업데이트되었다. Firefox와 IE 7, 8, 9, Quicks 모드와 최신 IE 10에서 날짜 컨트롤이 정상적으로 작동했고 IE 7과 새로운 IE 5 Quicks 모드에서 여전히 정상적으로 나타나지 않는 것을 제외하고는.이것은 실제적으로 필자가 61. 두 가지 유형의 웹 프레임워크: 요청 기반과 구성 요소 기반에서의 관점을 입증한 것이다. 구성 요소의 구조를 바탕으로 컨트롤러가 브라우저를 뛰어넘고 브라우저와 자신의 끊임없는 업그레이드에서 이 점을 유지하는 것은 매우 어렵다.RecordView.xsp:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xp_1="http://www.ibm.com/xsp/coreex">
    <xp:this.beforeRenderResponse><![CDATA[#{javascript:if (context.getUserAgent().isIE()) {
  facesContext.getExternalContext().getResponse().setHeader("X-UA-Compatible", "IE=9");
}}]]></xp:this.beforeRenderResponse>
    <xp:panel rendered="${javascript:compositeData.showSearch}">
        Staff
        <xc:InputUser id="inputUser1"></xc:InputUser>
        From
        <xp:inputText id="inpFrom" style="width:auto; top:0px;">
            <xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
            <xp:this.converter>
                <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
        </xp:inputText>
        To
        <xp:inputText id="inpTo" style="width:auto; top:0px;">
            <xp:dateTimeHelper id="dateTimeHelper2"></xp:dateTimeHelper>
            <xp:this.converter>
                <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
        </xp:inputText>
        <xp:button value="Test" id="button2" rendered="false">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:var inputUser1:com.ibm.xsp.component.UIIncludeComposite = getComponent("inputUser1");
requestScope.message=inputUser1.findComponent("Users").getValue();
}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
        <xp:button value="Search" id="btnSearch">
            <xp:eventHandler event="onclick" action="#{app.search}"
                submit="true" refreshMode="complete">
            </xp:eventHandler>
        </xp:button>

        <xp:button value="Clear" id="button1">
            <xp:eventHandler event="onclick" action="#{app.clearSearch}"
                submit="true" refreshMode="complete">
            </xp:eventHandler>
        </xp:button>
        <xp:br></xp:br>
        <xc:Message>
            <xc:this.rendered><![CDATA[${javascript:app.isLocal() || session.getEffectiveUserName()=="CN=Starrow Pan/OU=SCRO/O=CITIGROUP";}]]></xc:this.rendered>
        </xc:Message>
    </xp:panel>
    <xp:panel rendered="${javascript:compositeData.showEdit}">

        <xp:button value="Refresh" id="button5">
            <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:database.updateFTIndex(false);}]]></xp:this.action>
            </xp:eventHandler></xp:button><xp:button value="New" id="button3" rendered="true">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[window.open("record.xsp", "_blank");]]></xp:this.script>
        </xp:eventHandler></xp:button>
        <xp:button value="Delete" id="button4"><xp:eventHandler event="onclick" submit="true" refreshMode="complete">
    <xp:this.action>
        <xp:deleteSelectedDocuments view="viewPanel1"
            message="Are you sure to delete the selected records?">
        </xp:deleteSelectedDocuments>
    </xp:this.action></xp:eventHandler></xp:button>
        </xp:panel>
    <xp:viewPanel rows="20" id="viewPanel1" viewStyle="width:99%"
        pageName="/record.xsp">
        <xp:this.facets>
            <xp:pager partialRefresh="true" layout="Previous Group Next"
                xp:key="headerPager" id="pager1">
            </xp:pager>
            <xp:pager partialRefresh="true" layout="Previous Group Next"
                xp:key="footerPager" id="pager2">
            </xp:pager>
        </xp:this.facets>
        <xp:this.data>
            <xp:dominoView var="view1"
                viewName="${javascript:compositeData.notesView;}"
                search="#{javascript:compositeData.filter;}" sortOrder="descending"
                sortColumn="$8">
            </xp:dominoView>
        </xp:this.data>
        <xp:viewColumn id="viewColumn8" columnName="$8"
            showCheckbox="${javascript:compositeData.showEdit}">
            <xp:this.displayAs><![CDATA[${javascript:if (compositeData.showEdit) return "link";}]]></xp:this.displayAs>
            <xp:this.facets>
                <xp:viewColumnHeader xp:key="header"
                    id="viewColumnHeader8" value="Date">
                </xp:viewColumnHeader>
            </xp:this.facets>
            <xp:this.converter>
                <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
        </xp:viewColumn>
        <xp:viewColumn columnName="StaffName" id="viewColumn4">
            <xp:viewColumnHeader value="Staff Name"
                id="viewColumnHeader4">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:viewColumn columnName="AccessTime" id="viewColumn1">
            <xp:this.converter>
                <xp:convertDateTime type="time"></xp:convertDateTime>
            </xp:this.converter>
            <xp:viewColumnHeader value="Access Time"
                id="viewColumnHeader1">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:viewColumn id="viewColumn9" columnName="Type">
            <xp:this.facets>
                <xp:viewColumnHeader xp:key="header"
                    id="viewColumnHeader9" value="Type">
                </xp:viewColumnHeader>
            </xp:this.facets>
        </xp:viewColumn>
        <xp:viewColumn columnName="CardNo" id="viewColumn2"
            rendered="false">
            <xp:viewColumnHeader value="Card Number"
                id="viewColumnHeader2">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:viewColumn columnName="StaffNo" id="viewColumn3"
            rendered="false">
            <xp:viewColumnHeader value="Staff Number"
                id="viewColumnHeader3">
            </xp:viewColumnHeader>
        </xp:viewColumn>
        <xp:viewColumn columnName="Department" id="viewColumn5">
            <xp:viewColumnHeader value="Department"
                id="viewColumnHeader5">
            </xp:viewColumnHeader>
        </xp:viewColumn>

        <xp:viewColumn columnName="Office" id="viewColumn7">
            <xp:viewColumnHeader value="Office"
                id="viewColumnHeader7">
            </xp:viewColumnHeader>
        </xp:viewColumn>
    </xp:viewPanel>
</xp:view>

RecordView.xsp-config:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
  <faces-config-extension>
    <namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri>
    <default-prefix>xc</default-prefix>
  </faces-config-extension>
  <composite-component>
    <component-type>RecordView</component-type>
    <composite-name>RecordView</composite-name>
    <composite-file>/RecordView.xsp</composite-file>
    <composite-extension>
      <designer-extension>
        <in-palette>true</in-palette>
      </designer-extension>
    </composite-extension>
    <property>
      <property-name>filter</property-name>
      <property-class>string</property-class>
      <property-extension>
        <designer-extension>
          <default-value>${javascript:""}</default-value>
          <editor>com.ibm.std.String</editor>
        </designer-extension>
        <required>false</required>
      </property-extension>
    </property>
    <property>
      <property-name>notesView</property-name>
      <property-class>string</property-class>
      <display-name>NotesView</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.xsp.extlib.designer.tooling.editor.ViewNameEditor</editor>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>showSearch</property-name>
      <property-class>boolean</property-class>
      <display-name>Show search function</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.std.Boolean</editor>
          <default-value>true</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>showEdit</property-name>
      <property-class>boolean</property-class>
      <display-name/>
      <description>Determine whether to display the features for editing records.</description>
    </property>
    <property>
      <property-name>showLink</property-name>
      <property-class>boolean</property-class>
      <display-name>Show link</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.std.Boolean</editor>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>showCheckbox</property-name>
      <property-class>boolean</property-class>
      <display-name>Show checkbox</display-name>
    </property>
  </composite-component>
</faces-config>

faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
  <managed-bean>
    <managed-bean-name>app</managed-bean-name>
    <managed-bean-class>starrow.xsp.App
        </managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
  </managed-bean>
  <!--AUTOGEN-START-BUILDER: Automatically generated by IBM Domino Designer. Do not modify.-->
  <!--AUTOGEN-END-BUILDER: End of automatically generated section-->
</faces-config>