안녕하세요! SAPUI5 썸네일형 리스트형 [ SAPUI5 ] Routing and Navigation Routing과 Navigation은 페이지의 종속 관계 혹은 절대/상대 경로를 생성하는 데에 있어 굉장히 중요한 파트라고 생각하고 있다. [ manifest.json ]에서 Route와 Path 등을 활용해 사용자를 구분해 페이지의 이동을 달리한다든지, 상품의 상세 정보가 담긴 View로 이동할 때 해당 상품의 카테고리에 따라 다른 경로를 지정해주는 등을 수행할 수 있을 것이다. sap.m.Page "sap.m.Page Control이 Page로 사용될 수 있으며, Aggregation을 "Page"라고 부르고 있으며, 브외의 다른 Control도 사용이 가능하다." "대개 일반 모바일 어플리케이션은 몇 개의 Page로 구성돼 있으며 User가 세부사항 Page로 Navigation 하거나 다시 원래 .. 더보기 [ SAPUI5 ] Unit Test by using Qunit 오늘은 나타내고자 하는 기능들이 잘 구현되는가에 대해 다양한 방법과 절차로 테스트 하는 것에는 어떤 것이 있는지 살펴보려고 한다. 즉 어플리케이션이 가지는 다양한 측면을 테스트 하는 방법에 관해 학습할 것이다. 더 나아가, SPUI5가 다룰 수 있는 영역 내의 테스트가 무엇인지 생각하며 스터디를 진행할 것이다. QUnit "QUnit은 JavaScript 단위 및 통합 테스트 프레임워크이다." "일반 JavaScript Code를 테스트할 수 있으며 바로 사용이 가능한 비동기 테스트를 지원한다." Mock and Stub "Mock은 기대치를 설정할 수 있는 Object로, 예상한 Action이 실제로 발생했는지 검증도 함께 진행한다." "Stub은 테스트 대상 Code에 전달하기 위해 사용하는 Obje.. 더보기 [ SAPUI5 ] OData Model SAP에서 UI를 구현하기 위해서 가장 중요한 것 중 하나는 바로 OData Model이다. 이미 공식 홈페이지의 도큐멘테이션이나 타 사이트의 예제를 보며 스터디해본 바가 있지만, 수박 겉핥기식으로 했기 때문에 이번 기회에 제대로 알고 가면 좋을 것 같다. OData Model "OData Model은 Data API를 생성 및 사용하기 위한 산업 표준 프로토콜이다." 또한 "HTTP와 같은 주요 프로토콜 및 XML, JSON과 같은 개방형 표준을 기반으로 하고 있으며, REST 원칙에 따른 Data 서비스 제공을 가능하게 해준다." 뿐만 아니라, "특정 규칙에 따라 구성된 URL을 사용하여 데이터를 처리하며, Collection, Entry, Property와 같은 Resource를 표현하는 데이터 형.. 더보기 [ SAPUI5 ] Aggregation Binding and Expression Binding Data를 Binding할 때 하나의 데이터 값만 화면에서 보여줄 수 있지만, 테이블 열에 여러 가지의 속성을 설정해두고, 그 속성에 맞는 행 다수의 데이터 정보를 보여주고 싶을 때는 배열함수를 사용하는 등 List화 하여 UI를 표현할 수 있다. Aggregation Binding "Aggregation Binding은 Table, List 또는 풀다운 Control과 같은 Aggregation을 지원하는 UI Control에 Data set를 Binding하는 데에 사용한다." "Control의 bindAggregation(sPath, oTemplate) 메서드를 사용해 Collection을 Binding한다. "UI 템플릿은 하나 이상의 다른 UI Control로 구성되고, 반복된 List 항목으로.. 더보기 [ SAPUI5 ] CSS and XML Fragment 이번에는 CSS의 여백을 설정하는 방법에 대해서 탐구해보고자 한다. 추후에 거래처에서 원하는 레이아웃의 틀이 있을 것이고, 각 레이아웃 구역에 어떤 정보를 보여주는 위치를 커스터마이징 하기 위해서는 CSS 설정이 중요다고 할 수 있겠다. CSS "전체 단면, 양면 및 응답형 여백을 추가하거나 여백을 제거하는 사전 정의된 CSS Class List를 제공한다." "사전 정의된 모든 여백의 CSS Class는 오른쪽에서 왼쪽으로 쓰는(Right To Left) 언어를 지원한다." "컨텐트 안쪽 여백을 (반응형으로) 추가하거나 제거하는 CSS Class를 사용할 수 있게 된다." 이에 따라 "모든 레이아웃에서 Control 주변과 Container 내부 간격의 일관성을 부여한다." sapUiTinyMargin.. 더보기 [ SAPUI5 ] / Component 이번 파트에서는 Fiori에서 SAPUI5 애플리케이션이 어떻게 작동하게 되는 지에 대해 학습하는 시간을 가질 것이다. 기본적으로 화면에서 View를 표현하기 위해서는 Controller뿐만 아니라, 데이터를 저장하거나 가공하기 위해 존재하는 Model로 데이터 정보를 전달하기 위해 필요한 Component와 App Explorer 등의 기능과 역할에 대해 알아가보고자 한다. Component "Component는 [ Compoenet.js ] 파일에서 구현된다." "App Explorer는 [ manifest.json ] 파일에서 설정한다." "[ manifest.json ] 파일에는 모든 전역 어플리케이션 설정과 매개변수가 내재돼 있는 JSON 형식의 Component Object가 Contenet로.. 더보기 [ SAPUI5 ] / Data Binding SAPUI5에 대한 이해도를 제고하기 위하여 UI에 관한 데이터를 구성하고 화면에 이를 표현하기 위해 필요한 핵심 용어들과 구현 절차에 대해 아카이빙을 시작하고자 한다. SAP 공식 홈페이지에서 제공하는 도큐먼테이션뿐만 아니라, 인터넷에서 발췌 및 재사용 가능한 정보들을 깔끔하게 정리해 해당 지식을 적절히 활용할 수 있을 것 같다. Debuging "브라우저의 개발 툴을 사용해 JavaScript 디버깅 중단점을 설정할 수 있다." "Internet Explorer에서는 스크립트디버깅을 명시적으로 활성해야 한다." Data Binding "Model은 Data를 적재하고 Data Source에서 Data를 가져와 Setting 및 Update할 수 있는 메서드를 제공한다." 즉, 데이터에 대한 변수를 선.. 더보기 [ SAPUI5 ] JSONModel Table Binding in SAPUI5 직원 정보 테이블 생성하기 SAP 공식 홈페이지에 있는 UI5 관련 도큐먼테이션을 참고하여 개인 스터디를 진행하는 도중 문득 한 가지 생각이 스쳐지나 갔다. 그 생각인 즉슨, 무작정 공식 문서를 따라하는 거보다는 가이드라인을 참고하여 나만의 예제들을 만들면서 기능을 구현해 보자는 것이다. 물론 아직까지 내가 할 수 있는 영역은 아주 협소할 것임을 알기에, 결국에는 여러 예시들을 종합해서 모방하는 것에 그칠 수도 있다. 하지만 view와 controller 간의 연결 과정과 data를 binding하는 절차에 대한 이해도가 현저히 낮다고 생각이 들기 때문에 그 순서를 익히는 데에 중점을 두고자 한다. 테이블의 기본 틀 만들기 직원 정보를 화면에서 보여주기 위해서는 테이블을 만들어 해당 정보들을 담아내는 아.. 더보기 이전 1 2 3 4 5 ··· 9 다음
