Blog Frankel CH Flamingo Tutorial
Blog Frankel CH Flamingo Tutorial
Blog Frankel CH Flamingo Tutorial
NicolasFrnk e lblog
Aboutthisblog
Me
Typetexttosearchhere...
Home>Java>Flamingotutorial
RSS
Flamingo tutorial
June27th,2010 NicolasFrankel Gotocomments Leaveacomment
Inthisarticle,IwillprovideyouwiththedocumentationtoeasilyusetheFlamingoframeworkandmoreprecisely,itsribbon widget.
Introduction
NeversaythatMicrosoftneverinnovates:inOffice,itintroducedaninterestingconcept,theribbonband.
TryingtouseFlamingoforthefirsttimeisnosmallfeatsincetheresnodocumentationontheWeb,apartfromJavadocsandthe sourceforatestapplication.ThefollowingiswhatIunderstoodsinceIbeganmytrialanderrorjourney.
free license
pdfcrowd.com
Thebasics
Semantics
theribbonisthelargebaronthescreenshotabove.Therecanbeonlyasingleribbonforaframe ataskisatabbedgroupofoneormoreband.Onthescreenshot,tasksarePageLayout,Write,Animationsandsoon abandisagroupofoneormorewidgets.Onthescreenshot,bandsareClipboard,QuickStyles,Fontandsoon
RecentPosts
Bothsidesofthestory SymboliclinksforWindows SecondtrywithVaadinandScala MixingVaadinandScala(withatouch ofMaven) PlayingwithSpringRooandVaadin
Underlyingconcepts
Thecoredifferencebetweenbuttonsinatoolbarandbandinaribbonbaristhatbandsareresizable.Forexamples,theseare thestepsfordisplayingtheDocumentband,inregardtobothitsrelativewidthandtheribbonwidth.
hibernate
spring
Thelaststepisknownastheiconifiedstate.Whenyouclickonthebutton,itdisplaystheentirebandasapopup.
Yourfirstribbon
Setup
InordertousetheFlamingoframework,thefirststepistodownloadit.IfyoureusingMaven,toughluck!IdidntfindFlamingo incentralnorjava.netrepositories.Sodownloaditanywayandinstallitmanuallyinyourlocal(orenterprise)repository.For information,Ichoosedthenet.java.dev.flamingo:flamingolocation.
Theframe
free license
pdfcrowd.com
Addingatask
Tasksrepresentlogicalbandgrouping.Theylookliketabsandacttheparttoo.LetsaddtwosuchtasksaptlynamedOneand Two. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 publicclassMainFrameextendsJRibbonFrame{ publicstaticvoidmain(String[]args){ SwingUtilities.invokeLater(newRunnable(){ @Override publicvoidrun(){ MainFrameframe=newMainFrame() frame.setDefaultCloseOperation(EXIT_ON_CLOSE) frame.pack() frame.setVisible(true) RibbonTasktask1=newRibbonTask("One") RibbonTasktask2=newRibbonTask("Two") frame.getRibbon().addTask(task1) frame.getRibbon().addTask(task2) } }) } }
?
NoticethegetRibbon()methodontheJRibbonFrame.Itisthereferenceontheribbonbar. AlsonoticethattheaddTask()methodacceptsataskbutalsoavarargsofJRibbonBand.Andifyoulaunchtheabovecode,itwill failmiserablywiththefollowingerror: 01 02 03 04 05 06 07 08 Exceptioninthread"AWT-EventQueue-0"java.lang.IllegalArgumentException:Cannothaveemptyribbontask atorg.jvnet.flamingo.ribbon.RibbonTask.<init>(RibbonTask.java:85) atMainFrame$1.run(MainFrame.java:37) atjava.awt.event.InvocationEvent.dispatch(InvocationEvent.java:209) atjava.awt.EventQueue.dispatchEvent(EventQueue.java:597) atjava.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:269) atjava.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:184) atjava.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:174)
?
free license
pdfcrowd.com
08 09 10 11
Addingbands
TosatisfyourFlamingofriend,letsaddaribbonbandtoeachtask.TheconstructorofJRibbonBandtakestwoargument,the labelandaninstanceofapreviouslyunknownclass,ResizableIcon.Itwillbeseenindetailinthenextsection. Asfornow,ifyoujustcreatetheRibbonTaskwithareferencetotheJRibbonBandandlaunchtheapplication,youwillgetsuch anerror: 1 2 3 4 5 6 7 8 9 Exceptioninthread"AWT-EventQueue-0"java.lang.IllegalStateException:Inconsistentpreferredwidths Ribbonband'Hellohasthefollowingresizepolicies org.jvnet.flamingo.ribbon.resize.CoreRibbonResizePolicies$Nonewithpreferredwidth-4 org.jvnet.flamingo.ribbon.resize.CoreRibbonResizePolicies$Low2Midwithpreferredwidth-4 org.jvnet.flamingo.ribbon.resize.CoreRibbonResizePolicies$Mid2Midwithpreferredwidth-4 org.jvnet.flamingo.ribbon.resize.CoreRibbonResizePolicies$Mirrorwithpreferredwidth-4 org.jvnet.flamingo.ribbon.resize.CoreRibbonResizePolicies$Mid2Lowwithpreferredwidth-4 org.jvnet.flamingo.ribbon.resize.CoreRibbonResizePolicies$High2Midwithpreferredwidth-4 org.jvnet.flamingo.ribbon.resize.IconRibbonBandResizePolicywithpreferredwidth42
?
Rememberthatbandsareresizable?Flamingoneedsinformationonhowtodoit.Beforeinitialdisplay,itwillcheckthatthose policiesareconsistent.Bydefault,theyarenotandthisisthereasonwhyitcomplains:Flamingorequiresyoutohaveatleast theiconifiedpolicythatmustbeinthelastplace.Inmostcases,however,youllwanttohaveatleastanormaldisplayinthe policieslist. Letsmodifythecodetodoit: 1 2 3 4 5 6 7 8 JRibbonBandband1=newJRibbonBand("Hello",null) JRibbonBandband2=newJRibbonBand("world!",null) band1.setResizePolicies((List)Arrays.asList(newIconRibbonBandResizePolicy(band1.getControlPanel()))) band2.setResizePolicies((List)Arrays.asList(newIconRibbonBandResizePolicy(band1.getControlPanel()))) RibbonTasktask1=newRibbonTask("One",band1) RibbonTasktask2=newRibbonTask("Two",band2)
?
Thepreviouscodeletusatleastseesomething:
Addingbuttons(atlast!)
Evenifthepreviouscompilesandruns,itstillholdsnointerest.Nowisthetimetoaddsomebuttons! 1 2 JCommandButtonbutton1=newJCommandButton("Square",null) JCommandButtonbutton2=newJCommandButton("Circle",null)
?
free license
pdfcrowd.com
2 3 4 5 6 7 8 9
Theresultlooksthesameatfirst,butwhenyouresizetheframe,itlookslikethis:
Evenifitsvisuallynotveryattractive,itlooksmuchbetterthanbefore.Weseethetaks,thenameofthebandandthelabels onourfourbuttons.
Resizableicons
TheJCommandButtonsconstructorhas2parameters:oneforthelabel,theotherforaspecialFlamingoclass,theResizableIcon. SinceFlamingoisallaboutdisplayingthesamebuttonindifferentsizes,thatsnosurprise.Resizableiconscanbeconstructed fromImage,icoresourcesorevenSVG. Letsaddanutilitymethodtoourframe,andspiceupourUI: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 publicstaticResizableIcongetResizableIconFromResource(Stringresource){ ? returnImageWrapperResizableIcon.getIcon(MainFrame.class.getClassLoader().getResource(resource),newDimension( } ... JCommandButtonbutton1=newJCommandButton("Square",getResizableIconFromResource("path")) JCommandButtonbutton2=newJCommandButton("Circle",getResizableIconFromResource("to")) JCommandButtonbutton3=newJCommandButton("Triangle",getResizableIconFromResource("the")) JCommandButtonbutton4=newJCommandButton("Star",getResizableIconFromResource("resource")) band1.addCommandButton(button1,TOP) band1.addCommandButton(button2,MEDIUM) band1.addCommandButton(button3,MEDIUM) band1.addCommandButton(button4,MEDIUM)
Thisissomewhatmoresatisfying:
free license
pdfcrowd.com
Choosingpolicies
NowwerereadytotackleFlamingoscorebusiness,resizingmanagement.IfyouhaveOffice,andplayedwithit,yousawthat theresizingpoliciesareveryrich.Andwealsosawpreviouslythatwithonlytwomeagerpolicies,wecaneitherseetheiconified displayorthefulldisplay. Letsseehowwecouldgofurther.YouprobablynoticedthattheaddCommandButton()ofJRibbonBandhas2parameters:the buttontoaddandapriority.ItisthispriorityandthepolicythatFlamingousetochoosehowtodisplaytheband. Prioritiesarethefollowing:TOP,MEDIUMandLOW. Policiesare: Policy CoreRibbonResizePolicies.None CoreRibbonResizePolicies.Mid2Mid CoreRibbonResizePolicies.Mid2Low CoreRibbonResizePolicies.High2Mid CoreRibbonResizePolicies.High2Low CoreRibbonResizePolicies.Low2Mid CoreRibbonResizePolicies.Mirror IconRibbonBandResizePolicy Description CommandbuttonswillberepresentedintheTOPstate(bigbuttonwithlabeland icon) CommandbuttonsthathaveMEDIUMprioritywillberepresentedintheMEDIUMstate (smallbuttonwithlabelandicon) CommandbuttonsthathaveMEDIUMprioritywillberepresentedintheLOWstate (smallbuttononlyicon) CommandbuttonsthathaveHIGHprioritywillberepresentedintheMEDIUMstate CommandbuttonsthathaveHIGHprioritywillberepresentedintheLOWstate CommandbuttonsthathaveLOWprioritywillberepresentedintheMEDIUMstate Commandbuttonswillberepresentedintheprioritytheywereassignedto Commandbuttonswillbenotrepresented.Theentirebandwillberepresentedbya commandbuttonthatwhenpressedwillshowapopupoftheunconstrainedband
free license
pdfcrowd.com
3 4 5 6
Thiswillgetusthefollowingresult:
Note:therewontbeanyiconifiedstateinmyexamplesincethebanddoesnotcompeteforspacewithanotherone.
Morefeatures
Flamingosribbonfeatureletyoualso: addstandardSwingcomponentstotheribbon
free license
pdfcrowd.com
addamenuonthetopleftcorner
integrationwithstandardLookandFeels
Conclusion
free license
pdfcrowd.com
Leaveacomment
C om m e nts(17)
July9th,2010at12:34|#1
R e ply|Q uote
Yves
July30th,2010at17:08|#2
R e ply|Q uote
Renato Clemente
July31st,2010at23:03|#3
R e ply|Q uote
Renato
nullExceptioninthreadAWT-EventQueue-0java.lang.NullPointerException at org.pushingpixels.flamingo.common.icon.ImageWrapperResizableIcon.getIcon(ImageWrapperResizableIcon.java:71) atMainFrame.getResizableIconFromResource(MainFrame.java:33) atMainFrame$1.run(MainFrame.java:58) atjava.awt.event.InvocationEvent.dispatch(InvocationEvent.java:209) atjava.awt.EventQueue.dispatchEvent(EventQueue.java:597) at WhenitrytouseIconsonit,agetthisexceptions: ImageWrapperResizableIcon.getIcon(MainFrame.class.getClassLoader().getResource(resource), newDimension(48,48)); Ithinkitsintheclassloader,ormaybeintheresource,canyouhelpwith that?Explainhowitworks? java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:269) at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:184) at
free license
pdfcrowd.com
August3rd,2010at19:13|#4
R e ply|Q uote
Se pte m be r13th,2010at05:04|#5
R e ply|Q uote
Se pte m be r13th,2010at07:41|#6
R e ply|Q uote
omarenm
@omarenm Forgetit,ididit.
Se pte m be r13th,2010at20:34|#7
R e ply|Q uote
Yourewelcome
Nicolas Frankel
R e ply|Q uote
Se pte m be r30th,2010at19:43|#8
Sid
Se pte m be r30th,2010at21:40|#9
R e ply|Q uote
HiSid,
Nicolas
free license
pdfcrowd.com
Nicolas Frankel
De ce m be r6th,2010at04:58|#10
R e ply|Q uote
marwa
//Ifollowthestepyouwrite //andthisisthecodebutwithexception importjava.awt.Dimension; importjava.util.Arrays; importjava.util.List; importjavax.swing.SwingUtilities; importorg.pushingpixels.flamingo.api.common.JCommandButton; import org.pushingpixels.flamingo.api.common.icon.ImageWrapperResizableIcon; importorg.pushingpixels.flamingo.api.common.icon.ResizableIcon; importorg.pushingpixels.flamingo.api.ribbon.JRibbonBand; importorg.pushingpixels.flamingo.api.ribbon.JRibbonFrame; importorg.pushingpixels.flamingo.api.ribbon.RibbonElementPriority; importorg.pushingpixels.flamingo.api.ribbon.RibbonTask; importorg.pushingpixels.flamingo.api.ribbon.resize.CoreRibbonResizePolicies; import org.pushingpixels.flamingo.api.ribbon.resize.IconRibbonBandResizePolicy; publicclasstest2extendsJRibbonFrame{ publicstaticvoidmain(String[]args){ SwingUtilities.invokeLater(newRunnable(){ publicvoidrun(){ test2frame=newtest2(); frame.setDefaultCloseOperation(EXIT_ON_CLOSE); frame.pack(); JRibbonBandband1=newJRibbonBand(Hello,null); JRibbonBandband2=newJRibbonBand(world!,null); band1.setResizePolicies((List)Arrays.asList(new CoreRibbonResizePolicies.None(band1.getControlPanel()),new CoreRibbonResizePolicies.Mirror(band1.getControlPanel()),new CoreRibbonResizePolicies.Mid2Low(band1.getControlPanel()),new CoreRibbonResizePolicies.High2Low(band1.getControlPanel()),new IconRibbonBandResizePolicy(band1.getControlPanel()))); band2.setResizePolicies((List)Arrays.asList(new CoreRibbonResizePolicies.None(band1.getControlPanel()),new CoreRibbonResizePolicies.Mirror(band1.getControlPanel()),new CoreRibbonResizePolicies.Mid2Low(band1.getControlPanel()),new
free license
pdfcrowd.com
CoreRibbonResizePolicies.High2Low(band1.getControlPanel()),new IconRibbonBandResizePolicy(band1.getControlPanel()))); RibbonTasktask1=newRibbonTask(One,band1); RibbonTasktask2=newRibbonTask(Two,band2); frame.getRibbon().addTask(task1); frame.getRibbon().addTask(task2); JCommandButtonbutton1=newJCommandButton(Square, getResizableIconFromResource(path)); JCommandButtonbutton2=newJCommandButton(Circle, getResizableIconFromResource(to)); JCommandButtonbutton3=newJCommandButton(Triangle, getResizableIconFromResource(the)); JCommandButtonbutton4=newJCommandButton(Star, getResizableIconFromResource(resource)); band1.setResizePolicies((List)Arrays.asList(new CoreRibbonResizePolicies.None(band1.getControlPanel()), newIconRibbonBandResizePolicy(band1.getControlPanel()))); band2.setResizePolicies((List)Arrays.asList(new CoreRibbonResizePolicies.None(band1.getControlPanel()), newIconRibbonBandResizePolicy(band1.getControlPanel()))); band1.addCommandButton(button1,RibbonElementPriority.TOP); band1.addCommandButton(button1,RibbonElementPriority.MEDIUM); band1.addCommandButton(button1,RibbonElementPriority.LOW); band2.addCommandButton(button1,RibbonElementPriority.TOP); band2.addCommandButton(button1,RibbonElementPriority.MEDIUM); band2.addCommandButton(button1,RibbonElementPriority.LOW); }});} publicstaticResizableIcongetResizableIconFromResource(Stringresource){ return ImageWrapperResizableIcon.getIcon(test2.class.getClassLoader().getResource(resource), newDimension(48,48));} } //theexceptioniget ExceptioninthreadAWT-EventQueue-0java.lang.IllegalStateException: Inconsistentpreferredwidths RibbonbandHellohasthefollowingresizepolicies org.pushingpixels.flamingo.api.ribbon.resize.CoreRibbonResizePolicies$None withpreferredwidth-2 org.pushingpixels.flamingo.api.ribbon.resize.CoreRibbonResizePolicies$Mirror withpreferredwidth-2 org.pushingpixels.flamingo.api.ribbon.resize.CoreRibbonResizePolicies$Mid2Low
free license
pdfcrowd.com
withpreferredwidth-2 org.pushingpixels.flamingo.api.ribbon.resize.CoreRibbonResizePolicies$High2Low withpreferredwidth-2 org.pushingpixels.flamingo.api.ribbon.resize.IconRibbonBandResizePolicywith preferredwidth42 org.pushingpixels.flamingo.api.ribbon.resize.CoreRibbonResizePolicies$High2Low withprefwidth-2isfollowedbyresizepolicy org.pushingpixels.flamingo.api.ribbon.resize.IconRibbonBandResizePolicywith largerprefwidth at org.pushingpixels.flamingo.internal.utils.FlamingoUtilities.checkResizePoliciesConsistency(FlamingoUtilities.java:579) at org.pushingpixels.flamingo.api.ribbon.AbstractRibbonBand.setRibbonTask(AbstractRibbonBand.java:539) atorg.pushingpixels.flamingo.api.ribbon.RibbonTask.(RibbonTask.java:90) attest2$1.run(test2.java:34) atjava.awt.event.InvocationEvent.dispatch(InvocationEvent.java:209) atjava.awt.EventQueue.dispatchEvent(EventQueue.java:597) at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:269) at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:184) at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:174) at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:169) at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:161) atjava.awt.EventDispatchThread.run(EventDispatchThread.java:122) pleasehelpme
De ce m be r8th,2010at01:30|#11
R e ply|Q uote
free license
pdfcrowd.com
De ce m be r8th,2010at11:16|#12
R e ply|Q uote
Youcangetthewholepackage(sourceandjars)there.Withthesources,you canbuildthejavadocwiththejavadoctool.Hopeithelps.
Nicolas Frankel
De ce m be r9th,2010at10:17|#13
R e ply|Q uote
De ce m be r9th,2010at11:12|#14
R e ply|Q uote
Nicolas Frankel
De ce m be r10th,2010at16:21|#15
R e ply|Q uote
Claudia K
publicclassMainFrameextendsJRibbonFrame { publicstaticvoidmain(String[]args) { SwingUtilities.invokeLater(newRunnable() { @Override publicvoidrun() { MainFrameframe=newMainFrame(); //frame.setSize(newDimension(500,500)); frame.setDefaultCloseOperatio(EXIT_ON_CLOSE); frame.setResizable(true); frame.pack(); frame.setVisible(true); JRibbonBandband1=newJRibbonBand(Hello,null); JRibbonBandband2=newJRibbonBand(world!,null); band1.setResizePolicies((List)Arrays.asList(new IconRibbonBandResizePolicy(band1.getControlPanel())));
free license
pdfcrowd.com
band2.setResizePolicies((List)Arrays.asList(new IconRibbonBandResizePolicy(band1.getControlPanel()))); RibbonTasktask1=newRibbonTask(One,band1); RibbonTasktask2=newRibbonTask(Two,band2); frame.getRibbon().addTask(task1); frame.getRibbon().addTask(task2); //C:\DokumenteundEinstellungen\Claudia\Desktop\svgicons\black// src\\gui\\rightblack.svg JCommandButtonbutton1=newJCommandButton(Square, getResizableIconFromResource(src\\gui\\rightblack.svg)); JCommandButtonbutton2=newJCommandButton(Circle,null); JCommandButtonbutton3=newJCommandButton(Triangle,null); JCommandButtonbutton4=newJCommandButton(Star,null); band1.addCommandButton(button1,RibbonElementPriority.TOP); band1.addCommandButton(button2,RibbonElementPriority.MEDIUM); band1.addCommandButton(button3,RibbonElementPriority.MEDIUM); band1.addCommandButton(button4,RibbonElementPriority.MEDIUM); band1.setResizePolicies((List)Arrays.asList(new CoreRibbonResizePolicies.None(band1.getControlPanel()),new IconRibbonBandResizePolicy(band1.getControlPanel()))); band1.setResizePolicies((List)Arrays.asList(new CoreRibbonResizePolicies.None(band1.getControlPanel()),new CoreRibbonResizePolicies.Mirror(band1.getControlPanel()),new CoreRibbonResizePolicies.Mid2Low(band1.getControlPanel()),new CoreRibbonResizePolicies.High2Low(band1.getControlPanel()),new IconRibbonBandResizePolicy(band1.getControlPanel()))); } }); } publicstaticResizableIcongetResizableIconFromResource(Stringresource) { Fileright=newFile(resource); URLurl; try { url=right.toURI().toURL(); }catch(MalformedURLExceptione) { //cannotdoanything,stopprogram/threadwithRuntimeException thrownewRuntimeException(e); } //URLu=MainFrame.class.getClassLoader().getResource(leftblack); returnImageWrapperResizableIcon.getIcon(/*u*/url,newDimension(18, 18));
free license
pdfcrowd.com
} } Hereisthecurrentcode.Pleaseexcuseabouttheformat.-.Thankyouverymuchforyourwork!!!
De ce m be r31st,2010at17:05|#16
R e ply|Q uote
Nicolas Frankel
January10th,2011at18:51|#17
R e ply|Q uote
Abrao
Subscribetocommentsfeed
SubmitC omment
Safelygiveawayyourdemoapplications
C opyright2008-2011AJavageek
Nextbookreview:SpringSecurity3
Top
free license
pdfcrowd.com
ThemebyNeoEase.ValidXHTML1.1andC SS3.
free license
pdfcrowd.com