1.2.4. 위젯 시스템 – 아파치 OFBiz 한글판

출력이 HTML, CSV, PDF 또는 다른 것이든, 아파치 OFBiz는 실제 구현과 는 별개의 사용자 인터페이스를 만들기 위한 시스템을 제공합니다. 이렇게 하면 동일한 위젯을 HTML, PDF, CSV 또는 기타 출력 형식으로 게시할 수 있습니다.

그러나 위젯 시스템을 사용하면 필요한 경우 플랫폼별 코드로 다운다운하고 위젯 디자인과 혼합하여 사용 편의성, 플랫폼 독립성 및 사용자 정의 가능성을 혼합할 수 있습니다.

1.2.4.1. 화면 위젯

1.2.4.1.1. 장식 패턴

1.2.4.2. 양식 위젯

1.2.4.3. 메뉴 위젯

1.2.4.4. 트리 위젯

1.2.4.5. 포털 위젯

1.2.4.6. 플랫폼별 코드

<stdin>에서 해결되지 않은 지시어 – include::../../themes/docs/themes.adoc[leveloffset=+2]

1.2.4.7. Vue.Js를 사용한 SPA/FrontJs

SinglePageApplication 또는 Javascript 프레임워크로 이루어진 전면으로 이루어진 GUI

Vue.Js 프레임워크 및 Vuetify Material-Design 라이브러리로 완료

vuejs 구성 요소에는 최신 자바스크립트 프레임워크(Vue.Js, React, Angular 등)로 사용자 인터페이스를 처리하는 데 사용할 수 있는 FrontJs-Renderer (Macro-Renderer와 유사)가 포함되어 있어 하나 이상의 OFBiz용 단일 페이지 애플리케이션을 구축할 수 있습니다. 요소.

XML과 vuejs 애플리케이션으로 정의된 표준 OFBiz 위젯 시스템을 사용합니다.

이 구성요소는 현재 Work In Progress 상태이며, 응용 프로그램의 개발 프로세스 및 사용에 대해 논의하기 위해 응용 프로그램/구성 요소를 구체적으로 구축하는 것을 목표로 합니다.
일부 기술적 부채에도 불구하고 결과에 집중한다는 의미인 “민첩성” 정신으로 생산됩니다. 현재 코드에는 여전히 일부 TODO가 있으며 적어도 하나의 애플리케이션/구성 요소에서 사용되는 xml 태그 및 속성만 구현하도록 선택되었습니다.

아직 구현되지 않은 XML 태그 또는 속성은 경고 또는 오류를 생성합니다.

이 설명서는 다음을 목표로 합니다.

구성 요소의 현재 상태, 작동 방식 및 선택되거나 제거된 포인트를 설명합니다.
예를 들어 각 특정 항목을 설명하여 OFBiz 응용 프로그램을 개발하는 데 사용하는 방법을 문서화합니다.

사용자 인터페이스에 자바스크립트 프레임워크를 사용하는 두 가지 주요 목표는

“현대적인” 모양과 느낌을 갖기 위해
- 최신 GUI 라이브러리 사용
- 여러 상황에서 사용 가능(PC, 태블릿, 스마트폰)
이러한 화면이 표준 모듈을 기반으로 하는 경우에도 화면의 대화형 요소를 늘리려면:
- 작업 또는 데이터 업데이트를 통해 화면의 일부를 업데이트합니다.
- 양식 필드를 다른 필드 값의 함수로 수정합니다.
- screenlet 상호 작용에 대해 걱정할 필요 없이 더 간단한 화면 구성.

1.2.4.7.1. Vue.Js 렌더러

실제로 포틀릿 시스템을 사용할 수 있는 최초의 자바스크립트 애플리케이션인 포털 Apache OFBiz는 Vue.js 프레임워크로 작성되었습니다.

Vue.js는 쉬운 학습 곡선과 기업 대신 커뮤니티 주도 개발을 위해 선택되었습니다.
Vue.js에서는 라이브러리 vuetify가 선택되었습니다. 머티리얼 디자인을 기반으로 하고 매우 활발한 커뮤니티가 있기 때문에 가장 많이 사용되는 vue.js GUI 라이브러리인 것 같습니다.

POC Vuejs 렌더러 설치

205914a1beb 커밋 또는 그 이상( git을 사용하여 문서 표준 SourceRepository 에서 다운로드할 수 있음)이 있는 비즈니스 프레임워크의 표준 트렁크에서.
ofbiz-framework 루트 폴더에 ‘플러그인’ 저장소를 생성합니다.
Apache OFBiz 플러그인 리포지토리에서 git을 사용하여 다음 리포지토리를 다운로드합니다.
1. http://svn.apache.org/repos/asf/ofbiz/ofbiz-plugins/trunk/example 의 예제 플러그인
ofbizextra 플러그인 리포지토리에서 git을 사용하여 3개의 다음 리포지토리를 다운로드합니다.
1. https://gitlab.ofbizextra.org/ofbizextra/ofbizplugins/vuejsPortal 에서 다운로드할 수 있는 vuejsportal 플러그인 모든 vuejs 구성 요소, 새로운 ScreenViewHandler 및 4개의 새로운 렌더러(화면, 양식, 메뉴, 트리) 및 모든 fjs 구성 요소에 대한 모든 공통 파일 .
2. https://gitlab.ofbizextra.org/ofbizextra/ofbizplugins/examplefjs.git 에서 다운로드할 수 있는 examplefjs 플러그인 vue.js를 ofbiz 예제 구성 요소와 함께 사용하기 위한 특정 파일
3. flatgreyfjs 플러그인 은 https://gitlab.ofbizextra.org/ofbizextra/ofbizplugins/flatgreyfjs.git 에서 다운로드할 수 있습니다. vuetify 라이브러리가 있는 vue.js 전용 테마
ofbizextra git 저장소 다운로드 ofbizJiraPatchAvailable 프로젝트
에서 일부 파일이 있는 경우 이 POC에 일부 패치가 필요할 수 있습니다. 각 패치에 대해 JIRA로 이동하여 각각에 대한 자세한 설명을 볼 수 있습니다.
이를 적용하려면 ofbiz에 분기를 만들고 git 명령으로 패치를 적용하는 것이 좋습니다 git am patchName. 현재 다음 패치가 필요합니다.
1. OFBIZ-11645_0001-simple-methods-optional-in-compound-file.patch ⇐ 복합 위젯 파일이 POC에서 사용됨
2. OFBIZ-11676_0001-Fixed-drop-down-field-not-work-when-in-a-compound-wi.patch ⇐ 복합 위젯 파일이 POC에서 사용됨
3. OFBIZ-11708_0001-fixed-sort-order-field-not-works-in-CompoundWidgets.patch ⇐ 복합 위젯 파일이 POC에서 사용됨
ofbizCommit2add에 일부 파일이 있는 경우 일부 패치 대기 jira 생성이거나 이 POC 전용이므로 git am fileNameofbiz 루트 디렉토리에서도 적용해야 합니다(fileName을 패치 파일 이름 및 경로로 대체).
그런 다음 ofbiz-framework의 일부 파일을 수정해야 합니다(예: 일부 태그가 추가되었기 때문에 model.java).
이를 위해 (bash) 스크립트가 존재하며 ‘plugins/vuejs’에 있습니다.
./tools/applyOfbizFilesPatchs.sh
그런 다음 일부 파일을 복사합니다 .
rsync -a --exclude-from=./ofbizFiles/rsyncExcludes ./ofbizFiles/ ../../
vue.js 애플리케이션을 빌드하려면 시스템에 Node.js가 설치되어 있어야 합니다.
1. Debian 기반 시스템에 Node.js를 설치하려면 다음 명령을 실행합니다. 다른 시스템의 경우 https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based- 를 참조하십시오. 리눅스 배포판
  curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
  sudo apt-get install -y nodejs
2. 한편 통합 gradle 명령
  1. ‘plugins/vuejs/webapp/vuejs’에 위치
    - npm i⇐ 프로젝트 종속성 설치
    - npm run build-prod⇐ 프로젝트 빌드(브라우저 개발 도구를 사용할 수 있도록 build-dev를 사용할 수 있음)
이제 OFBiz를 일반으로 시작할 수 있습니다:
./gradlew cleanAll loadAll ofbiz
( ofbiz-framework의 루트에 위치 )
이제 https://localhost:8443/examplefjs/control/main 에서 애플리케이션 포털에 연결할 수 있습니다.

POC 선택

Apache OFBiz 트렁크 분기 사용.

Apache OFBiz 포털 페이지 및 Porlet 사용의 원리 및 아키텍처.

전체 사용 사례는 예제 구성 요소에 적용되며 POC 중에 공통적으로 위치해야 하는 사용된 일부 새 파일은 설치 및 업데이트 프로세스를 단순화하기 위해 examplefjs로 이동되었습니다.

examplefjs에는 추가 webapp(examplefjs) 가 있으며 vuejs 구성 요소에 허용된 URI를 중앙 집중화합니다. 현재 이 applicationName은 constantes.js 파일에 나열되어 있습니다.
vuejs 구성 요소는 구성 요소에 바인딩되지 않으며 요청을 보내기 위한 기본 URI만 필요합니다. 이 uri는 constantes.js에서 임시로 설정되지만 나중에 여러 구성 요소와 함께 vuejs를 사용하는 것을 목표로 더 유연해질 것입니다.

포털 구성 요소( https://localhost:8443/examplefjs/control/login ) 는 쿠키 메커니즘에 의한 ofbiz 표준 로그인을 사용하며, 나중에 토큰에 의한 ofbiz 로그인을 사용합니다(cf. https://issues.apache.org/jira/browse/ OFBIZ-9833 ).

포틀릿에 사용되는 화면, 폼, 메뉴 등 은 xml로 정의하고 , 전용 파일로 가독성을 높였습니다.

각 ofbiz 화면 요소 (SingleItemRow ⇒ vue.single-item-row)에 대한 구성 요소(vuejs)가 있으며, 이는 화면, 양식 및 메뉴(및 macro.ftl에 전역적으로 대응하는 html 렌더러)에 대한 렌더러에 의해 정의됩니다 . 실제로 POC의 경우 이를 나열하려면 vuejs 기존 파일 Vue*.vue에서 webapp/vuejs/src/component/ 에 대해 검색할 수 있습니다.

사용된 XML 태그

POC 중에 새로운 속성이나 XML 태그가 거의 추가되지 않았지만 기존 태그와 속성 중 일부는 Vue.Js 전용으로 왜곡되었습니다.

화면
- <container태그 컨테이너 는
  동적 화면의 주요 부분입니다(이벤트 시 화면 일부 업데이트).
  - id컨테이너를 식별하고 나중에 콘텐츠를 컨테이너에 주입할 수 있도록 하는 데 사용됩니다 set-area.
    이 id에 대해 set-area가 완료되면 해당 내용이 area-target에서 받은 내용으로 대체됩니다.
    따라서 컨테이너를 다시 보내지 마십시오!
  - watcher-name(새 속성)은 일부 데이터(매개변수)를 포함할 수 있는 로컬 저장소(웹 브라우저)의 이름입니다. set-watcher. _ 감시자 콘텐츠가 변경될 때마다 auto-update-target감시자 콘텐츠를 매개변수로 사용하여 가 호출되어 컨테이너를 업데이트합니다.
    가 호출 되면 refresh-areaauto-update-target 및 watcher 콘텐츠(존재하는 경우)를 사용하여 새로 고침이 수행됩니다.
  - auto-update-targetwatcher컨테이너 에 바인딩하는 데 사용됩니다 .
    set-watcher와 함께 사용하기 위해 새로운 속성 watcher-name이 추가되었으며 이 watcher의 내용이 변경되면 auto-update-target을 대상으로, watcher 내용을 매개 변수로 설정 영역이 수행됩니다.
    auto-update-target일부 매개변수가 포함된 REST uri 형식을 지원하고 {}를 포함하며 값은 감시자 콘텐츠의 콘텐츠로 채워집니다. URI에 하나 이상의 {xxx}가 포함되어 있거나 매개변수가 없는 경우 GET 메서드가 사용되며 그렇지 않으면 POST가 사용됩니다.
- 스크린릿
  - 축소 가능, 축소 가능 = “true”인 경우 버튼을 클릭할 때 무엇이 축소되는지 알기 위해 “고유” ID가 있어야 합니다. 동일한 ID 또는 각각 다른 ID를 가진 여러 screenlet을 가질 수 있습니다.
    따라서 if collapsible =”true” 를 제공하는 것이 중요합니다 id. 그렇지 않으면 축소는 id 없이 모든 screenlet을 축소합니다!
  - id : screenlet이 축소되어야 하는 경우 필수입니다.
- in platform-specific– html새 태그 태그
  - vuejs라는 특정 vuejs 구성 요소를 호출하는 것 component-name입니다.
    하위 태그를 사용하여 일부 매개변수를 제공할 수 있습니다.parameters
형태
- 속성 entity-name은 그리드 또는 단일 양식에 필수이며 vuejs는 엔티티 저장소를 빌드하는 데 사용합니다. 엔터티 이름, 화면에 인쇄되는 기존 데이터가 웹 브라우저 로컬 저장소와 연결되면 한 스크린렛에서 데이터가 변경되면 다른 스크린렛의 동일한 데이터도 변경됩니다.
- 태그 에 <on-event-update-area(많을 수 있으며 xml 모양 순서로 실행됩니다. 다음 작업을 시작하기 전에 현재 작업이 완료되기를 기다립니다. 이러한 이벤트 중 하나라도 설정되면 제출 버튼은 양식 기본 동작을 방지합니다. 따라서 vuejs 기능 외에 게시해야 하는 경우 이벤트 유형을 추가해야 합니다. submit)
  - event-type
    양식 제출 중 실행할 작업을 정의합니다(제출 버튼 클릭). 다음 값 중 하나를 사용할 수 있습니다.
    - submitarea-target제공된 parameter요소 와 함께 양식을 제출합니다 . set-areano parameter 가 정의된 경우 처럼 전체 형식을 사용합니다. 오류 및 성공 메시지가 표시됩니다.
      양식 target은 일부 매개변수가 포함된 REST uri 형식을 {}와 함께 지원하며 값은 양식의 콘텐츠로 채워집니다. 제출 시 필드입니다.
      사용된 http 방법은 POST이지만 ofbiz 컨트롤러에서 수신한 방법을 선택하기 위해 _method 필드를 추가할 수 있습니다(예: 업데이트를 위한 PUT).
    - set-area요소 가 포함된 areaIdURI의 게시 결과로 id가 있는 영역을 업데이트합니다 . URI에 하나 이상의 {xxx}가 포함되어 있거나 매개변수가 없는 경우 GET 메서드가 사용되며 그렇지 않으면 POST가 사용됩니다.area-targetparameter
    - refresh-areaset-area와 유사하지만 사용되는 대상 auto-update-target은 컨테이너 수준에서 정의되며 감시자 이름이 이 컨테이너에 대해 정의된 경우 해당 콘텐츠가 매개변수로 사용됩니다(대상에서 {}를 해결하기 위해 또는 {}가 없는 경우 매개변수로 사용됨). 대상에서.
    - set-watcherareaId포함된 감시자를 업데이트 parameter합니다. 매개변수가 전달되지 않은 경우 set-watcher 모든 양식 필드를 사용하여 감시자 콘텐츠를 업데이트합니다.
    - refresh-watcher감시자 이름을 감시하는 모든 컨테이너는 감시자 콘텐츠가 변경될 때 업데이트되며 새로 고침 감시자 업데이트는 감시자 콘텐츠를 변경하지 않고 수행됩니다.
    - collapse축소/확장 screenlet에서 작업을 수행합니다.
      area-target해야 할 작업입니다: 축소 또는 확장 또는 토글 ; 변경하는 것입니다
      area-id.screenlet name
    - close-modal현재 모달을 닫습니다. 현재 모달 area-id이 조회를 위해 열려 있을 때 필요합니다. areaId는 {formName}_{fieldName}입니다. area-target은 사용되지 않으므로 비워 둘 수 있습니다.
- in <on-field-event-update-areatag (많을 수 있으며 xml apparition 순서로 실행됩니다. 다음 작업을 시작하기 전에 현재 작업이 완료되기를 기다립니다.)
  - event-type
    연결된 하이퍼링크(
  - post태그에 포함된 요소 area-target와 함께 URI에 게시됩니다 . parameter매개변수가 없으면 전체 양식을 사용합니다. 오류 및 성공 메시지가 표시됩니다.

parameters태그 에

auto-parameters-portlet필요한 포틀릿 매개변수를 자동으로 채울 수 있습니다.
- portalPageId
- portalPortletId
- portletSeqId
- currentAreaId

<hyperlink태그 에

link-type="anchor"를 통해 FrontJs에 대한 내부 호출을 수행하는 set-area데 target-window사용되며 업데이트를 위한 ID로 사용 target되며 영역 대상, 매개변수로 매개변수로 사용됩니다.
target-window업데이트해야 하는 watcherName을 설계하는 데 사용됩니다.
url-mode사용할 http 메서드를 제공할 수 있도록 세 가지 새로운 모드가 추가되었습니다. POST는 기본값입니다.
- intra-post : set-area에 대해 http POST 요청을 수행하여 여러 매개변수 전송
- intra-put : PUT 메소드로 http 요청 수행
- intra-delete : DELETE 메서드로 http 요청 수행

메뉴

<link태그 에
- link-type="set-area"를 통해 FrontJs에 대한 내부 호출을 수행하는 데 사용되며 set-area, target-window업데이트할 ID로 사용 target되며 영역 대상으로 사용되며 http get이므로 매개변수가 대상에 있어야 하며 대상에 일부 {xxx}가 있으면 올바른 값으로 대체됩니다. 매개변수에 필드 목록이 있습니다.
- link-type="auto"(기본값) url-mode="intra-app"target-url을 호출하여 새 페이지를 인쇄합니다(내부 라우팅 사용).
- link-type="layered-modal"모달 창을 열고 설정 영역을 수행하는 데 사용됩니다.
- url-mode사용할 http 메서드를 제공할 수 있도록 세 가지 새로운 모드가 추가되었습니다. POST가 기본값입니다(세트 영역 제외).
  - intra-post : set-area에 대해 http POST 요청을 수행하여 여러 매개변수 전송
  - intra-put : PUT 메소드로 http 요청 수행
  - intra-delete : DELETE 메서드로 http 요청 수행

데코레이터, 조회

현재 vuejs 앱은 응용 프로그램 메뉴(vuejsApp cf 특정 URI 에 의해 직접 관리됨) 없이 클래식 mainDecorator에 포함된 ftl에서 호출됩니다 .

현재 vuetify lib와의 “충돌”을 피하기 위해 대부분의 css를 제거할 수 있도록 특정 테마가 생성되었습니다. 이 테마는 애플리케이션의 기본 데코레이터에서 강제 적용됩니다.

조회

LookupDecoratorVueJ에 대한 특정 항목이지만 사용법은 표준 항목과 동일합니다. 그것은 2개의 주요 특이성을 포함합니다
- 자동 완성 반환을 위해 모든 데이터는 viewData에 있습니다.
- for search – 결과, lookup receive parameters.lookupResult = “Y” 영역에 삽입되도록 결과 형식만 전송됨 lookup-results
LookupForm - find:
- 숨겨진 필드를 추가해야 합니다. <field name="lookupResult"><hidden value="Y"/></field>
- 2개의 on-event-update-are를 추가해야 합니다.
  첫 번째는 영역 조회 결과에 결과를 보내고 두 번째는 접기 위한 것입니다. 스크린렛 찾기(접기를 원하는 경우) <on-event-update-area event-type="set-area" area-id="lookup-results" area-target="LookupExample"/> <on-event-update-area event-type="collapse" area-id="LookupFindScreenlet" area-target="collapse"/>
LookupForm - list:
- 링크 반환 필드의 경우 2개의 on-field-event-update-area를
  먼저 추가하여 올바른 값으로 조회를 호출하는 필드를 설정하고
  두 번째는 모달을 닫아야 합니다. <on-field-event-update-area event-type="set-field-in-form" area-id="SelectExample" area-target="exampleId" /> <on-field-event-update-area event-type="close-modal" area-id="SelectExample_exampleId" area-target="" />
FindScreenDecorator, VueJ의 특정 항목이지만 사용법은 표준 항목과 동일합니다. 그 특이성은 ListResult 업데이트에 관한 것입니다. 찾기 양식에서 일부 수정을 수행해야 합니다.
- 숨겨진 필드 onlyList 추가 <field name="onlyList"><hidden value="Y"/></field>
- 목록 결과 영역을 업데이트하기 위해 on-event-update-area 추가 <on-event-update-area area-target="findExample" event-type="set-area" area-id="search-results"/>
- 찾기 screenlet을 축소하기 위해 on-event-update-area 추가(선택 사항) <on-event-update-area event-type="collapse" area-id="findScreenlet" area-target="collapse"/>

FrontJs 렌더러

새로운 viewHandler 와 새로운 렌더러 세트 가 생성되었습니다.
모든 새 렌더러를 포함하는 frontJs라는 이름의 새 패키지가 org.apache.ofbiz.widget.renderer에 생성되었습니다.

이 패키지에는 원하는 형식으로 필요한 요소를 구성할 수 있는 새로운 FrontJsOutput 클래스가 있습니다. 이 클래스의 개체는 viewHandler 프로세스가 시작될 때 인스턴스화되고 렌더링된 개체 호출에 의해 완료됩니다.

컴포넌트 examplefjs의 Uri showPortletFj 는 새 viewHandler를 사용하여 화면 렌더링 결과인 showPortlet을 반환합니다.

이 URI는 디스플레이 정보 수집을 위해 Vue.Js 애플리케이션에서 사용됩니다.
새로운 viewHandle은 2개의 지도( viewScreen 및 viewEntities )를 포함하는 json을 반환합니다.
viewScreen은 디스플레이에 대한 모든 정보를 포함합니다. viewEntities는 데이터 세트에 대한 모든 정보를 포함합니다.

향후 개정에서는 데이터 맵만 수신하는 것이 가능할 것입니다.

특정 URI

VueJs 애플리케이션의 시작점인 vuejs(CommonScreen)에 showPortal URI가 있습니다 .

showPortlet 화면은 우리가 원하는 작업만 수행하도록 단순화 목적으로 이 POC에서 재정의됩니다.

applicationMenu 는 애플리케이션 xml 메뉴의 데이터(ViewScreen 및 ViewData)를 FrontJsScreenViewHandler와 함께 반환하는 새로운 URI입니다.
각 fjs 구성 요소에서 올바른 메뉴만 있는 screen.xml을 가리키는 뷰 맵 항목 applicationMenu를 정의해야 합니다.

REST URI

OFBiz 애플리케이션의 경우 URI 구조는 {resourceName}/{cover}/{Pkvalue: .*}입니다.

따라서 예제 리소스의 경우 다음과 같이 변환됩니다.

URI	방법	목표
예/찾기	가져 오기	목록에 대한 옵션을 선택하는 양식 찾기
예/목록	(우편을 통해) 받기	예제 목록, ⇒ 모든 예제 가져오기(매개변수 없음) 포함 ⇒ 옵션으로 선택한 게시물(매개변수 및 _method=”GET”) 예제 포함
예/만들기	가져 오기	양식 만들기
예시/편집/{exampleId}	가져 오기	전송된 ID에 대한 양식 및 데이터 편집
예시/표시/{exampleId}	가져 오기	전송된 ID에 대한 양식 및 데이터 표시
예시/요약/{exampleId}	가져 오기	전송 된 ID에 대한 요약 양식 및 데이터
예시/데이터/{exampleId}	가져 오기	전송 된 ID에 대한 데이터 만
예/변경	게시하다	예를 만들다
예시/변경/{exampleId}	넣어 (우편을 통해)	exampleId로 예제 업데이트
예시/변경/{exampleId}	삭제	exampleId로 예제 삭제

이 모든 작업([커버])은 screenlet(페이지의 일부)에 대한 것입니다. 커버가 페이지에 대한 것이라면 그 이름의 접미사는 Pg입니다.

팁	POST 메소드 이외의 HTTP 요청은 URI 이외의 매개변수를 가질 수 없으므로 매개변수로 GET 또는 PUT을 수행할 수 있도록 해결 방법은 `<field name="_method"><hidden value="GET">`양식에 추가된(또는 “PUT”) POST를 사용하는 것입니다. 매개변수의).

주의	TOMCAT httpServlet.java는 PATCH 방식을 관리하지 않으므로 사용할 수 없습니다.

추가된 필드

PortalPagePortlet 엔터티에 새 필드가 추가되었습니다 . 포틀릿 업데이트를 실행하는 감시자의 이름인 watcherName 입니다.

ftl

ftl 파일은 Vue.js 앱과 혼합될 수 있으므로 ftl 마이그레이션을 통해 전용 구성 요소를 생성해야 합니다. 포인트 – – 에 사용된 XML 태그 를 살펴보십시오 .platform-specifichtmlvuejs

POC 현재 상황

현재 VueJs POC는 PortalPage만 관리할 수 있지만 다른 모든 화면 유형을 관리하는 것은 간단합니다.

여기서 목표는 다양한 사용 사례 포털 페이지가 작동하도록 만드는 것입니다.
메뉴에는 다른 페이지가 있으며 실제로 포털 페이지 이름의 이름은 MgmtPageFrontJs 및 RecapPageFrontJs입니다.
첫 번째 페이지는 예제를 찾고 편집하는 것을 목표로 합니다. 두 번째 페이지는 주어진 예제의 모든 속성을 표시하는 것을 목표로 합니다.

이러한 페이지에 있는 각 포틀릿에 대해 showPortletFj로 초기화되는 포틀릿 이름으로 Vue.js에서 포틀릿 구성 요소가 생성됩니다.

ShowPortletFj는 렌더링해야 하는 구성 요소(viewScreen) 및 작업해야 하는 데이터 세트(viewEntities)에 대한 모든 정보를 구성 요소에 제공합니다. 실제로 ShowPortletFj는 JSON으로 응답합니다.

ViewScreen 및 ViewEntities

실제로 FrontJsViewHandler는 업데이트가 필요한 구성 요소에 모든 정보를 보냅니다. 클라이언트 측 로직에서 ViewScreen은 처음에만 전송되는 반면 포틀릿 호출 정보는 작동하는 데이터 세트를 업데이트하는 ViewEntity에만 관심을 갖습니다.

실제로 “사용 시기”는 그들이 속한 수준(화면, 양식, 필드, 메뉴)에 관계없이 모델 모델 관리의 ofbiz에서 처리하므로 렌더러에서 이 정보를 얻을 수 없습니다. 나중에 우리는 렌더러에 모든 화면 요소를 전송해야 했고 프런트엔드에서 관리하기 위해 “사용 시기”가 있는 경우 이를 전송해야 했습니다. 이렇게 하면 다음 호출에서 “use-when” 올바른 값을 전송하여 최종 화면을 적절하게 업데이트할 수 있습니다.

POC의 남은 할 일

이 목록에는 사용 사례 프로세스에서 이미 충족된 포인트만 포함됩니다.

대부분의 경우 각각의 새로운 사용 사례(또는 포틀릿)는 새로운 작업을 제공합니다(예: 아직 충족되지 않은 새 필드 유형 또는 아직 처리되지 않은 필드 속성).

미성년자

찾기 양식에서 “제목” 열을 제거하기 위해 필드에 제목을 포함하도록 필드 찾기를 검토하고 변경합니다.
showPortalPage에서 ConfMod를 관리하여 포틀릿 매개변수 페이지를 표시(및 관리)합니다.
로그인 화면에서 번역을 할 수 있도록 로그인 화면에 레이블을 보내는 URI를 수행하십시오.
VueJs 애플리케이션에 머리글과 바닥글을 포함하여 VueJs에서 전체 페이지를 관리하고 완전한 Vue.Js 모양을 갖습니다.
systemInfoNote와 같은 Common 및 Commonext 부분을 모두 포함합니다.

불가항력

VuejsRouter를 사용하여 모든 screenType을 관리할 수 있습니다.
showPortletFj*는 SecurityServiceName 및 SecurityMainAction 필드에 대한 보안 을 확인해야 합니다.

PortletWidget 마이그레이션

모든 portletwidget 마이그레이션에 대한 문서 시작

{component}PortletScreen에서 화면 생성/복사 및
portletTypeId
구성 요소, 하위 구성 요소, useScreen
1. screenName 및 screenLocation 추가
useScript, useMenu
양식 복사(및 필요한 경우 화면 업데이트)
portletUiLabelDecorator로 화면 업데이트
메뉴에 필요한 경우 screenlet 및 컨테이너로 화면 업데이트(setArea의 ID)
필요한 경우 스크립트로 화면 업데이트
필요한 경우 메뉴가 있는 업데이트 화면
uri 편집 및 작업을 위해 컨트롤러에서 복사
메뉴에서 교체 <show-portlet portlet-id="${portalPortletId}" target="EditPersonPt" area-id="${subAreaDivId}" image-location="${iconsPurpose.Edit}" image-title="${uiLabelMap.IconsTooltips_Edit}"> <parameter param-name="partyId" from-field="parameters.partyId"/> </show-portlet>~와 함께 <link text="Edit" target="editperson" link-type="anchor" target-window="viewPartyInfo">  <parameter param-name="partyId" from-field="parameters.partyId"/> <parameter param-name="DONE_PAGE" from-field="DONE_PAGE"/> <auto-parameters-portlet/>     <image src="${iconsPurpose.Edit}" title="${uiLabelMap.IconsTooltips_Edit}"/> </link>

POC의 사용 사례

운영

두 포털 페이지 ExampleMgmt 및 ExampleRecap에 의한 모든 예제 관리.
찾기에서 하위 목록은 아직 관리되지 않습니다.

다음 단계

파티 구성 요소는 대부분의 기능과 함께 다음 단계입니다.

Vue.js

Vue.js 일반

할 것

구성품

Vue.Js 구성 요소는 단일 ‘.vue’ 파일에 다시 그룹화되는 3개의 개별 블록(템플릿, 스크립트, 스타일)으로 정의됩니다.

템플릿 :
- 템플릿은 단일 루트 요소(div, span, table, ect…)에 포함되어야 합니다.
- 템플릿에서 이중 중괄호 {{}} 를 사용하여 계산된 속성 및 함수에 액세스할 수 있습니다.
- 일반 텍스트 대신 스크립트 속성 및 js 코드를 사용하려면 클래식 html 속성 앞에 ‘:’을 붙일 수 있습니다.
- Vue.Js는 스크립트 컨텍스트에 바인딩되고 ‘:’ 앞에 오는 고전적인 속성처럼 작동하는 몇 가지 지시문(v-for, v-if v-on:click, ect… )을 제공하므로 스크립트 부분에 바인딩할 수 있습니다. js를 해석합니다.
스크립트
- export default {}스크립트 섹션은 전체 스크립트 요소를 포함하는 로 래핑됩니다 . 팁: 이 내보내기 전에 가져오기를 수행해야 합니다.
- 이 내보내기는 Vue.Js(data, computed, methods, props, created, ect…)에서 사용하는 미리 정의된 키를 포함할 수 있는 맵입니다.
  - data()는 구성 요소 컨텍스트에 사용되는 변수를 포함하는 함수입니다.
    data()에 포함된 모든 변수는 반응적입니다. 즉, Vue.Js는 변수에 대한 모든 변경 사항을 추적하고 렌더링을 재평가하는 데 사용되는 모든 곳에서 이러한 변경 사항을 반영합니다.
  - computed는 반응 데이터를 기반으로 한 평가를 포함하는 맵입니다.
    구성 요소의 반응 변수처럼 사용할 수 있으며 항목 중 하나가 변경되면 자체적으로 재평가됩니다.
  - methods는 도우미 함수(handleClick, doPost, ect… )를 포함하는 맵입니다.
    경고: 이 함수는 반응하는 것을 목표로 하지 않습니다.
  - props는 부모에서 구성 요소로 데이터를 전달하기 위해 구성 요소에 속성을 부여하는 문자열 배열입니다.
  - 이 섹션에는 구성 요소 수명 주기(created(), mount(), beforeUpdate() 등)의 후크 도 포함될 수 있습니다 .
    이 코드 블록은 후크가 실행될 때 실행됩니다.
    아래 참조:
Style
이 부분은 컴포넌트의 내부 css 전용입니다.
이 부분의 스타일은 프로젝트의 다른 스타일보다 먼저 적용됩니다.

뷰엑스

Vuex는 애플리케이션의 중앙 집중식 상태 시스템입니다. 응용 프로그램의 모든 구성 요소에서 액세스/수정할 수 있는 데이터를 포함하는 ‘저장소’를 만들 수 있습니다.

상점은 4가지 요소로 구성됩니다.

State
상태는 저장된 모든 정보를 포함하는 지도입니다.
상태는 에 의해서만 수정할 수 있습니다 mutation. 기본 상태의 데이터는 반응적입니다.
데이터가 생성된 상태에서 추가되어야 Vue.set()하는 경우 반응형이 되도록 메서드를 추가해야 합니다.
Mutations
Mutations는 상태를 변경할 수 있는 기능을 포함하는 맵입니다. 관례적으로 돌연변이의 키는 대문자여야 합니다. 변형은 코드를 통해 액세스할 수 없으며 작업으로 호출해야 합니다. 돌연변이는 동기적이어야 합니다.
Actions
돌연변이는 먼저 돌연변이 발사를 목표로 합니다.
작업은 비동기식일 수 있으며 이 경우 약속이 반환됩니다.
Getters
게터는 상태 데이터에 액세스할 수 있습니다.
게터는 반응형입니다.
Getter는 반응 변수 대신 함수를 반환하는 경우 매개 변수를 사용할 수 있습니다.

저장소는 index.js 파일에 설명될 수 있는 모듈로 분할될 수 있으므로 저장소는 모듈 저장소에 저장될 수 있습니다.

반동

할 것

1.2.4.7.2. 모듈식 및 일반 UI

개방형 모듈식 ERP를 목표로 하는 경우 사용자 인터페이스 구성을 통해 다양한 비즈니스 컨텍스트 에서 동일한 비즈니스 객체 유형 을 관리하기 위해 화면 “모듈” 세트에서 여러 화면을 관리할 수 있어야 합니다 .

다음 장에서는 이러한 모듈화 요구에 대응하기 위한 사용자 인터페이스 관리 시스템의 POC에 대해 설명합니다.

POC-UI 사용 사례

이러한 사용 사례는 새로운 UI POC, 관련 문서 및 셀레늄 단위 작업 테스트에 사용됩니다.

이러한 모든 사용 사례는 기존 엔터티 및 서비스로 수행되어야 합니다. 하나를 개발하고 사용 사례를 단순화해야 하는 경우 목표는 서비스 또는 엔터티가 아닌 UI입니다.

이러한 사용 사례 설명은 민첩한 철학으로 이루어지며 주요 사항만 제시되며 실현 세부 사항 선택이 논의되고 수행됩니다.

사전 설명:

이 문서에서 “응용 프로그램”이라는 용어는 ofbiz 용어의 “응용 프로그램/트렁크 구성 요소”와 동일하지 않은 ofbiz 용어의 “플러그인 구성 요소”에 해당합니다. 응용 프로그램은 사용자 유형의 비즈니스 목적 전용이며, 때로는 특정 엔터티, 서비스 및 화면 없이 ofbiz 구성 요소를 조립하여 구축됩니다(예: CRM-B2C, CRM-B2B, SFA는 영업 사원이 사용하는 3가지 응용 프로그램입니다. )
각 사용 사례는 “응용 프로그램”에 있으며 이 응용 프로그램 메뉴 중 하나의 일부입니다.물론 이 문서는 사용 사례에 필요한 메뉴 옵션만 설명합니다. 테마/템플릿에 따라 달라지기 때문에 “웹 페이지”에 대한 명확한 정의를 내리기가 어렵기 때문에 사용 사례는 두 가지 수준입니다.
1. 잘 정의할 수 있는 화면
2. 기본 테마에 따라 달라지는 페이지
물론 일부 사용 사례(화면 또는 페이지)는 이전 사례에서 수행됩니다(예: 때때로 추가와 동일한 화면에서 편집이 수행됨). 재사용 가능한 중요한 포인트 중 하나입니다 (UI, Doc 및 Selenium).
선(또는 점)이 “?”로 시작할 때마다 문제는 “이 포인트가 필요한가?”입니다.

릴리스 및 목표

목표는 여러 슈퍼 애플리케이션을 수행하는 것이 아니라 POC 실현입니다. POC 실현은 토론과 결정을 생성해야 하며, 매번 사용 사례 비즈니스 타당성이 아닌 UI, Doc 또는 Selenium에 대해 주로 논의하도록 주의해야 합니다. 사용 사례는 현실적이어야 하지만 주로 특정 UI, Doc 또는 Selenium이 필요합니다.

V1

주요 목표는 기술 포인트를 증명하는 것 입니다. 물론 UI 재구성이 이 단계의 원동력입니다. 문서가 병렬로 작동하기 시작하지만 도움을 받기 위해 통합을 테스트하기 위해 첫 번째 실현을 기다립니다. Selenium 단위 작업의 경우 기본 테마로 새 UI를 간단하게 사용하는 것입니다. 유일한 목적은 기본 테마로 테스트가 간단한지 확인하는 것입니다.

따라서 모든 사례가 완료되지 않더라도 신경쓰지 마십시오. 목록은 처리 방법을 알아야 하는 다른 고전 사례를 제공하기 위해 존재합니다. 다른 사례와 중복되는 것처럼 보이는 일부 사례는 개념이 이해되고 있는지 확인하고 도움을 주고자 하는 초보자에게 사용할 수 있습니다.

V1 구현 중에 UseCase 목록이 업데이트됩니다.

V2

주요 목표는 솔루션이 다양한 유형의 기여자에게 유용한 지 확인하는 것입니다.

실험 개발자
초보 개발자
매개 변수에 대한 기능 컨설턴트
개인화를 위한 기능 컨설턴트
? 최종 사용자 – 매개변수용 ? (새로운 아키텍처에서도 여전히 가능한 경우)

사용 사례 목록은 배포 계획으로 사용됩니다. 이 목록에는 V1에서 구현된 것과 유사한 사례가 포함되어 있으므로 V2에서 모든 유형의 기여자가 달성할 수 있습니다.

문서화 목표

Apache OFBiz 사용자 설명서(asscidoc)
Apache OFBiz 웹 사이트 위키
OFBiz 도움말

셀레늄 테스트

각 사용 사례 및 시나리오에 대한 데모 데이터
각 페이지(또는 페이지 그룹)에 대한 셀레늄 시나리오 테스트
각 화면에 대한 셀레늄 단위 테스트

간단한 파티 관리

어떤 하위 애플리케이션

인사 신청, 간단한 직원 관리
CRM B2C 어플리케이션에서 간단한 고객(개인) 관리
전자 상거래에서 간단한 프로필 페이지
인사업무에서 간단한 조직/장소(그룹) 관리
CRM B2B 어플리케이션에서 간단한 고객(기업) 관리
in Facility 적용, 간편한 작업자 관리

어떤 파티 하위 구성 요소

파티 – 사람 – PartyGroup
기계에 문의하십시오,
- 우편 주소, 전화 및 우편;
- 한 두 가지 수정 목적(예: 전화 수정 번호 및 휴대폰 번호)
역할
파티 식별
정당 연합
모든 보안 엔터티를 사용해야 하고 이 POC에 대해 너무 큰 도메인을 생성하므로 UserLogin 이 아닙니다 .

어떤 화면

파티
- 찾기, 나열
- 사람
  - 추가 / 수정, 표시
- 그룹
  - 추가 / 수정, 표시
- 회사
  - 추가 / 수정, 표시
- 종합 보기 표시(당사자/사람/회사, 연락처 정보, 역할, ID)
  - 사람
  - 회사
  - 파티 그룹
연락처 정보
- 모든 연락처 정보(한 당사자/시설용)
  - 목적이 있는 것과 없는 것
  - 역사가 있는 것과 없는 것
  - 비활성화
- 우편 주소 추가/수정
- 메일 추가/수정
- 전화 추가/수정
역할
- 파티 목록
- 역할 추가(상위 RoleType의 경우)
- 두 단계로 역할을 추가합니다.
상위 RoleType 선택
역할을 선택
- 역할을 제거하다
파티 식별
- 나열, 추가, 제거

인사 직원 관리

HR Component에서 사람에 대한 보다 완전한 형태로 사람 관리를 시작합니다.

직원 관리 메뉴 옵션
- 찾기, 나열, 표시, 추가, 편집 및 관리
  - 연락처 정보
  - 식별(idType 3개, 필수 1개, 선택 2개)
우리가 어떤 직원인지 보여주는 헤더(또는 사이드바 또는 … )가 있는 템플릿 페이지

사용 사례 화면 :

사람 찾기
- 단순 양식(파티 또는 개인에만 해당)
- 추가 버튼 포함(매개변수 또는 인증에 따라 표시되거나 표시되지 않을 수 있음)
추가 버튼이 있는 개인 목록(매개변수 또는 승인에 따라 표시되거나 표시되지 않을 수 있음)
사람 추가
사람을 보여
두 가지 옵션이 있는 하위 메뉴가 있는 사람 표시: 연락처 정보 및 ID
사람 편집
추가 버튼이 있는 사람의 모든 연락처 정보 목록(매개변수 또는 권한에 따라 표시 여부에 따라 다름)
우편 주소 추가
메일 추가
전화번호 추가(목적 관리 없이 단계별로 진행하려면 다음 Use Case 그룹에서 진행)
우편 주소 수정
메일 수정
전화번호 수정
추가 버튼이 있는 사람의 모든 식별 번호 목록(매개 변수 또는 권한에 따라 표시되거나 표시되지 않을 수 있음)
식별 유형 선택과 함께 식별 번호 추가
식별 유형을 선택하여 식별 번호 편집
수정 식별 유형으로 식별 번호 추가
수정 식별 유형으로 식별 번호 편집

사용 사례 페이지:

사람을 만들다
사람을 검색
사람을 시각화하다
사람에 대한 정보를 관리하다
머리글(또는 사이드바 또는 … )이 있는 템플릿 페이지로 우리가 어떤 직원인지 표시(예: 그의 모든 지식, 기술, 위치 또는 … )
한 페이지에서 사람에 대한 정보를 관리하고 필드로 직접 이 페이지에 액세스할 수 있습니다(ID, 이름, 성에 대한 자동 완성).

CRM B2C, 고객관리

CRM B2C 애플리케이션에서 고객(즉, 이 컨텍스트에서는 사람) 관리.
이전 사용 사례 그룹과의 차이점은 다음과 같습니다.

개인 양식은 HR보다 더 간단합니다.
역할은 고객 위치를 특성화하는 데 사용됩니다(용의자, 잠재 고객, with_Quote, 고객).

직원 관리 메뉴 옵션

찾기(역할 필드 포함), 나열, 표시, 추가, 편집 및 관리
- 연락처 정보
- 식별(3idTypes, 필수 항목 1개, 선택 항목 2개)
우리가 어떤 고객인지 보여주는 헤더(또는 사이드바 또는 … )가 있는 템플릿 페이지

사용 사례 화면 :

추가 버튼이 있는 사람 찾기(매개변수 또는 인증에 따라 표시되거나 표시되지 않을 수 있음)
- HR 찾기 사람과 동일한 검색 필드
- 나타날 수 있는 역할 필드, 없을 때 고정 값을 매개 변수로 넣었습니다.
- 연락처 정보 필드, 전화, 우편, 마을. 이러한 필드는 “배포” 버튼을 사용하여 사용자가 표시하거나 표시하지 않을 수 있습니다.
추가 버튼이 있는 개인 목록(매개변수 또는 승인에 따라 표시되거나 표시되지 않을 수 있음)
- 역할 필드가 나타나거나 나타나지 않을 때 고정 값이 매개 변수로 지정되어 이 역할을 가진 사람만 나타납니다.
양식에 사람, 모든 주요 정보 추가
- 역할
- HR 형식보다 사람에 대한 필드가 적습니다.
- 우편 주소 1개
- 전화번호 2개
- 1 식별 번호
표시되는 데이터가 더 많은 경우 연락처 정보 및 식별 표시기와 함께 사람, 모든 주요 정보를 화면에 표시합니다.
옵션이 있는 하위 메뉴가 있는 사람 표시:
- 연락처 정보
- 신분증
- 역할 기록
- 역할 변경 : 다이렉트 액션 버튼
사람 편집, “사람” 필드만
역할을 변경하기 위한 버튼 막대(예: 용의자의 경우 3가지 옵션이 있음), 이 사용 사례는 작업 표시줄을 갖는 것입니다. 이 비즈니스 프로세스 사례에서는 필요하지 않을 수 있지만 주문이나 작업과 같은 더 복잡한 개체에 사용됩니다. , 그것은 고전적인 필요입니다.
하나 또는 여러 개의 추가 버튼(매개 변수 또는 권한에 따라 표시되거나 표시되지 않을 수 있음) 및 목적이 있는 개인의 모든 연락처 정보 목록은 목적 관리가 있는 두 번째 단계인 표시입니다.
우편 주소(또는 목적만) 추가
메일 추가
전화번호 추가
우편 주소 수정
메일 수정
전화번호 수정
추가 버튼이 있는 사람의 모든 식별 번호 목록(매개 변수 또는 권한에 따라 표시되거나 표시되지 않을 수 있음)
식별 유형 선택과 함께 식별 번호 추가
식별 유형을 선택하여 식별 번호 편집

사용 사례 페이지

CRM에서 새 항목 생성(생성 중 역할 선택)
“고객”(또는 용의자, 잠재 고객, … ) 검색
“고객”을 시각화
“고객”에 대한 정보 관리
우리가 어떤 “고객”인지 표시하는 헤더(또는 사이드바 또는 … )가 있는 템플릿 페이지(예: 그의 모든 견적 또는 주문 또는 … )
한 페이지에서 사람에 대한 정보를 관리하고 필드로 직접 이 페이지에 액세스할 수 있습니다(ID, 이름, 성에 대한 자동 완성).

전자상거래, 프로필 페이지

간단한 프로필 페이지.
이전 사용 사례와의 차이점은 주로 사용 사례 페이지에 있습니다. 왜냐하면 전자 상거래 테마는 더 독창적일 수 있고 공용 사용자 인터페이스는 대부분 더 단순해야 하기 때문입니다.

사용 사례 화면 :

표시되는 데이터가 더 많을 때 연락처 정보 및 식별 표시와 함께 화면에 사람, 모든 주요 정보를 표시합니다.
다음과 같은 옵션이 있는 Person with 하위 메뉴를 표시합니다.
- 연락처 정보
- 신분증
사람 편집, “사람” 필드만
추가 버튼과 목적이 있는 사람의 모든 연락처 정보 목록은 표시되며 목적은 송장 또는 배송에 필요합니다.
우편 주소(또는 목적만) 추가
메일 추가
전화번호 추가
우편 주소 수정
메일 수정
전화번호 수정

사용 사례 페이지:

편집 버튼으로 프로필(사람) 시각화
연락처 정보 관리
신분증 관리
긴 페이지로 볼 수 있는 한 페이지의 모든 것.

인사조직관리

HR 컴포넌트에서 간단한 조직/장소(그룹) 관리.
이제 PartyGroup 관리(매우 간단)하지만 계층을 관리하기 위한 복잡한 화면이 있습니다. 이 사용 사례 그룹에서는 서비스나 부서 또는 자회사에 대해 “그룹”이라는 단어를 사용합니다.

회사 조직을 관리하는 메뉴 옵션
- 그룹 관리
- 그룹의 관련 직원
- 그룹 계층 관리

사용 사례 화면 :

그룹 찾기(특정 partyType 포함)
- 단순 양식(party 또는 partyGroup에만 해당)
- 추가 버튼 포함(매개변수 또는 인증에 따라 표시되거나 표시되지 않을 수 있음)
추가 버튼이 있는 PartyGroup 목록(매개 변수 또는 인증에 따라 표시되거나 표시되지 않을 수 있음)
그룹 추가
두 가지 옵션이 있는 하위 메뉴가 있는 화면에 사람, 모든 정보 표시: 연락처 정보 및 ID
그룹 편집
추가 버튼(매개변수 또는 권한에 따라 표시되거나 표시되지 않을 수 있음)을 사용하여 그룹의 모든 연락처 정보를 나열합니다.
우편 주소 추가
전화번호 추가
우편 주소 수정
전화번호 수정
추가 버튼(매개변수 또는 인증에 따라 표시되거나 표시되지 않을 수 있음)과 함께 그룹의 모든 식별 번호를 나열합니다.
식별 유형 선택과 함께 식별 번호 추가
식별 유형을 선택하여 식별 번호 편집
수정 식별 유형으로 식별 번호 추가
수정 식별 유형으로 식별 번호 편집
두 개의 추가 버튼을 사용하여 그룹에 연결된 모든 사람을 나열합니다(매개 변수 또는 인증에 따라 개별적으로 표시되거나 표시되지 않을 수 있음).
- 관리자 추가
- 회원 추가
두 개의 추가 버튼(매개변수 또는 인증에 따라 개별적으로 표시되거나 표시되지 않을 수 있음)을 사용하여 그룹(자식)에 연결된 모든 그룹을 나열합니다.
- 기존 그룹을 하위로 추가
- 새 그룹을 만들고 자식으로 추가
- 목록에서 각 그룹은 하향식으로 탐색할 수 있도록 이 화면에 대한 링크입니다.
- 상향식 탐색을 위해 상위 수준으로 이동하는 세 번째 버튼
- 그룹 관리자의 이름이 목록 위에 나타납니다.
? 그룹 또는 개인의 모든 상위 그룹을 나열합니까?
각 수준에서 작업 또는 세부 정보가 포함된 트리로 그룹 계층 구조를 하향식으로 표시
그룹 계층 구조를 각 수준에서 작업 또는 세부 정보가 있는 트리로 상향식으로 표시

사용 사례 페이지:

그룹 검색
그룹을 관리하다
연락처 정보 관리
계층 구조를 단계별로 관리(부모에서 자식으로 또는 자식에서 부모로)
트리 보기로 계층 구조 관리
HR 직원에서 “직원용” 템플릿을 사용하여 하향식 또는 상향식 트리를 표시합니다.

CRM B2B 고객관리

CRM B2B 애플리케이션에서 고객(즉, 이 컨텍스트에서는 회사) 관리입니다.
명확히 하기 위해 이러한 사용 사례에서 B2B는 B2C와 다른 애플리케이션입니다.
“CRM B2C & B2B”는 세 번째가 되지만 화면 페이지 정의에 대한 특이성이 없기 때문에 이 목록에는 없습니다.

B2C의 주요 차이점은 다음과 같습니다.

회사 대 사람,
PartyAssociation과의 연락처 관리
? 고객 조직 관리 ?

사용 사례 화면 :

추가 버튼을 사용하여 고객(회사(특정 partyType)) 찾기(매개변수 또는 권한에 따라 표시되거나 표시되지 않을 수 있음)
- 검색 필드는 일부 배포 여부가 있는 여러 엔터티에 있습니다.
- 나타날 수 있는 역할 필드, 없을 때 고정 값을 매개 변수로 넣었습니다.
- 연락처 정보 필드, 전화, 우편, 마을. 이러한 필드는 “배포” 버튼을 사용하여 사용자가 표시하거나 표시하지 않을 수 있습니다.
추가 버튼이 있는 회사 목록(매개변수 또는 승인에 따라 표시되거나 표시되지 않을 수 있음)
- 역할 필드가 나타나거나 나타나지 않을 때 고정 값이 매개 변수로 지정되어 있으므로 이 역할을 가진 회사만 나타납니다.
양식에 회사, 모든 주요 정보 추가
- 역할
- PartyGroup의 필드
- 우편 주소 1개
- 전화번호 2개
- 2 식별 번호
표시되는 데이터가 더 많을 때 연락처 정보 및 식별 표시기가 있는 화면에 회사, 모든 주요 정보를 표시합니다.
옵션이 있는 하위 메뉴가 있는 회사 표시:
- 연락처 정보
- 신분증
- 역할 기록
- 역할 변경 : 다이렉트 액션 버튼
회사 편집, “회사” 필드만
역할을 변경하는 버튼 막대(예: 용의자의 경우 3가지 옵션이 있음), 이 사용 사례는 작업 막대가 있는 경우입니다.
이 비즈니스 프로세스의 경우 필요하지 않을 수도 있지만 주문이나 작업과 같은 보다 복잡한 개체의 경우 고전적인 필요입니다.
추가 버튼(매개변수 또는 승인에 따라 표시되거나 표시되지 않을 수 있음) 및 목적이 있는 회사의 모든 연락처 정보 목록은 표시됩니다(따라서 목적 관리 포함).
우편 주소(또는 목적만) 추가
메일 추가
목적이 있는 전화번호 추가
우편 주소 수정
메일 수정
전화번호 수정
추가 버튼이 있는 회사의 모든 식별 번호 목록(매개변수 또는 승인에 따라 표시되거나 표시되지 않을 수 있음)
식별 유형 선택과 함께 식별 번호 추가
식별 유형을 선택하여 식별 번호 편집
추가 버튼이 있는 이 회사와 연결된 연락처(사람) 목록(매개 변수 또는 권한에 따라 표시되거나 표시되지 않을 수 있음)
- 연락처는 연락처 정보를 가진 사람입니다.
- 연락처당 한 줄만 있는 목록
- 각 연락처 세부 정보가 있는 블록 목록
연락처 또는 연락처 정보 편집

사용 사례 페이지:

CRMB2C와 완전히 동일

CRM에서 새 항목 생성(생성 중 역할 선택)
“고객”(또는 용의자, 잠재 고객, … ) 검색
“고객”을 시각화
“고객”에 대한 정보 관리
우리가 어떤 “고객”인지 표시하는 헤더(또는 사이드바 또는 … )가 있는 템플릿 페이지(예: 그의 모든 견적 또는 주문 또는 … )
한 페이지에서 회사에 대한 정보를 관리하고 이 페이지에서 필드로 직접 액세스할 수 있습니다(ID, 이름, 성에 대한 자동 완성).

시설근로자 관리

Facility 애플리케이션에서 간단한 시설의 작업자 관리.
이 마지막 사용 사례 그룹의 경우 이전 사례를 단순화한 것입니다.
사람을 추가하는 과정은 매우 간단하고 짧습니다.

목표는 기존 애플리케이션에서 새로운 작은 애플리케이션을 생성(또는 매개변수화)하는 것이 쉽고 빠른지 확인하는 것이기 때문에 마지막입니다.

창고 관리 애플리케이션(단순 버전 OOTB)에서

관리 메뉴에서
- 시설별 내부 사용자 관리를 위한 사용자 메뉴 표준 비즈니스 프로세스에서는 주로 로그인 및 인증에 사용되며, 우리의 경우 사람, 전화번호 및 시설(인가된 곳)만 관리합니다.
- 연락처 및 권한자 관리를 위한 시설 메뉴

사용 사례 화면 :

이미 사용 중인 화면

사람 찾기
- 단순 양식(파티 또는 개인에만 해당)
- 추가 버튼으로
추가 버튼이 있는 사람 목록
사람 추가, 간단한 양식 3-6 필드
사람을 보여
연락처 정보를 관리하는 옵션이 있는 하위 메뉴가 있는 사람 표시
사람 편집
하나 이상의 추가 버튼이 있는 개인의 모든 연락처 정보 목록
메일 추가
전화번호 추가
메일 수정
전화번호 수정

새 화면

시설 추가, 간단한 양식, 서비스가 있는 경우 일부 연락처 정보 포함
모든 기존 시설 목록
하나 이상의 추가 버튼이 있는 시설의 모든 연락처 정보 목록
두 개의 추가 버튼이 있는 시설과 관련된 모든 사람 목록
- 기존 사람 추가
- 새 사람을 만들고 시설에 추가
사람과 연결된 모든 시설 목록(하나의 추가 버튼 포함)
- 기존 시설 추가

사용 사례 페이지:

시설 관리
사람을 관리하다
시설 세부 정보 시각화(정보, 연락처 정보, 관련자)

1.2.4.7.3. 스크린렛 자율

모듈식 접근 방식에서 screenlet은 화면의 자율적인 부분이며, 이는 주로 자체적으로 실행되는 화면의 이 부분만 변경하는 작업이 있을 수 있음을 의미합니다.

Sreenlet은 사용자 인터페이스에서 엄청난 모듈성 이점을 허용하므로 사용자 작업(링크 클릭, 필드 입력 등)은 Sreenlet 자체를 정확하게 지정하지 않고 하나 이상의 screenlet에서 구독할 수 있는 논리적 이름이어야 합니다.

screenlet이 구독하는 이 논리적 이름은 이라고 watcherName하며 이 필드는 container태그의 새 속성입니다.

6.7.4. FrontJ 용어집

감시자

원격으로 변경할 수 있는 js 저장소에 저장된 개체입니다. watcher의 구독자는 새로운 값이 변경되면 스스로 업데이트합니다.감시자 이름

감시자의 열쇠입니다