Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

2,617 views

Published on

Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례
센차 아키텍트를 활용한 대형 엔터프라이즈 프로젝트 협업 사례 소개
EMRO - 김광섭 이사

Published in: Internet
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

  1. 1. 2015/05/19 기술연구소 김광섭 이사 Sencha ExtJS5.x 과 Architect3.1 을 활용한 Enterprise Solution 개발 사례 SenchaCon 2015 Roadshow
  2. 2. [ 2 ] I. ㈜엠로 소개 II. 솔루션 시연 III. 왜 ExtJS 와 Architect 를 선택했는가? IV. Extension 개발 사례 V. Enterprise Application 개발 시 고려사항 Table of Contents
  3. 3. [ 3 ] III. 왜 ExtJS 와 Architect 를 선택했는가? 1. History of EMRO UI 2. Experience with ExtJS 3. Why ExtJS? 4. Why Architect?
  4. 4. [ 4 ] 1. History of Emro UI 시장의 웹 표준 기술에 대한 요구 증가로 솔루션의 UI framework 으로 ExtJS 를 선택. III. 왜 ExtJS 와 Architect 를 선택했는가? Section Active X (2001~) Flex (SDK3.4) (2007~) ExtJS (2011, 2014~) Screenshots Advantages • Data grid 성능 • 사용 편의성 • Custom component 개발 • 성능과 사용자 편의성 • OS, Browser 호환성 • HTML5 등장으로 웹 표준 기술에 대한 요구 증대 • Multi OS, Browser 지원 요구 증대 • Mobile Device 지원 Disadvantages • 일반적인 ActiveX 문제들 • OS, Browser 호환성 • 비 웹 표준 Technology • UI Design 도구 (IDE) • Compile time N/A UIFramework변경검토배경
  5. 5. [ 5 ] 2. Experience with ExtJS Section Phase I Phase II Phase III Period 2011/04 ~ 2012/08 2014/01 ~ 2014/05 2014/06 ~ Technology • Ext JS 4.0 (Conversion from Flex) • Ext JS 4.2, DeftJS(MVC) • Architect 3.0 • Ext JS 5.0 (MVVM) • Architect 3.1 Our Experience • SRM Project 수행 • ExtJS 지식 및 경험 부족 • Application architecture 에 대한 고민 부족 • SMARTsuite 솔루션 개발 • Application architecture 개선 • 다양한 Custom component 개발 • Architect3.0 를 사용하여 UI 개발 • SMARTsuite 솔루션 개발 • Ext JS 5.0 new features 적용 • Application architecture 개선 • 다양한 Custom component 개발 • Architect3.1 를 사용하여 UI 개발 • Performance 를 고려한 개발 유형 정의 Our Feedback • Performance Issue in IE • Chrome Frame 사용  다양한 문제발생(with ActiveX) • 개발 복잡도 증가 • Performance Issue in IE8 • 느리고 불편한 Architect3.0 • 개발 복잡도는 여전히 높은 편 • Performance Issue in IE8 (복잡한 UI 개발 시) • Architect3.1 개발 편의성 개선 • 개발 복잡도 감소, 용이성 향상 ExtJS 를 활용한 솔루션 개발 History III. 왜 ExtJS 와 Architect 를 선택했는가?
  6. 6. [ 6 ] 3. Why ExtJS? 주요 고려사항 III. 왜 ExtJS 와 Architect 를 선택했는가? 1. Extensible Class system 2. Extension (Custom components) 개발 4. All in One Framework, IE8 지원 5. 기본 UI Components 3. Desktop, Mobile 동시 지원이 가능한 단일 framework 6. Potential of Sencha 7. Global Business
  7. 7. [ 7 ] 4. Why Architect? 주요 고려사항 III. 왜 ExtJS 와 Architect 를 선택했는가? 1. Extension add-on 2. 개발자 learning-curve 단축 4. UI design 편의성 5. 테마 작업 3. 개발 품질 유지
  8. 8. [ 8 ] IV. Extension 개발 사례 1. 신규 기능 추가 2. override 를 통한 확장/bug fix 3. external library integration 4. 다국어 지원
  9. 9. [ 9 ] 1. 신규 기능 추가 (1/3) 사용자 편의 및 개발 생산성 향상을 위한 extension 개발 IV. Extension 개발 사례 No. Package Class Architect Comments 1 Class.js class 생성, 확장 시 hooks 제공 2 Function.js function arguments, result 에 대한 공통 처리 3 XssProtection.js Xss(cross site scripting) 방어 4 data DynamicHierarchyTransform.js 동적Tree 구현 시 flat 데이터를 계층형 데이터로 변환 5 HiearchyTransform.js Tree 구현 시 flat 데이터를 계층형 데이터로 변환 6 Manager.js 비동기 호출에 대한 전역적 후처리, 예외 처리 7 form field Attachment.js Architect 첨부파일 업/다운로드 필드 8 Month.js Architect 년/월 선택 필드 9 Toggle.js Architect Toggle 버튼 필드 (radio 버튼 기능) 10 plugin ClearButton.js 폼 필드에 데이터 clear 아이콘 표시 11 InputCover.js 폼 필드에 데이터 표현 시 포맷팅 처리 12 InputMask.js Architect 입력 필드 masking 13 plugin AutoClearButton.js Architect 폼 child 필드에 focus 시 데이터 clear 아이콘 표시 14 grid column Attachment.js Architect 첨부파일 업/다운로드 컬럼 15 DataActionColumn.js Architect Text 와 Action 컬럼 결합, link 용도의 컬럼에 사용 16 Eliminate.js Architect 저장/저장이전 삭제 처리를 위한 컬럼 17 Status.js Architect grid row 별 상태표시 컬럼 18 Store.js Architect Store 컬럼, code성 데이터(text/value) 표현을 위한 컬럼
  10. 10. [ 10 ] IV. Extension 개발 사례 No. Package Class Architect Comments 19 grid plugin Block.js Architect 마우스drag로 cell block 선택, cell drag copy&paste 20 CellMarker.js Architect cell 상태를 백그라운드 색상으로 표현(editable/edited/required) 21 CellMerge.js Architect cell merge 표현 22 CellTip.js Architect cell 상태를 아이콘으로 표현(editable/edited/required) 23 Context.js Architect 컨텍스트 메뉴 24 Export.js Architect 엑셀,CSV export 25 Filter.js Architect grid 데이터 필터링 기능 활성화 26 Finder.js Architect grid 데이터 검색 27 HorizontalBufferedRenderer.js Architect 컬럼이 많을 경우 가로 buffered render 기능 지원 28 Import.js Architect 엑셀 import 29 MultiSort.js Architect grid multi 컬럼 정렬 (Ctrl 키 조합) 30 Selector.js Architect Block, Context 메뉴 결합 (Deprecated) 31 Stateful.js Architect 그리드 개인화 설정 32 manager ExportManager.js grid 엑셀 export manager 33 FilterManager.js grid filter manager 34 ImportManager.js grid 엑셀 import manager 35 mixins CommandableSelector.js 36 DraggableSelector.js grid 마우스 drag block 지원 37 LockableSelector.js Lock grid 에서 마우스 drag block 선택 38 LZString.js String 압축, 엑셀 export 시 사용 39 TreeSelector.js tree grid 에서 마우스 drag block 선택 40 ui ContextMenu.js grid Context 메뉴 UI 41 Filter.js grid Filter UI 42 Import.js grid 엑셀 import UI 43 ListFilter.js grid List 유형의 Filter UI 44 Stateful.js grid 개인화 설정 UI 45 util Draw.js grid context 메뉴 draw 1. 신규 기능 추가 (2/3)
  11. 11. [ 11 ] IV. Extension 개발 사례 No. Package Class Architect Comments 46 i18n Manager.js 다국어 manager 47 Provider.js 다국어 데이터 제공자 48 Storage.js 다국어 데이터 cash 49 mixin Translatable.js 다국어 처리 대상자 선별 50 security Manager.js ui 권한 처리 manager 51 Provider.js ui 권한 데이터 제공자 52 plugin ViewModelResolver.js Architect ViewModel 에 권한에 따른 binding 데이터 처리 53 toolbar Counting.js Architect grid 데이터 건수 표시 toolbar 54 TreeFinder.js Architect tree grid 검색 기능 toolbar 55 upload Downloader.js 다운로드 기능 56 Uploader.js 업로드 기능 57 StoreBasedUploader.js Store based 업로드 기능 58 ui DataView.js Attachment field 의 dataview 59 Grid.js Attachment field 를 grid 형태로 사용 60 StoreBasedView.js Attachment field 의 store based view 61 util Time.js 시간 포맷팅 지원 62 view Thumbnail.js Architect 이미지 thumnail viewer 지원 63 window plugin AutoSizer.js Architect 브라우저 resize 시 window, panel 의 자동 resize 지원 1. 신규 기능 추가 (3/3)
  12. 12. [ 12 ] 2. override 를 통한 확장/bug fix (1/3) ExtJS 기본 기능을 변경하거나 bug fix 를 위한 override 구현 IV. Extension 개발 사례 No. Package Class Bug Comments 1 Base.js security, 다국어 관련 기능 적용 2 Component.js Fix backspace 방지 적용, Tip 관련 bug fix 3 Date.js syntax 를 이용한 포맷팅 처리 4 WindowManager.js 팝업을 띄울 때 부모의 toolbar에도 modal 적용이 되도록 수정 5 container Container.js Lazy loading 지원 6 data Connection.js Fix IE8 response bug fix 7 Model.js 그리드 삭제컬럼 추가 상태 관리 8 NodeInterface.js Fix TreeGrid bug fix 9 ProxyStore.js 추가적인 삭제 상태 반영 10 Store.js 페이지 이동에 따른 기능 추가 11 TreeStore.js 페이지 이동에 따른 기능 추가 12 field Field.js Fix validator 관련 bug fix 13 proxy Direct.js exception에 response result 추가 14 reader Reader.js transform 을 type string 으로 생성 15 direct RemotingProvider.js Ext direct RemotingProvider 에 이벤트 추가 정의 16 dom Element.js Fix IE tabindex bug fix 17 form FieldContainer.js Fix 터치지원 OS 에서 스크롤 이상현상 fix 18 field Base.js backspace 방지, 필드 상태 표시 19 ComboBox.js Fix ComboBox 가 Drop (Open) 되어 있는 상태에서 창 크기를 변경 시 bug fix 20 Date.js 마스크 기능 반영 21 HtmlEditor.js Fix 바인딩시 커서 관련 bug fix 22 Month.js 마스크 기능 반영 23 Number.js 포맷팅 반영
  13. 13. [ 13 ] IV. Extension 개발 사례 No. Package Class Bug Comments 24 Picker.js Fix Picker 관련 bug fix 25 Text.js Fix Text field onBlur 이벤트 bug fix 26 TextArea.js Fix IE9 바인딩 bug fix 27 trigger Trigger.js Fix IE 에서 Check Box selection model 의 checkOnly 옵션을 사용하였을 때 콤보박스의 dropdownlist 를 열면 체크가 해제되 는 bug fix 28 grid ColumnLayout.js Fix 컬럼 사이즈 계산 bug fix 29 NavigationModel.js Fix horizontalbufferedrenderer 관련 기능 추가, focus 관련 bug fix 30 Panel.js Fix 그리드 스크롤 초기화 문제 bug fix 31 RowEditor.js Fix StoreColumn 에 renderer 를 호출 할 떄 meataData 의 column 이 없어 오류나는 bug fix 32 column Check.js cell editing 플러그인과 통합, focus 가능하도록 33 Column.js Fix 컬럼헤더 align 속성 추가, 최초 컬럼을 lock 할 때 lockedgrid 에 렌더링되지 않는 bug fix 34 locking Lockable.js Fix Lock 일괄 적용, Lock 관련 bug fix, IE8 Lock 디자인 bug fix 35 View.js Fix Lock 적용 시 생성되는 view 에 누락된 기능 추가 36 plugin BufferedRenderer.js Fix IE9 하위에서 화면 최대화시 스크롤 이벤트 발생하지 않는 bug fix 37 CellEditing.js Fix 가상의 수정 이벤트 생성, 기타 bug fix 38 property Grid.js enableLocking 디폴트 false 처리 39 layout container Card.js Lazy loading 지원 40 Table.js Fix IE9 하위에서 화면 최대화시 스크롤 이벤트 발생하지 않는 bug fix 41 panel Panel.js Fix grid 스크롤 초기화 문제 bug fix 42 Table.js Fix IE8 에서 tagName 관련 bug fix 2. override 를 통한 확장/bug fix (2/3)
  14. 14. [ 14 ] IV. Extension 개발 사례 No. Package Class Bug Comments 43 picker Date.js Fix 토,일 표시 변경. Month picker 선택 bug fix 44 selection CellMode.js deselectOnContainerClick 디폴트 false 처리 45 CheckboxModel.js Fix checkOnly 관련 bug fix 46 Model.js IE8 에서 multi select combobox 에서 select 풀리지 않는 bug fix 47 RowModel.js deselectOnContainerClick 디폴트 false 처리 48 tab Panel.js Card Layout 의 beforeRenderChildren 를 Tabl panel 로 전달 49 tib Tip.js Ext.Component#setActive 에서 제외 시키기 위한 값 추가 50 toolbar Breadcrumb.js Fix 선택 부분 bug fix 51 Paging.js Fix 바인딩을 사용할 때 반영되지 않는 bug fix 52 tree Column.js draggable 디폴트 true 지정 53 Panel.js enableLocking 디폴트 false 처리 54 View.js Fix loadMask 디폴트 true 지정. TreeView 인 경우 store 의 데이터가 존재하지 않을 때 BufferedScroller 의 속성을 초기화 하도록 수정 55 util Format.js syntax 를 이용한 포맷팅 처리 (금액, 수량, 중량 등) 56 view BoundList.js Fix IE10 이상에서 boundlist 스크롤 후 아이템 선택시 click 이벤트가 발생되지 않는 bug fix 57 BoundListKeyNav.js Fix 자동완성 콤보박스 바인딩 bug fix 58 Table.js Fix 브라우저 주소창에 focus 있는 상태에서 그리드 cell 편집 시 bug fix 59 window MessageBox.js Fix IE 하위버전에서 MessageBox 내 DisplayField 의 사이즈가 잘못 계산되는 bug fix 60 Window.js Fix 필수 입력 및 validation check 필드에서 focus 문제 bug fix 2. override 를 통한 확장/bug fix (3/3)
  15. 15. [ 15 ] IV. Extension 개발 사례 3. external library integration data binding External javascript library 를 Architect extension 으로 추가 TinyMCE Editor
  16. 16. [ 16 ] IV. Extension 개발 사례 4. 다국어 지원 Dictionary 관리를 통한 간편한 다국어 반영 지원
  17. 17. [ 17 ] V. Enterprise Application 개발 시 고려사항 1. 프로젝트 환경 구축 2. 모듈화 및 Class loading 전략 3. UI 성능 개선 4. Theme ui 사용
  18. 18. [ 18 ] 1. 프로젝트 환경 구축 협업 및 빌드/배포, 업그레이드 최적화를 위한 환경 구축 V. Etnerprise Application 개발 시 고려사항 Summary 1. Source code Check In/Out 2. User Extension (etnajs, etnajs-cmmn, tinymce …) download 요청 3. Dependency Library download 요청 4. UI Project 테마 사용 5. ExtJs Library 사용 6. Source code Check Out 7. Release 시 변경 버전 반영 8. UI Project 빌드 시 User Extension download 요청 9. UI Project 빌드 결과 upload 요청 10. Dependency Library downlaod 요청 11. Server Project 빌드 결과 upload 요청 12. 라이브러리, 문서(API) 등을 WebDAV를 통한 upload 요청 13. 최종 빌드 결과를 각 서버에 deploy SVN/Git xxx.xxx.xxx/svn 1 Library Repository xxx.xxx.xxx/nexus 3 eclipse Architect 개발 PC CI Server Jenkins 6 7 8 9 10 11 12 13 test/qa/production Jira UI extension Repository xxx.xxx.xxx/nexus 2 CDN xxx.xxx.xxx/cdn 4 5
  19. 19. [ 19 ] 2. 모듈화 및 Class loading 전략 규모가 큰 프로젝트의 경우 모듈 단위로 Architect 프로젝트를 분리하고 프로젝트 단위 로 빌드하여 packaging V. Etnerprise Application 개발 시 고려사항 Architect parent project (개별 Architect project 의 group) extjs project (cmmn) extjs project (pro) extjs project (cms) extjs project (vs) extjs project (srm) extjs project (…) smartsuite.js Sencha CMD build 1 Architect parent project (개별 Architect project 의 group) extjs project (cmmn) extjs project (pro) extjs project (cms) extjs project (vs) extjs project (srm) extjs project (…) no build 2 Architect parent project (개별 Architect project 의 group) extjs project (cmmn) extjs project (pro) extjs project (cms) extjs project (vs) extjs project (srm) extjs project (…) cmmn.js pro.js cms.js vs.js srm.js …..js Sencha CMD build 3 Class & packaging 된 js 파일 매핑 정보
  20. 20. [ 20 ] 2. 모듈화 및 Class loading 전략 브라우저에서 Class loading 시 초기 반응 속도를 높이기 위한 고민 V. Etnerprise Application 개발 시 고려사항 Architect parent project (개별 Architect project 의 group) extjs project (cmmn) extjs project (pro) extjs project (cms) extjs project (vs) extjs project (srm) extjs project (…) srm.js pro.js cms.js vs.js cmmn.js Sencha CMD build srm-bootstrap.js vs-bootstrap.js cmmn-bootstrap.js pro-bootstrap.js cms-bootstrap.js cmmn.view.authority.Role srm-bootstrap.js vs-bootstrap.js cmmn-bootstrap.js pro-bootstrap.js cms-bootstrap.js … cmmn.js 1) bootstrap 파일 다운로드 2) 메뉴 화면 요청 3) Role.js 가 포함된 cmmn.js 다운로드
  21. 21. [ 21 ] 일반적인 구현 방식 (목록  상세  팝업) 첫 번째 팝업 : 매번 instance 생성 하고 rendering 두 번째 팝업 : 매번 instance 생성 하고 rendering 3. UI 성능 개선 Multi 화면 사용 시 View Class 생성을 어떻게 할 것인가.. V. Etnerprise Application 개발 시 고려사항 첫 번째 화면 : 목록화면 Ext.create(… Ext.create(… Ext.create(… Ext.create(… 1. Layered popup 을 사용하여 heavy 한 DOM 생성으로 인해 성능 저하 2. 매번 instance 를 생성해야 하며, instance 생성 및 사용을 위해 서로를 알아야 하기 때문에 UI 간 상호 의존성이 너무 높아짐
  22. 22. [ 22 ] Reference : bidList 최초 Activeitem 으로서 인스턴스 생성 및 렌더링 Panel Card Layout 새로운 UI Class Reference : bidDetail lookupReference() 를 통해 호출될 때 인스턴스 한번만 생성 되고 재활용 됨 Reference : searchItem lookupReference() 를 통해 호출될 때 인스턴스 한번만 생성 되고 재활용 됨 생성/상세조회 이벤트만 발생 저장/닫기.. 이벤트 발생 선택 이벤트 발생 3. UI 성능 개선 V. Etnerprise Application 개발 시 고려사항 Link Link Link 성능 및 의존성을 고려한 구현 방식 (목록  상세  팝업) Multi 화면 사용 시 View Class 생성을 어떻게 할 것인가.. event event event 최초 card layout loading 시 activeitem 만 instance 가 생성되도록 해야 함 (custom property 추가) Card Layout link link
  23. 23. [ 23 ] Rendering 시 Layout 실행 확인 3. UI 성능 개선 V. Etnerprise Application 개발 시 고려사항 suspendLayout() …. resumeLayout() 사용을 통해 Layout 실행 최소화 필요
  24. 24. [ 24 ] 복잡한 form 구성은 table layout 을 사용 3. UI 성능 개선 V. Etnerprise Application 개발 시 고려사항
  25. 25. [ 25 ] panel  ui : main toolbar  ui : page panel  ui : table (table layout 을 사용하는 panel) 4. Theme ui 사용 V. Etnerprise Application 개발 시 고려사항 개발자가 디자인 요소에 대한 최소한의 정보만 사용하도록 함
  26. 26. [ 26 ] 5. Test 자동화 V. Etnerprise Application 개발 시 고려사항 ExtJS version up 을 고려한 Test 자동화
  27. 27. [ 27 ] End of Document
  28. 28. [ 28 ] Grids 기본 기능  그리드에서 row 삭제 처리를 위한 column  삭제 컬럼에서 체크박스 선택 시 DB에 저장되지 않은 row 는 화면에서 바로삭제되고, 저장되어 있는 row 는 삭제 표시만 됨 Eliminate Column 제약 사항  특별한 제약사항 없음
  29. 29. [ 29 ] Grids 기본 기능  그리드에서 row 별 상태정보를 보여주기 위한 컬럼 (추가/수정/삭제 표시) Status Column 제약 사항  특별한 제약사항 없음
  30. 30. [ 30 ] Grids 기본 기능  그리드에 콤보박스와 같이 store 와 바인딩이 필요한 형태의 컬럼을 사용할 때 사용  ViewModel 에 store 를 정의하고 초기화 시 store 에 데이터를 미리 로드 함  store column 에 binding 할 store 와 displayField, valueField 를 지정하면 됨 Store Column 제약 사항  특별한 제약사항 없음
  31. 31. [ 31 ] Grids 기본 기능  그리드 컬럼에 cell merge 가 필요한 경우 사용  그리드에 plugin 추가하면 됨 CellMerge Plugin 제약 사항  특별한 제약사항 없음
  32. 32. [ 32 ] Grids 기본 기능  그리드에 조회된 데이터 내에서 검색이 필요할 때 사용  Finder plugin 을 그리드에 추가하면 기능이 활성화 됨 Finder Plugin 제약 사항  브라우저에 조회된 데이터 내에서만 검색 가능 검색대상 선택 검색결과 highlighting
  33. 33. [ 33 ] Grids 기본 기능  그리드 개인화 기능  틀고정, 컬럼 순서, 컬럼 사이즈, 컬럼 숨기기 정보를 저장하여 개인화 할 수 있음  개인화한 정보는 사용자ID 별로 DB에 저장됨  사용자가 직접 초기화 가능 Grid Stateful Plugin 제약 사항  특별한 제약사항 없음
  34. 34. [ 34 ] Grids 기본 기능  Ctrl key 를 누른 상태에서 컬럼 헤더 클릭 시 복수 컬럼 정렬 가능  Sort Initialize 시 정렬 취소 MultiSort Plugin 제약 사항  브라우저에 조회된 데이터 내에서만 정렬 가능 정렬 초기화
  35. 35. [ 35 ] Grids 기본 기능  그리드에서 row 별로 첨부파일을 관리해야 하는경우 사용  그리드에 Attachment Column 추가  row 별로 첨부된 파일 count 는 서버에서 조회 되어야 함 Attachment Column 제약 사항  특별한 제약사항 없음 첨부파일 개수 첨부파일 group key
  36. 36. [ 36 ] Grids 확장 기능  기본 Filtering 기능을 확장한 Etna 플러그인 기능  모든 컬럼에 대해 텍스트 like filtering 가능  Excel 처럼 filtering 된 데이터 선택 가능  데이터 범위 지정 가능  그리드에 Etna Filter Plugin 만 추가하면 사용 가능 Advanced Grid Filtering 제약 사항  그리드에 조회되지 않은 데이터에 대한 Filtering 사용 시 서버의 데이터 조회 기능과 연계하여 구현해야 함 Filter 기능 활성화
  37. 37. [ 37 ] Grids 확장 기능  그리드의 데이터 영역을 마우스 드래그로 선택하여 Ctrl+C, Ctrl+V 키를 사용하여 복사/붙여넣기 가능  Ct기+A 는 그리드의 데이터 영역 선택 가능  그리드에 Etna Selector Plugin 추가 시 활성화 Grid Selector 제약 사항  특별한 제약사항 없음
  38. 38. [ 38 ] Grids 확장 기능  그리드에서 마우스 오른쪽 버튼 클릭 시 제공되는 컨텍스트 메뉴 (모바일 기기에서는 손가락으로 길게 누름. long-term 이벤트 사용)  그리드에 Etna Selector Plugin 추가시 활성화  컨텐스트 메뉴 모양은 원형과 직사각형 두가지 형태 제공 Grid Selector Context Menu 제약 사항  엑셀 다운로드, Filtering 기능 이외의 추가적인 메뉴 필요 시 협의 필요 함 - row 선택, column 선택, 전체 선택, 선택 해제, 복사/붙여넣기 기본 제공
  39. 39. [ 39 ] Grids 확장 기능  그리드에 Etna Excel export plugin 추가시 기능 활성화 됨  범위 - 현재페이지 : 페이징 처리된 그리드의경우 현재페이지의 데이터만 다운로드 - 전체페이지 : 페이징 처리된 그리드에서 페이지와 상관없이 모든데이타 다운로드  렌더링 - 사용 : 그리드에서 코드성 데이터의 경우 코드 명을 다운로드 - 미사용 : 코드에 해당하는 값을 다운로드 Excel Download 제약 사항  공통 기능으로 서버에 부하를 주지 않도록 설계/구현됨  사용자 PC/브라우저(IE8) 성능에 따라 대용량 데이터 다운로드 성능 제약  일반적으로 대용량 데이터 건수는 협의 필요
  40. 40. [ 40 ] Grids 확장 기능  그리드에 Etna Excel Import plugin 추가시 기능 활성화 됨  공통 기능으로 개발자 별도 구현 불필요 그리드에 업로드 한 후 서버에 저장 하는 로직만 구현하면 됨  엑셀 업로드 시 업로드 대상이 되는 그리드의 컬럼들과 실제 엑셀 파일에 있는 컬럼들이 일치 하지 않을 경우 사용자가 임의로 그리드 컬럼과 엑셀파일 컬럼을 연결 시킬 수 있는 기능 제공 Excel Upload 제약 사항  Upload 시 대용량 데이터에 대한 제약 (10,000+ 은 협의 필요)  IE8 브라우저에서 성능 제약  업로드한 엑셀 파일의 컬럼 목록  그리드의 컬럼을 엑셀 파일의 컬럼과 연결 시킬 때 사용
  41. 41. [ 41 ] Grids 확장 기능  그리드에 많은 컬럼(100+)을 사용해야 하는 경우 브라우저 스크롤 성능에 문제  Etna Horizontal Buffered Scroll Plugin 추가시 많은 컬럼 사용 가능  연간 일별 계획/실적 그리드의 경우 400 여개의 컬럼 사용 Many colums 제약 사항  IE8 도 어느정도 성능을 보장하지만 IE 상위 버전 또는 크롬 브라우저 보다 성능상 제약 있음 250 개 컬럼 사용시 가로 스크롤
  42. 42. [ 42 ] Grids 확장 기능  트리 그리드에서 컬럼 별로 Filtering 사용 가능  별도 구현 없이 Etna Tree Finder Plugin 추가 시 기능 활성화 됨  검색 대상 컬럼 지정 가능 (검색 대상 컬럼은 자동으로 지정 됨)  검색어 입력 후 다음->다음 클릭 시 마다 해당 검색결과 위치로 이동 함 Tree Finder 제약 사항  트리 그리드에 모든 데이터가 조회된 경우에 사용 가능
  43. 43. [ 43 ] Form Field 기본 기능  Form Panel 에 plugin 추가 시 panel 내에 있는 입력 field 들의 clear 버튼이 활성화 됨  입력값이 있는 field 에 마우스 오버 시 clear 버튼이 활성화 됨  입력값을 간단히 삭제하는 용도로 사용 AutoClearButton Form Plugin 제약 사항  특별한 제약사항 없음
  44. 44. [ 44 ] Form Field 기본 기능  일반 Form Field 컴포넌트 처럼 TinyMCE editor 를 사용 할 수 있도록 함  HTML editor 로 사용  TinyMCE 에서 제공하는 기본 plugin 도 사용 가능 TinyMCE Editor 제약 사항  Architect 에서TinyMCE Plugin 들을 추가하기 위해서는 Process Config 에 직접 추가해야 함 TinyMCE 의 Plugins TinyMCE field
  45. 45. [ 45 ] Form Field 확장 기능  체크박스 기능 대체용으로 Toggle Button 사용  체크박스보다 사용자 시인성이 좋음  데이터 binding 가능 (value 속성 사용)  Button 에 보여지는 text 와 실제 value 를 각각 지정 가능 (onText, onValue, offText, offValue) Toggle Field 제약 사항  특별한 제약사항 없음
  46. 46. [ 46 ] Form Field 확장 기능  멀티 파일 첨부 가능  Drag&Drop 으로 파일 첨부 가능  섬네일 또는 목록 형태로 조회 가능  이미지 첨부의 경우 이미지 뷰어 기본 제공  Etna Attachment 컴포넌트 사용 Advanced File Uploads 제약 사항  Drag&Drop 기능은 HTML5 기능으로 HTML5 지원 브라우저에서만 동작 (IE8, IE9 는 미지원)
  47. 47. [ 47 ] Grid 확장 기능  수정 가능, 필수 입력, 수정된 항목에 대한 표현을 cell 단위로 background 사용 Cell Marker 제약 사항  특별한 제약사항 없음
  48. 48. [ 48 ] Grid 확장 기능 Cell Tips 제약 사항  특별한 제약사항 없음  수정 가능, 필수 입력, 수정된 항목에 대한 표현을 cell 단위로 표시

×