List box ( Grid Table ) : Table Grid « GUI Components


 

<html>



<script language="JavaScript" src="widgets/jsobjects.js"></script>

<script>

  //Definindo linguagem - pt = portugues. Mensagens de erro serao apresentadas nesta lingua

  lang = "pt";



  //criando o documento base para adicionar os objetos

  docbody      = new JsDocument("docbody");



  //Funcoes extras para mostrar a adicao de eventos aos objetos:

  //Esta funcaum eh adicionada ao evento change do combobox

  function testeChange(e)

  {

    alert("mudou");

  }



  //funcao utilizada pelos botoes para transferir itens de um listbox para outro

  function transfer1_2()

  {

    transferListItens(listbox1, listbox2);

  }



  //funcao utilizada pelos botoes para transferir itens de um listbox para outro

  function transfer2_1()

  {

    transferListItens(listbox2, listbox1);

  }



  //funcao so para retornar o valor atual do calendario

  function teste(e)

  {

    alert(cal.getValue());

  }

  

  //funcao para ver se o treeview esta retornando ok

  function toolbarClick()

  {

    alert("Clicou no toolbar");

  }



  //funcaum para adicionar itens no listview

  function lstvaddItems()

  {

    //gerador de valor randomico para o nome dos objetos criados

    itemname = randomizer();



    //Menu do Item

    menu = eval(itemname + "_menu = new JsMenu('"+itemname+"_menu');");

    menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem('" + itemname + "_menu_adicionar')");

    menu_adicionar.setValue('Adicionar');

    menu_adicionar.setIcon('images/new.gif');

    menu_adicionar.setEvent('click', lstvaddItems);

    menu.addItem(menu_adicionar);

    menu_remover = eval(itemname + "_menu_remover = new JsMenuItem('" + itemname + "_menu_remover')");

    menu_remover.setValue('Remover');

    menu_remover.setIcon('images/delete.gif');

    menu_remover.setEvent('click', lstvdelItems);

    menu_remover.setAttribute('lstparent',itemname);

    menu.addItem(menu_remover);



    listviewitem = eval (itemname + " = new JsListViewItem('"+itemname+"');");

    list_teste.addItem(listviewitem);

    check = eval ("check_test"+itemname+" = new JsCheckBox('check_test"+itemname+"')");

    check.setLabel('Teste');

    check.setValue('true');

    listviewitem.addItem(randomizer(),'',true);

    listviewitem.addItem(check);

    listviewitem.addItem('Vai!!! Da um duplo clique logo!','',true);



    listviewitem.setMenu(menu);

  }



  //funcaum para remover itens do listview

  function lstvdelItems(e)

  {  

    if (browserType == "ie")

    {

      e = window.event;

      obj = e.srcElement;

    }

    else

    {

      obj = e.target;

    }



    var lsitem = eval(obj.lstparent);



    list_teste.delItem(lsitem);



    temMudanca = true;

  }

  

  function treeaddItems()

  {

    //gerador de valor randomico para o nome dos objetos criados

    itemname = randomizer();



    //Menu do Item

    menu = eval(itemname + "_menu = new JsMenu('"+itemname+"_menu');");

    menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem('" + itemname + "_menu_adicionar')");

    menu_adicionar.setValue('Adicionar');

    menu_adicionar.setIcon('images/new.gif');

    menu_adicionar.setEvent('click', treeaddItems);

    menu.addItem(menu_adicionar);

    menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem('" + itemname + "_menu_adicionarsub')");

    menu_adicionarsub.setValue('Adicionar SubItem');

    menu_adicionarsub.setIcon('images/new.gif');

    menu_adicionarsub.setEvent('click', treeaddSubItems);

    menu_adicionarsub.setAttribute('lstparent',itemname);

    menu.addItem(menu_adicionarsub);

    menu_remover = eval(itemname + "_menu_remover = new JsMenuItem('" + itemname + "_menu_remover')");

    menu_remover.setValue('Remover');

    menu_remover.setIcon('images/delete.gif');

    menu_remover.setEvent('click', treedelItems);

    menu_remover.setAttribute('lstparent',itemname);

    menu.addItem(menu_remover);



    listviewitem = eval (itemname + " = new JsListViewItem('"+itemname+"');");

    tree_teste.addItem(listviewitem);

    check = eval ("check_test"+itemname+" = new JsCheckBox('check_test"+itemname+"')");

    check.setLabel('Teste');

    check.setValue('true');

    listviewitem.addItem(randomizer(),'',true);

    listviewitem.addItem(check);

    listviewitem.addItem('Vai!!! Da um duplo clique logo!','',true);



    listviewitem.setMenu(menu);

  }

  

  function treeaddSubItems(e)

  {

    if (browserType == "ie")

    {

      e = window.event;

      obj = e.srcElement;

    }

    else

    {

      obj = e.target;

    }



    var lsitem = eval(obj.lstparent);

    

    //gerador de valor randomico para o nome dos objetos criados

    itemname = randomizer();



    //Menu do Item

    menu = eval(itemname + "_menu = new JsMenu('"+itemname+"_menu');");

    menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem('" + itemname + "_menu_adicionar')");

    menu_adicionar.setValue('Adicionar');

    menu_adicionar.setIcon('images/new.gif');

    menu_adicionar.setEvent('click', treeaddItems);

    menu.addItem(menu_adicionar);

    menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem('" + itemname + "_menu_adicionarsub')");

    menu_adicionarsub.setValue('Adicionar SubItem');

    menu_adicionarsub.setIcon('images/new.gif');

    menu_adicionarsub.setEvent('click', treeaddSubItems);

    menu_adicionarsub.setAttribute('lstparent',itemname);

    menu.addItem(menu_adicionarsub);

    menu_remover = eval(itemname + "_menu_remover = new JsMenuItem('" + itemname + "_menu_remover')");

    menu_remover.setValue('Remover');

    menu_remover.setIcon('images/delete.gif');

    menu_remover.setEvent('click', treedelItems);

    menu_remover.setAttribute('lstparent',itemname);

    menu.addItem(menu_remover);



    listviewitem = eval (itemname + " = new JsListViewItem('"+itemname+"');");

    lsitem.addItem(listviewitem);

    check = eval ("check_test"+itemname+" = new JsCheckBox('check_test"+itemname+"')");

    check.setLabel('Teste');

    check.setValue('true');

    listviewitem.addItem(randomizer(),'',true);

    listviewitem.addItem(check);

    listviewitem.addItem('Vai!!! Da um duplo clique logo!','',true);



    listviewitem.setMenu(menu);

  }

  

  function treedelItems(e)

  {

    if (browserType == "ie")

    {

      e = window.event;

      obj = e.srcElement;

    }

    else

    {

      obj = e.target;

    }

    

    var lsitem = eval(obj.lstparent);



    lsitem.parent.delItem(lsitem);



    temMudanca = true;

  }



  //MenuBar

  menubar = new JsMenuBar("menubar");



  menubaritem1 = new JsMenu("menubaritem1");

  menubaritem2 = new JsMenu("menubaritem2");

  submenubaritem2 = new JsMenu("submenubaritem2");



  menubaritemsubitem1_1 = new JsMenuItem("menubaritemsubitem1_1");

  menubaritemsubitem1_2 = new JsMenuItem("menubaritemsubitem1_2");

  menubaritemsubitem1_3 = new JsMenuItem("menubaritemsubitem1_3");

  menubaritemsubitem1_4 = new JsMenuItem("menubaritemsubitem1_4");



  menubaritemsubitem2_1 = new JsMenuItem("menubaritemsubitem2_1");

  menubaritemsubitem2_2 = new JsMenuItem("menubaritemsubitem2_2");

  menubaritemsubitem2_3 = new JsMenuItem("menubaritemsubitem2_3");

  menubaritemsubitem2_4 = new JsMenuItem("menubaritemsubitem2_4");



  submenubaritemsubitem2_1 = new JsMenuItem("submenubaritemsubitem2_1");

  submenubaritemsubitem2_2 = new JsMenuItem("submenubaritemsubitem2_2");

  submenubaritemsubitem2_3 = new JsMenuItem("submenubaritemsubitem2_3");

  submenubaritemsubitem2_4 = new JsMenuItem("submenubaritemsubitem2_4");



  menubaritem1.setValue("Menu 1");

  menubaritemsubitem1_1.setValue("Item 1");

  menubaritemsubitem1_2.setValue("Item 2");

  menubaritemsubitem1_3.setValue("Item 3");

  menubaritemsubitem1_4.setValue("Item 4");



  menubaritem2.setValue("Menu 2");

  menubaritemsubitem2_1.setValue("Item 1");

  menubaritemsubitem2_2.setValue("Item 2");

  menubaritemsubitem2_3.setValue("Item 3");

  menubaritemsubitem2_4.setValue("Item 4");



  submenubaritem2.setValue("SubMenu 2");

  submenubaritemsubitem2_1.setValue("SubItem 1");

  submenubaritemsubitem2_2.setValue("SubItem 2");

  submenubaritemsubitem2_3.setValue("SubItem 3");

  submenubaritemsubitem2_4.setValue("SubItem 4");



  menubar.addItem(menubaritem1);

  menubar.addItem(menubaritem2);



  menubaritem1.addItem(menubaritemsubitem1_1);

  menubaritem1.addItem(menubaritemsubitem1_2);

  menubaritem1.addItem(menubaritemsubitem1_3);

  menubaritem1.addItem(menubaritemsubitem1_4);



  menubaritem2.addItem(menubaritemsubitem2_1);

  menubaritem2.addItem(menubaritemsubitem2_2);

  menubaritem2.addItem(menubaritemsubitem2_3);

  menubaritem2.addItem(menubaritemsubitem2_4);

  menubaritem2.addItem(submenubaritem2);



  submenubaritem2.addItem(submenubaritemsubitem2_1);

  submenubaritem2.addItem(submenubaritemsubitem2_2);

  submenubaritem2.addItem(submenubaritemsubitem2_3);

  submenubaritem2.addItem(submenubaritemsubitem2_4);



  docbody.addItem(menubar);



  //Toolbar

  toolbar = new JsToolBar("toolbar");



  toolbarbt1 = new JsToolBarButton("toolbarbt1");

  toolbarbt2 = new JsToolBarButton("toolbarbt2");

  toolbarbt3 = new JsToolBarButton("toolbarbt3");



  toolbarbt1.setSource("images/filenew.gif");

  toolbarbt2.setSource("images/fileopen.gif");

  toolbarbt3.setSource("images/trash.gif");

  

  toolbarbt1.setEvent("click",toolbarClick);



  toolbar.addItem(toolbarbt1);

  toolbar.addItem(toolbarbt2);

  toolbar.addDiv();

  toolbar.addItem(toolbarbt3);



  docbody.addItem(toolbar);



  //Grid principal, e de conteudo, que contera o tab

  //Serve pricipalmente para fazer o alinhamento dos elementos na tela

  maingrid = new JsWidgetGrid("grid");

  maingrid.setHeight(300);

  maingrid.addRow();

  maingrid.addCell("100%","10","center","top");

  maingrid.addRow();

  maingrid.addCell("100%","","center","top");

  docbody.addItem(maingrid);



  contentgrid = new JsWidgetGrid("grid");

  contentgrid.setWidth("95%");

  contentgrid.addRow();

  contentgrid.addCell("100%","","","top");

  maingrid.addItem(contentgrid);



  //Exemplo de tab

  tab_teste = new JsTab("tab_teste");

  tab_teste.addTab("Listview e TreeView (menu de contexto)");

  tab_teste.addTab("Combobox e Lineedit");

  tab_teste.addTab("Listbox e botao");

  tab_teste.addTab("Calendario e dateedit");

  tab_teste.setWidth("100%");

  tab_teste.setHeight("450");

  contentgrid.addItem(tab_teste);



  //Exemplo de listview com menu de contexto

  adigenmenu      = new JsMenu("adigenmenu");

  adigenmenuitem    = new JsMenuItem("adigenmenuitem");



  adigenmenuitem.setValue("Adicionar");

  adigenmenuitem.setIcon("images/new.gif");

  adigenmenuitem.setEvent("click", lstvaddItems);

  adigenmenu.addItem(adigenmenuitem);



  list_teste = new JsListView("list_teste");

  list_teste.setHeight(190)

  list_teste.addColumn("Coluna 1",200);

  list_teste.addColumn("Coluna 2",300);

  list_teste.addColumn("Coluna 3",400);

  

  list_label = new JsLabel("list_label");

  list_label.setValue("ListView");

  list_label.setHeight(30);



  list_teste.setMenu(adigenmenu);



  tab_teste.addItemToTab(list_label,0);

  tab_teste.addItemToTab(list_teste,0);

  

  //Exemplo de TreeView com menu de contexto

  adigentreemenu      = new JsMenu("adigentreemenu");

  adigentreemenuitem    = new JsMenuItem("adigentreemenuitem");



  adigentreemenuitem.setValue("Adicionar");

  adigentreemenuitem.setIcon("images/new.gif");

  adigentreemenuitem.setEvent("click", treeaddItems);

  adigentreemenu.addItem(adigentreemenuitem);

  

  tree_teste = new JsListView("tree_teste");

  tree_teste.setTreeView();

  tree_teste.setHeight(190)

  tree_teste.addColumn("Coluna 1",200);

  tree_teste.addColumn("Coluna 2",300);

  tree_teste.addColumn("Coluna 3",400);

  

  tree_label = new JsLabel("tree_label");

  tree_label.setValue("TreeView");

  tree_label.setHeight(30);

  

  tree_teste.setMenu(adigentreemenu);

  

  tab_teste.addItemToTab(tree_label,0);

  tab_teste.addItemToTab(tree_teste,0);



  //Exemplo de lineedit

  //criamos um grid para distribuir melhor os elementos na tela

  lineeditgrid = new JsWidgetGrid("lineeditgrid");

  lineeditgrid.setHeight(60);



  //label 1

  label1 = new JsLabel("label1");

  label2 = new JsLabel("label2");



  lineedit1 = new JsLineEdit("lineedit1");

  lineedit2 = new JsLineEdit("lineedit2");



  label1.setValue("Label 1");

  label2.setValue("Label 2");



  lineeditgrid.addRow();

  lineeditgrid.addCell("60");

  lineeditgrid.addItem(label1);

  lineeditgrid.addCell();

  lineeditgrid.addItem(lineedit1);

  lineeditgrid.addRow();

  lineeditgrid.addCell("60");

  lineeditgrid.addItem(label2);

  lineeditgrid.addCell();

  lineeditgrid.addItem(lineedit2);



  tab_teste.addItemToTab(lineeditgrid,1);



  //Exemplo de combobox

  combobox_teste = new JsComboBox("combobox_teste");

  for (var i=1; i < 20; i++)

    combobox_teste.addItem(i, "test - " + i, "images/user_small.gif");

  combobox_teste.setEvent("change", testeChange);



  tab_teste.addItemToTab(combobox_teste,1);



  //listbox example

  lsitboxgrid = new JsWidgetGrid("lsitboxgrid");



  listbox_bt1 = new JsPushButton("listbox_bt1");

  listbox_bt1.setValue("&gt;&gt;");

  listbox_bt1.setEvent("click", transfer1_2);

  listbox_bt1.setWidth("50");



  listbox_bt2 = new JsPushButton("listbox_bt2");

  listbox_bt2.setValue("&lt;&lt;");

  listbox_bt2.setEvent("click", transfer2_1);

  listbox_bt2.setWidth("50");



  listbox1 = new JsListBox("listbox1");

  listbox1.setHeight("300");

  listbox1.setWidth("100%");



  listbox2 = new JsListBox("listbox2");

  listbox2.setHeight("300");

  listbox2.setWidth("100%");



  for (var i=0; i < 20; i++)

    listbox1.addItem("test - " + i, "","");



  lsitboxgrid.addRow();

  lsitboxgrid.addCell("45%");

  lsitboxgrid.addItem(listbox1);

  lsitboxgrid.addCell(10);

  lsitboxgrid.addCell(50,null,"center");

  lsitboxgrid.addItem(listbox_bt1);

  lsitboxgrid.addItem(listbox_bt2);

  lsitboxgrid.addCell(10);

  lsitboxgrid.addCell("45%");

  lsitboxgrid.addItem(listbox2);



  tab_teste.addItemToTab(lsitboxgrid,2);



  //Calendario

  cal    = new JsCalendar("cal");

  data  = new JsDateEdit("data");

  cal.setEvent("click", teste);



  tab_teste.addItemToTab(data,3);

  tab_teste.addItemToTab(cal,3);

  



  //for (i=0;i<50;i++)

    //lstvaddItems();



</script>

</html>
List box ( Grid Table ) : Table Grid « GUI Components « JavaScript DHTML
