tag:robotlegs.tenderapp.com,2009-10-18:/discussions/robotlegs-2/12769-htmlloader-and-jquery-as-a-viewRobotlegs: Discussion 2015-05-11T11:34:23Ztag:robotlegs.tenderapp.com,2009-10-18:Comment/362508162015-03-11T02:30:46Z2015-03-11T13:30:48ZhtmlLoader and jquery as a view<div><p>Hello,</p>
<p>I need some help for a best practice in using robotleg.<br>
I'm trying to build a Air desktop app that uses htmlLoader, jQuery,
and Rangy (highlighting) to build a epub reader.<br>
As the project getting more complicated, I'm considering to adopt
Robotlegs2.<br>
As making highlights and accessing htmlElements constantly require
intensively to access htmlLoader.window and
htmlLoader.window.$.<br>
I'm confused where to start put these two reference in the
framework structure, and access it overall application.</p>
<p>Currently, I made a wrapper class for the htmlLoader and gave
methods and whenever I need sub layer - like highlight view - I
give the reference via _owner:WrapperClass and access DOM and
jQuery objec, for example
_owner.htmlLoader.window.$("img").foreach(...)</p>
<p>Question is.. what is best practice to access DOM and $ overall
application if I use robotleg ? Anyone can give some clue where to
start? Another concern is some of logic are embeded in javascript,
such as htmlLoader.window.onmousemove = function(){} (yes, things
getting messier, sigh.. )..</p>
<p>the application's basic process is like</p>
<ol>
<li>load epub<br></li>
<li>unzip epub<br></li>
<li>analise epub<br></li>
<li>build toc<br></li>
<li>update UI layer (page slider, toc list view, etc)<br></li>
<li>gather all the html string, htmlLoader.loadString()<br>
<ul>
<li>After loading complete, I need to access the DOM and jQuery
intensively overall application.</li>
</ul>
</li>
<li>Basic commands are like below,<br>
gotoPage, addHighlight, removeHighlight, saveHighlight,
closePlayer, loadEpub, changeFontSize addVideo, removeVideo, and so
on.</li>
</ol>
<p>My concern is most of commands are directly connected to
htmlLoader.window, need sort of global access for jQuery.<br>
One more important thing is, on stage, this Wrapper instance should
be able to put more than two... so can't use singleton for the
player.</p>
<p>Simply the question is, in my case, what is the best practice to
access DOM and $ in the case using robotlegs structure, how or
where to register,. Just simple clue also will be very appreciated.
Thank you for reading</p></div>Stevetag:robotlegs.tenderapp.com,2009-10-18:Comment/362508162015-03-11T15:13:19Z2015-03-11T15:13:19ZhtmlLoader and jquery as a view<div><p>Hi Steve,</p>
<p>Hmm, quite tricky. I'm not sure I know the answer.<br>
My first thought was to use the HTMLWrapper as a Service, but I
think a Mediator would do a better job in communicating with other
framework classes on behalf of the HTMLWrapper.</p>
<p>I'd create a mediator for the view that contains the html
wrapper. The wrapper communicates with JS both ways.</p>
<blockquote>
<p>htmlLoader.window.onmousemove = function(){} (yes, things
getting messier, sigh.. )..</p>
</blockquote>
<p>You can add handlers for JS events in your view:</p>
<p>htmlLoader.window.document.getElementById("someButton").onclick
= onSomeButtonClicked;</p>
<p>onSomeButtonClicked being the as3 handler, where you can do
whatever you need to do, for example, dispatch a custom event, that
would be listened to by the mediator and re-dispatched, if need
be.<br>
The mediator can also listen to events dispatched on the shared
event dispatcher by other classes in your app, and access view's
API to interact with the html wrapper or to pass some data on to
the view.</p>
<p>Would that work for you? If not, why not?</p>
<p>Others may have better ideas.</p>
<p>Ondina</p></div>Ondina D.F.tag:robotlegs.tenderapp.com,2009-10-18:Comment/362508162015-03-11T16:36:51Z2015-03-11T16:36:51ZhtmlLoader and jquery as a view<div><p>Hi, Ondina,</p>
<p>Thank you for insightful answer. Quite similar as the way I feel
confused.<br>
Because, htmlLoader is actually loading html DOM model, so, it acts
like service, at the same time, if the htmlLoader's loaded DOM
model is changed -- as some custom media objects are implemented in
DisplayObject basis on top of htmlLoader -- so these are need to be
changed upon DOM is changed, so it acts like an model. On the other
hand, htmlLoader wrapper work like view, of course, as it actually
showing html contents.</p>
<p>I also thought about passing htmlLoader.window object as an
event's property, and whatever classes need window and jquery, then
access through the event's property.. I'm not even sure whether
this is possible.. :)</p>
<p>I like "communicating with other framework classes on behalf of
the HTMLWrapper.". Let me think more for better ways.</p>
<p>Thank you again Ondina, not only for your answer, but giving me
some hope that I have a place to ask question.</p>
<p>Best,<br>
Steve</p></div>Stevetag:robotlegs.tenderapp.com,2009-10-18:Comment/362508162015-03-11T17:22:00Z2015-03-11T17:22:00ZhtmlLoader and jquery as a view<div><p>You're welcome, Steve:)</p>
<p>Of course you can ask questions in here whenever you get
stuck.</p>
<blockquote>
<p>Because, htmlLoader is actually loading html DOM model, so, it
acts like service, at the same time, if the htmlLoader's loaded DOM
model is changed -- as some custom media objects are implemented in
DisplayObject basis on top of htmlLoader -- so these are need to be
changed upon DOM is changed, so it acts like an model. On the other
hand, htmlLoader wrapper work like view, of course, as it actually
showing html contents.</p>
</blockquote>
<p>Exactly. It seems that you understand MVCS well, so I think that
you'll find out soon enough which role should the wrapper have in
your app. Some classes are kind of a hybrid and it's hard to assign
them one of the mvcs roles.</p>
<blockquote>
<p>I also thought about passing htmlLoader.window object as an
event's property, and whatever classes need window and jquery, then
access through the event's property.. I'm not even sure whether
this is possible.. :)</p>
</blockquote>
<p>It is possible. You just add the property to your custom event
class and it will be used as a strongly typed payload. Tell me if
you need an example of a custom event.</p>
<p>Also, just so you know, it is possible to inject a shared event
dispatcher as IEventDispatcher into classes like Models, Services,
Commands. Likewise you could inject an IEventDispatcher into your
HTMLWrapper in order to be able to dispatch events, in case you
decide to use the wrapper as a Service or Model or something
similar.</p>
<p>I haven't thought it through, so I'm not sure if it is a good
solution for you, but maybe you could look at the factory pattern,
too. A factory class that creates your wrappers when needed.</p>
<p>Good luck finding the solution that works best for you. It would
be nice to let us know about it, too:)</p>
<p>Ondina</p></div>Ondina D.F.tag:robotlegs.tenderapp.com,2009-10-18:Comment/362508162015-03-12T02:16:20Z2015-03-12T02:16:20ZhtmlLoader and jquery as a view<div><p>Sure I want to share my struggles if that helps others.<br>
I have done 1 project long ago with robotlegs version 1, but forgot
a lot of them.<br>
Trying to see the Oreilly book again and checking previous
discussions in here for migration to version 2.<br></p>
<pre>
<code>IEventDispatcher into classes like Models, Services, Commands.
Likewise you could inject an IEventDispatcher into your HTMLWrapper in
order to be able to dispatch events,
in case you decide to use the wrapper as a Service or Model or
something similar.</code>
</pre>
I didn't think about this. Probably in this way, I can think of
more options. Thanks. :)
<p>By the way, how to add the vertical line when you quoted my
wordings?<br>
It seems handy but can't find the way at "Formatting help".</p>
<p>Thanks and hope you have a good day.</p>
<p>Steve</p></div>Stevetag:robotlegs.tenderapp.com,2009-10-18:Comment/362508162015-03-12T10:44:27Z2015-03-12T10:44:27ZhtmlLoader and jquery as a view<div><p>With robotlegs 1 you can create Models and Services or other
classes that extend Actor, if you want.</p>
<p><a href=
"http://knowledge.robotlegs.org/kb/reference-mvcs-implementation/do-models-and-services-have-to-extend-actor-why">
http://knowledge.robotlegs.org/kb/reference-mvcs-implementation/do-...</a></p>
<p>In robotlegs 2 there is no Actor class, so you can do what I
mentioned in my previous post or you can create your own base class
following the example of the rl1 Actor:</p>
<p><a href=
"https://github.com/robotlegs/robotlegs-framework/blob/version1/src/org/robotlegs/mvcs/Actor.as">
https://github.com/robotlegs/robotlegs-framework/blob/version1/src/...</a></p>
<blockquote>
<p>By the way, how to add the vertical line when you quoted my
wordings? It seems handy but can't find the way at "Formatting
help".</p>
</blockquote>
<p>Simply by putting a greater than sign (>) in front of the
text that needs to be quoted, and a line break before and after the
quoted text ( line break, greater sign, text, line break)</p>
<blockquote>
<p>Trying to see the Oreilly book again and checking previous
discussions in here for migration to version 2.</p>
</blockquote>
<p>Good idea. Here, 2 discussions that might also help:</p>
<p><a href=
"http://knowledge.robotlegs.org/discussions/robotlegs-2/6370-baby-steps-simple-robolegs-2-setup#comment_28678205">
http://knowledge.robotlegs.org/discussions/robotlegs-2/6370-baby-st...</a></p>
<p><a href=
"http://knowledge.robotlegs.org/discussions/questions/2209-mediator-#comment_26311878">
http://knowledge.robotlegs.org/discussions/questions/2209-mediator-...</a></p>
<p>Have a great day, too.</p></div>Ondina D.F.