본문바로가기
 

UI5 For ABAP IDE

UI5 ApplicationDevelopment Solution for SAP Developers

U4A IDE 변경 로그

[1.20] U4A IDE 기능 개선 - 0020 / 2019.10.16 13:04:13

관리자 2019-12-03 1,684

버전 모듈 상세내역
1.20 External Chart API Support >> Amchart의 Gauge Chart 만들기 <<


* 컨셉 변경


1. 기존방식

: 게이지의 화살표 값이 바뀌면 렌더링을 다시 하는 방식


2. 문제

: 게이지의 화살표 값을 동적으로 바꾸면 애니메이션 효과처럼 부드럽게 게이지가 이동되는게 아니라 값 바꾸면 렌더링을 다시 하기 때문에 뚝뚝 끊어지는 느낌이 듬.


3. 개선 :

: 차트의 게이지 값을 동적으로 줄때 에니메이션 효과를 주기 위해서 화살표 값과 텍스트 값을 변경 할 때만 랜더링을 하지 않고 차트 객체에 값을 직접 적용하여 애니메이션 효과처럼 부드럽게 동작할 수 있도록 개선함.
1.20 External API Support >> addStyleClass Property 이슈 개선 <<
 

1. 문제점

:  Extended UI 중에 addStyleClass가 적용이 되지 않는 현상


2. 대상

:  setTImeout, setInterval, Javascript Worker 를 사용하는 UI.



3. 해결책 :

   1) 기본적으로 div가 그려지고 난 후에 스타일을 적용하는 로직을 추가한다.
   2)  UI 성격별 onAfterRendering 에서 스타일 클래스를 적용하는 방법으로 로직 수정

                                var _aCssClass = that.aCustomStyleClasses;

if(_aCssClass == null){

return;

}

var sCssClassNm = _aCssClass.join(" ");

jQuery(this.getDomRef()).addClass(sCssClassNm);
1.20 External Chart API Support >> amCharts PI Chart Extend <<


1. AmChart의 PI 차트를 UI5 Extend로 작업

2. 기존 AmChart 류의 UI 구현시 Init 메소드에서 라이브러리 로딩 하는 방법론을 동일하게 구현.
1.20 External Chart API Support >> amCharts SingleDonutChart의 Width Height 속성 percent 값 이슈 해결 <<

1. 문제점
: SingleDonutChart 프로퍼티의 width, height 값을 퍼센트로 줄 경우 Page 밑에는 잘 그려지는데 HBox 안에서는 안그려짐.

2. UI5 "HBox"의 프로퍼티 중 "renderType"을 "Bare"로 적용.
1.20 External API Support >> ImageMark 상속관계 수정 <<

1. 기존
: sap.ui.core.Element를 상속하여 구현


2. 수정 사유
 :  바인딩 없이 ImageMark를 구현했을 경우 ImageMark를 클릭 시, 부모입장에서 누구를 클릭했는지에 대한 정보가 불분명하여 ImageMarkArea(부모)가 가지고 있던 클릭 이벤트를 빼고, 각 ImageMark 에 구현하기 위함


3. 수정내용
    - sap.ui.core.Control을 상속하는 것으로 변경


>> 2019-10-22 계획변경 <<

*** alias ***

 - "Area" : ImageMarkArea,

 - "Mark" : ImageMark

************

1. 내용
: 다시 sap.ui.core.Element를 상속하는 방향으로 전환 후 이벤트만 각 ImageMark 에 구현.


2. 수정 사유 : 

1)  "Area" 에만 존재했던 클릭 이벤트를 빼고 "Mark" 에 넣으면서 "Area"에 있던  "Mark" 를 랜더링 하는 로직도 "Mark" 로 옮김.

2) 문제는, "Mark"의 속성을 변경하면 다시 랜더링을 하게 되는데, "Mark" 만 랜더링 하다 보니 화면에서는 변경된 값이 반영 되지 않음.

3) 왜냐하면 변경된 값이 반영 하려면 "Mark"의 좌표값을 가지고 화면에 그리는 로직은 "Area" 에 있다 보니 "Mark" 만 혼자 랜더링 해서는 변경된 값이 반영되지 않은 것임.

4) "Mark" 의 속성값이 변경 되어 다시 랜더링 한 후 "Area" 도 다시 랜더링을 하던지 다시 그려주는 로직만 타게 하던지 해야하는 복잡성 때문에 "Mark" 의 상속관계, "Mark"를 그리는 로직 등을 이전 로직으로 다시 원복하고 클릭 이벤트만 "Mark"로 이동함.
1.20 External API Support >> ImageMarkArea Press Event 이슈 개선 <<

1. 문제점
: 이미지를 클릭하면 이벤트가 타지 않음


2. 해결
: ImageMarkArea 전체를 감싸는 Div 영역도 실제 이미지 크기와 동일하게 적용하는 로직 추가 하고 Div 영역 Dom에 onClick 이벤트 적용함.
1.20 U4A IDE Workbench Elements >> UI Property Binding 시 추가 제어 <<


1. 적용 대상
: UI Property 중 Multi 인 경우

2. 조치사항
: 공통코드 UA041([워크벤치] 프로퍼티 타입 별 "STRING_TABLE 타입지정 대상"에 포함된다면 CARDINALIT = STR_TAB  즉 STRING_TABLE 로 바인딩 가능 처리 로직 추가
1.20 U4A IDE Workbench Elements >> Application Active 시 점검 로직 추가 <<


1. 대상 UI

UO01164     SAP.UI.UNIFIED.CALENDAR
UO01167     SAP.UI.UNIFIED.CALENDARDATEINTERVAL
UO01172     SAP.UI.UNIFIED.CALENDARMONTHINTERVAL
UO01174     SAP.UI.UNIFIED.CALENDARTIMEINTERVAL
UO01194     SAP.UI.UNIFIED.CALENDAR.MONTH
UO01196     SAP.UI.UNIFIED.CALENDAR.MONTHSROW    <= 항목도 동일 하게 점검 필요(추가됨)
UO01197     SAP.UI.UNIFIED.CALENDAR.TIMESROW    <= 항목도 동일 하게 점검 필요(추가됨)


2. 로직 반영

1) singleSelection = false 이면서
    intervalSelection = true 이면 오류 처리 해야함.

2) singleSelection이 false이면 intervalSelection를 true로 할 수 없음( 스크립트 오류남) 반대로 intervalSelection이 true이면 singleSelection을 false로 할 수 없음.

3) UO01682    sap.ui.layout.form.ColumnLayout
    columnsL  값은 ColumnsM 2 값보다 크거나 같아야함.
 
(예 : columnsL  = 1, ColumnsM = 1이면 ok
        columnsL  = 1, ColumnsM = 2이면 error)

4) ColumnsXL 값은 columnsL  값보다 크거나 같아야함

(예 : ColumnsXL = 2, columnsL  = 2이면 ok
        ColumnsXL = 1, columnsL  = 2이면 error)
1.20 U4A IDE Workbench Elements >> Application Active 시 TABLE UI 점검 로직 개선 <<


1.  대상 UI
: sap.m.Table
  sap.ui.table.Table
  sap.ui.table.TreeTable


2. 적용 로직
  1) minAutoRowCount = 0 이하면안됨.
  2) fixedRowCount + fixedBottomRowCount이 visibleRowCount보다 클 수 없음.
  3) visibleRowCountMode가 Auto이면 visibleRowCount는 10(default)값이어야함.
  4) navigationMode는 Paginator를 할 수 없음.
1.20 U4A IDE Workbench Elements >> UI/UX Sample Data 구성 에 대한 Image File Server 저장 처리 <<

ZTU4A_EX_PROD <-- 테이블 정보 구성시  sdk 파일에 이미지 파일 정보 서버 저장 처리 해야함 !!
1.20 U4A IDE Workbench Elements >> Application Active 시 UI Property 점검 시 필수값 점검 로직 개선 <<
1.20 U4A IDE Workbench Elements >> 실행된 Application 화면 선택에 대한 효과 제어 기능 추가 <<


1. 적용 방법
  1) 대상 Application을 U4A IDE Workbench에서 변경 모드로 Open 한다.
  2)  "Design 영역"에서 "Document" 레벨을 선택 한다.
  3) 우측 "속성(Attribute)" 영역에서 Property 중 "Touch style"로 제어한다.
1.20 U4A IDE Workbench Elements >> Application 내 "SessionWorker" API 사용 시 Active 점검 로직 추가 <<


1. 사유
: 대상 API 중요 사항 미 등록 및 정의 시 실행 Application 오류 발생 문제를 방지 하기  위함.

2. 개선 내용
  1) Workbench Edit 모드에서 "UX Design Area" 내 API 등록 시 등록 위치 제약 (반드시 "APP" 밑에 등록 해야 함)
  2) API Property 중 "minute" 값을 1 이상 입력 여부 점검
  3) API Event "finished" Server Event 필수 지정 여부 점검
1.20 U4A IDE Workbench Elements >> UI Object "sap.m.FeedInput" 사용 시 script 오류 발생에 대한 개선 작업 <<


1. 문제점
: Application 내 "sap.m.FeedInput" UI 사용 시 Java Script 오류가 발생 됨.


2. 원인
: 대상 UI Property "setGrowingMaxLines" 값이 필수항목으로 바뀜


3. 개선내용
  1) UI Object Property 중 필수값으로 제약을 점검해야 할 대상을 제어항목 "UA018 : 미리보기 UI Property 고정값"으로 관리 할 수 있도록 개선
  2) Workbench에서 대상 UI를 사용한 Application을 Active 시 필수 항목 여부 점검 로직 반영.
1.20 U4A IDE Workbench Elements >> Input UI "F4" Search Help API 버그 개선 <<

1. 원인
: API 로직 중 "max row" Parameter를 반영 안함.


2. 조치사항
: 미반영 로직 반영 후 테스트 정상
1.20 U4A IDE Workbench Elements >> Application 내 "PressTrigger" API 사용 시 Active 점검 로직 추가 <<


1. 사유
: 대상 API 중요 사항 미 등록 및 정의 시 실행 Application 오류 발생 문제를 방지 하기  위함.

2. 개선 내용
  1) Workbench Edit 모드에서 "UX Design Area" 내 API 등록 시 등록 위치 제약 (반드시 "APP" 밑에 등록 해야 함)
  2) Application 내 2개 이상 등록 못하도록 점검
  3) API Property 중 "minute" 값을 1 이상 입력 여부 점검
  4) API Event "finished" Server Event 필수 지정 여부 점검
1.20 U4A IDE Workbench Elements >> U4A Debugging Cockpit(Web Debugging V2.0) 기능 출시 <<

1. 개선 내용
  1) 기존 마우스 우클릭으로 제어되는 방법론 변경 -> 키보드 "Ctrl" 키 + 마우스 우클릭 조합으로  변경
  2) 신규 컨트롤러 제어 처리 및 각 application 에 info 정보를 확인 할수 있는  view 제공
     가령 어떤 usage application 에 대한 정보가 사용중인거에 대한 info 를 보여줘야함!!
1.20 U4A IDE Data Binding Manager >> Data Type "INT(Integer)" 관련 이슈 개선 <<


1. 문제점
INT1 => 0 to 255
INT2 => -32,768 to 32,767
INT4 => -2,147,483,648 to +2,147,483,647

의 허용 범위값이 존재함.

특히 INT4같은 경우 2222222222를 화면에서 입력하는경우 서버로 날라가서 해당 필드에 값 매핑시 OVERFLOW 처리 되는 문제가 있음.


2. 개선 사항

1) ZHTML_PTN017 패턴에서 ABAP Data Type이 INT1 이면
   -값이 입력됐을때 0으로 255 초과값이 입력되면 자릿수 한개 제거(256 입력시 25로 처리)

2) INT2 이면 -32768 ~ 32767 을 벗어날 경우  자릿수 한개 제거(-32769 입력시 -3276로 처리)

3) INT4 이면 -2147483648 ~ 2147483647 을 벗어날 경우  자릿수 한개 제거(-2147483648 입력시 214748364로 처리)
1.20 U4A IDE Data Binding Manager >> Model Sorted ABAP Method 추가 <<

U4A Utility Class에 있는 "SET_MODEL_FILTER"  Method와 마찬가지로 ITAB Binding 걸려있는 UI를 Sort 할 수 있는 기능 추가
1.20 U4A UI5 UI/UX Rendering Engine >> Table UI Scrolling 기능 개선 <<

. 개선 내용
  1) Performance 로직 개선
  2) Row 건수에 대하여 기준선 미만인 경우 반복 수행 처리 안되도록 로직 개선