Ext Gwt(Gxt) RIA어플리케이션 개발(8번째)

오늘은 상단부분을 완성해보도록 하자. 최초 생각했던 것은 상단에는 단순 html을 삽입 로그인 정보정도만 보여주려고 했으나 계획을 변경해서 일반어플리케이션에서 볼수 있는 풀다운 메뉴와 툴바를 추가해보도록 하자. 풀다운 메뉴는 좌측 메뉴로는 도저히 정리되지 않을 경우나 좌측메뉴와는 별개로 성격이 아주 다른 프로그램들을 모아두거나 하면 될테고 툴바는 미리 보여줄 필요가 있는 자주 쓰는 프로그램을 모아놓는 용도로 사용하자.

☞ 오늘 만들게 될 화면이다. 최상단에 메뉴가 들어가고 그 아래에 툴바를 배치하자.

최초 계획과는 달리 상단부분에 html이 아닌 Menu와 툴바를 넣기로 했으므로 기존 AppView클래스의 northPanel을 HtmlContainer가 아닌 ContentPanel로 변경하여 Menu와 툴바를 삽입하도록 하자.

☞ northPanel과 createNorth()메소드를 변경하자.

//	private HtmlContainer 	northPanel;	// 상단영역
	private ContentPanel	northPanel;

	private void createNorth() {
		BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 45);
		data.setMargins(new Margins(0, 5, 5, 5));
		northPanel = new ContentPanel();
		northPanel.setHeaderVisible(false);
		ToolBar tb = new ToolBar();
		Button topBtn = new Button("로그아웃");
		topBtn.setIcon(RiaApp.ICONS.go_out());
		tb.add(topBtn);
		topBtn = new Button("사용자정보수정");
		topBtn.setIcon(RiaApp.ICONS.accordion());
		tb.add(topBtn);
		topBtn = new Button("접속로그");
		topBtn.setIcon(RiaApp.ICONS.text());
		tb.add(topBtn);
		tb.setAlignment(HorizontalAlignment.RIGHT);
		northPanel.setBottomComponent(tb);
		Menu menu = new Menu();   
		  
	    MenuItem item1 = new MenuItem("Edit");   
	    menu.add(item1);   
	  
	    MenuItem item2 = new MenuItem("Open File");   
	    menu.add(item2);   
	  
	    Menu sub = new Menu();   
	    sub.add(new MenuItem("readme.txt"));   
	    sub.add(new MenuItem("helloworld.txt"));   
	    item2.setSubMenu(sub);   
	    	
	    MenuBar bar = new MenuBar();   
	    bar.setBorders(true);   
	    bar.setStyleAttribute("borderTop", "none");   
	    bar.add(new MenuBarItem("New", menu));   
	  
	    Menu sub2 = new Menu();   
	    sub2.add(new MenuItem("Cut"));   
	    sub2.add(new MenuItem("Copy"));   
	  
	    MenuBarItem edit = new MenuBarItem("Edit", sub2);   
	    bar.add(edit);   
	  
	    sub = new Menu();   
	    sub.add(new MenuItem("Search"));   
	    sub.add(new MenuItem("File"));   
	    sub.add(new MenuItem("Java"));   
	  
	    MenuBarItem item3 = new MenuBarItem("Search", sub);   
	    bar.add(item3);   
	       
	    menu = new Menu();   
	  
	    CheckMenuItem menuItem = new CheckMenuItem("I Like Cats");   
	    menuItem.setChecked(true);   
	    menu.add(menuItem);   
	  
	    menuItem = new CheckMenuItem("I Like Dogs");   
	    menu.add(menuItem);   
	  
	  
	    menu.add(new SeparatorMenuItem());   
	  
	    MenuItem radios = new MenuItem("Radio Options");   
	    menu.add(radios);   
	  
	    Menu radioMenu = new Menu();   
	    CheckMenuItem r = new CheckMenuItem("Blue Theme");   
	    r.setGroup("radios");   
	    r.setChecked(true);   
	    radioMenu.add(r);   
	    r = new CheckMenuItem("Gray Theme");   
	    r.setGroup("radios");   
	    radioMenu.add(r);   
	    radios.setSubMenu(radioMenu);   
	  
	    MenuItem date = new MenuItem("Choose a Date");   
	    menu.add(date);   
	  
	    date.setSubMenu(new DateMenu());   
	       
	    MenuBarItem item4 = new MenuBarItem("Foo", menu);   
	    bar.add(item4);   
	    northPanel.add(bar);
	    
	    northPanel.setAutoHeight(true);
		viewport.add(northPanel, data);
	}

☞ 위와 같이 코딩하면 에러가 날것이다. RiaApp.ICONS...이 부분이다. 이부분은 툴바에 설정하는 아이콘 이미지로 com.gxt.riaapp.client.resource라는 이름으로 패키지를 생성하고 아래 클래스를 추가해 보자. 아래의 ResourceIcons클래스는 보여질 이미지를 추가하고 해당 이미지를 툴바나 기타 아이콘으로 사용하기 위함이다.

package com.gxt.riaapp.client.resource.icon;

import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.ImageBundle;
@SuppressWarnings("deprecation")
public interface ResourceIcons extends ImageBundle {

  @Resource("table.png")
  AbstractImagePrototype table();

  @Resource("add16.gif")
  AbstractImagePrototype add16();

  @Resource("add24.gif")
  AbstractImagePrototype add24();

  @Resource("add32.gif")
  AbstractImagePrototype add32();

  @Resource("application_side_list.png")
  AbstractImagePrototype side_list();

  @Resource("application_form.png")
  AbstractImagePrototype form();

  @Resource("connect.png")
  AbstractImagePrototype connect();

  @Resource("user_add.png")
  AbstractImagePrototype user_add();

  @Resource("user_delete.png")
  AbstractImagePrototype user_delete();

  @Resource("accordion.gif")
  AbstractImagePrototype accordion();

  @Resource("add.gif")
  AbstractImagePrototype add();

  @Resource("delete.gif")
  AbstractImagePrototype delete();

  @Resource("calendar.gif")
  AbstractImagePrototype calendar();

  @Resource("menu-show.gif")
  AbstractImagePrototype menu_show();

  @Resource("list-items.gif")
  AbstractImagePrototype list_items();

  @Resource("album.gif")
  AbstractImagePrototype album();

  @Resource("text.png")
  AbstractImagePrototype text();

  @Resource("plugin.png")
  AbstractImagePrototype plugin();
  
  @Resource("music.png")
  AbstractImagePrototype music();
  
  @Resource("table_refresh.png")
  AbstractImagePrototype refresh();
  
  @Resource("folder_go.png")
  AbstractImagePrototype go_out();
  
  @Resource("excel_download16.png")
  AbstractImagePrototype excel16();
  
  @Resource("excel_download32.png")
  AbstractImagePrototype excel32();
}

☞ 같은 패키지에 이미지도 추가하자. gxt쪽 샘플에서 사용하는 이미지로 gxt 루트에서 찾아보면 될것이다.

 
마지막으로 테마를 변경하자. 이 강좌 맨위의 이미지를 보면 이전에 푸른색 계열의 색상에서 세련된 회색계열로 변경되었다. 개인적으로 푸른색은 좀 촌스러워서 바꿔봤다. war폴더내의 RiaApp.html파일에 한줄 추가하자.