webサイト用のUIのコンポーネントが揃っていて
どちらのサイトもdemoやらshowcaseやら充実してていい感じ。
The UI library for the Web
jQuery TOOLS
GWT API's for SmartClient
smartgwt
Posted on 6月 4th, 2009 by mitsu
Filed under: GWT, Javascript, 開発メモ | No Comments »
昨日の続きです。
carousel3dのcontrol_button.htmlを参考にしてみました。
また、App.javaに入力フィールドを追加しました。
入力後、Enterボタン押して下さい。
機能的には
AmazingZoneの入力フィールドと同じです。
＃検索結果のイメージクリックでのZoom具合が微妙かとは思いますが。。。
demo
App.gwt.xmlに以下を追加して下さい。
<inherits name="com.google.gwt.http.HTTP"/>
<inherits name="com.google.gwt.json.JSON"/>
App.java
途中で呼び出しているphpはAmazingZoneで使っているもので
検索ワードについてjsonで結果を返しているだけです。
package com.gethapp.sample.gwjq.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.http.client.RequestException;
import com.google.gwt.http.client.Response;
import com.google.gwt.http.client.URL;
import com.google.gwt.json.client.JSONArray;
import com.google.gwt.json.client.JSONObject;
import com.google.gwt.json.client.JSONParser;
import com.google.gwt.user.client.Cookies;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.KeyboardListener;
import com.google.gwt.user.client.ui.KeyboardListenerAdapter;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
public class App implements EntryPoint {
public void onModuleLoad() {
VerticalPanel p = new VerticalPanel();
final Panel main = new SimplePanel();
final TextBox textbox = new TextBox();
String q = Cookies.getCookie("q");
if (q != null) {
textbox.setText(URL.decode(q));
}
textbox.addKeyboardListener(new KeyboardListenerAdapter() […]
Posted on 12月 18th, 2008 by mitsu
Filed under: GWT, Javascript, 開発メモ | 1 Comment »
GWTでjquery（3D Image Carousel)を使いたいなと思ったのでメモ
＃多分、Interface elements for jQuery - Documentation - Carouselでも可
1.まずは、いつもの手順でeclipse(w/cypal)でプロジェクトを用意しておきます。
パッケージ名：com.gethapp.sample.gwjq
モジュール名：App.java
にしています。
2.3D Image Carouselのページにあるdownload filesからファイルをダウンロード、展開します。
3.展開されたファイルの
jquery
images
フォルダーを
1で作成したプロジェクトのpublicフォルダーにコピーします。
4.展開されたファイルのうち
例えば、
perspective.html
を開き、
script,styleタグを
App.htmlにコピーします。
ただ、以下のようにdomreadyで動く以下の部分だけはコメントし、
ほぼ同じで
functionにしておきます。
function名は、carousel3dとしておきます。
<script type="text/javascript">
//jQuery(function($) {
//$("#carousel").html($("#holder_images").html()).carousel3d({ perspective: 200, centerX: $('#carousel').offset().left + $('#carousel').width()/2 });
//});
function carousel3d() {
$("#carousel").html($("#holder_images").html()).carousel3d({ perspective: 200, centerX: $('#carousel').offset().left + $('#carousel').width()/2 });
}
</script>
5.最後に、App.javaです。
App.javaは、runボタンがあり、クリックされると
perspective.htmlにあるように二つのdiv要素を作り、
4で記述したjavascriptのcarousel3dを呼び出します。
すると、carouselが表示されます。
App.java
package com.gethapp.sample.gwjq.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
public class App implements EntryPoint {
public void onModuleLoad() {
final Panel panel=new SimplePanel();
Element carouselDiv=DOM.createDiv();
carouselDiv.setId("carousel");
panel.getElement().appendChild(carouselDiv);
Button […]
Posted on 12月 17th, 2008 by mitsu
Filed under: GWT, Javascript, 開発メモ | No Comments »
ExtGWTについて話したけど、
最後の方は、gdgdでした。
コネクタ忘れたのが悪いんですけどね。。。
今日のネタ、おいておきます。
興味がある方はどうぞ。
——————————————————–
スライド
要は、eclipse+cypal studio使いましょう。ということで。。。
右矢印で次スライドに進みます。
——————————————————–
GWTでアプリ作成
ButtonクリックでTextBoxに入力したものをLabelコピーするアプリ
hostedモードで起動編
——————————————————–
Gxtでアプリ作成（１）
設定編
——————————————————–
ADDボタンクリックで、
２つのTextFieldに入力した数字を足し算して、
Labelに答えを表示するアプリを作った後、
下のscreencastを見てください。
Gxtでアプリ作成（２）
クライアント側で足し算アプリを、わざわざサーバー側で足し算アプリに改造する編
このscreencast、最後、tomcat起動で終わっています。
もちろん、続きは、自分のPCで
http://localhost:8080/GXT01/MyGxtApp.html
にアクセスして確認しましょう。
——————————————————–
今回、amachangのS6(リンク先ここでOK?かな)と
jing+screencastありがたく使わせて頂きました。
Posted on 7月 30th, 2008 by mitsu
Filed under: Ext, java, Javascript, 開発メモ | 1 Comment »
