content를 열어주고, text를 작성해줍니다. (Text 다음에 text를 또 열어줘야 함.)
그러면 위와 같이 화면이 나옴.
HBox : Horizontal Box. 가로로 레이아웃 구성시켜준다.
※대비되는 개념 : Vbox -> Vertical Box. 세로로 레이아웃 구성시켜준다.
위와 같이 버튼들이 가로로 구성됨.
title을 꾸며주기 위해 style.css 들어가서, '.'으로 title을 부른다. 원래 '.'으로 class를 부른다.
※ id는 #으로 부름.
위와 같이 글자크기와 굵기 등 설정 가능.
버튼 간에 여백도 sapUiSmallMarginEnd라는 내장된 스타일로 설정해준다.
press로 onChoose도 작성해줬다. 이제 컨트롤러에서 onChoose 함수를 정의해줄 것이다.
onInit: function () {
},
onChoose : function (oEvent) { //내가 누른 게 뭔지 등 정보가 oEvent에 들어옴.
//1. 컴퓨터가 고른 텍스트
var computerChoice = this.getComputer();
//2. 내가 고른 텍스트
var userChoice = oEvent.getSource().getText(); //모든 정보(source) 속에서 text만 가져오게 됨.
//3. 결과
var result = this.result(computerChoice, userChoice);
// + 텍스트 출력
this.getView().byId("comText").setText(computerChoice)
this.getView().byId("userText").setText(userChoice)
//4. 결과를 messageToast로 출력.
MessageToast.show(result);
},
getComputer : function () {
var choice = ["주먹", "가위", "보"]
//Math.random() * 3 //0 ~ 1 숫자 중에 random으로 수가 나옴. 그거에다가 3을 곱해서 0~3 중에 나옴.
var random = Math.floor(Math.random() * 3) //Math.floor 안에 넣으면 소숫점이 버려짐. 0 or 1 or 2.
return choice[random]
},
result : function (computerChoice, userChoice) {
//비기는 경우
if(computerChoice === userChoice) {
return "비겼다"
}
//이기는 경우 & 지는 경우
if(
computerChoice === '주먹' && userChoice === '보' ||
computerChoice === '가위' && userChoice === '주먹' ||
computerChoice === '보' && userChoice === '가위'
){
return "이겼다"
}else {
return "졌다"
}
}
});
});
컨트롤러의 로직 모습이다.
onInit 다음에 onChoose function부터 쭉 작성해준다.
result function에서 return을 만나면 로직이 종료된다.
<mvc:View controllerName="project1.controller.View1"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<Text text = "안내면 진다 가위! 바위! 보!" class="title sapUiMediumMarginBottom"/>
<HBox class="sapUiMediumMarginBottom">
<Button text="주먹" press="onChoose" class="btn sapUiSmallMarginEnd"/>
<Button text="가위" press="onChoose" class="btn sapUiSmallMarginEnd"/>
<Button text="보" press="onChoose" class="btn"/>
</HBox>
<HBox>
<Text text = "컴퓨터 :"/>
<Text id="comText"/>
</HBox>
<HBox>
<Text text = "나 :"/>
<Text id="userText"/>
</HBox>
</content>
</Page>
</mvc:View>
뷰의 로직 모습이다.
설정해준 Text id는 컨트롤러에서 활용하기 위해 설정해준 것이다.