Clever Geek Handbook

lsFusion 4: tabelas dinâmicas, gráficos, mapas e calendários, autenticação OAuth, tema escuro e muito mais





lsFusion. gif- ( ). , - lsFusion.







lsFusion ( ). , ( , ).







, ( ), ( ) — UI .







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







, , .











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







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









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







lsFusion . ( ) , , . , , .











Observe que, no nível físico, a operação de agrupamento em visualizações de agrupamento pode ser realizada no servidor de banco de dados e no cliente. A plataforma gerencia essa escolha automaticamente: se o número de grupos diminuir ou a quantidade de dados iniciais for menor que o limite, os dados são processados ​​no cliente (para excluir chamadas desnecessárias ao servidor). Na maioria dos outros casos, o agrupamento é executado no servidor SQL usando uma consulta (no entanto, os subtotais ainda são calculados no cliente).







O agrupamento pode ser alterado pelo usuário usando a interface de arrastar e soltar apropriada. O desenvolvedor pode definir agrupamentos usando a sintaxe apropriada na instrução FORM.

FORM myReport

    OBJECTS l = Ledger PIVOT 'Area Chart'

    PROPERTIES (l) customer ROW, sum MEASURE

;





Tabela Dinâmica



. , :







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


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

;





Se desejar, você pode experimentar o mapa e o calendário no site oficial lsFusion na seção Try Online (Platform Mode -> Map and Calendar).



Visualizações personalizadas



Quaisquer que sejam as visualizações com suporte imediato no lsFusion, elas podem nem sempre ser suficientes (bem, ou pode não haver configurações suficientes nas visualizações existentes). Para resolver o problema no caso geral, a plataforma suporta as chamadas visualizações personalizadas.







Existem duas partes para apoiar essas visualizações:







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







Agora, de volta ao lsFusion. Para trabalhar com sistemas externos, incluindo o protocolo http, a plataforma utiliza o operador EXTERNAL. É verdade que a peculiaridade deste operador é que na terceira versão ele só poderia ser executado no servidor, o que significa que era impossível utilizá-lo para o mesmo trabalho com equipamentos no cliente. Assim, na quarta versão da plataforma para o protocolo HTTP, tornou-se possível executar o operador EXTERNAL no cliente. Sintaticamente, é assim:





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';

    }

}





Fisicamente, assim como ao realizar outras ações do cliente (por exemplo, exibindo formulários / mensagens), a própria plataforma para a ação no servidor, transfere o controle para o cliente, executa uma solicitação http lá, então retorna o controle para o servidor e continua a execução da ação interrompida no servidor.





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





exportAndShowIncomes (Supplier s) {

    // i -      (incomes)

    EXPORT incomes FILTERS supplier(i) = s;

    open(exportFile());

    DIALOG incomes FILTERS supplier(i) = s;

}





Como no caso dos títulos computados, uma inovação importante não é a funcionalidade de adicionar filtros adicionais ao próprio formulário, mas em geral a infraestrutura para usar o contexto de abertura do formulário dentro do próprio formulário. Portanto, em versões futuras, será fácil implementar suporte para adicionar, por exemplo, propriedades ou pedidos adicionais ao abrir um formulário, enquanto no processo de adicionar esses elementos, você também pode usar parâmetros do contexto de abertura de um formulário. No entanto, todos esses elementos adicionais (com exceção dos filtros) dependem do contexto com muito menos frequência, portanto, para adicioná-los, ainda seria mais lógico usar o mecanismo de herança (agregação) de formulários, que também aparecerá em uma das próximas versões (este mecanismo será descrito em detalhes na próxima artigos).



Otimização 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