Académique Documents
Professionnel Documents
Culture Documents
BuildingtheGUIforthe
MicrosoftWindowsCalculator
Lecture2
DesTraynor2005
Today,wearegoingtocreatetheGUIforthecalculatoryouall
knowandlove.
Itwillbasicallybeacrashcourseinputtingtogethersimple
interfacesusingSwing.
Youwilllearn...
MakingandplacingGUIcomponents
CreatingGUIsusingJPaneltobreakdownthedesign
DecoratingGUIComponents,viaFonts,Colors(sic)and
Insets
UsingLayoutManagers
JMenuBar,andJMenu
The Calculator
So What?
Well,wehavenowgonefrom1large
problem,tothreesmallones.
WewilldoourbesttocreateeachJPanel,
oneatatime.
So,startingwiththesimplest,theJpanel
containingthesingleJTextField.
textPanel.java
classtextPanelextendsJPanel
{
JTextFieldoutput;
textPanel()
{
//setsize,initialtext,fontandtextalignment
output=newJTextField("0.",28);
output.setFont(newFont("Courier",Font.PLAIN,16));
output.setHorizontalAlignment(4);
//addtopanel
this.add(output);
//changebackgroundcolortobethatgraycolor
Colorbackground_color=newColor(241,237,222);
this.setBackground(background_color);
}
//mainremoved.
}
(gototexteditor,showmainetc)
Thereweresomenewmethodsthere,thatyouwouldn't
haveseenbefore.Youdonotneedtolearntheseoffby
heart,theyareallavailableathttp://java.sun.com
Youcanlookupthissiteallthetimeduringlabs,but
notduringyourlabexam,oryourfinalexam.Iwill
providethesignaturesofanyofthenecessarymethods
intheseoccasions(Ithink).
Thesebadboys...
So,whatwehavehereis4buttons,3withredtext,
and2ofthemareheavilypadded
Normallybuttonsshrink/expandtofittheirlabel.CE
andCaren'tdoingthat.
Thefirstyoke,isactuallyadisabledbutton(I
workedthatoutafterawhile)
buttonPanel1.java
/*ThecodeforthewholePanelwon'tfitina
slide,soI'llexplainoneJbuttonandhopefullyyou
geniicanworkouttherest
*/
JbuttonCE;
//ThisisRGBcalueofthewindowsbuttoncolor
Colorbackground_color=newColor(241,237,222);
/*Thestringpassedintoconstructoristhelabelthat
appearsontheJbutton*/
CE=newJbutton("CE");
//Thisbitsetsthebuttontexttobered.
CE.setForeground(Color.red);
//Thissetsthebackgroundcolortobethecolorabove
CE.setBackground(buttons_color);
/*Thissetstheborders,we'llbetalkingaboutthisin
asecond*/
CE.setMargin(newInsets(6,29,6,29));
//ThenaddittobuttonPanel1
add(CE);
Insets ?
Insetsistheamountofspacebetweenthecomponent,and
itsborder.
Forabuttonitslike
Youcreatethemlikeso
Insets(inttop,intleft,intbottom,intright)
Alldistancesareinpixels.
(gototexteditorandexplain)
(thisisthebitwhereyourealisethat
attendinglectureswasprobablyagoodidea)
Nowfortheslightchallenge,the24buttons
Somebuttonsareblue,somearen't,lotofcopyingand
pastingtospecifythis.
Basicallyeverybuttonhasthefollowingthings...
InsetsbuttonMargin=newInsets(5,1,5,1);
MC=newJbutton("MC");//name
MC.setBackground(buttons_color);//colorfg
MC.setForeground(Color.red);//colorbg
MC.setMargin(buttonMargin); //margins
setLayout(newGridLayout(4,6,5,5));
GridLayoutplacescomponentsasyouaddthem,startingtop
right,endingbottomleft.Youcannotdirectlyplacea
componentinaspecificplaceeasily.
The4and6relatethetothe4x6layout,the5and5relateto
thehorizontalandverticalgapbetweencomponents(in
pixels.)
Again,letstakealookatthecodeitself.
(buttonPanel2.java)
Well,wehavebuiltthe3subcomponents,so
wenowneedtobuildtheFramethat
containsthethreeofthem,inthecorrect
fashion.
WewillalsoaddaJMenubartocomplete
thelookoftheprogram.
/**Thisisthemenustuff**/
JMenuBarjmb;
JMenujmi1,jmi2,jmi3;
TheJMenuBaristhetoplevelline.Itis
initiallyempty.
AJMenuisasinglemenu(e.gFile,orEdit)
AJMenuItemisaniteminsideaJMenu,(e.g
Open,Cut)
Togetasubmenu,simplyaddaJMenutoa
JMenu.
OneJMenuBar
5JMenus
7JMenuItems
GotoTextEditor
Explainstuff.
TomaketheactualCalcFrameappear...
MicrosoftWindowsCalculator
Version5.1
TheCS211Calculator
Good enough
It'sclose.Certainlynotperfect.
WecouldhavesettheLookAndFeeltobeMS
Windows,thatwouldgetthebuttonsspoton.(Ifwe
havetime,I'llelaborate)
Itsoffafewpixelshereandthere,butnothingmajor.If
wespentlongerit'dbeawasteoftime.
So,youcannowbuilduncomplicatedGUIs.Cantyou?
Javahas3looks,(bylooksImeanhowthe
componentslook).Windows,Motif,and
Metal.
Thesearegood/bad.Ifyouusethem,you
endupwithafewdifficultieswhenyougo
crossplatform.
Butseeingasitsonly2linesofcodeI'llgive
youallalook.
Ifitwasn'tforthelittlejavaicon,you'dbestruggling!
Thereyouhaveita(near)perfectclone.
End of Lecture
So,whatdidwelearn?
Howtobreakauserinterfaceintosubcomponents,
makingiteasiertocreate
Howtodecoratebuttonsandtextfieldssotheylook
appropriate
HowtouseInsetstochangethepaddingoncomponents
HowJMenuBarswork
GridLayoutandFlowLayout
HowtoaltertheLookandFeelofanGUI
Needstobedecidedupon.