<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>2.1 Our First Graphical Application</TITLE><LINK href="ozdoc.css" rel="stylesheet" type="text/css"></HEAD><BODY><TABLE align="center" border="0" cellpadding="6" cellspacing="6" class="nav"><TR bgcolor="#DDDDDD"><TD><A href="node2.html">- Up -</A></TD><TD><A href="node4.html#section.started.architecture">Next >></A></TD></TR></TABLE><DIV id="section.started.first"><H2><A name="section.started.first">2.1 Our First Graphical Application</A></H2><P> <A href="node3.html#figure.intro.start">Figure 2.1</A> shows a screen dump of our first graphical application. It allows to enter text into the <A name="label9"></A><SPAN class="index">entry field</SPAN>. Pressing the button toggles the capitalization of the text in that entry field. </P><P> </P><DIV id="figure.intro.start"><HR><P><A name="figure.intro.start"></A></P><P> </P><DIV align="center"><IMG alt="" src="lower.gif"></DIV><P></P><P> </P><DIV align="center"><IMG alt="" src="upper.gif"></DIV><P> </P><P class="caption"><STRONG>Figure 2.1:</STRONG> Our first graphical application.</P><HR></DIV><P> </P><P> The program for the small graphical application is concerned with the following three issues: </P><DL><DT><A name="label10"></A>widgets </DT><DD><P>Create the graphical entities called widgets. The application consists of three widgets: a toplevel widget (this is the outermost window), an entry for entering text, and a button. </P></DD><DT><A name="label11"></A>geometry </DT><DD><P>Arrange the entry and button such that they appear inside the toplevel widget. </P></DD><DT><A name="label12"></A>actions </DT><DD><P>Attach an action to the button widget such that pressing the button changes the capitalization of the entry text. </P></DD></DL><P> In the sections below, we exhibit the code handling these issues. The complete application then has the following structure: </P><DL class="anonymous"><DD class="code"><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A href="node3.html#label20">Widget creation</A><SPAN class="chunkborder">></SPAN></SPAN><CODE> <BR></CODE><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A href="node3.html#label26">Geometry management</A><SPAN class="chunkborder">></SPAN></SPAN></DD></DL><P> </P><H3><A name="label13">2.1.1 Widgets</A></H3><P> The following program fragment <A name="label15"></A> <A name="label17"></A> <A name="label19"></A> </P><DL><DT><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A name="label20">Widget creation</A><SPAN class="chunkborder">>=</SPAN></SPAN></DT><DD class="code"><CODE>W={New Tk<SPAN class="keyword">.</SPAN>toplevel tkInit(title:<SPAN class="string">'Capitalization'</SPAN>)}<BR>E={New Tk<SPAN class="keyword">.</SPAN>entry tkInit(parent:W)}<BR>B={New Tk<SPAN class="keyword">.</SPAN>button tkInit(parent: W<BR> text: <SPAN class="string">'Change Capitalization'</SPAN> <BR> action: </CODE><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A href="node3.html#label28">Action definition</A><SPAN class="chunkborder">></SPAN></SPAN><CODE>)}</CODE></DD></DL><P> creates and initializes the widget objects of our application. Creating and initializing a widget object creates a graphical image for the widget object. We refer to the graphical image just as the widget. Most often we do not distinguish between the object and its widget. All but the toplevel widget are linked by the <CODE>parent</CODE> features: this defines a <A name="label21"></A><SPAN class="index">widget hierarchy</SPAN> for closing widgets and geometry management. </P><H3><A name="label22">2.1.2 Geometry</A></H3><P> Here we define the <A name="label23"></A>geometry for the entry and button widgets: <A name="label25"></A> </P><DL><DT><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A name="label26">Geometry management</A><SPAN class="chunkborder">>=</SPAN></SPAN></DT><DD class="code"><CODE>{Tk<SPAN class="keyword">.</SPAN>send pack(E B fill:x padx:4 pady:4)}</CODE></DD></DL><P> </P><H3><A name="label27">2.1.3 Actions</A></H3><P> The remaining program fragment: </P><DL><DT><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A name="label28">Action definition</A><SPAN class="chunkborder">>=</SPAN></SPAN></DT><DD class="code"><CODE><SPAN class="keyword">proc</SPAN><SPAN class="variablename"> </SPAN>{<SPAN class="functionname">$</SPAN>}<BR> S={E tkReturn(get $)}<BR><SPAN class="keyword">in</SPAN> <BR> {E tk(delete 0 <SPAN class="string">'end'</SPAN>)}<BR> {E tk(insert 0 {Map S </CODE><SPAN class="chunktitle"><SPAN class="chunkborder"><</SPAN><A href="node46.html#label344">Change capitalization</A><SPAN class="chunkborder">></SPAN></SPAN><CODE>})}<BR><SPAN class="keyword">end</SPAN></CODE></DD></DL><P> defines the action as a procedure to be executed when the button is pressed. It retrieves the current content <CODE>S</CODE> from entry <CODE>E</CODE>, clears <CODE>E</CODE>, and reinserts <CODE>S</CODE> in <CODE>E</CODE>, but with toggled capitalization. <A name="label29"></A> <CODE>tkReturn</CODE> illustrates another important issue: returning values from widgets. </P></DIV><TABLE align="center" border="0" cellpadding="6" cellspacing="6" class="nav"><TR bgcolor="#DDDDDD"><TD><A href="node2.html">- Up -</A></TD><TD><A href="node4.html#section.started.architecture">Next >></A></TD></TR></TABLE><HR><ADDRESS><A href="http://www.ps.uni-sb.de/~schulte/">Christian Schulte</A><BR><SPAN class="version">Version 1.4.0 (20090610)</SPAN></ADDRESS></BODY></HTML>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
bd5c3d824c3db63ffd9226c15941e6ad
>
files
>
2363
