SYNC (17) 썸네일형 리스트형 [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step10(Descriptor for Applications) 안녕하세요[SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step10(Descriptor for Applications)에 대해 알아보겠습니다! manifest.json 파일 소스추파일을 생성합니다.mani.fest.json은모든 글로벌 애플리케이션 설정과 매개변수를 포함하는 JSON형식의 구성 객체이다.위치는 webapp폴더 밑에 만들면 됩니다.{ "_version": "1.58.0", "sap.app": { "id": "ui5.walkthrough", "i18n": "i18n/i18n.properties", "title": "{{appTitle}}", "description": "{{appDescription}}", "type": "application",.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step9(Component Configuration) 안녕하세요 [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step9(Component Configuration)에 대해 포스팅 하겠습니다. 지금 하는 부분은 Step8까지 했던 부분에 외형으로는 변화가 없습니다.하지만 달라진 점은 Component를 사용한다는 점입니다. Component.js 생성 및 소스 추가webapp폴더 밑에 Component.js를 생성합니다.sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel" ], (UIComponent, JSONModel, ResourceModel) => { .. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step8 (Translatable Texts) 안녕하세요 [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step (Translatable Texts)포스팅 시작해보겠습니다. i18n 다국어처리에 대해 알아보기국저 다국어처리를 하는 이유는 소프트웨어를 한 나라에서만 사용하는 것이 아니기 떄문에 그 나라에 맞게 SW개발해야하기 떄문이다.여기서는 간단하게 설명하고 i18n에 대해서는 다른 포스팅에서 따로 다뤄보겠습니다. i18n.propertise 파일 만들기먼저 webapp 폴더 밑 i18n폴더를 만들고 거기에 i18n.properties 파일을 만듭니다.그리고 밑에 소스를 추가해줍니다.showHelloButtonText=Say HellohelloMsg=Hello {0} 텍스트파일에는 각요소에 대한 값들이 들어가 있습니.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step7(JSON Model) 안녕하세요이번 포스팅에서는 Walkthrough Tutorial Step7(JSON Model) 입니다. 먼저 입력필드를 만들고 입력필드의 값을 표시할 수 있는 페이지를 만들겠습니다. App.controller.js 소스 추가밑에 나오는 소스에 onInit은 컨트롤러가 생성될 떄 호출로디는 메서드 중 하나입니다.함수안에서 JSON모델을 인스턴스화합니다. 컨트롤러에 해당하는 XML뷰 내에서 이 모델을 사용가능하도록 setModel뷰에서 함수를 호출하여 새로 만든 모델을 전달합니다.sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/ui/model/json/JSONModel"], (Controller, MessageTo.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step6(Modules) - 모듈 안녕하세요SAP UI5 연습하기 - Walkthrough Tutorial Step6(Modules) - 모듈 저번 컨트롤러 포스팅에 이어 모듈에 대해 공부하겠습니다. App.controller.js 소스 추가sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], (Controller, MessageToast) => { "use strict"; return Controller.extend("ui5.walkthrough.controller.App", { onShowHello() { MessageToast.show("Hello World"); } }); });sap/m/Mes.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step5(Controllers) 컨트롤러 안녕하세요SAP UI5 연습하기 - Walkthrough Tutorial Step5(Controllers) 컨트롤러 부분을 연습해보겠습니다. App.view.xml 파일에 소스 추가하기mvc:View controllerName="ui5.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> Button text="Say Hello" press=".onShowHello"/>mvc:View>버튼태그를 통해 버튼을 만든다. text는 버튼안에 내용이고 press는 버튼을 누르면 작동하는 이벤트명입니다. controller.js파일 만들기controller.js 파일을 만들기 위해서는 webapp 폴더 밑에.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step4(XML Views) - XML 사용법 알아보기 안녕하세요 이번 포스팅은 SAP UI5 연습하기 - Walkthrough Tutorial Step4(XML Views)XML 사용법에 대해 알아보겠습니다. SAP UI5에서는 여러가지를 뷰로 사용할 수 있지만 XML을 사용하는 것이 좋다고 합니다.-> 코드를 읽기 쉽고 뷰선언을 컨트롤러 로직을 만들어 분리 할 수 있기 때문입니다. STEP3에서 했던 웹페이지 모양과는 변화가 없습니다.하지만 로직이 변경됩니다.webapp/view/App.view.xml 파일 만들기먼저 webapp폴더 밑에 view폴더 생성 -> App.view.xml 파일 만들기 xmlns= "sap.m" xmlns:mvc= "sap.ui.core.mvc" > 위에 코드를 입력하면 됩니다. 여기서 값을 출력하고 싶으면 mvc.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step3(Controls) - 텍스트 출력시키기 안녕하세요 이번 포스팅에서는 UI5연습하기Walkthrough Tutorial Step3(Controls) - 텍스트 출력시키기 입니다. index.html 내용 변경하기Step2에 내용에서 바디태그안에 한 줄을 추가해줍니다.body class="sapUiBody" id="content"> index.html 소스DOCTYPE html>html>head> meta charset="utf-8"> title>UI5 Walkthroughtitle> script id="sap-ui-bootstrap" src="resources/sap-ui-core.js" data-sap-ui-theme="sap_horizon" data-sap-ui-libs="s.. [SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step2(Bootstrap) 안녕하세요 이번 포스팅에서는 SAP UI5 연습을 해보겠습니다. Walkthrough Tutorial Step2입니다. UI5 사용 전 터미널 명령어 입력하기1. walkthrough폴더에서 터미널을 열어준다.2. ui5 use OpenUI5 명령어 입력3. ui5 add sap.ui.core sap.m themelib_sap_horizon명령어 입력index.html 파일 내용 추가하기index.html파일에 스크립트 부분을 넣어줍니다.src : js파일 경로data-sap-ui-theme : sap에서 제공하는 테마data-sap-ui-libs : UI라이브러리\edge가 속성값으로 들어간 부분은 sap ui5의 최신기능을 활용하기 위해서 호환성 버전을 엣지로 정의async부분은 부트스트랩 프로.. [SAP UI5]VSCODE에서 UI5 환경설정하기 안녕하세요 이번 포스팅에서는 VSCODE에서 UI5환경 설정을 해보겠습니다. 먼저 UI5 환경설정을 위해서는 npm, vscode를 깔아야합니다. 저는 vscode는 설치되어있지만 npm이 설치되어 있지 않네요vscode설치는 밑에 홈페이지를 찾아가서 보시면 됩니다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS.. 이전 1 2 다음
