javascriptの代わりにJava（gwt + netbeans）

gwtとgwt-extを見たとき、これについて知らされていなかったときにだまされていたと思いました。 ExtJSを使用したスクリプトデバッグの苦労は長く、Javaをサーバープラットフォームとして使用し、サーバーオブジェクトのシリアル化/逆シリアル化に手動で従事し、CSSを使用してブロックをカスタマイズし、多くの時間がかかった多くのことを行いました。 ただし、これはすべて残すことができます。 これで、Java（jsではない）コードを使用して美しいエコロジーウィンドウを描画できます！ GWTは素晴らしいことです。 jsコードを独自に生成するため、jsコードの記述から逃れることができます。 Javaソースでもデバッグできるので、プログラマはそれを見ることすらできないかもしれません！次に、設定方法を説明します netbeansの下のgwt。

降りる

したがって、目標はJava Webアプリケーションを作成することです。 さらに苦労せずに、extJSのインターフェイス、javaのサーバーロジックをハングアップし、Hibernateを使用してデータベースを操作します。コンポーネントの取得次のコンポーネントが必要です。

1. Netbeans 6.5 JavaまたはAll（それぞれWindows 212および249 mbの場合、他のOSの場合、サイズに大きな違いはありません） 。
2. ExtJs バージョン2.0.2 。
3. Google Web Toolkit 1.5 ;
4. 休止状態コア ;
5. gwt-ext 2.0.5

次に、必要なものをすべて汲み出して、Netbeansをインストールします。Web開発サポートを有効にして、すべてのものを実行するTomcatインストールをオフにすることを忘れないでください。

Netbeansをインストールするときに必要なオプション。

NetbeansにGWTのプラグインを配置します。

• [ツール]メニューの[プラグイン]を開きます。
• [利用可能なプラグイン]タブを開きます。
• プラグインGwt4Nbを探しています（検索を使用できます）。

裸のGWT

その後、新しいWebプロジェクトを作成します（ [ファイル]-> [新しいプロジェクト]-> [Java Web]-> [Webアプリケーション] ）。 プロジェクトには、名前と保存場所を指定する必要があります。 Tomcatをサーバー（または、好みにより別のサーバー）として指定します。 最後のページは、プロジェクトに必要なフレームワークを示しています。 Google Web ToolkitとHibernateが含まれています。 この場合、GWTの場合、gwtを解凍したディレクトリを選択する必要があります。 このために$ ProjectPath / lib / gwtフォルダーを選択しました。 また、開発するGWTモジュールの名前も指定する必要があります。 our.sample.Faceにします。 また、休止状態接続を構成する必要があります。このプロセスについては説明しません。これについてはすでに多くのことを述べています。たとえば、尊敬されているごみ収集家garbuzの記事をご覧ください。 その後、[完了]をクリックすると続行できますが、実行のメモリ制限を増やすランタイムのオプションをすぐに設定することをお勧めします。 これはプロジェクトプロパティで実行され、 [実行]-> [VMオプション]が「-Xmx512m」に設定されます。 また、コンパイラーの最大メモリーを増やす必要があります。ここで少し工夫する必要があります。netbeans/ build-gwt.xmlファイルを開いて、次のように変更する必要があります。

....<br/> < java classpath ="${javac.classpath}:${src.dir}" failonerror ="true" <br/> classname ="com.google.gwt.dev.GWTCompiler" fork ="true" > <br/> < arg value ="-out" /> <br/> < arg path ="${build.web.dir}/" /> <br/> < arg value ="-style" /> <br/> < arg value ="${gwt.compiler.output.style}" /> < arg value ="-logLevel" /> <br/> < arg value ="${gwt.compiler.logLevel}" /> <br/> < arg value ="${gwt.module}" /> <br/> < jvmarg value ="-Xmx512m" /> <br/> </ java > <br/>.... < target name ="debug-connect-gwt-shell" if ="netbeans.home" depends ="init" > http://bankinform.ru/habraeditor/images/yu-logo.png<br/>... <br/> < java fork ="true" classname ="com.google.gwt.dev.GWTShell" failonerror ="true" > <br/> < jvmarg value ="-Xmx512m" /> <br/> ....<br/> </ java > <br/> </ target > <br/>.... <br/><br/> * This source code was highlighted with Source Code Highlighter .

環境はour.sample.clientおよびour.sample.serverパッケージを作成しました。 愛してください-これらのディレクトリでは、それぞれクライアントとサーバーのコードになります。 より正確には、クライアントパッケージのクラスはコンパイル後にサーバーに残りますが、サーバーのクラスはクライアントに到達しません。 それにもかかわらず、私たちのsoftinkaはまだ発売の準備ができていません。 次に、プロジェクトを実行して、デフォルトで作成されたモジュールを確認できます。 各gwtモジュールについて、エントリポイント、クラスが示されます。これは、main（）メソッドを備えたクラスの類似物であり、システムはクライアント上で動作を開始します。 これは、最初のフォームが描画され始める場所であり、2番目のフォームは通常、そこから来ます。 すべてが人のようなものです:)。 デフォルトのエントリポイントは、クラス$ ModuleName + EntryPointで、この場合はour.sample.FaceEntryPointです。デバッグボタンを押して（実行するサーバーまたはクライアントのデバッグを選択できます）、アプリケーションのビルドを待ちます。 次に、実行中のサンプルを確認します。

試運転。

同時に、クライアント用に次のコードが作成されました。

package our.sample.client;<br/><br/>import com.google.gwt.core.client.EntryPoint;<br/>import com.google.gwt.user.client.ui.Button;<br/>import com.google.gwt.user.client.ui.ClickListener;<br/>import com.google.gwt.user.client.ui.Label;<br/>import com.google.gwt.user.client.ui.RootPanel;<br/>import com.google.gwt.user.client.ui.Widget;<br/><br/><br/> public class MainEntryPoint implements EntryPoint {<br/> // <br/> public void onModuleLoad() {<br/> // <br/> final Label label = new Label( "Hello, GWT!!!" );<br/> // <br/> final Button button = new Button( "Click me!" );<br/> <br/> // , . <br/> button.addClickListener( new ClickListener(){<br/> public void onClick(Widget w) {<br/> label.setVisible(!label.isVisible());<br/> }<br/> });<br/> <br/> // "" . <br/> RootPanel. get ().add(button);<br/> RootPanel. get ().add(label);<br/> }<br/>} <br/><br/> * This source code was highlighted with Source Code Highlighter .

ここで説明が必要だとは思わない。

GWT-Ext>

次に、gwt-extライブラリ自体を接続する必要があります。これは、標準のWebコンポーネントが必要ないためです。 これを行うには、プロジェクトプロパティ（プロジェクトツリーのルートを右クリックして[プロパティ]コンテキストメニュー）を開き、[ ライブラリ]-> [ライブラリを追加]-> [作成 ]の順にクリックします 。 次に、名前「gwt-ext」を入力し、クラス（[クラスパス]タブ）およびソースコード（[ソース]タブ）として、Gwt-extアーカイブからgwtext.jarファイルを指定します。 次に、[ライブラリの追加]をクリックします。

gwt-extライブラリを接続します。

また、web / js / extフォルダーにExtJS 2.0.2をスローすることを忘れないでください。 最後に、モジュールにextJに関連する新しいコンポーネントがあることを伝える必要があります。 これを行うには、ファイル/ sample / Face.gwt.xmlを開き、次のように修正します。

<? xml version ="1.0" encoding ="UTF-8" ? > <br/> < module > <br/> < inherits name ="com.google.gwt.user.User" /> <br/> < inherits name ='com.gwtext.GwtExt' /> <br/> < entry-point class ="our.sample.client.FaceEntryPoint" /> <br/><br/> < stylesheet src ="js/ext/resources/css/ext-all.css" /> <br/> < script src ="js/ext/adapter/ext/ext-base.js" /> <br/> < script src ="js/ext/ext-all.js" /> <br/> </ module > <br/> <br/> * This source code was highlighted with Source Code Highlighter .

それでは、意味のある何かを書きましょう。 人物に関する情報を含むフィールドを含むPersonクラスを追加し、クライアントがサーバーによってロードされたデータをこのクラスに描画しようとします。 この場合、非同期サービス（GWT RPC）の仕組みを示したいと思います。 our.sample.clientパッケージを右クリックして、Personクラスを追加します。

package our.sample.client;<br/><br/>import com.google.gwt.user.client.rpc.IsSerializable;<br/><br/> // Person, <br/> // IsSerializable, . <br/> public class Person implements IsSerializable {<br/> private String name;<br/> private String surname;<br/> private String patronymic;<br/> private String email;<br/> private int age;<br/> // .... <br/> // - <br/> // .... <br/>}<br/> <br/> * This source code was highlighted with Source Code Highlighter .

次に、リクエストに応じてPersonのインスタンスをクライアントに提供するサービスを作成します。 これを行うには、 our.sample.clientパッケージを右クリックし、[ 新規 ]- > [その他]を選択して、[Google Web Toolkit]カテゴリを選択し、その中でGWT RPCサービスを選択します。 新しいサービスの名前を入力する必要があります。必要に応じて、[使用例を作成する]ボックスをオンにします。 この場合、クライアント側で2つのインターフェイスが作成されます。サーバー側のクラスと、チェックボックスがオンになっている場合は、サービスの使用例を含むクライアントクラスエントリポイントです。 PersonServiceサービスの名前を入力します。 最終的にクラスが次のようになるように、 PersonService.javaにコードを追加します。

package our.sample.client;<br/><br/>import com.google.gwt.user.client.rpc.ServiceDefTarget;<br/>import com.google.gwt.user.client.rpc.RemoteService;<br/>import com.google.gwt.core.client.GWT;<br/> public interface PersonService extends RemoteService{<br/> public Person loadPerson( int someValue);<br/> <br/> public static class App {<br/> private static final PersonServiceAsync ourInstance;<br/> static {<br/> ourInstance = (PersonServiceAsync) GWT.create(PersonService. class );<br/> ((ServiceDefTarget) ourInstance).setServiceEntryPoint(GWT.getModuleBaseURL() + "PersonService" );<br/> }<br/> public static PersonServiceAsync getInstance()<br/> {<br/> return ourInstance;<br/> }<br/> }<br/>} <br/><br/> * This source code was highlighted with Source Code Highlighter .

ネストされたAppクラスを使用すると、サービスのインスタンスを取得できます。通常、環境がそれ自体を作成しないのは明らかではありませんが、使用例にその類似性を示します。したがって、それを生成して適切な場所にコピーできます その後、環境はエラーを表示し、サービスインターフェイスの同期バージョンと非同期バージョンが同期していないことを示します。alt+ Enterキーを押すと、エラーの代わりにテキストカーソルを置きます。

package our.sample.client;<br/>import com.google.gwt.user.client.rpc.AsyncCallback;<br/><br/> public interface PersonServiceAsync {<br/> public abstract void loadPerson( int someValue, AsyncCallback<Person> asyncCallback);<br/>}<br/> <br/><br/> * This source code was highlighted with Source Code Highlighter .

パッケージour.sample.serverで実装を行います：

package our.sample.server;<br/>import com.google.gwt.user.server.rpc.RemoteServiceServlet;<br/>import our.sample.client.Person;<br/>import our.sample.client.PersonService;<br/><br/> public class PersonServiceImpl extends RemoteServiceServlet implements PersonService {<br/> <br/> public Person loadPerson( int someValue) {<br/> Person person = new Person();<br/> person.setSurname( "Some" );<br/> person.setName( "Usual" );<br/> person.setPatronymic( "Man" );<br/> person.setAge(someValue);<br/> person.setEmail( "man@domain.com" );<br/> return person;<br/> }<br/>}<br/> <br/> * This source code was highlighted with Source Code Highlighter .

残念ながら、gwt4nbプラグインは、何らかの結果を返すインターフェイスのメソッドを適切に認識しません。 サービスがPersonのインスタンスを返す必要があり、gwt4nbがPersonを返すインターフェイスの非同期バージョン用のメソッドの作成を提供するとします。 ただし、これは間違っています。なぜなら すべての結果（およびエラーメッセージ）は、非同期メソッドの最後のパラメーター（AsyncCallbackインターフェイスを実装するクラスのインスタンス）を使用して取得されます。 実際、メソッドがオブジェクトを返すためには、メソッドpublic abstract void loadPerson（int someValue、AsyncCallback asyncCallback）を記述する必要があります。 ここで、最初のパラメーターは入力パラメーターであり、AsyncCallbackはサーバーでのメソッド実行の結果の処理を提供する必要があります。 特定のクラスのオブジェクトを返すには、テンプレート（この場合はPerson）でこのクラスを置き換える必要があります。 使用方法については、以下を参照してください。

package our.sample.client;<br/><br/>import com.google.gwt.core.client.EntryPoint;<br/>import com.google.gwt.user.client.rpc.AsyncCallback;<br/>import com.google.gwt.user.client.ui.RootPanel;<br/>import com.gwtext.client.core.EventObject;<br/>import com.gwtext.client.core.Position;<br/>import com.gwtext.client.widgets.Button;<br/>import com.gwtext.client.widgets.MessageBox;<br/>import com.gwtext.client.widgets.Panel;<br/>import com.gwtext.client.widgets. event .ButtonListenerAdapter;<br/>import com.gwtext.client.widgets.form.*;<br/><br/><br/> public class FaceEntryPoint implements EntryPoint {<br/><br/> public FaceEntryPoint() {<br/> }<br/><br/> final static TextField txtName = new TextField( "" , "name" , 190);<br/> final static TextField txtSurname = new TextField( "" , "surname" , 190);<br/> final static TextField txtPatronymic = new TextField( "" , "patronymic" , 190);<br/> final static TextField txtEmail = new TextField( "Email" , "email" , 190);<br/> final static TextField txtAge = new TextField( "" , "age" , 190);<br/><br/> public void onModuleLoad() {<br/> Panel panel = new Panel();<br/> panel.setBorder( false );<br/> panel.setPaddings(15);<br/><br/> final FormPanel formPanel = new FormPanel(Position.CENTER);<br/> formPanel.setFrame( true );<br/> formPanel.setTitle( " " );<br/> formPanel.setWidth(500);<br/> formPanel.setLabelWidth(100);<br/><br/> FieldSet fieldSet = new FieldSet( "" );<br/> fieldSet.add(txtName);<br/> fieldSet.add(txtSurname);<br/> fieldSet.add(txtPatronymic);<br/> fieldSet.add(txtEmail);<br/> fieldSet.add(txtAge);<br/> txtEmail.setVtype(VType.EMAIL);<br/> txtAge.setVtype(VType.ALPHANUM);<br/><br/> fieldSet.setWidth(formPanel.getWidth() - 20);<br/> final Button btnLoad = new Button( "" , new ButtonListenerAdapter() {<br/> public void onClick(Button button, EventObject e) {<br/> PersonService.App.getInstance().loadPerson(29, new AsyncCallback<Person>() {<br/><br/> public void onFailure(Throwable caught) {<br/> MessageBox.alert( ", - !" );<br/> }<br/><br/> public void onSuccess(Person result) {<br/> txtName.setValue(result.getName());<br/> txtSurname.setValue(result.getSurname());<br/> txtPatronymic.setValue(result.getPatronymic());<br/> txtAge.setValue( String .valueOf(result.getAge()));<br/> txtEmail.setValue(result.getEmail());<br/> }<br/> });<br/> }<br/> });<br/> formPanel.add(fieldSet);<br/> formPanel.addButton(btnLoad);<br/> panel.add(formPanel);<br/> RootPanel. get ().add(panel);<br/> }<br/>}<br/> <br/> * This source code was highlighted with Source Code Highlighter .

コードでは次のことが起こります。

• フィールドはクラスで宣言され、静的に宣言されます。 なぜか、少し下を見てください。
• 一連のフィールドを作成およびカスタマイズし、パネルに配置し、動作と表示をカスタマイズします。
• ボタン上のonClickイベントハンドラーを切断します。 ハンドラーは、ButtonListenerAdapterインターフェースを実装する匿名クラスです。 これは独立したクラスであり、FaceEntryPointクラスのフィールドを操作する必要があるため、これらのフィールドは静的であると宣言しました。
• ボタンクリックハンドラ内には、すばらしいサービスへの呼び出しがあります。 このサービスは、インターフェイスの実装（今回はAsyncCallback）も表します。 成功するとonSuccessメソッドが呼び出され、エラーが発生するとonFailureが呼び出されます。 OnSuccessパラメーターは、テンプレートパラメーターによって決定されます。

それだけです。 実行して楽しむことができます:)



Webサーバー用のwarファイルを作成するには、プロジェクトライブラリからgwt-dev-windows.jarを除外する必要があることに注意してください。

---

そして最後に、少し自己批判とコメントをする余裕があります。

• gwt4nbプラグインは、私が頼りにしなければならなかったトリックからわかるように、少し湿っています。
• gwt 1.6 m1は既にリリースされており、記事はgwt 1.5に焦点を当てています。

私は日食でgwtを使用しようとしませんでした、それのためのプラグインはより堅実で機能的である可能性が高いです。 しかし、IntelliJ IDEA 8のサポートは喜んでおり、むしろ、gwtの使用に関する知識を合理化する必要があり、記事は私自身のためにより多く書かれました。 誰かが役に立つと嬉しいです。



upd：これがすべて空で不必要に見えないように、 gwt -extの例を見ることができます。