본문 바로가기

Works/ iWidgets

초간단 윈터보드 위젯 iWidget용으로 변환 강좌!

윈터보드 위젯 iWidget용으로 변환 강좌


안녕하세요 estoque입니다.

초간단 윈터보드 위젯 iWidget용으로 변환강좌를 시작하겠습니다.



준비물은 이렇습니다: notepad++ , 템플릿 파일

템플릿 파일은 첨부된거 받으시면 됩니다. (예제.zip)


예제.rar


notepad++는 네이버 검색하시면 바로 받으실 수 있습니다.



일단 템플릿 파일안의 widget 폴더 안에 변환할 윈터보드 위젯을 넣어줍니다. 넣은 윈터보드안의 html파일 이름을 widget.html로 설정해주셔야 합니다.



그다음 위젯폴더의 경로를 복사합니다. 그리고 맨바깥에 있는 widget.html 파일을 notepad++로 연 다음, 초록색으로 표시된부분에 이름을 붙여 넣어줍니다. (저장 잊지 마시구요 ;)



그리고 크롬이나 파이어폭스[각주:1]를 이용해서 제대로 작동하는지 확인합니다. [각주:2]

그리고 top.css [각주:3]를 열어서 위치를 조정합니다.

이 파일의 하단에 나타나는 top[각주:4] down 아래쪽 right ,left 왼쪽 오른쪽 간격을 수치로 수정합니다.



마이너스 표시를 붙이면 역방향으로 작동하니 한가지 수치만 건들이는게 편합니다. 오른쪽 상단 브라우저 창 끝으로 위젯이 가도록 수정하시면 됩니다.


그 다음 영역을 설정해줘야 하는데요, 맨 바깥폴더에 있는 widget.plist를 notepad++로 열어서 수정합니다.

height는 위젯의 높이 width 위젯의 넓이 입니다. 이 파일이 제대로 지정이 안될시 위젯이 짤려 보일 수 있습니다.


저장 후 아이폰에 집어넣어 잘되는지 확인만 해주시면 됩니다 :)



완성입니다.b 보면서 따라하시느라 수고하셨습니다. ^^

  1. 익스플로러는 webkit 형식의 html파일의 로드가 불가합니다. [본문으로]
  2. 맨 바깥 폴더의 widget.html 을 열면 됩니다. [본문으로]
  3. widgets 폴더안의 sbstylesheets 폴더 안에있습니다. [본문으로]
  4. 상단부 간격 [본문으로]