@ file : Suppress (" UNUSED _ PARAMETER ") Ċ Ċ package Ġm og ul . demo Ċ Ċ import Ġm og ul . generated . button Ċ import Ġm og ul . generated . two Boxes And Text Ċ import Ġm og ul . micro dom .* Ċ import Ġm og ul . micro dom . primitives . Vertical Direction Ċ import Ġm og ul . platform . MouseEvent Ċ import Ġm og ul . processor . Generate Builders Ċ import Ġm og ul . react .* Ċ import Ġm og ul . react . dom . box Ċ import Ġm og ul . react . dom . layout Box Ċ Ċ data Ġclass ĠTwo Boxes And Text Props ( val Ġfirst Color : ĠColor , Ġval Ġsecond Color : ĠColor , Ġval Ġtext : ĠString ) Ċ data Ġclass ĠTwo Boxes State ( val Ġclick Count : ĠInt ) Ċ Ċ @ Generate Builders Ċ class ĠTwo Boxes And Text Ġ: ĠStateful Component < Two Boxes And Text Props , ĠTwo Boxes State >() Ġ{ ĊĠĠĠ Ġoverride Ġval ĠinitialState Ġ= ĠTwo Boxes State ( click Count Ġ= Ġ 1 ) ĊĊĠĠĠ Ġoverride Ġfun Ġrender () Ġ= Ġgui Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġbox Style Ġ= Ġstyle Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġborder Ġ= ĠB orders ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= ĠEdge Sizes ( top Ġ= Ġ 2 , Ġright Ġ= Ġ 3 , Ġbottom Ġ= Ġ 3 , Ġleft Ġ= Ġ 2 ), ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcolor Ġ= ĠEdge Colors ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtop Ġ= Ġ 0 x AAAAAA . color , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġleft Ġ= Ġ 0 x AAAAAA . color , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbottom Ġ= Ġ 0 x 4 4 4 4 4 4 . color , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġright Ġ= Ġ 0 x 4 4 4 4 4 4 . color ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġlayout Box ( spacing Ġ= Ġ 1 0 , Ġstyle Ġ= Ġstyle Ġ{ Ġmargin Ġ= Ġ 1 0 . all Ġ}) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbox ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġstyle Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 5 0 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 5 0 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= Ġprops . first Color ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġ+ Ġbox Style , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġevents Ġ= Ġevents Ġ{ Ġclick Ġ+= Ġthis @ Two Boxes And Text :: small Box Clicked Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( state . click Count Ġ% Ġ 3 Ġ!= Ġ 0 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbox ( style Ġ= Ġstyle Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 0 0 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= Ġprops . second Color ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġ+ Ġbox Style ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġsmall Box Style Ġ= Ġstyle Ġ{ Ġwidth Ġ= Ġ 5 0 ; Ġheight Ġ= Ġ 5 0 ; ĠbackgroundColor Ġ= Ġprops . second Color Ġ} Ġ+ Ġbox Style ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlayout Box ( direction Ġ= ĠVertical Direction ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbox ( style Ġ= Ġsmall Box Style ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbox ( style Ġ= Ġsmall Box Style ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ- props . text ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ- state . click Count . toString () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ- " !" ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġfun Ġsmall Box Clicked ( event : ĠMouseEvent ) Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState ( state . copy ( click Count Ġ= Ġstate . click Count Ġ+ Ġ 1 )) ĊĠĠĠ Ġ} Ċ } Ċ Ċ data Ġclass ĠFour Boxes Props ( val Ġtitle : ĠString , Ġval Ġon More Windows : ĠMouse EventHandler ? Ġ= Ġnull , Ġval Ġon F ew er Windows : ĠMouse EventHandler ? Ġ= Ġnull ) Ċ @ Generate Builders Ċ class ĠFour Boxes Ġ: ĠComponent < Four Boxes Props >() Ġ{ ĊĊĠĠĠ Ġoverride Ġfun Ġrender () Ġ= Ġgui Ġ{ ĊĠĠĠĠĠĠĠ Ġlayout Box ( direction Ġ= ĠVertical Direction , Ġspacing Ġ= Ġ 1 0 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ- props . title ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtwo Boxes And Text ( text Ġ= Ġ" Hello ", Ġfirst Color Ġ= Ġ 0 xFF EEEE . color , Ġsecond Color Ġ= Ġ 0 x EEEEFF . color ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtwo Boxes And Text ( text Ġ= Ġ" World ", Ġfirst Color Ġ= Ġ 0 x EEEEFF . color , Ġsecond Color Ġ= Ġ 0 xFF EEEE . color ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbutton ( text Ġ= Ġ" More Ġwindows ", ĠonClick Ġ= Ġprops . on More Windows ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbutton ( text Ġ= Ġ" F ew er Ġwindows ", ĠonClick Ġ= Ġprops . on F ew er Windows ) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ Ċ } Ċ Ċ data Ġclass ĠButton Props ( val Ġtext : ĠString , Ġval Ġstyle : ĠStyle Ġ= ĠStyle (), Ġval ĠonClick : ĠMouse EventHandler ? Ġ= Ġnull ) Ċ Ċ @ Generate Builders Ċ class ĠButton Ġ: ĠComponent < Button Props >() Ġ{ ĊĊĠĠĠ Ġval Ġbutton Style Ġ= Ġstyle Ġ{ ĊĠĠĠĠĠĠĠ Ġpadding Ġ= Ġ 1 0 . all ĊĠĠĠĠĠĠĠ Ġmargin Ġ= Ġ 2 0 . left ĊĠĠĠĠĠĠĠ Ġborder Ġ= ĠB orders ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= ĠEdge Sizes ( top Ġ= Ġ 1 , Ġright Ġ= Ġ 2 , Ġbottom Ġ= Ġ 2 , Ġleft Ġ= Ġ 1 ), ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcolor Ġ= ĠEdge Colors ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtop Ġ= Ġ 0 x AAAAAA . color , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġleft Ġ= Ġ 0 x AAAAAA . color , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbottom Ġ= Ġ 0 x 4 4 4 4 4 4 . color , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġright Ġ= Ġ 0 x 4 4 4 4 4 4 . color ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠ Ġ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun Ġrender (): ĠElement Ġ{ ĊĊĠĠĠĠĠĠĠ Ġreturn Ġgui Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbox ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġbutton Style Ġ+ Ġprops . style , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhover Style Ġ= Ġstyle Ġ{ ĠbackgroundColor Ġ= ĠColor . white Ġ}, ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmouse Down Style Ġ= Ġstyle Ġ{ Ġborders ( 1 , ĠColor . black ) Ġ}, ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġevents Ġ= Ġevents Ġ{ Ġclick Ġ+= Ġprops . onClick Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ- props . text ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ Ċ } Ċ