Portal Class – crie uma home com widgets como o Netvibes

Se você precisa criar uma página com widgets, onde o usuário pode arrastar e soltar retrancas que estão separadas em colunas, veja essa solução:

http://blog.xilinus.com/2007/8/26/prototype-portal-class

Enquanto a Prototype UI não sai (isso é, se sair algum dia de verdade), o autor dessa classe utilizou a prototype junto com o script.aculo.us (framework para efeitos, feito em cima da prototype) para resolver o problema dele. Aqui você pode ver funcionando:

http://blog.xilinus.com/prototype-portal/test/index.html

O código é muito simples:

  • crie a marcação html com quantas colunas quiser:
    <div id="page">
        <div id="widget_col_0"></div>
        <div id="widget_col_1"></div>
        <div id="widget_col_2"></div>
    </div>
  • crie um CSS para exibir de forma adequada as colunas e os widgets:
    #page {
        margin: 10px auto;
    }
    #widget_col_0 {
        float:left;
        width: 30%; 
    }
    #widget_col_1 {
        width: 50%;
        float:left;
    }  
    #widget_col_2 {
    float:left;
        width: 20%; 
    }
  • instancie um objeto da Portal da classe Xilinus, passando a div que contém as colunas como parâmetro:
    var  portal = new Xilinus.Portal("#page div")
  • adicione widgets ao portal escolhendo a coluna em que aparecerá e definindo se quer ou não inserir título, conteúdo, etc…:
    portal.add(new Xilinus.Widget(), 0)
    // Or with title and content
    portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);
  •  

Altamente recomendavelessa classe; eu fiz uma implementação desse tipo 2 anos atrás, faz as mesmas coisas, e sei qual a dificuldade. E fiz ela muito amarrada ao sistema para o qual criei. Essa indicada é totalmente independente, orientada a objetos. Fácil! E com muitas opções de configuração, livre em termos de layout e com chamada a funções de callback caso você precise efetuar rotinas após mover widgets. Muito bom!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *