본문 바로가기

SAP 사용자들의 오픈 커뮤니티

글을 작성할 게시판을 선택해주세요.

공지사항

공지 [Q&A] 9월 KSUG 패널 토크에서 남긴 질문에 대한 답변을 확인해 보세요! 작성일 2021-09-16
공지 [리뉴얼 안내] 새로운 KSUG의 모습을 만나 보세요! 작성일 2021-09-14

최신글

40

튜토리얼

SAP UI5 Week 3 - Unit 3. 퀵필터 추가하기 Week 3 - Unit 3. 퀵필터 추가하기 목차필터 바 시각화를 위한 뷰 업데이트 컨트롤러에 필터 추가하기 (선택사항) 필터에 카운트 추가하기 1.필터 바 시각화를 위한 뷰 업데이트 특정 가격대의 제품을 쉽게 찾을 수 있도록 작업 목록 표에 빠른 필터를 추가하겠습니다. 사용자는 필터 탭을 눌러 제품이 저렴한지, 적당한지, 비싼지에 따라 제품을 표시할 수 있습니다. 표에 따라 업데이트되고 기준에 맞는 제품만 표시됩니다. webapp/view/Worklist.view.xml … <semantic:FullscreenPage id="page" navButtonPress="onNavBack" showNavButton="true" title="{i18n>worklistViewTitle}"> <semantic:content> <IconTabBar id="iconTabBar" select="onQuickFilter" expandable="false" applyContentPadding="false"> <items> <IconTabFilter key="all" showAll="true" count="{i18n>worklistFilterProductsAllCount}" text="{i18n>worklistFilterProductsAll}"/> <IconTabSeparator/> <IconTabFilter key="cheap" icon="sap-icon://waiver" iconColor="Positive" text="{i18n>worklistFilterCheap}"/> <IconTabFilter key="moderate" icon="sap-icon://loan" iconColor="Critical" text="{i18n>worklistFilterModerate}"/> <IconTabFilter key="expensive" icon="sap-icon://money-bills" iconColor="Negative" text="{i18n>worklistFilterExpensive}"/> </items> <content>  </content> </IconTabBar> </semantic:content> 먼저 보기를 업데이트하고, 테이블 바로 앞에 있는 sap.m.SemanticPage 컨트롤의 콘텐츠에 빠른 필터링을 위한 새 UI를 추가합니다. IconTabBar의 내용에 기존 표를 넣습니다. 아이콘 탭 표시줄에는 다음 필터 옵션 각각에 대한 sap.m.IconTabFilter가 포함되어 있습니다. 필터 옵션: All Products 이 탭에는 데이터 서비스에서 반환한 전체 제품 수가 표시됩니다. 이 탭은 show All 속성을 사용하여 큰 숫자만 표시하고 아이콘은 표시하지 않습니다.Cheap 이 탭에는 특정 가격대 이하의 모든 제품이 표시됩니다. 아이콘 글꼴에서 일치하는 아이콘을 선택하고 아이콘 색상을 시멘틱 포지티브(Semantic Positive) 상태로 설정하여 녹색으로 표시합니다.Moderate 이 탭에는 아이콘이 주황색으로 표시되는 경고 상태의 적당한 가격의 제품이 표시됩니다.Expensive 이 탭에는 가격이 높은 제품이 표시됩니다. webapp/view/Worklist.view.xml … <Table id=”table” class="sapUiResponsiveMargin" …> IconTabBar와 테이블 사이의 간격을 제거하고 UI를 더 보기 좋게 하려면 테이블에 sapUiResponsiveMargin class를 추가해주어야 합니다. webapp/i18n/i18n.properties … #XTIT: The title of the products quick filter worklistFilterProductsAll=Products #XTIT: The count for the all products quick filter worklistFilterProductsAllCount=All #XTIT: The title of the cheap products filter worklistFilterCheap=Cheap #XTIT: The title of the moderate products filter worklistFilterModerate=Moderate #XTIT: The title of the expensive products filter worklistFilterExpensive=Expensive #~~~ Object View ~~~~~~~~~~~~~~~~~~~~~~~~~~ 리소스 번들 파일에 새 변환 텍스트를 추가합니다. 2.컨트롤러에 필터 추가하기 webapp/controller/Worklist.controller.jsreturn BaseController.extend("opensap.manageproducts.controller.Worklist", { formatter: formatter, _mFilters: { cheap: [new sap.ui.model.Filter("Price", "LT", 100)], moderate: [new sap.ui.model.Filter("Price", "BT", 100, 1000)], expensive: [new sap.ui.model.Filter("Price", "GT", 1000)] }, /* =========================================================== */ /* lifecycle methods */ /* =========================================================== */ /** * Called when the worklist controller is instantiated. * @public */ onInit : function () { 각 탭에 대한 필터가 포함된 객체 _mFilters를 만듭니다. 우리는 테이블을 필터링하는 데 필터를 사용할 것입니다. _mFilters의 속성은 위에서 Worklist.view.xml 파일에서 정의한 IconTabFilter 컨트롤의 키와 관련이 있습니다. 이렇게 하면 해당 탭의 키를 기반으로 주어진 탭에 대한 필터에 쉽게 액세스할 수 있습니다. 단순 필터를 만들려면 필터 생성자의 첫 번째 매개 변수(예: "Price"), 두 번째 인수로는 필터 연산자(예: "GT") 및 세 번째 인수로는 비교할 값(예: 1000)이 필요합니다. 위의 보기 부분에 설명된 대로 필터 연산자가 서로 다른 세 탭에 대해 모두 이러한 필터를 만듭니다. webapp/controller/Worklist.controller.js/* =========================================================== */ /* event handlers */ /* =========================================================== */ /** * Event handler when a filter tab gets pressed * @param {sap.ui.base.Event} oEvent the filter tab event * @public */ onQuickFilter: function(oEvent) { var sKey = oEvent.getParameter("key"), oFilter = this._mFilters[sKey], oTable = this.byId("table"), oBinding = oTable.getBinding("items"); if (oFilter) { oBinding.filter(oFilter); } else { oBinding.filter([]); } }, 다음으로 아이콘 탭 막대의 선택 이벤트에 대한 핸들러를 구현합니다. 이 이벤트 핸들러에서는 테이블의 항목 집계에 대한 바인딩에 대한 참조를 얻어 oBinding 변수에 저장합니다. 그런 다음 이벤트 개체에서 매개 변수 키를 읽어 어떤 탭이 선택되었는지 확인합니다. 이 키는 선택한 탭에 대한 올바른 필터를 가져오는 데 사용됩니다. 다음으로 oBinding에서 필터 메서드를 호출하여 선택한 탭의 올바른 필터를 전달하면 됩니다. 사용자가 선택한 키와 일치하는 필터가 없는 경우 첫 번째 탭을 표시하고 모든 필터를 지워야 합니다. 이를 위해 빈 배열을 필터링에 전달합니다. 필터는 항상 바인딩 수준에서 어레이로 적용되므로 데이터를 관리할 필요가 없으며, SAP UI5의 데이터 바인딩 기능이 이를 자동으로 수행합니다. 이제 앱을 다시 실행하고 테이블 위에 있는 필터 아이콘을 클릭합니다. 필터 막대의 선택에 따라 제품을 필터링해야 하며 개수는 표시되는 항목 수와 일치해야 합니다. 3.(선택사항) 필터에 카운트 추가하기 원하는 경우 각 필터의 개수를 추가하여 이 과정을 더 보강할 수 있습니다. 다음 필터로 서비스를 쿼리하여 기준에 맞는 제품의 양을 확인할 수 있습니다. webapp/view/Worklist.view.xml … <IconTabBar id="iconTabBar" select="onQuickFilter" expandable="false" applyContentPadding="false"> <items> <IconTabFilter key="all" showAll="true" count="{i18n>WorklistFilterProductsAllCount}" text="{i18n>WorklistFilterProductsAll}"/> <IconTabSeparator/> <IconTabFilter key="cheap" icon="sap-icon://waiver" iconColor="Positive" count="{worklistView>/cheap}" text="{i18n>WorklistFilterCheap}"/> <IconTabFilter key="moderate" icon="sap-icon://loan" iconColor="Critical" count="{worklistView>/moderate}" text="{i18n>Moderate}"/> <IconTabFilter key="expensive" icon="sap-icon://money-bills" iconColor="Negative" count="{worklistView>/expensive}" text="{i18n>WorklistFilterExpensive}"/> </items> 이제 각 탭의 카운트 속성이 로컬 뷰 모델에 바인딩되며 이 단계 후반부에서 컨트롤러에서 번호가 업데이트됩니다. webapp/controller/Worklist.controller.js … /** * Called when the worklist controller is instantiated. * @public */ onInit : function () { … // Model used to manipulate control states oViewModel = new JSONModel({ … tableBusyDelay : 0, cheap: 0, moderate: 0, expensive: 0 }); this.setModel(oViewModel, "worklistView"); … 카운터의 속성을 검사 목록 컨트롤러의 로컬 뷰 모델에 추가합니다. 다음으로 세 값을 각각 0으로 초기화합니다. 보기의 카운터가 이러한 속성에 바인딩되어 있습니다. webapp/controller/Worklist.controller.js onUpdateFinished : function (oEvent) { // update the worklist's object counter after the table update var sTitle, oTable = oEvent.getSource(), oModel = this.getModel(), oViewModel = this.getModel("worklistView"), iTotalItems = oEvent.getParameter("total"); // only update the counter if the length is final and // the table is not empty if (iTotalItems && oTable.getBinding("items").isLengthFinal()) { sTitle = this.getResourceBundle().getText("…", [iTotalItems]); // iterate the filters and request the count from the server jQuery.each(this._mFilters, function (sFilterKey, oFilter) { oModel.read("/ProductSet/$count", { filters: oFilter, success: function (oData) { var sPath = "/" + sFilterKey; oViewModel.setProperty(sPath, oData); } }); }); } else { sTitle = this.getResourceBundle().getText("…"); } this.getModel("worklistView").setProperty("/…", sTitle); }, … 모델에서 데이터를 가져올 때 호출되는 onUpdateFinished 함수에서는 해당 필터로 모델에서 읽기 작업을 트리거하여 모든 제품의 카운트를 가져옵니다. 필터 개체를 루프하기 위해 jQuery의 각 함수를 사용합니다. _mFilters의 각 속성에 대해 키와 필터 개체를 매개 변수로 가져오는 콜백 함수를 호출합니다. 필터는 데이터 바인딩 수준에서 각 탭에 대한 조건을 정의하는 SAP UI5의 도우미 개체이며 우리는 onInit 함수에 이미 필터를 생성했습니다.

작성일 2021-09-15 조회 36 좋아요 0 댓글 0
40

튜토리얼

SAP UI5 Week 3 - Unit 2. 반응형 테이블 정의하기 Week 3 - Unit 2. 반응형 테이블 정의하기 목차반응형 테이블 동작 알아보기 제품 테이블 및 헤더 업데이트 공급업체를 위한 A 컬럼 추가 공급업체 웹 주소에 대한 컬럼 추가 Chrome으로 반응성 테스트 SAP Web IDE를 통한 반응성 테스트 1.반응형 테이블 동작 알아보기 먼저 제품 이름과 제품 공급자에 대한 추가 정보를 포함하여 제품 표시를 개선합니다. Chrome 및 Web IDE에서 이 환경을 시뮬레이션하며 모바일화면에서의 동작을 테스트합니다. 2. 제품 테이블 및 헤더 업데이트 먼저 제품과 제품 이름을 올바르게 표시하기 위해 생성된 코드를 개선하여 아래의 내용에 대한 부분들을 추가할 것입니다. Worklist View • 표 제목 업데이트 • 첫 번째 열 제목 업데이트 • 제품 이름 추가 표시 Object View페이지 제목 업데이트이름을 속성으로 표시 webapp/view/Worklist.view.xml<Table …> … <items> <ColumnListItem type="Navigation" press="onPress"> <cells> <ObjectIdentifier title="{ProductID}" text="{Name}"/> <ObjectNumber number="{ path: 'Price', formatter: '.formatter.numberUnit' }" unit="{CurrencyCode}"/> </cells> </ColumnListItem> </items> </Table> 가장 먼저 테이블의 행을 나타내는 ColumnListItem을 찾습니다. 셀 집계에는 서로 다른 열에 대한 내용을 표시하는 컨트롤이 포함되어 있습니다. 제품 이름에 바인딩된 텍스트를 사용하여 첫 번째 컨트롤(ObjectIdentifer)을 확장합니다. webapp/view/Object.view.xml<ObjectHeader id="objectHeader" title="{ProductID}" number="{ path: 'Price', formatter: '.formatter.numberUnit' }" numberUnit="{CurrencyCode}"> <attributes> <ObjectAttribute text="{Name}"/> </attributes> </ObjectHeader> ObjectAttribute 컨트롤을 ObjectHeader의 특성 집계에 추가하고 Name 속성에 바인딩합니다. webapp/i18n/ i18n.properties… #~~~ Worklist View ~~~~~~~~~~~~~~~~~~~~~~~~~~ #XTIT: Table view title worklistViewTitle=Manage Products #XTIT: Table view title worklistTableTitle=Products #XTOL: Tooltip for the search field worklistSearchTooltip=Enter a product name or a part of it. #XBLI: text for a table with no data with filter or search worklistNoDataWithSearchText=No matching products found #XTIT: Table view title with placeholder for the number of items worklistTableTitleCount=Products ({0}) #XTIT: The title of the column containing the ProductID of ProductSet tableNameColumnTitle=Product #XTIT: The title of the column containing the Price and the unit of measure tableUnitNumberColumnTitle=Price #XBLI: text for a table with no data tableNoDataText=No products are currently available … #~~~ Object View ~~~~~~~~~~~~~~~~~~~~~~~~~~ #XTIT: Object view title objectTitle=Product … #~~~ Not Found View ~~~~~~~~~~~~~~~~~~~~~~~ #YMSG: The ProductSet not found text is displayed when there is no ProductSet with this id noObjectFoundText=This Product is not available #YMSG: The ProductSet not available text is displayed when there is no data when starting the app noObjectsAvailableText=No Products are currently available 서비스 메타데이터를 기반으로 템플릿에서 생성된 기존 i18n 속성을 읽기 쉬운 값으로 업데이트합니다. 3. 공급업체를 위한 A 컬럼 추가 제품의 공급업체를 보여주는 새로운 컬럼을 추가합니다. webapp/view/Worklist.view.xml<Table … > … <columns> <Column id="nameColumn"> <Text text="{i18n>tableNameColumnTitle}" id="…"/> </Column> <Column id="supplierNameColumn" demandPopin="true" minScreenWidth="Tablet"> <Text text="{i18n>tableSupplierColumnTitle}"/> </Column> <Column id="unitNumberColumn" hAlign="End"> <Text text="{i18n>tableUnitNumberColumnTitle}" id="…"/> </Column> </columns> <items> <ColumnListItem type="Navigation" press="onPress"> <cells> <ObjectIdentifier title="{ProductID}" text="{Name}"/> <Text text="{SupplierName}"/> <ObjectNumber number="{ path: 'Price', formatter: '.formatter.numberUnit' }" unit="{CurrencyCode}"/> </cells> </ColumnListItem> </items> </Table> 기존 두 컬럼 사이에 새 컬럼을 추가합니다. 컬럼 컨트롤에는 컬럼 헤더를 렌더링하는 데 사용되는 텍스트 컨트롤에 대한 집합들이 있습니다. minScreenWidth를 태블릿으로 설정하면 열이 태블릿 또는 더 큰 화면에만 표시된다는 것을 나타냅니다. demandPopin은 컬럼이 표시되지 않을 경우 셀을 제자리에 표시합니다. 기존 두 셀 사이에 새 텍스트 컨트롤을 추가하고 공급업체 이름에 바인딩합니다. webapp/i18n/ i18n.properties… #~~~ Worklist View ~~~~~~~~~~~~~~~~~~~~~~~~~~ … #XTIT: The title of the column containing the ProductID of ProductSet tableNameColumnTitle=Product #XTIT: The title of the column containing the product's supplier name tableSupplierColumnTitle=Supplier … 공급업체 컬럼 제목에 대한 새 i18n 속성을 추가합니다. 4.공급업체 웹 주소에 대한 컬럼 추가 이제 공급업체의 웹 주소를 링크로 표시하는 두 번째 컬럼을 추가합니다. webapp/view/Worklist.view.xml<Table … > … <columns> <Column id="nameColumn"> <Text text="{i18n>tableNameColumnTitle}" id="…"/> </Column> <Column id="supplierNameColumn" demandPopin="true" minScreenWidth="Small"> <Text text="{i18n>tableSupplierColumnTitle}"/> </Column> <Column id="webAddressColumn" demandPopin="false" minScreenWidth="Tablet"> <Text text="{i18n>tableSupplierWebAddressColumnTitle}"/> </Column> <Column id="unitNumberColumn" hAlign="End"> <Text text="{i18n>tableUnitNumberColumnTitle}" id="…"/> </Column> </columns> <items> <ColumnListItem type="Navigation" press="onPress"> <cells> <ObjectIdentifier title="{ProductID}" text="{Name}"/> <Text text="{SupplierName}"/> <Link text="{ToSupplier/WebAddress}" href="{ToSupplier/WebAddress}" target="_blank"/> <ObjectNumber number="{ path: 'Price', formatter: '.formatter.numberUnit' }" unit="{CurrencyCode}"/> </cells> </ColumnListItem> </items> </Table> 테이블의 컬럼 집계에 컬럼 추가하기 ObjectListItem의 셀 집계에 링크 컨트롤을 추가합니다. 텍스트와 href를 ToSupplier/WebAddress 경로에 바인딩합니다. ToSupplier/ 접두사는 OData 메타 모델에서 다른 객체로 이동하는 것을 나타냅니다. <Table id="table" width="auto" class="sapUiResponsiveMargin" items="{ path: '/ProductSet', sorter: { path: 'ProductID', descending: false }, parameters: { expand: 'ToSupplier' } }" noDataText="{worklistView>/tableNoDataText}" … > ToSupplier 탐색 속성에 대한 확장 매개 변수를 사용하여 테이블의 항목 집계를 확장합니다. 이를 통해 공급업체 데이터는 제품에 대한 첫 번째 서비스 요청에 이미 포함되며 추가 요청은 필요하지 않습니다. webapp/i18n/ i18n.properties… #~~~ Worklist View ~~~~~~~~~~~~~~~~~~~~~~~~~~ … #XTIT: The title of the column containing the ProductID of ProductSet tableNameColumnTitle=Product #XTIT: The title of the column containing the product's supplier name tableSupplierColumnTitle=Supplier #XTIT: The title of the column containing the product's supplier web address tableSupplierWebAddressColumnTitle=Web Address … 5. Chrome으로 반응성 테스트 sap.m.Table 의 반응성은 브라우저 창의 폭을 변경하여 가장 쉽게 테스트할 수 있습니다. 1.Chrome 브라우저에서 응용 프로그램을 실행하고 창을 최대화합니다. 2. 모든 열이 표시되고 UI가 특정 너비 이상으로 커지지 않는지 확인합니다. 나머지 공간은 더 어두운 배경색으로 채워져 있습니다. 3. 브라우저 창의 폭을 점진적으로 줄입니다. 4. 특정 임계값에서 2개의 열이 사라지는지 관찰합니다. 공급자는 이제 "popin"으로 표시됩니다. 웹 주소는 숨겨지게 됩니다. 5. Chrome 브라우저에서 응용 프로그램을 실행하고 F12 키를 눌러 개발자 도구를 엽니다. 6. 도구 모음의 왼쪽 상단 모서리에 있는 작은 아이콘을 눌러 장치 모드를 전환합니다. 7. 기기를 Apple iPhone 6로 설정합니다. 8. 공급업체 열이 각 행에 "팝핀"으로 표시되는지 확인합니다. 9. 웹 주소 열이 숨겨져 있는지 확인합니다. 10. 응용프로그램의 브라우저 탭을 새로 고칩니다. 11. 장치 모델 전환 아이콘을 다시 눌러 장치 모드를 종료합니다. 6.SAP Web IDE를 통한 반응성 테스트 이번 단계에서는 다양한 화면 해상도와 장치에서의 상황을 시뮬레이션할 수 있는 SAP Web IDE의 테스트 툴을 사용하여 애플리케이션의 반응성을 테스트할 것입니다. 1.Manage Products 폴더를 선택합니다. 2. 실행 메뉴를 엽니다. 3. 구성 실행을 선택합니다. 4. 구성 앱을 선택합니다. 5. 일반 탭에서 미리보기 모드를 프레임 포함으로 설정합니다. 7. 저장 후 실행 버튼을 누릅니다. 8. 페이지 상단에 "작은" 화면 크기가 선택되어 있는지 확인합니다. 9. 공급업체 열이 각 행에 "팝핀"으로 표시되는지 확인합니다. 10. 웹 주소 열이 숨겨져 있는지 확인합니다. 선택 사항: 오른쪽 상단 모서리에 있는 QR-Code 아이콘을 클릭합니다. 스마트폰으로 표시된 QR 코드를 스캔하고 웹 브라우저로 응용 프로그램을 실행합니다.

작성일 2021-09-15 조회 7 좋아요 0 댓글 0
40

튜토리얼

SAP UI5 Week 3 - Unit 1. 템플릿 사용하여 앱 개발하기 Week 3 - Unit 1. 템플릿 사용하여 앱 개발하기 목차SAP Web IDE에서 ES5 Destination 설정하기 Worklist Template사용하여 새 프로젝트 생성하기 Workspace에서 App 실행하기 (선택사항) 모의 데이터 구성하기 HANA Cloud Platform에서 App실행하기 1. SAP Web IDE에서 ES5 Destination 설정하기 이 유닛의 첫 번째 단계에서는 SAP Web IDE의 기능을 사용하여 ES5 시스템에 대한 Destination을 설정합니다. 이 과정은 다음 단계에서의 템플릿 생성에서 필요합니다. 1.SAP HANA Cloud Platform Cockpit을 엽니다. https://account.hanatrial.ondemand.com/cockpit 2. 좌측 네비게이션 메뉴에서 Destinations 을 클릭합니다. 3. ES5 에 대한 destination을 생성할 것입니다. 4. Edit button을 클릭하세요. 5. New Property 버튼을 이용하여 3개의 속성을 추가하세요 WebIDEEnabled = trueWebIDESystem = ES5WebIDEUsage = odata_gen 6. Destination 설정을 저장하세요 2. Worklist Template 사용하여 새 프로젝트 생성하기 이 단계에서는 "SAP Fiori Worklist Application" 템플릿을 사용하여 ES5 OData 서비스에 이미 바인딩된 애플리케이션을 생성합니다. 1. SAP Web IDE가 이미 열려 있는 경우 Chrome 브라우저에서 새로 고침 버튼을 눌러 다시 시작해야 합니다. 2. SAP Web IDE의 파일 메뉴 열기 3. New 선택 4. Project from Template 선택 템플릿 선택 단계에서 확인사항:Features가 필터로 선택되었는지 확인합니다. SAP UI5 Fiori 검사 목록 응용 프로그램을 선택합니다. 5. 최신 SAP UI5 버전이 자동으로 선택되는지 확인합니다. 6. SAP UI5 설명서에 대한 링크를 엽니다. 7. SAP UI5 데모 키트의 템플릿 설명서가 열립니다. 여기서 나중에 템플릿 구현에 대한 자세한 내용을 확인할 수 있습니다. 8. Next 버튼을 눌러 다음 단계로 이동하세요. 9. Project Name 칸에 ManageProducts를 입력하고 Next 버튼을 눌러 다음 단계로 이동하세요 10. Source-Service URL을 선택하세요. 11. Service Information - ES5를 선택하세요. 12. sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ 이 URL을 입력하세요. 13. Play Icon을 누르고 세부 정보 섹션에 객체 유형 목록이 표시되는지 확인합니다. Next를 눌러 다음 단계로 이동하세요. 14. Application 설정을 진행하세요. 설정 내용은 다음과 같습니다. Type = Standalone AppTitle = Manage ProductsNamespace = manageproducts 15. Data Binding을 진행하세요. 설정 내용은 다음과 같습니다. Object Collection = ProductSetObject Collection ID = ProductIDObject Title = ProductIDObject Numeric Attribute = PriceObject Unit of Measure=Currency Code 16. Finish 버튼을 눌러 마법사를 끝냅니다. 17. 새 폴더 ManageProducts가 Workspace에 잘 추가 되었는지 확인하세요. 확인할 파일과 폴더의 목록은 다음 사진을 참고하세요 3. Workspace에서 App 실행하기 이 단계에서는 Web IDE workspace에서 생성했던 앱을 실행시켜 보겠습니다. 이 과정에는 두가지 방법이 있습니다. ES5 시스템의 실제 OData 서비스에 대해 앱을 실행합니다. SAP UI5 모의 서버로 앱을 실행합니다. 실제 Odata서비스로 실행하기 1.ManageProducts폴더를 선택하세요. 2. 메뉴에서 Run 탭을 선택하고 App을 통해 application을 실행시킬 수 있도록 하세요. 3. 이제 응용 프로그램이 새 브라우저 탭에서 열립니다. 4. 검색 필드를 누르고 검색하고 싶은 숫자(예: "20")를 입력합니다. 5. 키보드에서 Enter 키를 누릅니다. 6. 제품 목록이 필터링되었는지 확인합니다. 7. 테이블 행을 눌러 제품 세부 정보로 이동합니다. 8. 지금까지 제품의 기본 데이터만 표시되고 있는지 확인합니다. SAP UI5 모의 서버로 앱 실행하기(선택 사항) Manage Products 폴더를 선택합니다. 실행 메뉴를 열고 앱(Mock 서버) 항목을 선택하여 서버에서 데이터를 읽지 않고 응용 프로그램을 실행합니다 3. 앱이 자동 생성된 모의 데이터로 채워지는지 관찰합니다. 4. (선택사항) 모의 데이터 구성하기 로컬 모의 데이터로 앱을 실행하려면 메타데이터를 업데이트하고 모의 JSON 데이터를 앱 프로젝트에 배치해야 합니다. 이 파일은 앱 시작 시 모의 서버에서 로드됩니다. webapp/localService/metadata.xml<EntityType Name="Product" sap:content-version="1"> <NavigationProperty Name="ToSalesOrderLineItems" …/> <NavigationProperty Name="ToSupplier" Relationship="/IWBEP/GWSAMPLE_BASIC.Assoc_Products_BusinessPartner" FromRole="FromRole_Assoc_Products_BusinessPartner" ToRole="ToRole_Assoc_Products_BusinessPartner"/> </EntityType> … <Association Name="Assoc_BusinessPartner_Products" sap:content-version="1">…</Association> <Association Name="Assoc_Products_BusinessPartner" sap:content-version="1"> <End Type="/IWBEP/GWSAMPLE_BASIC.BusinessPartner" Multiplicity="1" Role="FromRole_Assoc_BusinessPartner_Products"/> <End Type="/IWBEP/GWSAMPLE_BASIC.Product" Multiplicity="*" Role="ToRole_Assoc_BusinessPartner_Products"/> <ReferentialConstraint> <Principal Role="FromRole_Assoc_Products_BusinessPartner"> <PropertyRef Name="SupplierID"/> </Principal> <Dependent Role="ToRole_Assoc_Products_BusinessPartner"> <PropertyRef Name="BusinessPartnerID"/> </Dependent> </ReferentialConstraint> </Association> … <EntityContainer Name="/IWBEP/GWSAMPLE_BASIC_Entities" … > … <AssociationSet Name="Assoc_BusinessPartner_Products_AssocSet" … >…</AssociationSet> <AssociationSet Name="Assoc_Products_BusinessPartner_AssocSet" Association="/IWBEP/GWSAMPLE_BASIC.Assoc_Products_BusinessPartner" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:content-version="1"> <End EntitySet="ProductSet" Role="FromRole_Assoc_Products_BusinessPartner"/> <End EntitySet="BusinessPartnerSet" Role="ToRole_Assoc_Products_BusinessPartner"/> </AssociationSet> … </EntityContainer> … 모의 서버는 양방향 연결을 지원하지 않습니다. 모의 서버에 대한 제품과 공급업체 엔티티 간의 연결을 설정하려면 메타데이터에 새 Association and Association Set를 추가하고 제품에서 공급업체로 NavigationPropert를 업데이트해야 합니다. 엔티티에서 Product(제품)을 입력하여 새 연결 Associate_Products_BusinessPartner를 사용하도록 탐색 속성을 수정합니다. 위에서 지정한 대로 메타데이터에 새 연결을 추가합니다. Entity Container 섹션에서 새 연결 집합을 추가하여 구성을 완료합니다. 1.SAP Web IDE에서 파일 > git > clone repository로 이동하고 configuration dialog에 다음 URL만 입력합니다. https://github.com/SAP/openSAP-ui5-course.git 참고 사항: 대화상자의 다른 모든 필드를 비워 둡니다. 이 Git 리포지토리에 대해서는 인증이 필요하지 않습니다. 2. 리포지토리 경로가 로컬 워크스페이스에 추가됩니다. 3. 루트 폴더 아래에 있는 폴더에서 모의 데이터를 선택합니다. 4. 폴더를 마우스 오른쪽 버튼으로 클릭하고 복사를 선택합니다. 5. 앱 프로젝트 내에서 webapp/localService 폴더를 선택합니다. 6. 폴더를 마우스 오른쪽 버튼으로 클릭하고 붙여넣기를 선택합니다. 7. 모의 데이터로 앱을 실행합니다. 실행 메뉴를 열고 앱(Mock 서버)을 선택합니다. 또는 앱 프로젝트에서 webapp/test/mockServer.html 파일을 실행합니다. 8. 앱이 JSON 파일의 모의 데이터로 채워지는지 확인합니다. 5. HANA Cloud Platform에서 App실행하기 1.Manage Products 폴더를 선택합니다. 2. Manage Products 폴더에서 마우스 오른쪽 버튼을 누릅니다. 3. Deploy(배포)를 선택합니다. 4. SAP HANA 클라우드 플랫폼에 배포를 선택합니다. 5. SAP Hana Cloud Platform 개발자 사용자 ID 및 암호를 입력하고 로그인 버튼을 누릅니다. 6. Deploy 버튼을 누르면 잠시 후 성공을 알리는 대화상자가 열립니다. 7. 응용 프로그램의 Open the active version of the application 링크를 누릅니다. 8. 앱이 새 브라우저 탭에서 열리는지 확인합니다. 9. 접근하기 쉽도록 크롬 브라우저에 앱 URL을 즐겨찾기에 추가합니다. 앱의 URL이 유실된 경우 다음과 같이 하십시오. HCP Cockpit 열기HTML5 응용 프로그램을 선택합니다.manageproducts를 선택합니다. 10. 응용 프로그램 URL을 누릅니다. 11. 웹 IDE의 앱 폴더에 dist 폴더가 추가되었는지 확인합니다. 참고 사항: SAP Web IDE는 SAP Hana 클라우드 플랫폼에 구현되는 성능 최적화된 애플리케이션 버전을 자동으로 생성합니다. 이 폴더의 파일은 수정하지 말고 웹 앱 폴더의 원래 파일에서 작업하십시오. 앱 재배포하기: 1. Manage Products 폴더에서 마우스 오른쪽 버튼을 누릅니다. 2. [Deploy]를 선택합니다. 3. SAP HANA 클라우드 플랫폼에 배포를 선택합니다. 앱을 한 번 더 배포할 때 새 버전이 생성되고 기본적으로 활성화되는지 확인합니다.

작성일 2021-09-15 조회 13 좋아요 0 댓글 0