Chapter 10 - Workflow UI width ADF

Introduction

전에 3장에서 각각의 Human Task 폼(화면)을 자동으로 만들었습니다.

이 챕터에서는 ADF(application Development Framework)라는 것으로 화면을 수동으로 만들어 봅시다.

※ 총 3개의 프로젝트를 새로 만들어야 하는데.. 너무 양이 많아서  처음 1개의 프로젝트만 새로 만들어 보겠습니다.

※ 어느정도 익숙해지면 pdf(원서) 보고하는게 더 빠를 것입니다. ㅎㅎ

---

Task forms for entering a quote

Setup

자동으로 만들었던 Human Flow UI 를 지우고 수동으로 새로 만들겠습니다.

EnterQuoteUILab 프로젝트를 삭제합니다.

파일까지 싸악~ 삭제합니다.

Create a new UI project

Application 메뉴에서 New Project... 클릭.

Generic Project 프로젝트를 선택합니다.

아무것도 없는 빈 프로젝트가 생성됩니다.


Create Business Components

프로젝트 위에서 오른쪽 버튼 클릭 후 New 클릭.

Business Components from Tables 를 선택합니다.

Connection 오른쪽의 추가 버튼(녹색 플러스)을 클릭합니다.

0장(Chapter 0) 에서 만들었던 quote 디비 정보를 입력합니다.

OK 버튼을 클릭합니다.

Package: enterquoteui.adfbc

Query 버튼을 클릭하면 quote 스키마의 테이블들이 Available 목록에 나옵니다.

PRODUCT, TERM 테이블을 선택하고 가운데에 오른쪽으로 가는 화살표를 클릭하여 Selected 목록으로 옮깁니다.

Next 버튼 클릭. (아직 Finish 하면 안됩니다!)

2단계(Step 2)에서는 할 것이 없습니다. Next 버튼 클릭.

3단계에서 1단계에서 했던 것과 같은 작업을 합니다. Next 버튼 클릭.

4단계에서 Finish 버튼을 클릭합니다.

EnterQuoteUILab(프로젝트) - Application Soureces - enterquote.adfbc - AppModule 를 편집합니다.

Configurations 탭으로 이동합니다.

AppModuleLocal 선택 후 수정(연필) 버튼을 클릭합니다.

Connection Type 을 JDBC DataSource 를 선택 하고 Datasource Name 은 jdbc/quoteDB 로 변경합니다.

AppModuleShared 도 같은 값으로 변경합니다.

모두 저장합니다.


Create Task Flow

이제부터 UI(화면)를 만들어 봅시다.

프로젝트(EnterQuoteUILab)에서 오른쪽 버튼 클릭 후 New 클릭.

Web Tier - JSF 분류에서 ADF Task Flow Based on Human Task 를 선택합니다.

BPM의 Human Task 를 기반으로 ADF UI 를 만드는 겁니다.

QuoteProcessLab 프로젝트 안에 EnterQUoteDetails.task 파일을 선택합니다.

Create Train 을 체크합니다.

taskDetails1_jsp(View)가 만들어져 있는데 삭제합니다.

View 컴포넌트를 추가합니다. 이름은 enterHeader.

아래와 같이 차례대로 View 컴포넌트를 4개 더 추가합니다.

각각 이름은 selectProduct, requestDiscount, requestTerms, submit 입니다.

그 후 Control Flow Case 로 submit(View)와 taskReturn 을 연결합니다.

enterHeader 뷰를 선택 후 Mark Default Activity 버튼을 클릭합니다.

기본 흐름이 완성 되었습니다.

Create a form for entering the quote header data

일단 템플릿이 들어있는 라이브러를 프로젝트에 추가시켜 봅시다.

리소스 팔레트(View - Resource Palette)에서 커넥션을 하나 추가합니다.

Connection Name: SalesQuoteUIadflib

adflibSalesQuoteUITemplates.jar

경로는 이 라이브러리 파일이 들어있는 폴더(디렉토리)를 선택합니다.

그럼 지정한 폴더 안에 있는 파일들이 표시됩니다.

그 중에 adflibSalesQuoteUITemplates.jar 파일을 프로젝트에 추가시킵니다.

enterHeader 뷰를 더블클릭합니다.

템플릿으로 Oracle BPM 11gR1 Training - Enter Header Template 를 선택합니다.

Data Controls 패널에서 EnterQuoteUILab_EnterQuoteDetails - getTaskDetails(...) - Return 까지 이동합니다.

※ 앞으로 여기가 데이터의 기준이 됩니다. (한군대에선 빼고...)

Task 를 UI 화면 상단 오른쪽의 task-action 부분(facet)에 드래그 앤 드랍합니다.

Human Task - Task Action 을 선택합니다.

※ 앞으로 4개의 뷰를 더 만들텐데 이 작업은 항상 똑같습니다.

Task - Payload - Quote Request - Summary 를 task-summart 부분에 드래그 앤 드랍(이하 추가) 합니다.

Form - ADF Form 선택.

NewCustomer, TotalNetRevenue, EffectiveDiscount 필드는 삭제합니다.

OK 버튼 클릭.

구조 팔레트 부분을 보면 화면의 내용물(?)들이 트리 형태로 잘 보입니다.

방금 추가한 폼을 선택 합니다.

   

그리고 Property Inspector(이하 프로퍼티) 팔레트 부분은 선택한 부분의 속성들을 변경 할 수 있습니다.

MaxColumns: 3

Rows: 1

변경합니다.

Address 데이터 컨트롤을 task-summary-address 부분에 추가 후 ADF - ADF Forms 선택. 설정 창은 그냥 OK.

Panel Collection 컴포넌트를 task-summary-contacts 부분에 추가합니다.

Contacts 데이터 컨트롤을 추가한 Panel Collection 영역에 추가 후 Table - ADF Table 선택.

설정 창은 그냥 OK 합니다.

Panel Collection 컴포넌트의 toolbar 부분에 Toolbar 컴포넌트를 추가합니다.

추가한 툴파 영역에 Contacts - Operations - Create 를 추가합ㅎ니다.

ADF Toolbar Button 클릭.

Delete 를 바로 다음에 추가합니다. 마찬가지로 ADF Toolbar Button 클릭.

처음 추가한 버튼의 Text 속성을 Add 로 변경합니다.

완성된 화면 입니다.

모두 저장합니다.

Create a form for adding products to the quote

프로젝트에서 마우스 오른쪽 버튼 클릭 - Project Properties 클릭.

Libraries and Classpath 로 이동 후 Add JAR/Directory 버튼을 클릭합니다.

bpm-training-salesquote.jar

라이브러리 파일을 선택합니다.

OK 버튼 클릭.

Task Flow 설정 화면을 엽니다. (파일 위치: {프로젝트}/Web Content/WEB-INF/EnterQuoteDetails_TaskFlow.xml)

Overview 탭으로 이동 후 Managed Beans  탭으로 이동합니다.

추가(Add) 버튼을 클릭합니다.

Name: dropProduct

Class 필드에서 오른쪽에 화살표 클릭 후 Edit 클릭.

enterquoteui.backing.DropProduct 클래스를 선택합니다.

Scope: session

같은 방법으로 2개를 더 추가합니다.

Name: discountHelper

Class: enterquoteui.backing.DiscountHelper

Scope: session

Name: termChoices

Class: enterquoteui.backing.TermChoices

Scope: session

selectProduct 뷰를 편집합니다.

Select Prodcut Template 선택.

Task 데이터 컨트롤을 상단 오른쪽의 task-action 부분에 추가 후 Human ATask - Task Action 선택.

※ 이제 이 부분은 빼겠습니다. 다음 3개의 View를 만들때 맨 처음 해주세요.

available-products 부분에 Panel Collsction 컴포넌트(레이아웃 컨테이너)를 추가합니다.

데이터 컨트롤 중에 AppModuleDataControl - ProductView1 을 available-products의 패널에 추가합니다.

Table - ADF Read-only Table 선택.

Category, Imageurl 필드는 삭제합니다.

Multiple Rows 선택 후 OK 버튼을 클릭합니다.

selected-rpoducts 부분에 Panel Collection 컴포넌트 추가 후 Product Item 을 추가합니다.

RequesteDiscount, ControlledAvailability 필드는 삭제합니다.

Data Source(Operations) 컴포넌트를 Available Products 테이블에 추가합니다.

화면에는 보이지 않으니 구조 팔레트에서 선택합니다.

아래와 같이 속성을 바꿔줍니다.

Actions: COPY

DefaultAction: COPY

Discriminant: productItem

Collection Drop Target(Operations) 컴포넌트를 Selected Products 테이블에 추가합니다.

DropListener 오른쪽에 화살표 클릭 후 Method Expression Builder 선택.

ADF Managed Beans - dropProduct - HandleDrop 을 선택합니다.

OK 버튼 클릭.

추가한 Collection Drop Target 컴포넌트의 속성은 아래와 같이 변경합니다.

Actions: COPY

ModalName: prodcutItem

완성된 화면입니다. 모두 저장합니다.

Create a form for request discount

requestDiscount 뷰를 편집합니다.

Request Discount Template 선택.

Summary 데이터 컨트롤을 summary 부분에 추가 후 ADF Form 선택.

TotalNewRevenue, EffectiveDiscount 만 남기고 나머지 필드들은 삭제합니다.

Form 패널의 속성을 아래와 같이 변경합니다.

MaxColumns: 2

Rows: 1

두 필드를 선택합니다. (컨트롤키를 이용)

ReadOnly 속성을 true 로 변경합니다.

NetRevenue 필드만 선택합니다.

Value 속성 오른쪽에 화살표 클릭 후 Expression Builder 를 선택합니다.

입력되어 있던 값 삭제 후 ADF Managed Beans - discountHelper - netRevenue 를 입력합니다.

EffectiveDiscount 필드는 discountHelper - effectiveDiscount 를 입력 해줍니다.

discounts-table 부분에 Panel Collection 컴포넌트를 올리고 Product Item 데이터 컨트롤은 추가합니다.

RestrictedItem, ControlledAvailability 필드는 삭제합니다.

discount-table 부분에 추가했던 Panel Connection 컴포넌트의 StyleClass 를 AFStretchWidth 로 설정합니다.

화면의 가로 길이에 따라 가로 크기가 최대로 늘어나게 됩니다.

ProductId, ProductName, ListPrice, PreApprovedDiscount 필드(칼럼 아님!)를 선택합니다.

readOnly 속성을 true로 변경합니다.

Requested Discount 칼럼을 Quantity 오른쪽으로 이동시킵니다.

Quanity 필드를 선택하면 오른쪽에 나오는 버튼 클릭 후 Convert To 클릭.

Input Number Spinbox 선택.

변환 하게되면 MaximumLength 속성이 없어진다고 하는것 같습니다. -_-;;;

Quantity, Requested Discount 필드를 선택합니다.

autoSubmit 속성을 true 로 변경합니다.

Quantity 칼럼 선택 후 id 속성을 cQuantity 로 변경합니다.

   

Requested Discount 칼럼 선택 후 id 속성을 cRequestedDiscount 로 변경합니다.

  

From 에서 NetRevenue, EffecitveDiscunt 필드 선택합니다.

Partial Triggers 속성을 설정합니다.

아래와 같이 선택합니다.

테이블에서 Product Name 칼럼의 id 값을 적어 놓습니다.

  

테이블의 ColumnStretching 속성을 설정합니다.

완성된 화면입니다.

Create a form for adding terms and conditions to the quote

requestTerms 뷰를 편집합니다.

Request Terms Template 을 선택합니다.

business-terms 부분에 Panel Collection 추가 후 License Term 데이터 컨트롤을 추가합니다.

Table - ADF Table 선택.

Select One Choice 컴포넌트를 Category 칼럼에 추가합니다.

Value: #{termChoices.categoryChoices} (ADF Managed Beans - termChoices - categoryChoices 선택)

Next 버튼 클릭.

Label: Category

Value: #{row.bindings.Category.inputValue} (같은 칼럼의 text 필드의 Value 속성 값)

Select One Choice 컴포넌트를 Type 칼럼에 추가합니다.

Value: #{termChoices.termTypeChoices}

Next 버튼 클릭.

Label: Type

Value: ${row.bindings.Type.inputValue}

추가 후 남아있는 텍스트 필드 두개를 삭제 합니다.

그리고 Create, Delete Operations 두개를 툴바로 추가합니다

바인딩을 하나 추가해줘야 합니다.

Bindings 탭으로 이동 후 컨트롤 바인딩을 추가합니다.

table 을 선택합니다.

Data Collection: AppModuleDataControl - TermView1

Select an Iterator 오른쪽에 New 버튼을 클릭합니다.

OK 버튼 클릭.

Available Attributes 목록에 있는 필드를 전부 Display Attributes 목록으로 옮깁니다.

OK 버튼을 클릭합니다.

아래와 같이 바인딩이 추가 되었습니다.

Create a submit form

마지막으로 submit 뷰를 편집합니다.

Submit Template 탬플릿을 선택합니다.

quote-summary 부분에 Summary 데이터 컨트롤을 추가합니다.

AccountName, SlaesRepName, TotalNetRevenue, EffectiveDiscount, ValidUntil 만 남기고 다른 필드는 삭제합니다.

TotalNetRevenue, EffectiveDiscount 필드의 readOnly 속성을 true 로 설정합니다.

products-discount 부분에 Panel Collection 컴포넌트를 추가합니다.

Product Item 데이터 컨트롤을 추가합니다.

ProductId, ProductName, Quantity, RequestedDiscount 필드만 남기고 삭제합니다.

license-terms 부분에 Panel Collection 컴포넌트 추가 후 License Term 데이터 컨트롤을 추가합니다.

마지막으로 Task 테이터 컨트롤을 comments 부분에 추가 후 Human Task - Task Comment And Attachment 클릭.

완성된 화면입니다.

---

Test

배치(Deploy) 후 bpm workspace에 접속합니다. (jcooper 계정으로 로그인)

프로세스를 하나 구동(?) 시킵니다.

enterHeader 화면입니다. Industry 값을 입력 후 2단계로 이동합니다.

2단계(selectProduct) 제품을 드래그 앤 드랍으로 선택할 수 있습니다.

3단계(requestDiscount) 화면은 수량과 할인율을 설정하는 화면입니다.

4단계 화면(requestTerms).

마지막 확인 화면(submit).

---

10-salesquote-workflow-ui.pdf