• ----- varia ----------- DisplayUiEltWithCumstomFormatter.js

    *** Varia: Diaplay ui element with custom formatter

    Custom renderers / formatters may take ui and touch states / flags into
    account in their logic. This can cause interference issues when using
    ui's display function on element: ui.d(e). Issue is that sometimes
    the renderer / formatter works, and sometimes not.

    There are three (3) options for a solution:

    --- Setup

    The ui singleton (framework)

    var ui = require("ui")  // UI singleton holding slider s2 (below)
    // ...
    

    slider "s2" kept held onto with variable s2:

    var s2 = ui.c( 3,"sli","s2",... // slider - uiSli - w/ custom formatter taking ui / touch event
         // states / flags into consideration in logic
         // function(v,_) { if (_t.te.f... ) { ...
    

    For more details see instructions in ui, uiBtn and uiSli modules.

    --- Options

    • option 1

    // option 1 - where no touch event is ongoing and flags f has to keep state:
    //   set touch event flags all to 0 before invoking display of ui element
    
    ui.te.f = 0; ui.d(s2); // display value label of slider
    
    • option 2

    // option 2 - where touch event is ongoing but flags f have to keep state:
    //   backup flags, set all to 0 or as desired, invoke display AND restore
    var fs = ui.te.f; ui.te.f=0; ui.d(s2).te.f=fs;
    
    • option 3

    // option 3 - use additional control flag
    //   introduce a flag yourself 'outside' / global or on ui which works as
    //   a one-shot trigger in the render / formatter function - or as in
    //   the example code below: stick it as property to the ```ui``` object
    //  (just use property name 6 or more chars).
    function(v,_) {
      if (_.myOverrideFlag || !_.te.t) {
        _.myOverrideFlag=0;
        // ...the other stuff
    } }
    //
    ui.myOverrideFlag=1; ui.d(s2);
    
    • option 4

    // option 4 - extend ui with .dWrapped(e) wrapping of .d(e) and
    // using option 2 for implementation
    ui.dWrapped(e) = function (){var fs=this.te.f; this.d(e).te.f=fs; return this;};
    // ...
    ui.dWrapped(e);
    
About

Avatar for allObjects @allObjects started