Hi Andun, Here is a code which trace all changes of whitboard to browser console. You could replace console.log with call of Wicket.Ajax.get and trace changes at server.
<!DOCTYPE html> <html style="height:100%;"> <head> <script src="whiteboard.js"></script> <link rel="stylesheet" href="goog.css"> <link rel="stylesheet" href="whiteboard.css"> </head> <body style="height:94%;"> <div id="whiteboard" style = "width:100%; height:100%;"></div> </body> </html> <script type="text/javascript"> whiteboard = bay.whiteboard.Create(); whiteboard.getMainCollection().onChange = function(element){ console.log(this.getJson(element)); }; whiteboard.render(document.getElementById('whiteboard')); </script> If this doesn't work - check you pull the latest code from https://github.com/bay73/whiteboard Regards, Andrey Четверг, 4 июля 2013, 2:15 +05:30 от Andun Sameera <andun...@gmail.com>: >Hi All, > >I have successfully did a first step integration of Andrey's whiteboard >with Wicket. Now I can send the JSON string successfully to the JAVA code. >Now I know the way and will work on formalizing the thing! > > >@Andrey > >Can you give me a example to add a onChnage method to main collection. I >tried to do it. But is fails. > >@ Maxim > >Can I create a Git Repo for the task? Is it going to be a wicket-jquery-UI >plug-in ? or else ? > >Thanks! > >On Wed, Jul 3, 2013 at 11:18 PM, Andun Sameera < andun...@gmail.com > wrote: > >> Hi Andrey, >> >> OK will do it like that! >> >> Thanks! >> >> >> On Wed, Jul 3, 2013 at 11:15 PM, Bogdanov Andrey < ba...@mail.ru > wrote: >> >>> Hi Andun, >>> >>> Unfortunately I can't help you with wicket-ajax (I'm nit familiar with >>> wicket). >>> Only one remark about onChange - defining onChange for prototype is not a >>> good idea, because whiteboard use two auxilary collections which need not >>> to be synchronized. onChange function should be defined only for one main >>> collection. >>> >>> Regards, >>> Andrey >>> >>> >>> Среда, 3 июля 2013, 22:50 +05:30 от Andun Sameera < andun...@gmail.com >: >>> >Hi, >>> > >>> >Considering the example which Andrey gave me early, I am planning to do >>> >this, >>> > >>> > - Using the method given below, we can get a JSON string for any >>> update >>> > happen in Closure WhiteBoard >>> > >>> >// to be defined on using of collection >>> >bay.whiteboard.Collection.prototype.onChange = function(element){ >>> > alert(this.getJson(element)); >>> >} >>> > >>> > - I will do a Wicket.Ajax call in this JavaScript method to send this >>> > JSON string to the Server Side >>> > - There I process the string and map it to Java Objects >>> > - Then Synchronization happens >>> > >>> >As the initial step to do that, I am trying to implement a simple, >>> >application which can sent JavaScript Ajax calls to Wicket server. I use >>> >this article >>> > >>> >>> https://cwiki.apache.org/confluence/display/WICKET/Calling+Wicket+from+Javascript >>> . >>> >I have created the application given below. >>> > >>> >public class HomePage extends WebPage { >>> > private static final long serialVersionUID = 1L; >>> > >>> > public HomePage(final PageParameters parameters) { >>> > super(parameters); >>> > >>> > >>> > final AbstractDefaultAjaxBehavior behave = new >>> >AbstractDefaultAjaxBehavior() { >>> > protected void respond(final AjaxRequestTarget target) { >>> > target.add(new Label("foo", "Yeah I was just called from >>> >Javascript!")); >>> > } >>> > >>> > public void renderHead(Component component,IHeaderResponse >>> >response){ >>> > >>> > String componentMarkupId = component.getMarkupId(); >>> > String callbackUrl = getCallbackUrl().toString(); >>> > >>> > response.render( >>> >JavaScriptHeaderItem.forScript("var >>> >componentMarkupId='"+componentMarkupId+"'; var >>> >callbackUrl='"+callbackUrl+"';","values")); >>> > } >>> > }; >>> > >>> > add(behave); >>> > >>> > } >>> > >>> >} >>> > >>> >and my HomePage.html, >>> > >>> ><!DOCTYPE HTML> >>> ><html> >>> ><body> >>> ><script src=" >>> http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js >>> >"></script> >>> ><script type="text/javascript"> >>> > $(function() { >>> > var wcall = Wicket.Ajax.get({ u: '${callbackUrl}' + '' }); >>> > alert(wcall); >>> > }); >>> ></script> >>> ></body> >>> ></html> >>> > >>> >Still I cant get this to a working position. When I start this >>> application, >>> >wicket-ajax.js file is not loading. Thus console gives following error, >>> > >>> >ReferenceError: Wicket is not defined >>> >[Break On This Error] >>> > >>> >var wcall = Wicket.Ajax.get({ u: '${callbackUrl}' + '' }); >>> > >>> >Still cant find why wicket-ajax is not loaded to my application. Will let >>> >you know further updates! >>> > >>> >Thanks! >>> > >>> > >>> >On Tue, Jul 2, 2013 at 2:08 PM, Andun Sameera < andun...@gmail.com > >>> wrote: >>> > >>> >> OK Maxim. Will do it like that! >>> >> >>> >> >>> >> On Tue, Jul 2, 2013 at 2:05 PM, Maxim Solodovnik < >>> solomax...@gmail.com >wrote: >>> >> >>> >>> I would totally disagree with >>> >>> "At the Wicket Java code we save these elements as Java Objecst which >>> >>> contains the JSON strings." >>> >>> >>> >>> Java objects should contain normal fields like "Point center; int >>> >>> radius;" and be (de)serialized (from)into JSON if necessary. >>> >>> >>> >>> >>> >>> On Tue, Jul 2, 2013 at 2:27 PM, Andun Sameera < andun...@gmail.com >>> >>> >wrote: >>> >>> >>> >>>> Hi Andrey, >>> >>>> >>> >>>> Great! If you can give me a example for, >>> >>>> >>> >>>> collection.onChange(element) >>> >>>> >>> >>>> it will be highly appreciated. >>> >>>> >>> >>>> @Maxim, >>> >>>> >>> >>>> After some thinking I cam across of this idea. Please correct me If >>> I am >>> >>>> wrong. >>> >>>> >>> >>>> - All the whiteboard elements can be represented as JSON strings >>> >>>> (Have to find a way to add PDF,DOCs, Pictures to whiteboard in >>> this way) >>> >>>> - At the Wicket Java code we save these elements as Java Objecst >>> >>>> which contains the JSON strings. >>> >>>> - To synchronize white board we can send these object to all the >>> >>>> viewers. >>> >>>> - To save/load we can use this already implemented JSON based >>> >>>> serialization and de-serialization. >>> >>>> >>> >>>> But have to find ways to get all these data from closure >>> implementation >>> >>>> to wicket! >>> >>>> >>> >>>> Thanks! >>> >>>> On Tue, Jul 2, 2013 at 11:28 AM, Bogdanov Andrey < ba...@mail.ru > >>> wrote: >>> >>>> >>> >>>>> Hi Andun, >>> >>>>> >>> >>>>> Whiteboard consists of two main objects: ui-component >>> >>>>> "bay.whiteboard.Whiteboard", which contains functionality for user >>> >>>>> interaction and collections of objects "bay.whiteboard.Collection" >>> which >>> >>>>> contains list of objects and some stuff to manipulate them. >>> >>>>> After createing WB with >>> >>>>> whiteboard = bay.whiteboard.Create(); >>> >>>>> you could access to collection as >>> >>>>> collection = whiteboard.collections.main; or >>> >>>>> collection = whiteboard.getMainCollection(); - i've just added >>> this >>> >>>>> method >>> >>>>> >>> >>>>> After that you could define >>> >>>>> collection.onChange(element) - method wich will be invoked every >>> >>>>> time when some drawing elements add or change. >>> >>>>> Also you could use methods: >>> >>>>> collection.getJson(element); - to obtain json code for an >>> element >>> >>>>> collection.jsonCode(); - to obtain json code for whole >>> >>>>> collection >>> >>>>> collection.acceptJsonStr(str); - to add or change one element >>> >>>>> described as json >>> >>>>> collection.parseJson(str); - to rebuild all from the given >>> json >>> >>>>> string >>> >>>>> >>> >>>>> >>> >>>>> As an example you could explore linkWebSocket method in ui.js, which >>> >>>>> allows synchronize wb-content through webSocket >>> >>>>> >>> >>>>> Regards, >>> >>>>> Andrey Bogdanov >>> >>>>> >>> >>>>> Вторник, 2 июля 2013, 1:25 +05:30 от Andun Sameera < >>> andun...@gmail.com >>> >>>>> >: >>> >>>>> >>> >>>>> Hi Andrey, >>> >>>>> >>> >>>>> I am moving in to this new thread to discuss about the >>> clarifications, >>> >>>>> improvements and integration of your Whiteboard to wicket. I have >>> looked at >>> >>>>> your code which can be found https://github.com/bay73/whiteboard . I >>> >>>>> have following questions, >>> >>>>> >>> >>>>> - In Wicket, I want map Whiteboard Elements(Rectangle, Circle, >>> >>>>> Text, etc.) to Java objects. >>> >>>>> - Thus we can send those object to all the Whiteboard viewers. >>> >>>>> - Using these objects there Whiteboards will be updated. >>> >>>>> - To do that, can I get some data from your code? which can be >>> >>>>> later used to create elements. I saw there is a serialization >>> methods and >>> >>>>> deserilization method in base.js. If we can extend that >>> mechanism to give >>> >>>>> some data when element is drawn or edited as an event, I can use >>> them to >>> >>>>> create Java objects. >>> >>>>> - Also there should be a mechanism to draw elements on your >>> >>>>> Whiteboard by passing those data. >>> >>>>> >>> >>>>> Can we do these things? >>> >>>>> >>> >>>>> Thanks! >>> >>>>> -- >>> >>>>> Regards >>> >>>>> Andun S.L. Gunawardana >>> >>>>> Undergraduate >>> >>>>> Department of Computer Science And Engineering >>> >>>>> University of Moratuwa >>> >>>>> Sri Lanka >>> >>>>> >>> >>>>> Blog - http://www.insightforfuture.blogspot.com/ >>> >>>>> LinkedIn - >>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703 >>> >>>>> Twitter - http://twitter.com/AndunSLG >>> >>>>> >>> >>>>> >>> >>>>> >>> >>>>> >>> >>>>> >>> >>>>> >>> >>>>> >>> >>>>> -- >>> >>>>> Андрей Богданов >>> >>>>> >>> >>>> >>> >>>> >>> >>>> >>> >>>> -- >>> >>>> Regards >>> >>>> Andun S.L. Gunawardana >>> >>>> Undergraduate >>> >>>> Department of Computer Science And Engineering >>> >>>> University of Moratuwa >>> >>>> Sri Lanka >>> >>>> >>> >>>> Blog - http://www.insightforfuture.blogspot.com/ >>> >>>> LinkedIn - >>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703 >>> >>>> Twitter - http://twitter.com/AndunSLG >>> >>>> >>> >>>> >>> >>>> >>> >>>> >>> >>>> >>> >>> >>> >>> >>> >>> >>> >>> -- >>> >>> WBR >>> >>> Maxim aka solomax >>> >>> >>> >> >>> >> >>> >> >>> >> -- >>> >> Regards >>> >> Andun S.L. Gunawardana >>> >> Undergraduate >>> >> Department of Computer Science And Engineering >>> >> University of Moratuwa >>> >> Sri Lanka >>> >> >>> >> Blog - http://www.insightforfuture.blogspot.com/ >>> >> LinkedIn - >>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703 >>> >> Twitter - http://twitter.com/AndunSLG >>> >> >>> >> >>> >> >>> >> >>> >> >>> > >>> > >>> > >>> >-- >>> >Regards >>> >Andun S.L. Gunawardana >>> >Undergraduate >>> >Department of Computer Science And Engineering >>> >University of Moratuwa >>> >Sri Lanka >>> > >>> >Blog - http://www.insightforfuture.blogspot.com/ >>> >LinkedIn - http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703 >>> >Twitter - http://twitter.com/AndunSLG >>> > >>> >>> >>> -- >>> Андрей Богданов >>> >> >> >> >> -- >> Regards >> Andun S.L. Gunawardana >> Undergraduate >> Department of Computer Science And Engineering >> University of Moratuwa >> Sri Lanka >> >> Blog - http://www.insightforfuture.blogspot.com/ >> LinkedIn - http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703 >> Twitter - http://twitter.com/AndunSLG >> >> >> >> >> > > > >-- >Regards >Andun S.L. Gunawardana >Undergraduate >Department of Computer Science And Engineering >University of Moratuwa >Sri Lanka > >Blog - http://www.insightforfuture.blogspot.com/ >LinkedIn - http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703 >Twitter - http://twitter.com/AndunSLG > -- Андрей Богданов