Happy Man

mash-uppy

GWT+JQUERY(3D Image Carousel)修正

昨日の続きです。
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)

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 »

Ext GWT 1.2 Released

Ext GWT 1.2 Released
＃せっかくのリリースなのに、ページにあるサンプルへのリンク切れてますよ。。

Posted on 12月 2nd, 2008 by mitsu
Filed under: Ext, 開発メモ | No Comments »