royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com.INVALID>
Subject Re: [royale-asjs] branch develop updated: I think this fixes Menu
Date Fri, 14 Sep 2018 06:33:12 GMT
Hi Carlos,

We have not devoted much time and energy to an effects subsystem, so maybe you will be the
pioneer in this area.

In my mind, there will be at least two kinds of effects subsystem:  planned and unplanned.

In a planned effects subsystem, the assumption is that most users will want to implement an
effect/transition.  The StatesWithTransitionsImpl is an early example of that.  Such a subsystem
should have a "lifecycle".  A known set of events should be dispatched that provide useful
opportunities to change the effects start and end conditions.  For state changes, the events
should be something like transitionStart, transitionEnd, stateChanged.  For your cases, the
events might be something like effectStart, effectEnd, open/close.  If you get the right set
of events, then the work you want to defer should happen on an lifecycle event instead of
a timer event.

In an unplanned effects subsystem, the event system is more sophisticated.  The assumption
is that it will be rare to have an effect in response to some change in the component.  So
hide/show effects, selection and focus effects and things like that would be "unplanned".
  I hope we can find a way to do this in a PAYG way with different/heavier beads, but that
is a bit tricky for hide/show since it is built into UIBase.  In an unplanned system, there
will either be cancelable "ing" events or the target classes have to be able to reverse a
property change without flicker. 

For example,  right now if you set the UIBase visible property to false, the component becomes
invisible immediately.  And similarly if you set visible=true, the component becomes visible
immediately.  Adding unplanned effect support to visible would require dispatching a cancelable
visibleChanging event before actually setting the browser's CSS display property that an effect
instance would listen for and cancel, then wait for the effectEnd event and then finally actually
set the visible property.  Or we'd have to be confident that you can set the CSS display property
and set it back without flicker.

In summary, having the right events should eliminate the need for timing events.

My 2 cents,
-Alex


On 9/13/18, 2:34 PM, "Carlos Rovira" <carlosrovira@apache.org> wrote:

    Hi Alex,
    I'm with you. Don't like setTimeOut. But I needed in Jewel in at least 3
    scenearios. I'd love to change it sometime in the future, but for now don't
    know how.
    I think the actual ways to defer something are:
    -setTimeOut
    -setInterval
    -requestAnimationFrame
    
    the first one is in SWF, so the solution is cross SWF/JS, although if we
    add other targets, maybe will require changes.
    the second seems to be the worse.
    the latest seems the actual way to do things in JS, but I tried and didn't
    work for me, and I suppose we'll need to abstract it to something usable in
    SWF and future targets.
    
    My concrete case in the three ocassions is when I instantiate a component
    and add a class name to make the component animate  (transition) through
    CSS. For example Alert, DateField and ComboBox popups components and then
    add a class ".open" in CSS, so we need at least 300-400ms so the transition
    can play.
    
    Any other way to do it would be good to know in order to upgrade this
    implementations.
    
    Thanks
    
    Carlos
    
    
    
    
    
    El jue., 13 sept. 2018 a las 22:20, Alex Harui (<aharui@adobe.com.invalid>)
    escribió:
    
    > I didn't see anywhere in the article where it guaranteed that both up and
    > click are sequential in the queue.  Sharing the heap isn't the issue here.
    >
    > I'm still surprised the fix isn't to not dispatch ITEM_CLICK on MouseUp.
    >   UP doesn't guarantee CLICK, IMO.  You could mouse down in one renderer
    > and mouse up in another renderer.  In some interaction models that does
    > change selection, but I don't think CLICK is the right semantic.
    >
    > Further, I would like to discourage use of setTimeout in the framework.
    > The framework has little control over the behavior of application event
    > handlers.  With many browsers having immediate screen updates (as opposed
    > to Flash's deferred rendering), postponing work with setTimeout can result
    > in unexpected behavior, and can result in callLater "wars" where more and
    > more code has to keep deferring work with setTimeout because some lower
    > layer also used setTimeout.  Deferring work should be the option of the
    > application developer as much as possible.
    >
    > My 2 cents,
    > -Alex
    >
    > On 9/13/18, 11:36 AM, "Harbs" <harbs.lists@gmail.com> wrote:
    >
    >     I once read that the way setTimeout works is that it’s added to the
    > next event loop. That would mean that both mouseup and click would be
    > executed in the current event loop and the setTimout would be delayed to
    > the next one (i..e between 4ms and 10ms later).
    >
    >     I can’t find the article at the moment, but my understanding is that
    > this is a safe way to guarantee later execution in all browsers.
    >
    >     The MDN doc has a decent explanation.[1] Both mouseup and click would
    > be on the same heap.
    >
    >     Harbs
    >
    >     [1]
    > https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FEventLoop&amp;data=02%7C01%7Caharui%40adobe.com%7Ce9e70e18f63c44371e3e08d619c09f72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636724712428363224&amp;sdata=rFOw5xW60cVeAnFJkoG48tx0vNp1xMJ7RWEFhd6TIEA%3D&amp;reserved=0
    >     > On Sep 13, 2018, at 6:54 PM, Alex Harui <aharui@adobe.com.INVALID>
    > wrote:
    >     >
    >     > Is setTimeout guaranteed to run after the CLICK event?
    >     >
    >     > On 9/13/18, 6:14 AM, "harbs@apache.org <mailto:harbs@apache.org>"
<
    > harbs@apache.org <mailto:harbs@apache.org>> wrote:
    >     >
    >     >    This is an automated email from the ASF dual-hosted git
    > repository.
    >     >
    >     >    harbs pushed a commit to branch develop
    >     >    in repository
    > https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgitbox.apache.org%2Frepos%2Fasf%2Froyale-asjs.git&amp;data=02%7C01%7Caharui%40adobe.com%7Ce9e70e18f63c44371e3e08d619c09f72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636724712428363224&amp;sdata=6VEy8klIqRFbFnbGZXbPX7dH1UzQNQbnVHbhsnyAGig%3D&amp;reserved=0
    > <
    > https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgitbox.apache.org%2Frepos%2Fasf%2Froyale-asjs.git&amp;data=02%7C01%7Caharui%40adobe.com%7Ce9e70e18f63c44371e3e08d619c09f72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636724712428363224&amp;sdata=6VEy8klIqRFbFnbGZXbPX7dH1UzQNQbnVHbhsnyAGig%3D&amp;reserved=0
    > >
    >     >
    >     >
    >     >    The following commit(s) were added to refs/heads/develop by this
    > push:
    >     >         new e1ec25e  I think this fixes Menu
    >     >    e1ec25e is described below
    >     >
    >     >    commit e1ec25e0d8b1e59bfbb1e3d0cf856fe9dfb4dc5e
    >     >    Author: Harbs <harbs@in-tools.com <mailto:harbs@in-tools.com>>
    >     >    AuthorDate: Thu Sep 13 16:14:03 2018 +0300
    >     >
    >     >        I think this fixes Menu
    >     >    ---
    >     >     .../projects/Basic/src/main/resources/defaults.css |  1 +
    >     >     .../controllers/ItemRendererMouseController.as     |  1 -
    >     >     .../controllers/MenuSelectionMouseController.as    | 33
    > ++++++++++++++--------
    >     >     3 files changed, 23 insertions(+), 12 deletions(-)
    >     >
    >     >    diff --git
    > a/frameworks/projects/Basic/src/main/resources/defaults.css
    > b/frameworks/projects/Basic/src/main/resources/defaults.css
    >     >    index f88da20..15cb4e6 100644
    >     >    --- a/frameworks/projects/Basic/src/main/resources/defaults.css
    >     >    +++ b/frameworks/projects/Basic/src/main/resources/defaults.css
    >     >    @@ -545,6 +545,7 @@ Panel
    >     >           IBeadModel:
    > ClassReference("org.apache.royale.html.beads.models.PanelModel");
    >     >           IBeadView:
    > ClassReference("org.apache.royale.html.beads.PanelView");
    >     >           IPanelLayout:
    > ClassReference("org.apache.royale.html.beads.layouts.VerticalFlexLayout");
    >     >    +      IPanelContentArea:
    > ClassReference("org.apache.royale.html.Container");
    >     >
    >     >           background-color: #FFFFFF;
    >     >           border: 1px solid #333333
    >     >    diff --git
    > a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
    > b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
    >     >    index f408a71..6073264 100644
    >     >    ---
    > a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
    >     >    +++
    > b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
    >     >    @@ -92,7 +92,6 @@ COMPILE::JS {
    >     >                                   goog.events.listen(element,
    > goog.events.EventType.MOUSEOUT, this.handleMouseOut);
    >     >                                   goog.events.listen(element,
    > goog.events.EventType.MOUSEDOWN, this.handleMouseDown);
    >     >                                   goog.events.listen(element,
    > goog.events.EventType.CLICK, this.handleMouseUp);
    >     >    -                goog.events.listen(element,
    > goog.events.EventType.MOUSEUP, this.handleMouseUp);
    >     >                           }
    >     >                   }
    >     >
    >     >    diff --git
    > a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/MenuSelectionMouseController.as
    > b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/MenuSelectionMouseController.as
    >     >    index 5f986bb..6a09a52 100644
    >     >    ---
    > a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/MenuSelectionMouseController.as
    >     >    +++
    > b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/MenuSelectionMouseController.as
    >     >    @@ -127,6 +127,8 @@ package
    > org.apache.royale.html.beads.controllers
    >     >                    *  @playerversion Flash 10.2
    >     >                    *  @playerversion AIR 2.6
    >     >                    *  @productversion Royale 0.9
    >     >    +         *  @royaleignorecoercion org.apache.royale.core.UIBase
    >     >    +         *  @royaleignorecoercion org.apache.royale.core.IUIBase
    >     >                    */
    >     >                   protected function hideOpenMenus():void
    >     >                   {
    >     >    @@ -137,8 +139,9 @@ package
    > org.apache.royale.html.beads.controllers
    >     >                                   if (menu.parent != null) {
    >     >                                           var
    > controller:MenuSelectionMouseController =
    > menu.getBeadByType(MenuSelectionMouseController) as
    > MenuSelectionMouseController;
    >     >
    >  controller.removeClickOutHandler(menu);
    >     >    -                    var host:IPopUpHost =
    > UIUtils.findPopUpHost(_strand as IUIBase);
    >     >    -
    > host.popUpParent.removeElement(menu);
    >     >    +                    var host:IPopUpHost =
    > UIUtils.findPopUpHost(menu as IUIBase);
    >     >    +                                      if(host)
    >     >    +
    > host.popUpParent.removeElement(menu);
    >     >                                   }
    >     >                           }
    >     >                           MenuModel.clearMenuList();
    >     >    @@ -163,6 +166,8 @@ package
    > org.apache.royale.html.beads.controllers
    >     >                    *  @playerversion Flash 10.2
    >     >                    *  @playerversion AIR 2.6
    >     >                    *  @productversion Royale 0.9
    >     >    +         *  @royaleignorecoercion org.apache.royale.core.IUIBase
    >     >    +         *  @royaleignorecoercion
    > org.apache.royale.events.IEventDispatcher
    >     >                    */
    >     >                   public function
    > removeClickOutHandler(menu:Object):void
    >     >                   {
    >     >    @@ -191,23 +196,29 @@ package
    > org.apache.royale.html.beads.controllers
    >     >
    >     >                   /**
    >     >              * @royaleignorecoercion HTMLElement
    >     >    +               * @royaleignorecoercion
    > org.apache.royale.core.IUIBase
    >     >                    * @private
    >     >                    */
    >     >                   COMPILE::JS
    >     >                   protected function
    > hideMenu_internal(event:BrowserEvent):void
    >     >                   {
    >     >                 var menu:IMenu = _strand as IMenu;
    >     >    +                      var menuElem:HTMLElement = (_strand as
    > IUIBase).element as HTMLElement;
    >     >    +                      var menuBarElement:HTMLElement;
    >     >                 if (menu.parentMenuBar)
    >     >                 {
    >     >    -                var menuBarElement:HTMLElement =
    > (menu.parentMenuBar as IUIBase).element as HTMLElement;
    >     >    -                var target:HTMLElement = event.target as
    > HTMLElement;
    >     >    -                while (target != null)
    >     >    -                {
    >     >    -                    if (target == menuBarElement) return;
    >     >    -                    target = target.parentNode as HTMLElement;
    >     >    -                }
    >     >    -            }
    >     >    -                      hideOpenMenus();
    >     >    +                menuBarElement = (menu.parentMenuBar as
    > IUIBase).element as HTMLElement;
    >     >    +                      }
    >     >    +                      var target:HTMLElement = event.target as
    > HTMLElement;
    >     >    +                      while (target != null)
    >     >    +                      {
    >     >    +                              var comp:IUIBase =
    > target["royale_wrapper"];
    >     >    +                              if(comp && (comp is IMenu || comp
    > == menu.parentMenuBar) ) return;
    >     >    +                              // if (target == menuElem ||
    > (menuBarElement && target == menuBarElement) ) return;
    >     >    +                              target = target.parentNode as
    > HTMLElement;
    >     >    +                      }
    >     >    +
    >     >    +                      setTimeout(hideOpenMenus);
    >     >                   }
    >     >           }
    >     >     }
    >     >    \ No newline at end of file
    >
    >
    >
    >
    
    -- 
    Carlos Rovira
    https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Ce9e70e18f63c44371e3e08d619c09f72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636724712428363224&amp;sdata=J4RDrhC2cAR6tvF29tuc1G0Lrv7IKRlqomILOCHiuxU%3D&amp;reserved=0
    

Mime
View raw message