Google通过自定义小部件在Vaadin6中的集成

Question

我需要集成谷歌钱包到我的Vaadin 6应用程序，下载钱包api/演示从这里。

首先，我试图将这个给定的样本运行到vaadin，但经过很长时间的努力，我现在被困住了。尝试了许多方法/示例，研究了很多关于小部件的内容，但是只有这示例被发现是简单和有效的。

我添加了代码行，这个过程一直顺利进行到()调用，但是当它调用钱包API函数buy()时，浏览器的页面被清除，什么也没有发生，就好像程序结束了一样。

如果我的方法是错误的，请建议我任何的例子或工作。

干杯

script.js

    function proceedMessage(message) {
    alert(message);
    return message;
}

function loadConfig(){
    google.load('payments', '1.0', {
        'packages': ['sandbox_config']
    });
}

var paymentStatus ;
//Success handler
var successHandler = function(status){
    if (window.console != undefined) {
        console.log("Purchase completed successfully: ", status);
        //window.location.reload();
    }
    paymentStatus = "SUCCESS";
}

//Failure handler
var failureHandler = function(status){
    if (window.console != undefined) {
        console.log("Purchase failed ", status);
    }
    paymentStatus = "FAILURE";
}

function result(){
    return paymentStatus;
}

function purchase(item) {
    var generated_jwt;
    if (item == "Item1") {
        generated_jwt = "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMjgyOTQzNjkwNDgwNzQ5NTkwMiIsImF1ZCI6Ikdvb2dsZSIsInR5cCI6Imdvb2dsZS9wYXltZW50cy9pbmFwcC9pdGVtL3YxIiwiaWF0IjoxMzg4MTM5NDQzLCJleHAiOjEzODgxMzk1MDMsInJlcXVlc3QiOnsibmFtZSI6IlBpZWNlIG9mIENha2UiLCJkZXNjcmlwdGlvbiI6IlZpcnR1YWwgY2hvY29sYXRlIGNha2UgdG8gZmlsbCB5b3VyIHZpcnR1YWwgdHVtbXkiLCJwcmljZSI6IjEwLjUwIiwiY3VycmVuY3lDb2RlIjoiVVNEIiwic2VsbGVyRGF0YSI6InVzZXJfaWQ6MTIyNDI0NSxvZmZlcl9jb2RlOjMwOTg1NzY5ODcsYWZmaWxpYXRlOmFrc2RmYm92dTlqIn19.k8OWXVdemtfNFPu4-PSc-1OIkPS7o0bYA1MMq1dhUXQ";
    }  else {
        return;
    }
        goog.payments.inapp.buy({
            'jwt'     : generated_jwt,
            'success' : successHandler,
            'failure' : failureHandler
        });
    }

客户端组件VGoogleWallet.java

package com.example.testing.client.ui;
import com.example.testing.client.ui.MessageJSNI;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
import com.vaadin.terminal.gwt.client.Paintable;
import com.vaadin.terminal.gwt.client.UIDL;
import com.google.gwt.dom.client.Document;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.shared.GwtEvent;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Widget;

/**
 * Client side widget which communicates with the server. Messages from the
 * server are shown as HTML and mouse clicks are sent to the server.
 */
public class VGoogleWallet extends Widget implements Paintable, ClickHandler {

    /** Set the CSS class name to allow styling. */
    public static final String CLASSNAME = "v-googlewallet";

    public static final String CLICK_EVENT_IDENTIFIER = "click";

    /** The client side widget identifier */
    protected String paintableId;

    /** Reference to the server connection object. */
    protected ApplicationConnection client;

    /**
     * The constructor should first call super() to initialize the component and
     * then handle any initialization relevant to Vaadin.
     */
    public VGoogleWallet() {
        // TODO This example code is extending the GWT Widget class so it must set a root element.
        // Change to a proper element or remove this line if extending another widget.

        setElement(Document.get().createDivElement());
        // This method call of the Paintable interface sets the component
        // style name in DOM tree"
        setStyleName(CLASSNAME);

    }

    /**
     * Called whenever an update is received from the server 
     */
    public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
        // This call should be made first. 
        // It handles sizes, captions, tooltips, etc. automatically.
        if (client.updateComponent(this, uidl, true)) {
            // If client.updateComponent returns true there has been no changes and we
            // do not need to update anything.
            return;
        }

        // Save reference to server connection object to be able to send
        // user interaction later
        this.client = client;

        // Save the client side identifier (paintable id) for the widget
        paintableId = uidl.getId();

        // Process attributes/variables from the server
        // The attribute names are the same as we used in 
        // paintContent on the server-side

        String message = uidl.getStringAttribute("message");
        String paymentStatus = uidl.getStringVariable("paymentStatus");
        getElement().setInnerHTML(MessageJSNI.proceedMessage(message));
        MessageJSNI.loadConfig();
        MessageJSNI.purchase();
        paymentStatus = MessageJSNI.getResult();

        client.updateVariable(paintableId, "paymentStatus", "PAID", true);
    }

}

服务器端组件GoogleWallet.java

package com.example.testing;

import java.util.Map;

import com.vaadin.terminal.PaintException;
import com.vaadin.terminal.PaintTarget;
import com.vaadin.ui.AbstractComponent;

/**
 * Server side component for the VGoogleWallet widget.
 */
@com.vaadin.ui.ClientWidget(com.example.testing.client.ui.VGoogleWallet.class)
public class GoogleWallet extends AbstractComponent {

    private String message = "default message";
    private String paymentStatus ;

    public GoogleWallet(String message){
        this.message = message;
    }

    @Override
    public void paintContent(PaintTarget target) throws PaintException {
        super.paintContent(target);

        // Paint any component specific content by setting attributes
        // These attributes can be read in updateFromUIDL in the widget
        target.addAttribute("message", message);
        target.addVariable(this, "paymentStatus", "UNPAID");

    }

//  /**
//   * Receive and handle events and other variable changes from the client.
//   * 
//   * {@inheritDoc}
//   */
    @Override
    public void changeVariables(Object source, Map<String, Object> variables) {
        super.changeVariables(source, variables);
//
//       Variable set by the widget are returned in the "variables" map.
//
        if (variables.containsKey("paymentStatus")) {
//
            // When the user has clicked the component we increase the 
            // click count, update the message and request a repaint so 
            // the changes are sent back to the client.
            paymentStatus = (String) variables.get("paymentStatus");
            System.out.println(paymentStatus);
            requestRepaint();
        }
    }

}

JavaScript原生接口类MessageJSNI.java

package com.example.testing.client.ui;

public class MessageJSNI {

    protected MessageJSNI() {
    }

    public native static String proceedMessage(String message) /*-{
        return $wnd.proceedMessage(message);
    }-*/;

    public native static void loadConfig()/*-{
    $wnd.loadConfig();
  }-*/;

    public native static void purchase()/*-{
    $wnd.purchase('Item1');
  }-*/;


    public native static String getResult()/*-{
    return $wnd.result();
    }-*/;


}

TestingWidgetset.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />

    <script src="script.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

    <script src="http://www.google.com/jsapi"></script>
    <!--
     Uncomment the following to compile the widgetset for one browser only.
     This can reduce the GWT compilation time significantly when debugging.
     The line should be commented out before deployment to production
     environments.

     Multiple browsers can be specified for GWT 1.7 as a comma separated
     list. The supported user agents at the moment of writing were:
     ie6,ie8,gecko,gecko1_8,safari,opera

     The value gecko1_8 is used for Firefox 3 and later and safari is used for
     webkit based browsers including Google Chrome.
    -->
    <!-- <set-property name="user.agent" value="gecko1_8"/> -->

    <!--
     To enable SuperDevMode, uncomment this line and use the
     Super Dev Mode for Vaadin 6 add-on.

     SuperDevMode enables debugging of the client side of a Vaadin
     application using the JavaScript debugger of a browser. Java code is
     shown and debugging can take place on the Java level when using a browser
     that support source maps (currently Chrome, implementation under work
     for Firefox).

     See https://vaadin.com/directory#addon/super-dev-mode-for-vaadin-6 for
     more information and instructions.
    -->
    <!-- <set-configuration-property name="devModeRedirectEnabled" value="true" /> -->

</module>

Answer 1

至少在花了几个小时之后，我在我的Vaadin 6应用程序中运行了这个演示程序，虽然现在我在我的服务器生成的JWT中遇到了一些问题，但是这个演示现在正在工作。

以下是代码中的更改

script.js

function buy(){
    google.payments.inapp.buy({
    'jwt'     : "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMDk3OTc5MTY0NTUxNTM4MDY2OSIsImF1ZCI6Ikdvb2dsZSIsInR5cCI6Imdvb2dsZS9wYXltZW50cy9pbmFwcC9pdGVtL3YxIiwiaWF0IjoxMzg4NDcwMzM5LCJleHAiOjEzODg0NzAzOTksInJlcXVlc3QiOnsibmFtZSI6IkNsb3VkU3RyZWFtMTUiLCJkZXNjcmlwdGlvbiI6IkNsb3VkU3RyZWFtIE9uZSBtb250aCBwYWNrYWdlIGZvciAxNSB1c2VycyIsInByaWNlIjoiMjUwLjAwIiwiY3VycmVuY3lDb2RlIjoiVVNEIiwic2VsbGVyRGF0YSI6InVzZXJfaWQ6MTIyNDI0NSxvZmZlcl9jb2RlOjMwOTg1NzY5ODcsYWZmaWxpYXRlOmFrc2RmYm92dTlqIn19.JoUUTcVilz8nBSPjbCVuESi-QUS7fN6f9PeEseE7CSY",
    'success' : function(status){if (window.console != undefined) {console.log("Purchase completed successfully: ", status);}},
    'failure' : function(status){if (window.console != undefined) {console.log("Purchase failed ", status);}}
});
}

客户端小部件VGoogleWallet.java

package com.example.testing.client.ui;

import com.example.testing.client.ui.MessageJSNI;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
import com.vaadin.terminal.gwt.client.Paintable;
import com.vaadin.terminal.gwt.client.UIDL;
import com.google.gwt.dom.client.Document;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.shared.GwtEvent;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Widget;

/**
 * Client side widget which communicates with the server. Messages from the
 * server are shown as HTML and mouse clicks are sent to the server.
 */
public class VGoogleWallet extends Widget implements Paintable, ClickHandler {

    /** Set the CSS class name to allow styling. */
    public static final String CLASSNAME = "v-googlewallet";

    /** The client side widget identifier */
    protected String paintableId;

    /** Reference to the server connection object. */
    protected ApplicationConnection client;

    /**
     * The constructor should first call super() to initialize the component and
     * then handle any initialization relevant to Vaadin.
     */
    public VGoogleWallet() {
        // TODO This example code is extending the GWT Widget class so it must set a root element.
        // Change to a proper element or remove this line if extending another widget.

        setElement(Document.get().createDivElement());
        // This method call of the Paintable interface sets the component
        // style name in DOM tree"
        setStyleName(CLASSNAME);

    }

    /**
     * Called whenever an update is received from the server 
     */
    public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
        // This call should be made first. 
        // It handles sizes, captions, tooltips, etc. automatically.
        if (client.updateComponent(this, uidl, true)) {
            // If client.updateComponent returns true there has been no changes and we
            // do not need to update anything.
            return;
        }

        // Save reference to server connection object to be able to send
        // user interaction later
        this.client = client;

        // Save the client side identifier (paintable id) for the widget
        paintableId = uidl.getId();

            MessageJSNI.buy();
    }


}

TestingWidgetset.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />

    <script src="script.js"></script>

    <script src="https://sandbox.google.com/checkout/inapp/lib/buy.js"></script> 
    <!--
     Uncomment the following to compile the widgetset for one browser only.
     This can reduce the GWT compilation time significantly when debugging.
     The line should be commented out before deployment to production
     environments.

     Multiple browsers can be specified for GWT 1.7 as a comma separated
     list. The supported user agents at the moment of writing were:
     ie6,ie8,gecko,gecko1_8,safari,opera

     The value gecko1_8 is used for Firefox 3 and later and safari is used for
     webkit based browsers including Google Chrome.
    -->
    <!-- <set-property name="user.agent" value="gecko1_8"/> -->

    <!--
     To enable SuperDevMode, uncomment this line and use the
     Super Dev Mode for Vaadin 6 add-on.

     SuperDevMode enables debugging of the client side of a Vaadin
     application using the JavaScript debugger of a browser. Java code is
     shown and debugging can take place on the Java level when using a browser
     that support source maps (currently Chrome, implementation under work
     for Firefox).

     See https://vaadin.com/directory#addon/super-dev-mode-for-vaadin-6 for
     more information and instructions.
    -->
    <!-- <set-configuration-property name="devModeRedirectEnabled" value="true" /> -->

</module>

MessageJSNI.java

package com.example.testing.client.ui;

public class MessageJSNI {

    protected MessageJSNI() {
    }

    public native static void buy()/*-{
    $wnd.buy();
  }-*/;

}