Java

高度なSmartGWTチュートリアル、パート1



Advanced Smartgwt Tutorial



Justin、Pat、および私は、管理と管理のためのユーザーインターフェイスを必要とするサイドプロジェクトを開始しました。 と SmartGWT と GWT共通 しばらく働いた後、使用することにしました SmartGWT インターフェイスを作成します。 私たちはビジュアルコンポーネントが本当に好きです（チェックしてください SmartGWTディスプレイキャビネット ）そしてそれが急速な発展に役立つという事実。

このチュートリアルでは、わずか数時間でユーザーインターフェイスのプロトタイプを作成する方法を紹介します。 インターフェイスは主に影響を受けます Drools Guvnor アプリケーションへの影響。 私たちは多くのプロジェクトでDroolsを使用し、Guvnorを使用してビジネスルールを作成しました。 美しく実用的なユーザーインターフェイスが気に入っています。 いくつか見る Guvnorのスクリーンショット 。



はじめましょう。 私はあなたが持っていると思います インストールされたGWTSDK と Eclipse の Googleプラグイン 。 SmartGWTは、GWT 1.5.3、GWT 1.6.4、GWT 1.7.x、およびGWT2.0.xと互換性があります。 現在、使用しています GWT 2.1.0 SDK と SmartGWT 2.2 バージョン。 基本的に、これはSmartGWTのより高度なチュートリアルであるため、私の紹介記事を確認する必要があるかもしれません。 「SmartGWTを使い始めて、優れたGWTインターフェースを手に入れよう」 。 さらに、別の有用なリソースは 「レイアウトユーザーインターフェイス」 独自のインターフェースの開発を開始するために使用したチュートリアル。

まず、Eclipseで新しい「Webアプリケーションプロジェクト」を作成します。 プロジェクト名として「AwesomeSmartGWTUIProject」を選択し、パッケージ名として「com.javacodegeeks.smartgwt.appui」を選択しました。



次に、抽出したZIPからプロジェクトのクラスパスに「smartgwt.jar」ファイルを追加します。 このファイルは「war / WEB-INF / lib」ディレクトリにも追加する必要があることに注意してください。



次に、モジュールxmlファイル（「AwesomeSmartGWTUIProject.gwt.xml」という名前）を編集し、標準の「継承」宣言の後に次の行を追加します。 

 また、GWTテーマの使用法を宣言している既存の部分をコメントアウトします。 
 モジュールXMLファイルは次のようになります。 
     
 次のステップは、「AwesomeSmartGWTUIProject.html」ファイルに存在する自動生成されたコードの一部、特にH1タグとTableタグを削除することです。 これはあなたが得るべきものです： 
  Web Application Starter Project    Your web browser must have JavaScript enabled in order for this application to display correctly. 
 同様に、既存のすべてを削除します エントリーポイント クラス内の「AwesomeSmartGWTUIProject」という名前のコードで、空のままにします onModuleLoad 方法は次のとおりです。 
package com.javacodegeeks.smartgwt.appui.client import com.google.gwt.core.client.EntryPoint public class AwesomeSmartGWTUIProject implements EntryPoint { public void onModuleLoad() { } } 
 これでSmartGWTコードの記述を開始する準備ができたので、次のことを確認してください。 SmartGWTJavadocが追加されました ブックマーク。 インターフェイスを構築するときは、引き続き2つの非常に重要なクラスを使用します。 
 
     
  •   HLayout ：これは、横軸に沿ってサイズ変更戦略を適用するレイアウト関連のクラスです。つまり、そのすべての内部コンポーネントが水平に配置されます。 
    •  
  •   VLayout ：これは、垂直軸に沿ってサイズ変更戦略を適用するレイアウト関連のクラスです。つまり、すべての内部コンポーネントが垂直に配置されます。 
    •  
 
 これらのクラスは親からのものです レイアウト 拡張機能なので、継承します addMember 彼らが他を追加することを可能にする方法 キャンバス オブジェクトまたは ウィジェット 。 
 
 さまざまなレイアウトオブジェクトを使用して、画面領域全体を特定のサブ領域（北、南、東、西、およびメイン領域）に分解します。 エントリポイントクラスの最初のバージョンを見てみましょう。 
package com.javacodegeeks.smartgwt.appui.client import com.google.gwt.core.client.EntryPoint import com.google.gwt.user.client.Window import com.google.gwt.user.client.ui.RootLayoutPanel import com.javacodegeeks.smartgwt.appui.client.ui.ApplicationMenu import com.javacodegeeks.smartgwt.appui.client.ui.HeaderArea import com.javacodegeeks.smartgwt.appui.client.ui.MainArea import com.javacodegeeks.smartgwt.appui.client.ui.NavigationArea import com.smartgwt.client.widgets.layout.HLayout import com.smartgwt.client.widgets.layout.VLayout public class AwesomeSmartGWTUIProject implements EntryPoint { private static final int HEADER_HEIGHT = 85 private VLayout mainLayout private HLayout northLayout private HLayout southLayout private VLayout eastLayout private HLayout westLayout public void onModuleLoad() { Window.enableScrolling(false) Window.setMargin('0px') // main layout occupies the whole area mainLayout = new VLayout() mainLayout.setWidth100() mainLayout.setHeight100() northLayout = new HLayout() northLayout.setHeight(HEADER_HEIGHT) VLayout vLayout = new VLayout() vLayout.addMember(new HeaderArea()) vLayout.addMember(new ApplicationMenu()) northLayout.addMember(vLayout) westLayout = new NavigationArea() westLayout.setWidth('15%') eastLayout = new MainArea() eastLayout.setWidth('85%') southLayout = new HLayout() southLayout.setMembers(westLayout, eastLayout) mainLayout.addMember(northLayout) mainLayout.addMember(southLayout) // add the main layout container to GWT's root panel RootLayoutPanel.get().add(mainLayout) } } 
 コンパイルエラーについて心配する必要はありません。必要なクラスは後で作成します。 ご覧のとおり、画面領域全体を小さなブロックに分割し、SmartGWTAPIを使用してすべてのコンポーネントを接続します。 使ってください setWidth100 と setHeight100 メソッド、それらは特定のコンポーネントが利用可能な領域全体を占めることを便利に可能にします。 やっと、 RootLayoutPanel これはGWTクラスであり、画面のルートパネルにアクセスできます。 それでは、さまざまなコンポーネントを作成しましょう。 
 
 * ApplicationMenu： 
package com.javacodegeeks.smartgwt.appui.client.ui import com.smartgwt.client.types.Alignment import com.smartgwt.client.types.Overflow import com.smartgwt.client.widgets.Label import com.smartgwt.client.widgets.layout.HLayout public class ApplicationMenu extends HLayout { private static final int APPLICATION_MENU_HEIGHT = 27 private Label label public ApplicationMenu() { super() this.setHeight(APPLICATION_MENU_HEIGHT) label = new Label() label.setContents('Application Menu') label.setAlign(Alignment.CENTER) label.setOverflow(Overflow.HIDDEN) this.addMember(label) } } 
 ここでは特別なことは何もありません。レイアウトに1つ追加しただけです。 ラベル そして 配置 中央に設定します。 
 
 *ヘッダーエリア： 
package com.javacodegeeks.smartgwt.appui.client.ui import com.smartgwt.client.types.Alignment import com.smartgwt.client.types.Overflow import com.smartgwt.client.widgets.Img import com.smartgwt.client.widgets.Label import com.smartgwt.client.widgets.layout.HLayout public class HeaderArea extends HLayout { private static final int HEADER_AREA_HEIGHT = 60 public HeaderArea() { super() this.setHeight(HEADER_AREA_HEIGHT) Img logo = new Img('jcg_logo.png', 282, 60) Label name = new Label() name.setOverflow(Overflow.HIDDEN) name.setContents('Java 2 Java Developers Resource Center') HLayout westLayout = new HLayout() westLayout.setHeight(HEADER_AREA_HEIGHT) westLayout.setWidth('70%') westLayout.addMember(logo) westLayout.addMember(name) Label signedInUser = new Label() signedInUser.setContents('  Fabrizio Chami  ') HLayout eastLayout = new HLayout() eastLayout.setAlign(Alignment.RIGHT) eastLayout.setHeight(HEADER_AREA_HEIGHT) eastLayout.setWidth('30%') eastLayout.addMember(signedInUser) this.addMember(westLayout) this.addMember(eastLayout) } } 
 繰り返しますが、それは簡単です。 を使用しております Img クラスは画像を追加し、ファイル名を提供します。 画像のURLは自動的に「images」フォルダの下に配置されるため、基本的に「jcg_logo.png」ファイルは「war / images」フォルダに配置する必要があることに注意してください。 
 
 *ナビゲーションエリア： 
package com.javacodegeeks.smartgwt.appui.client import com.smartgwt.client.types.Overflow import com.smartgwt.client.types.VisibilityMode import com.smartgwt.client.widgets.Label import com.smartgwt.client.widgets.layout.HLayout import com.smartgwt.client.widgets.layout.SectionStack import com.smartgwt.client.widgets.layout.SectionStackSection public class NavigationArea extends HLayout { public NavigationArea() { super() this.setMembersMargin(20) this.setOverflow(Overflow.HIDDEN) this.setShowResizeBar(true) final SectionStack sectionStack = new SectionStack() sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE) sectionStack.setShowExpandControls(true) sectionStack.setAnimateSections(true) sectionStack.setVisibilityMode(VisibilityMode.MUTEX) sectionStack.setOverflow(Overflow.HIDDEN) SectionStackSection section1 = new SectionStackSection('Section 1') section1.setExpanded(true) Label label1 = new Label() label1.setContents('Label1') section1.addItem(label1) SectionStackSection section2 = new SectionStackSection('Section 2') section2.setExpanded(false) Label label2 = new Label() label2.setContents('Label2') label2.setOverflow(Overflow.AUTO) label2.setPadding(10) section2.addItem(label2) SectionStackSection section3 = new SectionStackSection('Section 3') section3.setExpanded(false) Label label3 = new Label() label3.setContents('Label3') label3.setOverflow(Overflow.AUTO) label3.setPadding(10) section3.addItem(label3) sectionStack.addSection(section1) sectionStack.addSection(section2) sectionStack.addSection(section3) this.addMember(sectionStack) } } 
 ナビゲーションエリアには、アコーディオンのようなコンポーネントが必要です。 これは私たちによってSmartGWTに追加されます SectionStackSection インスタンス SectionStack クラスの実装。 これらのプロジェクトに任意のウィジェットを追加できますが、簡単にするために、ここではいくつかを追加するだけです。 ラベル 。 注意 setShowResizeBar レイアウト内のメンバーの後にサイズ変更されたバーを表示して、そのサイズを調整できるようにするメソッドの使用。 
 
 *メインエリア： 
package com.javacodegeeks.smartgwt.appui.client.ui import com.smartgwt.client.types.Alignment import com.smartgwt.client.types.Overflow import com.smartgwt.client.widgets.Label import com.smartgwt.client.widgets.layout.VLayout public class MainArea extends VLayout { private Label label public MainArea() { super() label = new Label() label.setContents('Main Area') label.setAlign(Alignment.CENTER) label.setOverflow(Overflow.HIDDEN) this.addMember(label) } } 
 メインエリアは、インターフェースのほとんどのウィジェットをホストしますが、現在はタグのみが含まれています。 
 
 さて、これまでに何をしたか見てみましょう。 Eclipse構成を（Webアプリケーションプロジェクトとして）開始し、ブラウザーで指定されたURLを指定します。 
 
  http://127.0.0.1:8888/AwesomeSmartGWTUIProject.html?gwt.codesvr=127.0.0.1:9997  
 
 これはあなたが見るべき画像です： 
 
  
 
 数分間のコードは悪くありません。 CSS、HTML、JavaScriptをいじることなく、厳密に定義されたサブエリアを含むUIのフレームワークを作成しました。 残っているのは、さまざまな美しいウィジェットで領域を埋めることによってそれを強化することです。 
 
 このチュートリアルの次のパートでは、いくつかの最も高度なコンポーネント（ツリーやタブなど）を紹介します。 今、あなたはすることができます ここに これまでに作成されたEclipseプロジェクトを見つけます。 SmartGWT固有のコンテンツ（画像など）の一部を削除したのは、ファイルが大きくなりすぎたためです。 これらは、新しいプロジェクトによって自動的に作成される必要があります。 「Gwt-servlet.jar」も「war WEB-INF lib」ディレクトリから削除されました。 
 
 ハッピーUIコーディング！ 
 
 更新：私も投稿しました このチュートリアル の 第二部 。 
   関連記事 ：    
 
翻訳元： https://www.javacodegeeks.com/2011/01/advanced-smartgwt-tutorial-part-1.html