안녕하세요. Titanium 신참자입니다만, Titanium Advent Calendar 2014의 칠일째를 담당하겠습니다!

TiFlatUIKit이 Cuuuuute!

어쨌든 자신에게는 디자인의 센스가 없다. 멤버에게 앱 디자인을 화이트보드에 써도 "그 생물은 무엇인가", "그 그림 때문에 아무것도 모르게 되어 버렸다"라고 말할 정도로 그림 마음도 없다.
그런 자신도 귀여운 Flat 디자인의 iOS 앱을 쉽게 만들 수 있습니다. 그래 TiFlatUIKit라면!
TiFlatUIKit은, iOS 네이티브로 만들어진 FlatUIKit를 Keisuke Uchida씨가 Titanium 모듈로서 사용할 수 있도록(듯이) 해 주신 것(참고: TiFlatUISample[Titanium User Meet Up at Nifty] )로, 실제로 사용해 보면 매우 좋다!



이번에는 TiFlatUIKit의 도입부터 Alloy에서의 사용법까지 씁니다.

사용법

TiFlatUIKit 모듈 가져오기

Github에서 uchidaknet/TiFlatUIKit을 다운로드하십시오.

Titanium 공식 문서 Using a Module를 참조하여 전역으로 모듈을 가져옵니다. 지금까지 모듈은 프로젝트 폴더에 배치되었으므로 첫 글로벌 가져 오기 경험을했습니다.

Titanium Studio의 메뉴 모음에서 [Help] → [Install Moblie Module...]을 선택합니다.

다음과 같이 이전에 다운로드 한 TiFlatUIKit 폴더에있는 net.uchidak.tiflatuikit-iphone-0.0.1.zip을 [Install from URL]로 설정합니다. [OK]를 눌러 가져오기 완료입니다!

tiapp.xml에 등록

Titanium 프로젝트를 classic으로 만들고 tiapp.xml의 Overview에있는 Module의 + 버튼을 누릅니다.

방금 가져 오기가 성공하면 TiFlatUIKit 모듈이 다음과 같이 선택되고 OK를 눌러 tiapp.xml에 등록 할 수 있습니다.



아니 - 여기까지는 CLI에서하는 것보다 Titanium Studio를 사용하는 편이 편하네요. 단지 Qiita에 쓸 때 화면을 붙여야 하는 것이 힘들지만.

Hello TiFlatUIKit!

그리고는 TiFlatUIKit 리포지토리에 있는 example를 참고로 쓰면 초 Cuuuute인 UI를 만들 수 있다!

역시 Alloy에서 사용하고 싶습니다.

그렇다고는 해도 여기까지 있으면 classic가 아니고 Alloy 프레임워크를 사용해 코드도 나누어 쓰고 싶다! 라고 생각해 왔다.

준비

alloy.js에서 TiFlatUIKit을 require하면 Alloy의 View 네임 스페이스에서 TiFlatUIKit을 사용할 수 있습니다.

app/alloy.js

Alloy.Globals.tiFlatUI = require('net.uchidak.tiflatuikit');

설명

버튼을 표시하고 클릭하면 콘솔에 버튼 이벤트의 반환 값을 표시하는 프로그램은 다음과 같습니다.

View의 Button 태그에, ns로 앞서 전역적으로 기술한 tiFlatUI를 설정하는 것으로, TiFlatUIkit의 createButton을 이용할 수 있습니다. 그리고는 보통 Alloy로 개발하도록 쓰면 OK!
그러나 스타일에 "Button": {}과 같이 태그 이름으로 적용 할 수 없으므로주의하십시오.

app/view/index.xml

<Alloy>
  <Window class="container">
    <Button ns="Alloy.Globals.tiFlatUI" id="flatButton" onClick="showDebug" />
  </Window>
</Alloy>

app/styles/index.tss

".container": {
  backgroundColor:"#f8f8f8",
}

"#flatButton" : {
  width : "80%",
  height : 60,
  title : 'Button',
  font : {
    fontSize : 20,
    fontWeight : 'bold'
  },
  color : '#f8f8f8',
  selectedColor : '#ccc',
  buttonColor : '#1abc9c',
  shadowColor : '#16a085',
  shadowHeight : 5,
  cornerRadius : 4,
  enabled : true
}

app/controller/index.js

Ti.API.info("module is =>");
Ti.API.info(Alloy.Globals.tiFlatUI);

function showDebug(e) {
  Ti.API.debug(e);
}

$.index.open();

example을 Alloy화해 보았습니다!

공식 example을 Alloy로 작성했습니다. 참고로 해보십시오.
s4shiki/TiFlatUIKit_Example_Alloy

다음 번에

Advent Calendar에 처음 참여할 수있어서 좋았습니다! TiFlatUIKit 자체는 1년 전부터 있기 때문에, 하고 있는 사람에게는 도움이 되지 않는다고 생각합니다만, 이 기사를 보고 앞으로 Titanium을 해 보고 싶다고 하는 사람이 늘어 주면 다행입니다.

내일은 @dksg입니다. 기대하고 있습니다! 잘 부탁드립니다.