'기타' 카테고리의 다른 글
| webstorm, phpstorm 자동완성 설정 (0) | 2014.02.26 |
|---|---|
| 웹에서 레고 조립하기 (0) | 2014.02.03 |
| Flat UI Free – PSD&HTML User Interface Kit (0) | 2013.12.26 |
| indicator image 생성 사이트 (0) | 2013.12.10 |
| 나눔고딕 webfont (0) | 2013.12.04 |
분류 전체보기
- Trello 의 boards 로딩시간을 단축하기위해 1주일동안 한 작업들 - Fog Creek Blog 2014.01.24
- Flat UI Free – PSD&HTML User Interface Kit 2013.12.26
- [HTML5] 구글에서 제공하는 webgl sample 2013.12.23
- [css3] css3 3d transform sample 2013.12.23
- [sencha touch] picker title button 수정하기 2013.12.19
- [sencha touch] datepickerfield month 영문자 숫자로 변경하기 2013.12.19
- [jQuery] 60 Top jQuery Plugins of 2013 2013.12.16
- [sencha touch] custom icon 사용하기 2013.12.13
- [ios dev] ios7 status bar 아래로 뷰 나오게 하기 2013.12.13 1
- [ios dev] UIColor 2013.12.13
Trello 의 boards 로딩시간을 단축하기위해 1주일동안 한 작업들 - Fog Creek Blog
2014. 1. 24. 11:14
Flat UI Free – PSD&HTML User Interface Kit
2013. 12. 26. 18:12
'기타' 카테고리의 다른 글
| 웹에서 레고 조립하기 (0) | 2014.02.03 |
|---|---|
| Trello 의 boards 로딩시간을 단축하기위해 1주일동안 한 작업들 - Fog Creek Blog (0) | 2014.01.24 |
| indicator image 생성 사이트 (0) | 2013.12.10 |
| 나눔고딕 webfont (0) | 2013.12.04 |
| stack overflow같은 web관련 한국어 사이트 qnacode.com (0) | 2013.12.04 |
[HTML5] 구글에서 제공하는 webgl sample
2013. 12. 23. 12:44
'hybrid app > HTML5' 카테고리의 다른 글
| [html5] Cross Document Messaging (postMessage, onmessage) (0) | 2014.07.23 |
|---|---|
| 모바일에서 숫자 자동전화걸기 자동 링크 방지 (0) | 2014.03.24 |
| [HTML5] HTML5 Rocks 한글 페이지 (0) | 2013.10.28 |
| [HTML5] Safari on iOS 7 and HTML5: problems, changes and new APIs (0) | 2013.10.14 |
| [HTML5] HTML5 Sortable (0) | 2013.07.01 |
[css3] css3 3d transform sample
2013. 12. 23. 12:43
'hybrid app > css3' 카테고리의 다른 글
| [css3] 미디어쿼리 세로모드 가로모드 구분 (0) | 2014.02.19 |
|---|---|
| [css3] CSS3를 마스터하는 것을 도와줄 튜토리얼 30선 (0) | 2014.02.03 |
| [css3] Increase Your Site’s Performance with Hardware-Accelerated CSS (0) | 2013.12.13 |
| [css3] 도형 정리 사이트 (0) | 2013.08.28 |
| [css3] prefix free 플러그인 (0) | 2013.08.28 |
[sencha touch] picker title button 수정하기
2013. 12. 19. 11:01
위와 같이 title의 Done버튼과 Cancel버튼을 한글로 수정해 보겠습니다.
이런것들을 수정하려면 datepicker가 뭘 상속받는지 extend 와 뭘 필요로 하는지 requires를 살펴봐야 합니다.
그럼 다음 파일로 이동해서 수정해 보겠습니다.
touch -> src -> picker -> Picker.js
Picker.js파일을 열고 applyDoneButton 메소드를 수정해 봅시다.
applyDoneButton: function(config) {
if (config) {
if (Ext.isBoolean(config)) {
config = {};
}
if (typeof config == "string") {
config = {
text: config
};
}
Ext.applyIf(config, {
ui: 'action',
align: 'right',
text: '확인'
});
}
return Ext.factory(config, 'Ext.Button', this.getDoneButton());
},
text를 '확인'으로 수정하였습니다. 다시 실행해 보면 확인으로 변경된걸 확인하실 수 있습니다.
ui설정을 변경해 버튼의 ui도 변경하실 수 있습니다.
이제 나머지 Cancel 버튼도 수정해 보겠습니다.
applyCancelButton: function(config) {
if (config) {
if (Ext.isBoolean(config)) {
config = {};
}
if (typeof config == "string") {
config = {
text: config
};
}
Ext.applyIf(config, {
align: 'left',
text: '취소'
});
}
return Ext.factory(config, 'Ext.Button', this.getCancelButton());
},
위와 같이 한글로 변경되었습니다.
다른 picker들도 변경된걸 확인할 수 있습니다.
'hybrid app > sencha touch' 카테고리의 다른 글
| [sencha touch] datepickerfield month 영문자 숫자로 변경하기 (0) | 2013.12.19 |
|---|---|
| [sencha touch] custom icon 사용하기 (0) | 2013.12.13 |
| [sencha touch] io7에서 titlebar가 status bar와 겹치는 현상 (0) | 2013.11.28 |
| [sencha touch] tabpanel안 cardlayout 고찰 (0) | 2013.10.23 |
| [sencha touch] setRecord (0) | 2013.10.21 |
[sencha touch] datepickerfield month 영문자 숫자로 변경하기
2013. 12. 19. 10:26
위와 같이 datepickerfield를 사용하면 month영역이 영문자로 나타납니다.
국내와 비영어권 국가에서 불편할 수 있으니 숫자로 바꿔봅시다.
이를 위해서 다음 파일을 수정해야 합니다.
touch -> src -> picker -> Date.js
Date.js파일을 열고 createSlots 메소드를 수정해 봅시다.
for (i = 0, ln = Ext.Date.monthNames.length; i < ln; i++) {
months.push({
// text : Ext.Date.monthNames[i],
text: i + 1,
value : i + 1
});
}
위와 같이 숫자가 잘 나타납니다. month부분이 지나치게 비율이 넓어 안좋아 보이니 비율을 createSlot메소드에서 수정해 봅시다.
createSlot: function(name, days, months, years) {
switch (name) {
case 'year':
return {
name: 'year',
align: 'center',
data: years,
title: this.getYearText(),
flex: 1
};
case 'month':
return {
name: name,
align: 'center',
data: months,
title: this.getMonthText(),
flex: 1
};
case 'day':
return {
name: 'day',
align: 'center',
data: days,
title: this.getDayText(),
flex: 1
};
}
},
flex를 모두 1로 같은 비율로 설정해 보았습니다.
마지막으로 상단에 Year, Month, Day title이 신경쓰입니다.
방금전에 수정했던 createSlot을 다시 수정해 봅시다.
createSlot: function(name, days, months, years) {
switch (name) {
case 'year':
return {
name: 'year',
align: 'center',
data: years,
title: '년',
flex: 1
};
case 'month':
return {
name: name,
align: 'center',
data: months,
title: '월',
flex: 1
};
case 'day':
return {
name: 'day',
align: 'center',
data: days,
title: '일',
flex: 1
};
}
위와 같이 수정된걸 확인할 수 있습니다.
'hybrid app > sencha touch' 카테고리의 다른 글
| [sencha touch] picker title button 수정하기 (0) | 2013.12.19 |
|---|---|
| [sencha touch] custom icon 사용하기 (0) | 2013.12.13 |
| [sencha touch] io7에서 titlebar가 status bar와 겹치는 현상 (0) | 2013.11.28 |
| [sencha touch] tabpanel안 cardlayout 고찰 (0) | 2013.10.23 |
| [sencha touch] setRecord (0) | 2013.10.21 |
[jQuery] 60 Top jQuery Plugins of 2013
2013. 12. 16. 14:02
'JQuery' 카테고리의 다른 글
| [jQuery] sliderBar 플러그인 (0) | 2013.06.10 |
|---|---|
| [jQuery] Boxer 창만들기 플러그인 (0) | 2013.06.10 |
| [jQuery] swipe 플러그인 (0) | 2013.06.10 |
| [jQuery] jquery기반 게임엔진 (0) | 2013.05.30 |
[sencha touch] custom icon 사용하기
2013. 12. 13. 21:12
sencha 2.2.1 에서는 pictos폴더에 이미지를 넣고 사용하면 됐었다. 아래 링크 설명
2.3.1도 같은줄 알았는데 컴파일중 에러 발생..
이제 @include icon를 사용해야 한다.
그리고 이미지 파일이 아니라 font파일을 사용..
실습을 위해서 http://icomoon.io/app/방문후 폰트 파일을 다운해 보자
아이콘 선택후 하단 폰트 버튼 클릭
아이콘 옆에 화살표 모양 클릭
Reset codes버튼 클릭
그러면 ㅁ 으로 있던 공간에 문자가 생겼다.
이 문자가 해당 아이콘 이름이라고 생각하면 된다.
이제 하단 다운 로드 버튼을 누르고 받을 파일 압축을 풀어보자
다운파은 파일의 font폴더 안에 있는 eot, svg, ttf, woff파일을 resources -> sass -> stylesheets -> font ->pictos 폴더안에 복사한다.
이제 resources -> sass 안에 scss파일을 열어 다음과 같이 입력해 보자
@include icon-font('icomoon',inline-font-files('pictos/icomoon.woff',woff,'pictos/icomoon.ttf',truetype,'pictos/icomoon.svg',svg));
@include icon('home3','!','icomoon');
@include icon('history3',"'",'icomoon');
@include icon('setting3','&','icomoon');
@include incon() 안의 첫번째 인자는 iconCls에서 사용할 이름이고 두번째는 폰트 파일 받을때 생성됐던 이름
세번째는 @include icon-font의 이름이다.
이제 이 scss파일을 컴파일 하고 (http://squll1.tistory.com/entry/sencha-touch-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%83%89%EA%B9%94%EC%9D%98-button-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 하단)
iconCls에 이름을 넣어보면 적용된걸 확인할 수 있다.
직접 디자인한 이미지를 사용하고 싶다면 디자이너에게 폰트로 만들어 달라고 하자ㅋ
'hybrid app > sencha touch' 카테고리의 다른 글
| [sencha touch] picker title button 수정하기 (0) | 2013.12.19 |
|---|---|
| [sencha touch] datepickerfield month 영문자 숫자로 변경하기 (0) | 2013.12.19 |
| [sencha touch] io7에서 titlebar가 status bar와 겹치는 현상 (0) | 2013.11.28 |
| [sencha touch] tabpanel안 cardlayout 고찰 (0) | 2013.10.23 |
| [sencha touch] setRecord (0) | 2013.10.21 |
[ios dev] ios7 status bar 아래로 뷰 나오게 하기
2013. 12. 13. 13:42
sencha 2.2.1에서는
document.body.style.paddingTop='20px';
2.3.1에서도 데스트탑 웹에서는 잘되서 문제가 없을거라 생각했다.
하지만 디바이스에만 올라가면 계속 밀리는 현상 발생
padding값 말고 네이티브단에서 해결하기로 했다.
MainViewController.m의 viewWillAppear에 아래와 같이 추가하자
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
CGRect viewBounds = [self.webView bounds];
viewBounds.origin.y = 20;
viewBounds.size.height = viewBounds.size.height - 20;
self.webView.frame = viewBounds;
}
status bar color도 변경 (http://squll1.tistory.com/entry/ios-dev-UIColor)
self.view.backgroundColor = [UIColor colorWithRed:(48.0/255.0) green:(183.0/255.0) blue:(125.0/255.0) alpha:1];
이제 status bar 영역 상관없이 작업하면 된다.
'ios dev' 카테고리의 다른 글
| [ios dev] UIColor (0) | 2013.12.13 |
|---|---|
| [ios dev] ios7 status bar color 바꾸기 (2) | 2013.11.28 |
[ios dev] UIColor
2013. 12. 13. 13:26
다음과 같이 선언한다.
[UIColor colorWithRed:(R/255.0) green:(G/255.0) blue:(B/255.0) alpha:1];
RGB에 각 컬러별 수치를 입력하면 된다.
'ios dev' 카테고리의 다른 글
| [ios dev] ios7 status bar 아래로 뷰 나오게 하기 (1) | 2013.12.13 |
|---|---|
| [ios dev] ios7 status bar color 바꾸기 (2) | 2013.11.28 |