The sample for building a widget is a fine start: Custom Recenter Widget | ArcGIS API for JavaScript 4.3 All the style information is inline, which is...well, inline.
Now I want to add dijits to my widget: comboboxes, buttons, stuff. Styling is pretty intense and best handled someplace other than inline. Also, the css is available via CDN from dojo and ArcGIS.
When I compile the TypeScript below and drop it into my map app, the styling is, well, primitive. (Sorry, no jsbin).
Any clues on how to start building more complex and styled widgets that I can add to my map apps would be greatly appreciated. TIA
THE RESULT:
HTML:
var styledStuff = new StyledStuff({
title: "This is the styled stuff",
subtitle: "And this is the sub styled stuff"
});
view.ui.add(styledStuff, "top-right");
TYPESCRIPT:
import {subclass, declared, property} from "esri/core/accessorSupport/decorators";
import Widget = require("esri/widgets/Widget");
import Button = require("dijit/form/Button");
import ComboBox = require("dijit/form/ComboBox");
import Memory = require("dojo/store/Memory");
import on = require("dojo/on");
import dom = require("dojo/dom");
import req = require("dojo/require");
import { renderable, jsxFactory } from "esri/widgets/support/widget";
const CSS = {
base: "styledstuff"
};
interface Style {
textShadow: string;
}
@subclass("esri.widgets.MapTitle")
class StyledStuff extends declared(Widget) {
@property()
@renderable()
title: string;
@property()
@renderable()
subtitle: string;
@property()
@renderable()
button: Button;
render() {
const title = this._getTitle();
const subtitle = this._getSubtitle();
const button = this._getButton();
const comboBox = this._getComboBox();
return (
<div
bind={this}
class={CSS.base}>
<p id="title" class="title">{title}</p>
<p id="subtitle" class="subtitle">{subtitle}</p>
<p><span><div id="progButtonNode"></div></span></p>
<p><span><div id="progComboBoxNode"></div></span></p>
</div>
);
}
private _getTitle() {
return this.title;
}
private _getSubtitle() {
return this.subtitle;
}
private _getButton() {
var myButton = new Button({
label: "Click this button, man!",
onClick: function(){
alert("Please and thank you, man! ");
}
}, "progButtonNode");
return myButton;
}
private _getComboBox() {
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var comboBox = new ComboBox({
name: "state",
value: "California",
store: stateStore,
searchAttr: "name"
}, "progComboBoxNode").startup();
return comboBox;
}
}
export = StyledStuff;