htmlLoader and jquery as a view

Steve's Avatar

Steve

11 Mar, 2015 02:30 AM

Hello,

I need some help for a best practice in using robotleg.
I'm trying to build a Air desktop app that uses htmlLoader, jQuery, and Rangy (highlighting) to build a epub reader.
As the project getting more complicated, I'm considering to adopt Robotlegs2.
As making highlights and accessing htmlElements constantly require intensively to access htmlLoader.window and htmlLoader.window.$.
I'm confused where to start put these two reference in the framework structure, and access it overall application.

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(...)

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.. )..

the application's basic process is like

1. load epub
2. unzip epub
3. analise epub
4. build toc
5. update UI layer (page slider, toc list view, etc)
6. gather all the html string, htmlLoader.loadString()
    - After loading complete, I need to access the DOM and jQuery intensively overall application.
7. Basic commands are like below,
    gotoPage, addHighlight, removeHighlight, saveHighlight, closePlayer, loadEpub, changeFontSize
    addVideo, removeVideo, and so on.

My concern is most of commands are directly connected to htmlLoader.window, need sort of global access for jQuery.
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.

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

  1. Support Staff 1 Posted by Ondina D.F. on 11 Mar, 2015 03:13 PM

    Ondina D.F.'s Avatar

    Hi Steve,

    Hmm, quite tricky. I'm not sure I know the answer.
    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.

    I'd create a mediator for the view that contains the html wrapper. The wrapper communicates with JS both ways.

    htmlLoader.window.onmousemove = function(){} (yes, things getting messier, sigh.. )..

    You can add handlers for JS events in your view:

    htmlLoader.window.document.getElementById("someButton").onclick = onSomeButtonClicked;

    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.
    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.

    Would that work for you? If not, why not?

    Others may have better ideas.

    Ondina

  2. 2 Posted by Steve on 11 Mar, 2015 04:36 PM

    Steve's Avatar

    Hi, Ondina,

    Thank you for insightful answer. Quite similar as the way I feel confused.
    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.

    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.. :)

    I like "communicating with other framework classes on behalf of the HTMLWrapper.". Let me think more for better ways.

    Thank you again Ondina, not only for your answer, but giving me some hope that I have a place to ask question.

    Best,
    Steve

  3. Support Staff 3 Posted by Ondina D.F. on 11 Mar, 2015 05:22 PM

    Ondina D.F.'s Avatar

    You're welcome, Steve:)

    Of course you can ask questions in here whenever you get stuck.

    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.

    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.

    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.. :)

    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.

    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.

    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.

    Good luck finding the solution that works best for you. It would be nice to let us know about it, too:)

    Ondina

  4. 4 Posted by Steve on 12 Mar, 2015 02:16 AM

    Steve's Avatar

    Sure I want to share my struggles if that helps others.
    I have done 1 project long ago with robotlegs version 1, but forgot a lot of them.
    Trying to see the Oreilly book again and checking previous discussions in here for migration to version 2.

    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.
    
    I didn't think about this. Probably in this way, I can think of more options. Thanks. :)

    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".

    Thanks and hope you have a good day.

    Steve

  5. Support Staff 5 Posted by Ondina D.F. on 12 Mar, 2015 10:44 AM

    Ondina D.F.'s Avatar

    With robotlegs 1 you can create Models and Services or other classes that extend Actor, if you want.

    http://knowledge.robotlegs.org/kb/reference-mvcs-implementation/do-...

    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:

    https://github.com/robotlegs/robotlegs-framework/blob/version1/src/...

    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".

    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)

    Trying to see the Oreilly book again and checking previous discussions in here for migration to version 2.

    Good idea. Here, 2 discussions that might also help:

    http://knowledge.robotlegs.org/discussions/robotlegs-2/6370-baby-st...

    http://knowledge.robotlegs.org/discussions/questions/2209-mediator-...

    Have a great day, too.

  6. Ondina D.F. closed this discussion on 11 May, 2015 11:34 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac