Clever Geek Handbook

lsFusion 4: tableaux croisés dynamiques, graphiques, cartes et calendriers, authentification OAuth, thÚme sombre et plus





lsFusion. gif- ( ). , - lsFusion.







lsFusion ( ). , ( , ).







, ( ), ( ) — UI .







, , . . , , ( ). MyCompany. ( , , ), , . , , , , .







, , .











. : . , , — , , , , - , , .







, , . , frontend ( javascript HTML). , , ( Java Swing RCP) . . . , , , - ( http-). - lsFusion OLTP-, , . - , lsFusion -.









, lsFusion ( , , ) , , (BI) ( , BI- ). , , , , .







lsFusion . ( ) , , . , , .











Notez qu'au niveau physique, l'opĂ©ration de regroupement dans les vues de regroupement peut ĂȘtre effectuĂ©e Ă  la fois sur le serveur de base de donnĂ©es et sur le client. La plateforme gĂšre ce choix automatiquement: si le nombre de groupes diminue, ou si la quantitĂ© de donnĂ©es initiales est infĂ©rieure au seuil, alors les donnĂ©es sont traitĂ©es sur le client (pour exclure les appels inutiles au serveur). Dans la plupart des autres cas, le regroupement est effectuĂ© sur le serveur SQL Ă  l'aide d'une requĂȘte (cependant, les sous-totaux sont toujours calculĂ©s sur le client).







Le regroupement peut ĂȘtre modifiĂ© par l'utilisateur Ă  l'aide de l'interface glisser-dĂ©poser appropriĂ©e. Le dĂ©veloppeur peut dĂ©finir des regroupements en utilisant la syntaxe appropriĂ©e dans l'instruction FORM.

FORM myReport

    OBJECTS l = Ledger PIVOT 'Area Chart'

    PROPERTIES (l) customer ROW, sum MEASURE

;





Tableau croisé dynamique



. , :







  • . , — --, .
  • . , .


, , , , Excel . :







  2. ( ), ( drag-drop ). , ( , ).
  3. Excel , , /


(drill-down) — , , , , , .







, , , (, ), . - , .

















, .







/ :







  • ( / , / )






. open-source plotly, ( ). , ( , , , ), .







img-, ( / ) . , , , , , .









, ( -) , . , time-tracking, ..







lsFusion :







    • / .
    • , , ..
    • ,
    • ( ), ( ).
    • .
    • ( ).










, , . :







    • longitude —
    • latitude —
    • polygon —
    • line —
    • icon —
    • ..
    • date, dateTime — /
    • dateFrom, dateTimeFrom — /
    • dateTo, dateTimeTo — /
    • name —
    • ..
FORM map 'Map'

    OBJECTS o = Element MAP

    PROPERTIES (o) longitude, latitude, polygon

    PROPERTIES name = name(o) IF o IS Point, color = RGB(255, 0, 0) IF isInAnyArea(o)

    PROPERTIES SHOWIF o IS Point namePopup = name(o) PANEL, inParis '' = 'I am ' + (CASE WHEN isInAnyArea(o) THEN '' ELSE 'not ') + 'in Paris. Drag me' PANEL

    PROPERTIES (o) 'Add point' = NEW[Point], 'Add area' = NEW[Area], DELETE

;

FORM calendar 'Calendar'

    OBJECTS e = Event CALENDAR

    PROPERTIES (e) date, name, NEW, DELETE

;





Si vous le souhaitez, vous pouvez expérimenter la carte et le calendrier sur le site officiel de lsFusion dans la section Essayer en ligne (Mode plateforme -> Carte et calendrier).



Des vues personnalisées



Quelles que soient les vues prises en charge par dĂ©faut dans lsFusion, elles peuvent ne pas toujours ĂȘtre suffisantes (ou il peut y avoir des paramĂštres insuffisants dans les vues existantes). Pour rĂ©soudre le problĂšme dans le cas gĂ©nĂ©ral, la plate-forme prend en charge les vues dites personnalisĂ©es.







Il existe deux parties pour soutenir ces vues:







  1. javascript css web-. , web ( ) , -, , web-. , , , , .
  2. . javascript-, ( window , javascript function window, ). :
    • element — DOM,
    • objects — javascript-, ( = , = )
    • controller — javascript-, / (, , ).


.







web js css ( , test.js test.css): 



function calendar(element, objects, controller) {
    if(controller.calendar == null) { // lazy initialization
        controller.calendar = new FullCalendar.Calendar(element, {
            height: 'parent',
            editable: true,
            eventChange: function(info) {
                controller.changeDateProperty('date', controller.objects[info.event.extendedProps.index], info.event.start.getFullYear(),
                    info.event.start.getMonth() + 1,info.event.start.getUTCDate() + 1); // month and day are zero-based in full calendar
            },
            eventClick: function(info) {
                controller.changeSimpleGroupObject(controller.objects[info.event.extendedProps.index], false, info.el);
            }
        });
        setTimeout(function () {
            controller.calendar.render();
        }, 0);
    }

    controller.objects = objects; // need to save it to work with changes
    controller.calendar.setOption('events', objects.map((obj, index) =>
        Object.assign({}, obj, {
            index: index, // needed to work with changes
            classNames: controller.isCurrent(obj) ? 'event-highlight' : '' // highlighting current element
        })));
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    


.event-highlight {
    border-color: #2C4751;
    background-color: #2C4751;
}


(web) ( js css, web, -, ).

, e:

CLASS Event;

date = DATA DATE (Event);

date(Event e) <- currentDate() WHEN SET(e IS Event);

title = DATA STRING (Event);

title(Event e) <- 'Event' + e WHEN SET(e IS Event);



FORM calendar

    OBJECTS e=Event CUSTOM 'calendar'

    PROPERTIES (e) date, title, NEW, EDIT, DELETE 

;



NAVIGATOR {

    NEW calendar;

}





:









lsFusion , Flatlaf, , , , Intellij. - Flatlaf , - «» . lsFusion :







  • ( ) — -
  • — -


«» . , , / ( ). , lsFusion , , , - ( ). (, ).









OAuth



«»: , , , . :







  • - ( ). , .
  • .


( ) OAuth . , (, lsFusion) / . / , / (, — ). « » lsFusion / : Facebook, Google, Github, . (Authorization URI, Token URI ..). , ( OAuth , , , ).







lsFusion — «» « ». «» -. « » (, ).









, ( «», OAuth-) « ». , « ». , , , , .







url user password ( http://myserver?user=X&password=Y



). , , , , VPN.









lsFusion :







  • ( , 'Some text {x.y}'



    ).
  • - :
    • ( ),
    • .


, , . :







  • / .
  • ( ).


« ». :







  • , , .
  • , , , .
  • , ( ).


, , :







  • , ;
  • « », .


:







  • , ;
  • .


:







  • .
  • , , Google Translate. , . , .
  • , .
  • PROFIT


, , , - lsFusion. / : guestuk / guestuk ( ), guestbe / guestbe ( ).









lsFusion, , , . :







  • CTRL ( Excel). , ( EDIT_OBJECT



    ) .
  • « » .
  • ( ) « ».
  • ( CHANGE



    , , )


, .







. , .









« »



lsFusion ( ), ( ) . :







  • .
  • , .


. N+1, , , .







-.
(GROUP_CHANGE) :

onChange(a);

PUSH REQUEST

    FOR [FILTER formY.a](ga) AND NOT a=ga DO

        onChange(ga);





onChange — (CHANGE), a — ( , ).

, f(a,b) :

DIALOG formX OBJECTS x = f(a,b) CHANGE; //   formX,   f(a,b)    x





? «». ( CHANGE , ):

REQUEST 

    DIALOG formX OBJECTS x=f(a,b) INPUT DO requestedX() <- x; 

DO 

    f(a,b) <- requestedX();



PUSH REQUEST 

    FOR [FILTER formY.a](ga) AND NOT a=ga DO

        REQUEST 

            DIALOG formX OBJECTS x=f(a,b) INPUT DO requestedX() <- x; 

        DO 

            f(a,b) <- requestedX();





PUSH REQUEST REQUEST ( DO ). , :

PUSH REQUEST 

    FOR [FILTER formY.a](ga) AND NOT a=ga DO

        f(a,b) <- requestedX();





, lsFusion, FOR WHERE:

PUSH REQUEST 

        f(a,b) <- requestedX() WHERE [FILTER formY.a](ga) AND NOT a=ga;





, « ».


, (, , ).











( , ) — . , . , :





DESIGN order {

    caption = ' â„–' + number(o);



    lines {

        caption  = ' (' + (GROUP SUM 1 IF line(OrderDetail od) = o) + ')';

    }

}







, . (, width pattern) ( )









:







  • .
  • , .


, , , . , , . , lsFusion . , ( ). , .











lsFusion « » — (, , , ..). , , , , , , , , ( ). / ( , ).







, , , «». .









, ( ), / - .







http-



, . , - 2 :







  • . javascript, , , css html ( ) .
  • «» . , / , .


( Chrome V8 ), , , . , , — , http-. http- , .







Maintenant, revenons Ă  lsFusion. Pour travailler avec des systĂšmes externes, y compris le protocole http, la plateforme utilise l'opĂ©rateur EXTERNAL. Certes, la particularitĂ© de cet opĂ©rateur est que dans la troisiĂšme version, il ne pouvait ĂȘtre exĂ©cutĂ© que sur le serveur, ce qui signifie qu'il Ă©tait impossible de l'utiliser pour le mĂȘme travail avec un Ă©quipement sur le client. Ainsi, dans la quatriĂšme version de la plateforme pour le protocole HTTP, il est devenu possible d'exĂ©cuter l'opĂ©rateur EXTERNAL sur le client. Syntaxiquement, cela ressemble Ă  ceci:





reportX(Pos p) {

    generateUUID();

    EXPORT reportX JSON CHARSET 'UTF-8';

    TRY {

        EXTERNAL HTTP CLIENT 'http://' + hostname(p) + ':16732/requests' PARAMS exportFile();

    } CATCH {

        CASE

            WHEN statusHttp() > 299 THEN

                MESSAGE ' - ' + STRING(statusHttp());

            WHEN NOT statusHttp() THEN

                MESSAGE ' -      v.10';

            ELSE

                MESSAGE ' -      v.10';

    }

}





Physiquement, tout comme lors de l'exĂ©cution d'autres actions client (par exemple, l'affichage de formulaires / messages), la plate-forme elle-mĂȘme arrĂȘte l'action sur le serveur, transfĂšre le contrĂŽle au client, y exĂ©cute une requĂȘte http, puis retourne le contrĂŽle au serveur et continue l'exĂ©cution de l'action arrĂȘtĂ©e sur le serveur.





, . , , , . , , , . , — «» ( OBJECTS) / . , , — FILTERS :





exportAndShowIncomes (Supplier s) {

    // i -      (incomes)

    EXPORT incomes FILTERS supplier(i) = s;

    open(exportFile());

    DIALOG incomes FILTERS supplier(i) = s;

}





Comme dans le cas des titres calculĂ©s, une innovation importante n'est pas la fonctionnalitĂ© d'ajout de filtres supplĂ©mentaires au formulaire lui-mĂȘme, mais en gĂ©nĂ©ral l'infrastructure permettant d'utiliser le contexte d'ouverture du formulaire Ă  l'intĂ©rieur du formulaire lui-mĂȘme. Ainsi, dans les versions futures, il sera facile d'implĂ©menter la prise en charge de l'ajout, par exemple, de propriĂ©tĂ©s ou de commandes supplĂ©mentaires lors de l'ouverture d'un formulaire, tandis que lors du processus d'ajout de ces Ă©lĂ©ments, vous pourrez Ă©galement utiliser des paramĂštres du contexte d'ouverture du formulaire. Cependant, tous ces Ă©lĂ©ments supplĂ©mentaires (Ă  l'exception des filtres) dĂ©pendent beaucoup moins souvent du contexte, donc, pour les ajouter, il serait tout de mĂȘme plus logique d'utiliser le mĂ©canisme d'hĂ©ritage (agrĂ©gation) des formulaires, qui apparaĂźtra Ă©galement dans l'une des prochaines versions (ce mĂ©canisme sera dĂ©crit en dĂ©tail dans la prochaine des articles).



Optimisation DOM



, lsFusion -, - . , (- ), Swing ( , / ), / HTML DOM. , . , . , :







  1. “” -.
  2. - .


— . , lsFusion- ( -), . - ( lsFusion), DOM . , - MyCompany ( ). , , ( , / , ).









( github). , (UX) developer experience (DX), . ( -) , .







MyCompany. (, custom-made ), , . -, ERP-, / «» . MyCompany. SME ( ERP ), ( , , Apache 2.0 ). WMS, , , WMS - ( lsFusion), - ( -).









More articles:


All Articles