すごいコードを書く！ UIとか

前述したように，このアプリはHTML UIをIronRubyが駆動する。そう，Silverlightを美麗なグラフィック抜きで使うことも可能なんだ。これを実現するために，Silverlightの描画画面を非表示にする必要がある。index.htmlを開いて，28行目のwidthとhightを"100%"から"1"にする。

<object data="data:application/x-silverlight,"
type="application/x-silverlight-2-b2"
width="1" height="1">  

width/hightを"1"にすると，コントロールを非表示にできるが，実際には存在しているのでロードはされる。賢いハックだろ？

我々のアプリにUIを与えよう。以下をindex.htmlの最後にある""タグの後ろに入力する。

 <div class="search">   
   <form id="search" action="javascript:void(0)">   
     <input type="text" id="keyword" />   
     <input type="submit" id="submit_search" value="search" />   
     <img src="images/loading.gif" id="images_loading" />   
   </form>   
   <div id="search_results">   
     <div id="search_images"></div>   
     <div id="search_links"></div>   
   </div>   
 </div>   
 <div class="clear"></div>   

これは基本的なサーチ欄，サブミットボタン，見つかったイメージを表示する場所だ。スタイルをつけよう。stylesheets/screen.cssをオープンする。一番最初に「#silverlightControlHost」スタイルは，1×1のコントロールが100%の大きさになっては困るので不要だ。削除してくれ。

#silverlightControlHost {
  height: 100%;
}

いま作った素のUIにスタイルをつけよう。

body { 
  font-family: "Trebuchet MS" Verdana sans-serif; 
  border: 0px; padding: 0px; margin: 0px; 
} 

div.clear { 
  clear: both; 
} 

/* main search box */ 
.search { 
  padding: 20px; 
  margin: 20px; 
  border: 10px solid gray; 
  background-color: #ccc; 
} 

form#search #images_loading { 
  width: 18px;  
  height: 15px; 
  display: none; 
} 


/* search results */ 
#search_results { 
  display: none; 
} 

/* search images */ 
#search_images { 
  padding-top: 10px; 
} 
#search_images .image, .image a, .image a img { 
  float: left;  
  padding: 0px;  
  margin: 0px;  
  border: 0px; 
} 
#search_images .image a:link,  
#search_images .image a:visited { 
  background-color: white; 
  padding: 5px; 
  margin: 5px; 
  background-color: white; 
  border: 1px solid gray; 
} 
#search_images .image a:hover { 
  background-color: #ff9966; 
} 

/* search links */ 
#search_links { 
  clear: both; 
  padding-top: 10px; 
} 
#search_links a { 
  border: 1px solid #003344; 
  margin: 2px; 
  padding: 0px 5px; 
  color: #003344; 
  background-color: white; 
  text-decoration: none; 
} 
#search_links a:hover, 
#search_links a.active { 
  color: white; 
  background-color: #003344; 
  border: 1px solid white; 
} 
#search_links a.active { 
  cursor: default; 
}

ブラウザ画面をリロードすれば，この画面が表示される。