Need simple example: add tabs to widget

JamesCrandall · ‎01-19-2018

LaunchPad theme

WABDev 2.5

Custom Widget

I'm looking for the simplest, most straight forward example of adding 2 tabs to a new widget (an absolute vanilla panel). THIS thread seemed to be close but I'm not seeing the expected result (no CSS example?).

Looking for the most basic form of HTML, JS and CSS to get this implemented.

TIA

RobertScheitlin__GISP · ‎01-22-2018

James,

It would be:

this.openCity(event, 'London')‍

and again you need to get away from

document.getElementById(cityName).style.display = "block";‍

and use data-dojo-attach-points

JamesCrandall · ‎01-22-2018

this.openCity(event, 'London')‍

Now I am not sure where that should go. (can this type of development be spread out even more, my ADHD hasn't limited out yet )

JamesCrandall · ‎01-22-2018

I see.

RobertScheitlin__GISP · ‎01-22-2018

James,

There is still a bit of your code that looks unfamiliar. Here is my code from my identify widget for initializing the tab container:

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer',
...
        'jimu/utils', 
...
function (declare, _WidgetsInTemplateMixin, BaseWidget, TabContainer, ...
utils, ... ) {
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
...

postCreate: function () {
...
this._initTabContainer();
...

     _initTabContainer: function () {
        var tabs = [];
        tabs.push({
          title: this.nls.identifylabel,
          content: this.tabNode1
        });
        tabs.push({
          title: this.nls.resultslabel,
          content: this.tabNode2
        });
        this.selTab = this.nls.identifylabel;
        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);

        this.tabContainer.startup();
        this.own(on(this.tabContainer,'tabChanged',lang.hitch(this,function(title){
          if(title !== this.nls.resultslabel){
            this.selTab = title;
          }
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And Here is the Widget.html:

<div>
  <div data-dojo-attach-point="tabIdentify">
    <div class="identify-tab-node" data-dojo-attach-point="tabNode1">
      <label>${nls.descriptionlabel}</label>
      <div style="width:95%;margin-top:10px;" data-dojo-attach-point="LayerDD">
        <label data-dojo-attach-point="identifyFromLbl" style="width:25%;margin-top:10px;margin-bottom:10px;margin-right:10px;">${nls.idfrom}</label>
        <select style="width:100%;margin-top:10px;margin-bottom:10px;" data-dojo-attach-point="identifyLayer" data-dojo-type="dijit/form/Select"></select>
      </div>
      <div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props="types:['point','polyline','polygon'],showClear:false" style="margin-top:5px;"></div>
    </div>
    <div class="identify-tab-node" data-dojo-attach-point="tabNode2">
      <div data-dojo-attach-point="progressbar"></div>
      <div class="result-div" data-dojo-attach-point="divResult">
        <label data-dojo-attach-point="divResultMessage">${nls.noresultsfoundlabel}</label>
        <a style="float:right; margin-right:10px" href="#" data-dojo-attach-point="btnClear">${nls.clear}</a>
      </div>
      <hr>
      <div data-dojo-attach-point="listDiv"></div>
    </div>
  </div>
  <div data-dojo-type="jimu/dijit/LoadingShelter" data-dojo-attach-point="shelter" data-dojo-props="hidden:true"></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JamesCrandall · ‎01-22-2018

All of the nls references seem to cause errors even tho I've added everything into my strings.js that is found in your identify widget's strings.js but it cannot seem to resolve the issue. The whole replacing strings/labels/etc. is just too complex for what I hoped to find. A panel with two tabs that I can just plop in my set of controls and js code -- but I can't seem to quite squish it into anything already exists.

thanks a bunch for your input!

<div>
<div data-dojo-attach-point="tabIdentify">
<div class="identify-tab-node" data-dojo-attach-point="tabNode1">
...just plop in some new attach points on this tab and execute the js

</div>

<div class="identify-tab-node" data-dojo-attach-point="tabNode2">
...just plop in some new attach points on this tab too and execute the js

</div>
</div>

</div>

RobertScheitlin__GISP · ‎01-22-2018

James,

OK let me try and simplify it more:

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer',
...
        'jimu/utils', 
...
function (declare, _WidgetsInTemplateMixin, BaseWidget, TabContainer, ...
utils, ... ) {
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
...

postCreate: function () {
...
this._initTabContainer();
...

     _initTabContainer: function () {
        var tabs = [];
        tabs.push({
          title: 'Tab 1',
          content: this.tabNode1
        });
        tabs.push({
          title: 'Tab2',
          content: this.tabNode2
        });
        this.selTab = 'Tab 1';
        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);

        this.tabContainer.startup();
        this.own(on(this.tabContainer,'tabChanged',lang.hitch(this,function(title){
          if(title !== 'Tab 1'){
            //do something now that Tab 2 has been selected 
          }
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.html

<div>
  <div data-dojo-attach-point="tabIdentify">
    <div class="my-tab-node" data-dojo-attach-point="tabNode1">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    <div class="my-tab-node" data-dojo-attach-point="tabNode2">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>
  </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Style.css

.my-tab-node{
  position:absolute !important;
  width:100% !important;
  height:auto !important;
  top:0 !important;
  bottom:0 !important;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JamesCrandall · ‎01-22-2018

I've been able to screw up even this simple example. It's the squiglies and writing this in TextPad that has me in double-vision. I've got the exact html and css but here is the js:

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer'],
function (declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    TabContainer,
    utils) {
      return declare([_WidgetsInTemplateMixin, BaseWidget], {
   postCreate: function () {
   this._initTabContainer();
     _initTabContainer: function () {
     var tabs = [];
     tabs.push({
       title: 'Tab 1',
       content: this.tabNode1
     });
     tabs.push({
       title: 'Tab2',
       content: this.tabNode2
     });
     this.selTab = 'Tab 1';
     this.tabContainer = new TabContainer({
       tabs: tabs,
       selected: this.selTab
     }, this.tabIdentify);
     this.tabContainer.startup();
     this.own(on(this.tabContainer,'tabChanged',lang.hitch(this,function(title){
       if(title !== 'Tab 1'){
      //do something now that Tab 2 has been selected
       }
     })));
     utils.setVerticalCenter(this.tabContainer.domNode);
      }
   }
   }
)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎01-22-2018

James,

so you are missing the 'jimu/utils', 'dojo/_base/lang', 'dojo/on' in the define array.

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer',
        'jimu/utils',
        'dojo/_base/lang',
        'dojo/on'],
function (declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    TabContainer,
    utils,
    lang,
    on) {

JamesCrandall · ‎01-22-2018

define(['dojo/_base/declare',
  'dijit/_WidgetsInTemplateMixin',
  'jimu/BaseWidget',
  'jimu/dijit/TabContainer',
  'jimu/utils',
  'dojo/_base/lang',
  'dojo/on'
 ],
 function(declare,
  _WidgetsInTemplateMixin,
  BaseWidget,
  TabContainer,
  utils,
  lang,
  on) {
  return declare([_WidgetsInTemplateMixin, BaseWidget], {
   postCreate: function() {
    this._initTabContainer();
    _initTabContainer: function() {
     var tabs = [];
     tabs.push({
      title: 'Tab 1',
      content: this.tabNode1
     });
     tabs.push({
      title: 'Tab2',
      content: this.tabNode2
     });
     this.selTab = 'Tab 1';
     this.tabContainer = new TabContainer({
      tabs: tabs,
      selected: this.selTab
     }, this.tabIdentify);
     this.tabContainer.startup();
     this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function(title) {
      if (title !== 'Tab 1') {
       //do something now that Tab 2 has been selected
      }
     })));
     utils.setVerticalCenter(this.tabContainer.domNode);
    }
   }
  });
 }
);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I think the problem is improper "}" and ")" at the bottom. I can't see straight after trying to line these up.

Among other errors, TypeError: clazz is not a constructor is at the top in dev tools. JSLint doesn't seem to be able to even get past the define at the top.

RobertScheitlin__GISP · ‎01-22-2018

James,

OK, you are trying to use code snippets as full code.

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer',
        'jimu/utils',
        'dojo/_base/lang',
        'dojo/on'],
  function(declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    TabContainer,
    utils,
    lang,
    on) {
    return declare([_WidgetsInTemplateMixin, BaseWidget], {
      postCreate: function() {
        this._initTabContainer();
      },

      _initTabContainer: function() {
        var tabs = [];
        tabs.push({
          title: 'Tab 1',
          content: this.tabNode1
        });
        tabs.push({
          title: 'Tab2',
          content: this.tabNode2
        });
        this.selTab = 'Tab 1';
        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);
        this.tabContainer.startup();
        this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function(title) {
          if (title !== 'Tab 1') {
            //do something now that Tab 2 has been selected
          }
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      }
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍