Versão atual:

Escopo dos ambientes das Widgets. Um código conflita com outro?

Estou com um problema que o suporte diz que é de minha responsabilidade.

Já postei aqui o problema e colega @Allan Khel reproduziu o mau funcionamento.

Então, deve ser mesmo uma falta de competência de minha parte, por não entender o conceito de Widgets e sua área de influência.

Então, se puderem me ajudar, gostaria de saber: o código javascript de uma Widget, posto em chamadas na seção Local, pode interferir em funções com nomes diferentes, referenciando-se a elementos html com ids diferentes, funções estas que estão também na seção local de suas respectivas Widgets?

Ambas funções têm o mesmo procedimento interno a elas, fazem a mesma coisa, mas como dito, com referências a elementos html únicos.

Este é o html da Widget 'Compliance':

<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="panel panel-default">
    <div class="panel-body">
    <button type="button" id="idBtnNotProcurar" name="namBtnMomProcurar" style="margin-bottom:10px;color:coral;font-weight:bold;" class="btn btn-default" data-procuramomento><h2></h2>Carregar a lista de publicações do Momento Compliance</h2></button>
        <select id="idSelMomArquivos" name="namSelMomArquivos" class="form-control" data-mostraedicao>
        </select>
    </div>
</div>
</div>

Este é o seu javascript:

var MyWidget = SuperWidget.extend({
      //variáveis da widget
    variavelNumerica: null,
    variavelCaracter: null,

    //método iniciado quando a widget é carregada
    init: function() {
            },

    //BIND de eventos
    bindings: {
        local: {
            'execute': ['click_executeAction'],
            'mostraedicao':['change_fMostraEdicao'],
            'procuramomento':['click_fProcuraMomento']
        },
        global: {}
    },
     executeAction: function(htmlElement, event) {
        //alert ("passou no executeAction");
    },
    fProcuraMomento: function (elementoProvocador,eventoPassado){
        //var qtdElementos=jQuery("#idSelMomArquivos").children('option').length;
        localStorage.setItem("concatena","");
        var objSel=jQuery("#idSelMomArquivos");
        objSel.empty();
        var concatena='<option value="0" title="0">Escolha uma edição...</option>';
        jQuery.get("/api/public/ecm/document/listDocument/17",function(retorno){
            jQuery.each(retorno.content,function (k,v){
                var comentarios=v.additionalComments;
                if(comentarios==""){
                    comentarios="O arquivo da notícia "+v.description+" está sem o comentário no metadados. Adicione esta informação na propriedade do arquivo";
                }
                concatena=concatena+'<option value="'+v.id+'" title="'+v.id+'">'+comentarios+'</option>';
                localStorage.setItem("concatena",concatena);
            });//each
            objSel.append(localStorage.getItem("concatena"));
    });//get
    }//fProcuraMomento
    ,
    fMostraEdicao:function(elementoProvocador,eventoPassado){
        var docId=jQuery("#idSelMomArquivos option:selected").val();
        var txtRotulo=jQuery("#idSelMomArquivos option:selected").text();
        var docVersion="1000";
        if(docId * 1 > 0){
        var parentOBJ;

        if (window.opener) {
            parentOBJ = window.opener.parent;
        } else {
            parentOBJ = parent;
        }

        var cfg = {
            url : "/ecm_documentview/documentView.ftl",
            maximized : false,
            title : txtRotulo,
            callBack : function() {
                parentOBJ.ECM.documentView.getDocument(docId, docVersion);
            },
            customButtons : []
        };
                    parentOBJ.ECM.documentView.panel = parentOBJ.WCMC.panel(cfg);
        }//if docId
    }//fMostraEdicao
});

Outra Widget, de nome 'Noticias'. Seu html é

<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="panel panel-default">
    <div class="panel-body">
    <button type="button" id="idBtnNotProcurar" name="namBtnNotProcurar" style="margin-bottom:10px;color:coral;font-weight:bold;" class="btn btn-default" data-procuranoticia><h2></h2>Carregar a lista de notícias de interesse geral</h2></button>
        <select id="idSelNotArquivos" name="namSelNotArquivos" class="form-control" data-mostranoticia>
        </select>
    </div>
</div>
</div><!--  widget -->

Seu javascript é:

var MyWidget = SuperWidget.extend({
    //variáveis da widget
    variavelNumerica: null,
    variavelCaracter: null,

    //método iniciado quando a widget é carregada
    init: function() {
            },

    //BIND de eventos
    bindings: {
        local: {
            'execute': ['click_executeAction'],
            'mostranoticia':['change_fMostraNoticia'],
            'procuranoticia':['click_fProcuraNoticia']
        },
        global: {}
    },
     executeAction: function(htmlElement, event) {
        //alert ("passou no executeAction");
    },
    fProcuraNoticia: function (elementoProvocador,eventoPassado){
        //var qtdElementos=jQuery("#idSelNotArquivos").children('option').length;
        localStorage.setItem("concatena","");
        var objSel=jQuery("#idSelNotArquivos");
        objSel.empty();
        var concatena='<option value="0" title="0">Escolha uma notícia...</option>';
        jQuery.get("/api/public/ecm/document/listDocument/12",function(retorno){
            jQuery.each(retorno.content,function (k,v){
                var comentarios=v.additionalComments;
                if(comentarios==""){
                    comentarios="O arquivo da notícia "+v.description+" está sem o comentário no metadados. Adicione esta informação na propriedade do arquivo";
                }
                concatena=concatena+'<option value="'+v.id+'" title="'+v.id+'">'+comentarios+'</option>';
                localStorage.setItem("concatena",concatena);
            });//each
            objSel.append(localStorage.getItem("concatena"));
    });//get
    }//fProcuraNoticia
    ,
    fMostraNoticia:function(elementoProvocador,eventoPassado){
        var docId=jQuery("#idSelNotArquivos option:selected").val();
        var txtRotulo=jQuery("#idSelNotArquivos option:selected").text();
        var docVersion="1000";
        if(docId * 1 > 0){
        var parentOBJ;

        if (window.opener) {
            parentOBJ = window.opener.parent;
        } else {
            parentOBJ = parent;
        }

        var cfg = {
            url : "/ecm_documentview/documentView.ftl",
            maximized : false,
            title : txtRotulo,
            callBack : function() {
                parentOBJ.ECM.documentView.getDocument(docId, docVersion);
            },
            customButtons : []
        };
                    parentOBJ.ECM.documentView.panel = parentOBJ.WCMC.panel(cfg);
        }//if docId
    }//fMostraNoticia

});

Qual o escopo, qual o alcance do código javascript entre as Widgets?

Versões (2):

Ver a versão formatada

Escopo dos ambientes das Widgets. Um código conflita com outro?

  • criado 21 de Feb de 2019

Comentário

new question