ArcGISAPIforJavaScriptArcGISAPIforJavaScript
CustomizingWidgetsCustomizingWidgetsMattDriscoll–JCFranco–
@driskull@arfncode
AgendaAgendaWhatcanbecustomizedCustomizationapproachesDemosQ&A
CustomizingWidgetsCustomizingWidgetsThemeView
CustomizingWidgetsCustomizingWidgetsTheme:StylesView:Structure/Functionality
CustomizationApproachesCustomizationApproaches
CustomizationApproachesCustomizationApproachesCustomizingatheme
Customstyles(colors,sizing,font...)
CustomizationApproachesCustomizationApproachesCustomizingatheme
Customstyles(colors,sizing,font...)Customizingawidgetview
CustomUI
PartI:ThemingPartI:Theming
WhyTheme?WhyTheme?
WhyTheme?WhyTheme?MatchbrandingMatchthemapContrastwiththemapUser-speci�crequirements(e.g.biggerbuttons)
EsriThemesEsriThemes10themesareprovidedout-of-the-box:
UsingathemerequiresonlyaslightupdatetotheCSSpath.
<link href="//js.arcgis.com/4.12/esri/themes/<theme-name>/main.css" />
Demo:ThemeSwitcherDemo:ThemeSwitcher
Out-of-the-boxthemes
CustomizingAPIstylingCustomizingAPIstylingAPICSSisusing methodologyforclassnames.
.my-widget__menu--openCanoverrideCSSselectors/usehigherspeci�city
Canbetedious/brittle
BEM
Sample
ThemingTechnologyThemingTechnology
Weuse
tocreateourCSS.tocreateourCSS.
| |sass-lang.com nodejs.org gruntjs.com
isapowerfulscriptinglanguageforcompilingCSS.isapowerfulscriptinglanguageforcompilingCSS.
isapowerfulscriptinglanguageforcompilingCSS.isapowerfulscriptinglanguageforcompilingCSS.ModularDRYMakesthemingeasy
ThemingStepsThemingSteps
ThemingStepsThemingSteps1.Getthemeutility2.Usetheutility3.Customizeyourtheme4.HostyourCSS�le
ThemingSetupThemingSetup
ThemingSetupThemingSetup1.Clonethe jsapi-styles.git2.Runnpm install3.Editsass/my-theme/main.scss4.Seedist/my-theme/main.css
themeutility
Step1Step1Clonethethemeutilityrepo
Step1Step1Clonethethemeutilityrepo
github.com/jcfranco/jsapi-styles
git clone https://github.com/jcfranco/jsapi-styles.git
Step2Step2npm install
Step2Step2npm install
InstallsthenecessarybitsCreatesasamplethemedirectoryCompilestheCSSfromtheSCSSSpinsupapreviewinyourdefaultbrowser
Step3Step3EdityourthemeEdityourtheme
sass/my-theme/main.scss
Step3Step3EdityourthemeEdityourtheme
sass/my-theme/main.scss
Optionally,edityourappOptionally,edityourapp
preview/index.html
Step4Step4Hostyourstylesheetandanyrelevantassets
Step4Step4Hostyourstylesheetandanyrelevantassets
Linkyourstylesheetinyourapp
<!-- In your app: --><link href="path/to/your/theme/main.css" />
ThemingGoalsThemingGoals
ThemingGoalsThemingGoalsThemeSmartThemeSmart
AvoidaddingadditionalCSSselectorsInstead,useSasstoyouradvantage
ThemeStructureThemeStructureLet'slookathowthecorethemeisstructured
ColorSizeType
ThemeStructureThemeStructureLet'slookathowthecorethemeisstructured
Color:color.scssSize:sizes.scssType:type.scss
ThemeStructureThemeStructureDefaultDefault
Anyvalueassignmentoverridesthe!defaultvalue.
// Inside base/_color_.scss$background-color: #fff !default;
// Inside sass/my-theme/main.scss$background-color: #e3000b;
ThemeStructureThemeStructureDefaultDefault
Anyvalueassignmentoverridesthe!defaultvalue.
Butwait...there'smore!
// Inside base/_color_.scss$background-color: #fff !default;
// Inside sass/my-theme/main.scss$background-color: #e3000b;
ThemeStructureThemeStructureOverridethecorecolorvariables...
$font-color: #fff; $interactive-font-color: #fff; $background-color: #e3000b; $button-color: #fff;
ThemeStructureThemeStructureOverridethecorecolorvariables...
...thenmagic!
$font-color: #fff; $interactive-font-color: #fff; $background-color: #e3000b; $button-color: #fff;
Magic*Magic*Using$button-colorwecansetadefaulthovercolor.
$button-color--hover: darken($button-color, 10%) !default; // ...etc
ThemingDocumentationThemingDocumentationAPIStylingGuide
StyleUtilityReadme
LetsmakeathemeLetsmakeatheme
LetsmakeathemeLetsmakeathemeBrandcolors
CustomThemeCustomThemeBlockyMcBricks:Fineminiatureplasticbricks
Demo:CustomThemeDemo:CustomThemePreviewStart
CustomThemeApp
DemoSteps
ThemingRecapThemingRecapUseSass&thethemeutilitytoyouradvantageThemestructure
ColorSizeTypography
Usethecorevariablesandoverridetheirvalues
PartII:CustomizingwidgetviewsPartII:Customizingwidgetviews
Widget=View+ViewModelWidget=View+ViewModel
Widget=View+ViewModelWidget=View+ViewModelPresentationisseparatefrombusinesslogic
ReusableUIreplacementFrameworkintegration
ViewsViews
ViewsViewsPresentationoftheWidgetUsesViewModelAPIstorendertheUIView-speci�clogicresideshereExtendsesri/widgets/Widget
Widget(Base)ClassWidget(Base)Classesri/widgets/Widget
Widget(Base)ClassWidget(Base)Classesri/widgets/Widget
ProvideslifecycleAPIconsistency
WidgetLifecycleWidgetLifecycle
WidgetLifecycleWidgetLifecycleconstructor()postInitialize()render()destroy()
render()render()
render()render()De�nesUIJSXReactstorenderableproperties(privateorpublic)VirtualDOM
WorkingwithViewsWorkingwithViewsAPIExploration
BookmarksDocBookmarksSample
CustomizingawidgetviewCustomizingawidgetviewBricki�ed™Bookmarkswidget
Demo:CustomizingawidgetviewDemo:CustomizingawidgetviewDemoStartDemoSteps
CustomizingawidgetviewrecapCustomizingawidgetviewrecap
CustomizingawidgetviewrecapCustomizingawidgetviewrecapWidget=View+ViewModel
ReusableUIreplacementFrameworkintegration
CustomizingawidgetviewrecapCustomizingawidgetviewrecapWidget=View+ViewModel
ReusableUIreplacementFrameworkintegration
ExtendedexistingwidgetLifecycleCustomrendering(overrides)
ConclusionConclusionThemedbychangingcolors,sizing,etc.Alteredpresentation(customUI)
RecommendedSessionsRecommendedSessionsArcGISAPIforJavaScript:TheRoadAheadBuildingWebAppswiththeArcGISAPIforJavaScript
AdditionalResourcesAdditionalResourcesImplementingAccessorSettingupTypeScriptWidgetDevelopmentJSAPISDK
ShareyourappsandsuggestionswithShareyourappsandsuggestionswithusus
CoolappsAPIfeedbackIdeasforthenextUC
Questions?Questions?ForexampleForexample
�WherecanI�ndtheslides/source?
� �esriurl.com/customwidgetsuc2019
ThankYou!ThankYou!