본문 바로가기

hybrid app

[sencha touch] theme 설정하기 이전 내용에서 scss파일을 수정하여 이미지 버튼과 버튼효과 버튼 색깔설정에 대해 경험해 보았습니다. 이번에는 sencha theme를 수정해보는 내용을 설명하겠습니다. sencha project를 생성하여 (project 생성방법 : http://squll1.tistory.com/entry/sencha-touch-mvc%ED%8C%A8%ED%84%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0 ) 실행을하면 다음과 같은 화면이 나타납니다. 이 파란 색깔이 마음에 드시는분도 있겠지만 저는 마음에 들지 않아 바꿔 보도록 하겠습니다. 그럼 resources -> sass -> app.scss 파일을 열어 줍니다. 파일을.. 더보기
[HTML5] HTML5 Sortable http://farhadi.ir/projects/html5sortable/ 더보기
[sencha touch] formpanel안에서 titlebar가 패널 안으로 들어가 있을때 formpanel안에서 다음과 같은 증상이 나타난다면 titlebar에 docked:'top' 속성을 추가하면 상단에 붙는다. 더보기
[phonegap cordova] plugin 모음 https://github.com/phonegap/phonegap-plugins 왠만한 phonegap plugin은 다 여기있다고 보시면 됩니다. 더보기
[sencha touch] 다양한 색깔의 button 만들어보기 다양한 색깔의 버튼을 만드는 방법도 scss파일을 사용하여 만듭니다. 이 scss파일을 다루는 방법을 조금만 익히면 sench touch잡업하는데 많은 도움이 될 것입니다. 간단한 코드 몇줄로 전체 theme을 수정하고 설정할 수 있습니다. 이 부분은 다음에 알아보기로 하고 오늘은 다양한 색깔의 button을 만드는 방법을 알아보겠습니다. scss파일을 열고 아래와 같이 추가해 봅니다. 첫번째는 사용할 이름을 설정합니다. 여기서는 black이란 이름으로 설정했습니다. 두번째는 버튼의 color를 설정합니다. 세번째는 버튼의 효과를 설정합니다. 효과로는 bevel, glossy, matte, flat이 있습니다. bevel glossy matte flat 다음과 같이 추가한 후 scss파일을 컴파일 합니다.. 더보기
[HTML5] Mobile Web & HTML5 최적화 Mobile Web & HTML5 Performance Optimization from Maximiliano Firtman 더보기
[css3] 유용한 css3효과 모음 http://collegegfx.com/35-useful-css3-tutorials-to-boost-your-skills/ 더보기
[sencha touch] image button 만들기 지난번에는 버튼에 여러가지 icon을 넣는 방법을 알아봤었습니다. 이번에는 버튼이미지를 가지고 버튼을 만들어 보겠습니다. 일단 버튼모양의 이미지가 필요합니다. 이미지는 평상시 버튼이미지와 버튼을 눌렀을때의 이미지 두장이 필요합니다. 이미지는 http://www.iconfinder.com/에서 button으로만 검색해도 쉽게 찾을 수 있습니다. 이미지를 센차프로젝트안에 복사합니다. 어디에 넣든 경로만 알고 참조해 오면 상관 없지만 필자는 resources -> images 폴더안에 복사해 넣었습니다. 그리고 위 사진에서 sass폴더안에 scss파일에 해당 버튼이미지를 등록시켜 사용하면 됩니다. 전에 icon이미지를 사용할때도 설명했지만 프로젝트를 생성한후 기본적으로 적용되는 scss는 app.scss입니다.. 더보기
[sencha touch] 자작 NumberPicker 직접 제작한 NumberPicker입니다. 그냥 키패드로 입력받아도 되지만 이렇게만 받아야 하는 상황이 있어 만들어봤습니다. 백의 자리까지 소수점은 첫째짜리까지 입력받습니다. 사용법은 다음과 같습니다. 일단 다운받은 파일을 아래 경로에 복사합니다. touch -> src -> ux -> field 그리고 view class에 다음과 같이 추가하여 사용하면 됩니다. 끝 더보기
[phonegap cordova] ios plugin 만들기 phonegap plugin을 사용하면 다양한 네이티브 기능을 가능하게 해준다. 이 플러그인을 직접 만들어보자. 일단 폰갭프로젝트를 생성한다. http://squll1.tistory.com/entry/phonegap-cordovaios-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1 우선 알아두어야 할 것은 폰갭 플러그인을 만들기 위해서는 CDVPlugin을 상속받아야만 한다. 이제 간단하게 AlertView를 호출하는 플러그인을 만들어 보겠다. 1. 첫번째로 네이티브 기능을 만들어 보겠습니다. Plugins폴더에 파일을 만듭니다. Cocoa Touch에 Objective-C class를 선택하고 next를 누릅니다. class이름을 입력하고 subcl.. 더보기