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 <[email protected]>:
>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 < [email protected] > wrote:
>
>> Hi Andrey,
>>
>> OK will do it like that!
>>
>> Thanks!
>>
>>
>> On Wed, Jul 3, 2013 at 11:15 PM, Bogdanov Andrey < [email protected] > 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 < [email protected] >:
>>> >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 < [email protected] >
>>> wrote:
>>> >
>>> >> OK Maxim. Will do it like that!
>>> >>
>>> >>
>>> >> On Tue, Jul 2, 2013 at 2:05 PM, Maxim Solodovnik <
>>> [email protected] >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 < [email protected]
>>> >>> >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 < [email protected] >
>>> 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 <
>>> [email protected]
>>> >>>>> >:
>>> >>>>>
>>> >>>>> 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
>
--
Андрей Богданов
