Custom Component tutorial

I´m looking for an article that is similar to this one

https://vaadin.com/wiki/-/wiki/Main/Integrating+Custom+Flash+Widget

Just for Vaadin 7 - Is this available or where is as good starting point to integrate such custom component.

I want to integrate a unity3d plugin within vaadin with a communication in both directions. Client ↔ Server.
We did this in the past in Echo3, and now I would like to migrate this to vaadin7.

Creating Custom Components is extensively written about in the section “Custom widgets” on this
wiki-page
. Integration between Unity3D and Javascript must be checked elsewhere, but some integration-code on that side might be already available from your echo3-integration …

Thanks for that link, but I cant´t identify the right entry point to my problem.

So how can I write a Custom Component that creates the html code with the tag of it´s own ?
That´s where I want to start.

OK, I assume, you don’t know anything about GWT? In that case you will have to study a bit. Actually there is no really good documentation about this topic available online in my opinion. You can start here:
GWT-DevGuide: Create new Widgets
, but it basically just says, that you need to check how existing widgets are implemented.

What I can tell you on the fly is, that you probably want to implement an own widget (a subclass of Widget in GWT). Inside that class you can create the necessary Tags by using instances of Element (ObjectElement for example). Those you need to connect with the needed Click-, MouseOver-, etc Listeners. After you have done this GWT-groundwork, you can start integrating the widget with Vaadin, which is explained in the wiki-articles I gave you the link for.

Maybe, if you are lucky you can find an existing GWT-widget which already does what you want. If not - as last resort - you could buy some premium-support from Vaadin Ltd and make one of their excellent developers do the job for you ;).

Sorry for not being more helpful, but GWT is a very broad subject …

Now I know where I have to start from.
I thought I can skip that GWT stuff a bit - even if vaadin is based on that.

I now followed the tutorial “Using Javascript” within the Vaadin7-wiki https://vaadin.com/wiki/-/wiki/Main/Vaadin 7

So I don´t need to create a GWT Widget. I just create a Javascript-Widget plus Javascript method which does the job
Looks like this.

de_foo_package_VaadinUnity3d = function() {
var e = this.getElement();
unityThis = this;
var rpcProxy = this.getRpcProxy();

var _state = this.getState();

this.onStateChange = function() {
	
	var unityTag = null;         
        
       unityTag = document.createElement("embed");
    
       unityTag.id = "UnityObject";
       unityTag.setAttribute("src", "VAADIN/WebPlayer.unity3d");
       unityTag.setAttribute("width", "100%");
       unityTag.setAttribute("height", "100%");
       unityTag.setAttribute("type", "application/vnd.unity");
       unityTag.setAttribute("pluginspage", "http://webplayer.unity3d.com/download_webplayer-3.x/");
       unityTag.setAttribute("disableContextMenu","true");
       unityTag.style.visibility ='visible';
       e.appendChild(unityTag);
};	

};

Also the RPC in both direction is really straight forward - Didn´t expect, that it´s that easy.

Outstanding job from the Vaadin team - thanks for that !!