day 2 of c++ boot camp - creating fast responsive user interfaces
TRANSCRIPT
© 2016 Embarcadero Technologies, Inc. All rights reserved.
C++BUILDER BOOTCAMP8thto12thofAugust,2016
Moreinformationhttp://embt.co/2016cbootcamp
© 2016 Embarcadero Technologies, Inc. All rights reserved.
Day2: CreatingFastResponsiveUserInterfaceswithAwesomeAnimationsandEffects
9th-Aug-2016Moreinfo:http://embt.co/2016cppbootcamp2
© 2016 Embarcadero Technologies, Inc. All rights reserved.
9th-Aug-2016Moreinfohttp://embt.co/2016cppbootcamp2
▪ UserInterfaceConsiderations▪WorkingwithAnimations▪ CreatingEffects▪ AvoidingFreezes▪ DealingwithScreenResolutions▪ CustomizingStylesandAppearance▪ PlanningforMobile
Day2:Agenda
© 2016 Embarcadero Technologies, Inc. All rights reserved.
Day2: CreatingFastResponsiveUserInterfaceswithAwesomeAnimationsandEffects
▪ LeadWorldWideDeveloperEvangelist&Engineer▪ Longtimesoftwaredeveloper▪ Inventedandpatentedpatternandswipetounlock
▪ USPatent#8352745&6766456,etc.▪ BuiltthoughtcontrolleddronewithGoogleGlass▪ HostofPodcastatDelphi.org▪ LivesnearBoise,Idaho,USAwithhisfamily▪ ImprovisationalcomedyperformerwithCSzBoise▪ FollowonTwitter@JimMcKeeth▪ Availableviaemail:[email protected]
AboutJimMcKeeth
9th-Aug-2016More info http://embt.co/2016cppbootcamp2
© 2016 Embarcadero Technologies, Inc. All rights reserved.
USERINTERFACECONSIDERATIONS▪ Layouts▪ Anchors▪ Alignments▪ Padding▪ Spacing▪ TabControl▪ ListViewvs.ListBox▪ Scollables▪ Frames▪ MultiView
FMX Layout Strategies http://embt.co/fmxlayouts
© 2016 Embarcadero Technologies, Inc. All rights reserved.
FIREMONKEY(FMX)BASICS
▪ Anythingcanbenested▪ SeeClipChildren
▪ Mostnumericpropertiesareasingle&animatable▪ Position,RotationCenter,
Scale,Size(Height&Width),Opacity,&RotationAngle
▪ UseMakeScreenshotmethodtogetBitmapoflayout
© 2016 Embarcadero Technologies, Inc. All rights reserved.
ANCHORS
▪ Positionrelativetooneormoreedge(s)ofparent:▪ Top▪ Bottom▪ Left▪ Right
▪ DefaultisTop,Left▪ Moveswithparentresize▪ Eachcontrolhas0to4anchors
▪ DocWiki:http://embt.co/fmxanchors
© 2016 Embarcadero Technologies, Inc. All rights reserved.
ALIGNMENT
▪ Alignscontrolwithinparent,settinganchors,sizeandposition.DefaultisNone.▪ Anchorandfillalongedge▪ Top,Bottom,Left,Right
▪ Fillparent,butpreserveaspectratio▪ Fit,FitLeft,FitRight
▪ Fillalongonesideoftheparent▪ MostBottom,MostTop,MostLeft,MostRight
▪ Resizeonlyononeaxis(widthorheight)▪ Vertical,VertCenter,Horizontal,HorzCenter
▪ Miscellaneous▪ Client,Center,Contents,Scale
▪ DocWiki:http://embt.co/fmxalignlayout
© 2016 Embarcadero Technologies, Inc. All rights reserved.
SPACING–MARGINSANDPADDING
▪ Margins▪ Spacingforsiblings
(andparentedges)▪ http://embt.co/fmxmargins
▪ Padding▪ Spacingforchildren▪ http://embt.co/fmxpadding
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TFLOWLAYOUT
▪ Arrangechildcontrolslikewordsinaparagraph▪ Controlsarrangedinorderaddedtolayout▪ UseTFlowLayoutBreakforforcedlinebreak▪ DocWiki:http://embt.co/tflowlayout
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TGRIDLAYOUT
▪ Arrangeschildcontrolsinagridofequalsizes▪ Controlsflowthroughgridasparentresizes▪ UseItemWidthandItemHeightproperties▪ Customizemarginsofindividualcontrols
▪ DocWiki:http://embt.co/tgridlayout
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TGRIDPANELLAYOUT
▪ Createsagridofspecifiedrowsandcolumns▪ Doesnotchangetheanchororsizeofchild▪ Eachcellcancontain1childcontrol▪ YousettheHeight,Width,Align,andAnchorsofchildren
▪ Controlscanspanmultiplecells
▪ DocWiki:http://embt.co/tgridpanellayout
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TSCALEDLAYOUT
▪ Stretcheschildcontrolsasitisresizedatruntime▪ Doesn’trespectaspectratiosofcontrols▪ SettheAlignoftheTScaledLayouttoFittomaintainaspectratio▪ DocWiki:http://embt.co/tscaledlayout
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TSCROLLBOX
▪ Allowschildrentotakeupmorespacethanparent▪ UsuallyanchoredtoClient▪ OnlyanchorchildrentoTop&Left(default)▪ Scrolltoseeadditionalchildren▪ Seealso:▪ TVertScrollBox,THorzScrollBox,TFramedScrollBox
andTFramedVertScrollBox▪ DocWiki:http://embt.co/tscrollbox
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TTABCONTROL
▪ Controltogroupchildcontrolsintotabs▪ Tabsareinastackwithonevisibleatatime.▪ TabPosition:=PlatformDefaultto
useplatformdefaultbehavior.▪ TabPosition:=Nonetohide
navigation.▪ UseTTabChangeActiontoanimate
transitions.▪ DocWiki:http://embt.co/usingttabcontrol
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TMULTIVIEW
▪ Onesuperpanelwithmultiplemodes▪ Supportedmodes
▪ PlatformDefault▪ Drawer▪ NavigationPane▪ Panel▪ Popover▪ Custom
▪ PointtoMasterPane,DetailPaneanddefinableMasterButton
▪ PlatformDefaultadaptstoplatformandorientation(formobile)▪ Customsupportsuserdefinedlayoutandbehavior▪ DocWiki:http://embt.co/usingmultiview
© 2016 Embarcadero Technologies, Inc. All rights reserved.
FRAMES
▪ ReusablepiecesofUserInterface▪ Thelayoutandalltheeventhandlers▪ Allthecodeintheunit
▪ Create1ormoreFramesinproject,thenreusethemindifferentlayoutsorindifferentplaces
▪ DocWiki: http://embt.co/workingwithframes
hips://commons.wikimedia.org/wiki/File:Oil_painkng_frame_Wellcome_L0067855.jpg
© 2016 Embarcadero Technologies, Inc. All rights reserved.
ANIMATIONS
▪ Modifypropertyvaluesoverduration▪ Automaticormanualstart▪ Optionaldelay,loop,inverse,etc.▪ Triggers(orTrueorFalse)▪ IsMouseOver,IsDragOver,IsFocused,IsVisible,
IsPressed,IsChecked,IsSelected,IsExpanded▪ EventsOnProcess&OnFinish▪ Note:Multipleanimationinstancesarenot
necessarilysynchronized(noticeableovertime).
http://embt.co/animation-effects
© 2016 Embarcadero Technologies, Inc. All rights reserved.
INTERPOLATION
▪ Determineshowtherateofthevaluechangestotheovertime.▪ Linearisdefaultandchangesataconstantrate.▪ Alloptions:Linear,Quadratic,Cubic,Quartic,Quintic,Sinusoidal,
Exponential,Circular,Elastic,Back,&Bounce▪ AnimationTypecontrolshowInterpolationisapplied(startvs.end)▪ In-Thecurveappliestothestartingvalueofthepropertyanimated.▪ Out-Thecurveappliestotheendingvalueofthepropertyanimated
andproceedsbackwardstothestartingvalue.▪ InOut-Thecurveappliestotheboththestartingvalueandthe
endingvalueofthepropertyanimatedandmeetsatthecenterpoint.
http://embt.co/interpolation-type
© 2016 Embarcadero Technologies, Inc. All rights reserved.
EFFECTS
▪ Over40GPUpoweredeffects(notcountingtransitioneffects)
▪ Builtusingshaderfilters▪ Progresspropertyrepresents
precentageofapplication(canbeanimatedovertime)
▪ Supportsoptionaltriggerforautomaticenableordisable
▪ Applytoimageorcontrol
http://embt.co/fmx-effects
© 2016 Embarcadero Technologies, Inc. All rights reserved.
TRANSITIONEFFECTS
▪ Over20TransitionEffects▪ AsubsetofregularEffects▪ Changesparentimage(orcontrol)into
targetimage▪ Progresspropertyrepresentspercentage
ofapplication(canbeanimatedovertime)▪ Forcontroltransitionsuse
MakeScreenshottogetTargetimage
http://embt.co/fmx-effects
© 2016 Embarcadero Technologies, Inc. All rights reserved.
AVOIDINGFREEZES
▪ Don’trunprocessesinthemainUIthread▪ UseTTask&TFuturefromthePPL▪ ThePPLmanagesathreadpool▪ TTaskisaunitofwork▪ http://embt.co/UsingTTask
▪ TFutureisavalueneededlater▪ http://embt.co/UsingIFuture
▪ UseTThread.QueuetoupdateUI▪ http://embt.co/TThreadQueue
▪ MoreonPPL▪ http://embt.co/UsingPPL
© 2016 Embarcadero Technologies, Inc. All rights reserved.
STYLES
▪ UseTStyleBooktoloadstyle▪ Defaultstyleisplatformdefault▪ Canoverridestyle▪ Optionallycustomizestyle▪ http://embt.co/fmxstyles
© 2016 Embarcadero Technologies, Inc. All rights reserved.
9th-Aug-2016Moreinfohttp://embt.co/2016cppbootcamp2
▪ UserInterfaceConsiderations▪WorkingwithAnimations▪ CreatingEffects▪ AvoidingFreezes▪ DealingwithScreenResolutions▪ CustomizingStylesandAppearance▪ PlanningforMobile
Day2:Agenda
© 2016 Embarcadero Technologies, Inc. All rights reserved.
DAY3: C++11LANGUAGEDEEPDIVE
© 2016 Embarcadero Technologies, Inc. All rights reserved.
DAY4: C++GAMEDEVELOPMENTEliM.
MoreInformationhttp://embt.co/CppGames2016
© 2016 Embarcadero Technologies, Inc. All rights reserved.
DAY5: STEPPINGUPTOMOBILE
&JimMcKeeth
© 2016 Embarcadero Technologies, Inc. All rights reserved.
Q&AJoinusatCommunity.Embarcadero.com
[email protected]/cppbuilder/
9th-Aug-2016Moreinfo:http://embt.co/2016cppbootcamp2