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