안녕, UI! 작전명: 창을 띄워라

이전 연습: 유쾌한 점퍼 (Jolly Jumper)

 

문제

고작 세 문제뿐이 안 풀었지만, 이쯤에서 살짝 쉬어가는 단계를 만들기로 했다.

 

갑자기 정말 간단한 GUI 프로그램이 만들고 싶어졌다. Factor나 얼랭으로 GUI 프로그래밍을 처음하므로 화면에 버튼 한개를 그리고 그 반응으로 메시지를 출력하는 매우 초보적인 Hello world 수준의 예제를 만들어보기로 했다. 이른바, 수단 방법 가리지 말고 창을 띄워보자~!

 

풀이

루비는 GUI 바인딩이 썩 좋은 편은 아니었다. 언젠가 마소에 GUI를 루비의 단점으로 꼽은적도 있었을 정도다. 하지만, 이것도 시간이 많은 부분 해결해주었다. 최근 주목받고 있는 shoes를 이용하면 정말 간단하고, 루비스러운 코드로 대부분의 플랫폼에서 동작하는 GUI를 만들 수 있다. 맥에서는 깔끔하게 코코아로 동작하는 모습을 볼 수 있다.

 

 

1. Shoes.app(:width => 100, :height => 70) do
     background "#EFC"
     border "#BE8", :strokewidth => 6
   
     stack(:margin => 10) {
       button("Hello!") { alert("I'm Shoes") }
     }
   end

• 전체 소스코드: http://github.com/deepblue/snippets/tree/master/chalenge/hello_ui/hello_shoes.rb

 

자신감 충만한(?) 루비에는 좋은 무기가 하나 더 있다. 전에도 소개한 적 있는 맥루비의 신무기, HotCocoa다. 오래 걸리지 않을테니 HotCocoa로도 한번 만들어보았다.

 

 

1. alert = Proc.new {
     NSAlert.alertWithMessageText("I'm MacRuby",
       defaultButton: "OK",
       alternateButton: "Cancel",
       otherButton: nil,
       informativeTextWithFormat: "HotCocoa").
     runModal
   }
   
   application do |app|
     window :frame => [100, 100, 100, 60], :title => "MacRuby!"  do |win|
       win << button(:title => "Hello!", :on_action => alert)
     end
   end

 

• 전체 소스코드: http://github.com/deepblue/snippets/tree/master/chalenge/hello_ui/hello_macruby.rb

 

 

 

Factor IDE를 보면 (OpenGL을 잘 활용할 수 있는) UI 프레임워크가 잘 갖춰져있는 모습이다. cocoa 바인딩도 있지만, 이번에는 Gadget 기반의 UI 프레임워크를 사용해봤다. 은근히 없는게 없는 Factor다.

 

 

1. : open-label-window ( -- )
     <pile> 1 >>fill
     "Factor Widget" <label> 20 <border> add-gadget
     "OK" [ close-window ] <bevel-button> add-gadget
     "Alert" open-window ;
   
   : open-hello-window ( -- )
     "Hello!" [ open-label-window ] <bevel-button>
     "Factor" open-window ;
   
   : hello ( -- )
     [ open-hello-window ] with-ui ;

• 전체 소스코드: http://github.com/deepblue/snippets/tree/master/chalenge/hello_ui/hello.factor

 

 

얼랭에는 Graphics System이 있다. 역시나 플랫폼 독립적인 라이브러리다. 맥에서는 Tk를 기반 시스템으로 사용한다. 얼랭은 서버 역할에 충실하고, GUI 클라이언트를 외부 시스템으로 만드는 느낌으로 접근하면 좋을 것 같다.

 

 

1. start() ->
     S = gs:start(),
    
     Win = gs:window(S,[{title,"Erlang"},{width,150},{height,100}]), 
     gs:create(button,hello,Win,[{y,30},{x,50},{width,50},
                  {label,{text,"Hello!"}}]),
                     
     gs:config(Win,{map,true}),
     loop().
   
   
   hello() ->
     S = gs:start(),
   
     Message = gs:window(S,[{title,"Hello"},{width,250},{height,70}]),
     gs:create(label,text,Message,[{y,0},{x,0},{width,250},
                  {label,{text,"Erlang Graphics System"}}]),
     gs:create(button,hellook,Message,[{y,30},{x,100},{width,50},
                  {label,{text,"OK"}}]),              
   
     gs:config(Message,{map,true}).
   
   
   loop() ->
     receive
       {gs,hello,_,_,_} -> hello();
       {gs,hellook,_,_,_} -> exit(normal)
     end,
     loop().

• 전체 소스코드: http://github.com/deepblue/snippets/tree/master/chalenge/hello_ui/hello.erl

 

 

후기

• 약간씩 어설픈 결과물이지만, 다들 자주 사용하지 않는 시스템들이어서 찾아서 뭔가 만드는 재미가 꽤 좋았다.
• 개발을 하면서 느끼는 주관적인 감정들이라 딱히 설명하기는 힘들지만 각 언어마다 만들어주는 분위기가 있어서, 같은걸 만들겠다고 시작해도 어떤 언어를 이용하냐에 따라 결과물은 조금씩 달라질 수 있겠다.
• 클라이언트 사이드의 UI는 점점 더 풍부하고 미려함을 추구하고 있는데, 위 언어들은 어느 정도에 와 있는걸까?
• 다음 쉬어가는 페이지는 웹 애플리케이션에 도전할 생각이다.
• 이제 자야지.