diff options
Diffstat (limited to 'doc/html/tutorial2-08.html')
| -rw-r--r-- | doc/html/tutorial2-08.html | 349 |
1 files changed, 349 insertions, 0 deletions
diff --git a/doc/html/tutorial2-08.html b/doc/html/tutorial2-08.html new file mode 100644 index 0000000..a260cb5 --- /dev/null +++ b/doc/html/tutorial2-08.html @@ -0,0 +1,349 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> +<!-- /home/espenr/tmp/qt-3.3.8-espenr-2499/qt-x11-free-3.3.8/doc/tutorial2.doc:1017 --> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Taking Data</title> +<style type="text/css"><!-- +fn { margin-left: 1cm; text-indent: -1cm; } +a:link { color: #004faf; text-decoration: none } +a:visited { color: #672967; text-decoration: none } +body { background: #ffffff; color: black; } +--></style> +</head> +<body> + +<table border="0" cellpadding="0" cellspacing="0" width="100%"> +<tr bgcolor="#E5E5E5"> +<td valign=center> + <a href="index.html"> +<font color="#004faf">Home</font></a> + | <a href="classes.html"> +<font color="#004faf">All Classes</font></a> + | <a href="mainclasses.html"> +<font color="#004faf">Main Classes</font></a> + | <a href="annotated.html"> +<font color="#004faf">Annotated</font></a> + | <a href="groups.html"> +<font color="#004faf">Grouped Classes</font></a> + | <a href="functions.html"> +<font color="#004faf">Functions</font></a> +</td> +<td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><h1 align=center>Taking Data</h1> + + +<p> +<p> <center><img src="chart-setdata.png" alt="The set data dialog"></center> +<p> The set data dialog allows the user to add and edit values, and to +choose the color and pattern used to display values. Users can also +enter label text and choose a label color for each label. +<p> (Extracts from <tt>setdataform.h</tt>.) +<p> + +<pre> class SetDataForm: public <a href="qdialog.html">QDialog</a> + { + <a href="metaobjects.html#Q_OBJECT">Q_OBJECT</a> + public: + SetDataForm( ElementVector *elements, int decimalPlaces, + <a href="qwidget.html">QWidget</a> *parent = 0, const char *name = "set data form", + bool modal = TRUE, WFlags f = 0 ); + ~SetDataForm() {} + + public slots: + void setColor(); + void setColor( int row, int col ); + void currentChanged( int row, int col ); + void valueChanged( int row, int col ); + + protected slots: + void accept(); + + private: + <a href="qtable.html">QTable</a> *table; + <a href="qpushbutton.html">QPushButton</a> *colorPushButton; + <a href="qpushbutton.html">QPushButton</a> *okPushButton; + <a href="qpushbutton.html">QPushButton</a> *cancelPushButton; + + protected: + <a href="qvboxlayout.html">QVBoxLayout</a> *tableButtonBox; + <a href="qhboxlayout.html">QHBoxLayout</a> *buttonBox; + + private: + ElementVector *m_elements; + int m_decimalPlaces; + }; +</pre> +<p> The header file is simple. The constructor takes a pointer to the +element vector so that this "smart" dialog can display and edit the +data directly. We'll explain the slots as we look through the +implementation. +<p> (Extracts from <tt>setdataform.cpp</tt>.) +<p> + +<pre> #include "images/pattern01.xpm" + #include "images/pattern02.xpm" +</pre> +<p> We have created a small <tt>.XPM</tt> image to show each brush pattern that +Qt supports. We'll use these in the pattern combobox. +<p> <h2> The Constructor +</h2> +<a name="1"></a><p> <pre> SetDataForm::SetDataForm( ElementVector *elements, int decimalPlaces, + <a href="qwidget.html">QWidget</a>* parent, const char* name, + bool modal, WFlags f ) + : <a href="qdialog.html">QDialog</a>( parent, name, modal, f ) + + { + m_elements = elements; + m_decimalPlaces = decimalPlaces; +</pre> +<p> We pass most of the arguments to the <a href="qdialog.html">QDialog</a> superclass. We assign the +elements vector pointer and the number of decimal places to display to +member variables so that they are accessible by all SetDataForm's +member functions. +<p> <pre> <a href="qwidget.html#setCaption">setCaption</a>( "Chart -- Set Data" ); + <a href="qwidget.html#resize">resize</a>( 540, 440 ); +</pre> +<p> We set a caption for the dialog and resize it. +<p> <pre> tableButtonBox = new <a href="qvboxlayout.html">QVBoxLayout</a>( this, 11, 6, "table button box layout" ); +</pre> +<p> The layout of the form is quite simple. The buttons will be grouped +together in a horizontal layout and the table and the button layout +will be grouped together vertically using the tableButtonBox layout. +<p> <pre> table = new <a href="qtable.html">QTable</a>( this, "data table" ); + <a name="x2621"></a> table-><a href="qtable.html#setNumCols">setNumCols</a>( 5 ); + <a name="x2622"></a> table-><a href="qtable.html#setNumRows">setNumRows</a>( ChartForm::MAX_ELEMENTS ); + <a name="x2619"></a> table-><a href="qtable.html#setColumnReadOnly">setColumnReadOnly</a>( 1, TRUE ); + table-><a href="qtable.html#setColumnReadOnly">setColumnReadOnly</a>( 2, TRUE ); + table-><a href="qtable.html#setColumnReadOnly">setColumnReadOnly</a>( 4, TRUE ); + <a name="x2620"></a> table-><a href="qtable.html#setColumnWidth">setColumnWidth</a>( 0, 80 ); + table-><a href="qtable.html#setColumnWidth">setColumnWidth</a>( 1, 60 ); // Columns 1 and 4 must be equal + table-><a href="qtable.html#setColumnWidth">setColumnWidth</a>( 2, 60 ); + table-><a href="qtable.html#setColumnWidth">setColumnWidth</a>( 3, 200 ); + table-><a href="qtable.html#setColumnWidth">setColumnWidth</a>( 4, 60 ); + <a name="x2616"></a> <a href="qheader.html">QHeader</a> *th = table-><a href="qtable.html#horizontalHeader">horizontalHeader</a>(); + <a name="x2605"></a> th-><a href="qheader.html#setLabel">setLabel</a>( 0, "Value" ); + th-><a href="qheader.html#setLabel">setLabel</a>( 1, "Color" ); + th-><a href="qheader.html#setLabel">setLabel</a>( 2, "Pattern" ); + th-><a href="qheader.html#setLabel">setLabel</a>( 3, "Label" ); + th-><a href="qheader.html#setLabel">setLabel</a>( 4, "Color" ); + tableButtonBox-><a href="qboxlayout.html#addWidget">addWidget</a>( table ); +</pre> +<p> We create a new <a href="qtable.html">QTable</a> with five columns, and the same number of rows +as we have elements in the elements vector. We make the color and +pattern columns read only: this is to prevent the user typing in them. +We will make the color changeable by the user clicking on a color or +navigating to a color and clicking the Color button. The pattern will +be in a combobox, changeable simply by the user selecting a different +pattern. Next we set suitable initial widths, insert labels for each +column and finally add the table to the tableButtonBox layout. +<p> <pre> buttonBox = new <a href="qhboxlayout.html">QHBoxLayout</a>( 0, 0, 6, "button box layout" ); +</pre> +<p> We create a horizontal box layout to hold the buttons. +<p> <pre> colorPushButton = new <a href="qpushbutton.html">QPushButton</a>( this, "color button" ); + <a name="x2598"></a> colorPushButton-><a href="qbutton.html#setText">setText</a>( "&Color..." ); + colorPushButton-><a href="qwidget.html#setEnabled">setEnabled</a>( FALSE ); + buttonBox-><a href="qboxlayout.html#addWidget">addWidget</a>( colorPushButton ); +</pre> +<p> We create a color button and add it to the buttonBox layout. We +disable the button; we will only enable it when the focus is actually +on a color cell. +<p> <pre> <a href="qspaceritem.html">QSpacerItem</a> *spacer = new <a href="qspaceritem.html">QSpacerItem</a>( 0, 0, QSizePolicy::Expanding, + QSizePolicy::Minimum ); + <a name="x2593"></a> buttonBox-><a href="qboxlayout.html#addItem">addItem</a>( spacer ); +</pre> +<p> Since we want to separate the color button from the OK and Cancel +buttons we next create a spacer and add that to the buttonBox layout. +<p> <pre> okPushButton = new <a href="qpushbutton.html">QPushButton</a>( this, "ok button" ); + okPushButton-><a href="qbutton.html#setText">setText</a>( "OK" ); + <a name="x2607"></a> okPushButton-><a href="qpushbutton.html#setDefault">setDefault</a>( TRUE ); + buttonBox-><a href="qboxlayout.html#addWidget">addWidget</a>( okPushButton ); + + cancelPushButton = new <a href="qpushbutton.html">QPushButton</a>( this, "cancel button" ); + cancelPushButton-><a href="qbutton.html#setText">setText</a>( "Cancel" ); + <a name="x2597"></a> cancelPushButton-><a href="qbutton.html#setAccel">setAccel</a>( Key_Escape ); + buttonBox-><a href="qboxlayout.html#addWidget">addWidget</a>( cancelPushButton ); +</pre> +<p> The OK and Cancel buttons are created and added to the buttonBox. We +make the OK button the dialog's default button, and we make the <tt>Esc</tt> +key an accelerator for the Cancel button. +<p> <pre> <a name="x2594"></a> tableButtonBox-><a href="qboxlayout.html#addLayout">addLayout</a>( buttonBox ); +</pre> +<p> We add the buttonBox layout to the tableButtonBox and the layout is +complete. +<p> <pre> <a name="x2612"></a> <a href="qobject.html#connect">connect</a>( table, SIGNAL( <a href="qtable.html#clicked">clicked</a>(int,int,int,const <a href="qpoint.html">QPoint</a>&) ), + this, SLOT( setColor(int,int) ) ); + <a name="x2613"></a> <a href="qobject.html#connect">connect</a>( table, SIGNAL( <a href="qtable.html#currentChanged">currentChanged</a>(int,int) ), + this, SLOT( currentChanged(int,int) ) ); + <a name="x2626"></a> <a href="qobject.html#connect">connect</a>( table, SIGNAL( <a href="qtable.html#valueChanged">valueChanged</a>(int,int) ), + this, SLOT( valueChanged(int,int) ) ); + <a name="x2596"></a> <a href="qobject.html#connect">connect</a>( colorPushButton, SIGNAL( <a href="qbutton.html#clicked">clicked</a>() ), this, SLOT( setColor() ) ); + <a href="qobject.html#connect">connect</a>( okPushButton, SIGNAL( <a href="qbutton.html#clicked">clicked</a>() ), this, SLOT( <a href="qdialog.html#accept">accept</a>() ) ); + <a href="qobject.html#connect">connect</a>( cancelPushButton, SIGNAL( <a href="qbutton.html#clicked">clicked</a>() ), this, SLOT( <a href="qdialog.html#reject">reject</a>() ) ); +</pre> +<p> We now "wire up" the form. +<ul> +<li> If the user clicks a cell we call the setColor() slot; this will +check that the cell is one that holds a color, and if it is, will +invoke the color dialog. +<li> We connect the <a href="qtable.html">QTable</a>'s currentChanged() signal to our own +currentChanged() slot; this will be used to enable/disable the color +button for example, depending on which column the user is in. +<li> We connect the table's valueChanged() signal to our own +valueChanged() slot; we'll use this to display the value with the +correct number of decimal places. +<li> If the user clicks the Color button we call a setColor() slot. +<li> The OK button is connected to the accept() slot; we will update the +elements vector in this slot. +<li> The Cancel button is connected to the <a href="qdialog.html">QDialog</a> reject() slot, and +requires no further code or action on our part. +</ul> +<p> <pre> QPixmap patterns[MAX_PATTERNS]; + patterns[0] = QPixmap( pattern01 ); + patterns[1] = QPixmap( pattern02 ); +</pre> +<p> We create a pixmap for every brush pattern and store them in the <tt>patterns</tt> array. +<p> <pre> <a name="x2610"></a> <a href="qrect.html">QRect</a> rect = table-><a href="qtable.html#cellRect">cellRect</a>( 0, 1 ); + <a href="qpixmap.html">QPixmap</a> pix( rect.<a href="qrect.html#width">width</a>(), rect.<a href="qrect.html#height">height</a>() ); +</pre> +<p> We obtain the rectangle that will be occupied by each color cell and +create a blank pixmap of that size. +<p> <pre> for ( int i = 0; i < ChartForm::MAX_ELEMENTS; ++i ) { + Element element = (*m_elements)[i]; + + if ( element.isValid() ) + table-><a href="qtable.html#setText">setText</a>( + i, 0, + QString( "%1" ).arg( element.value(), 0, 'f', + m_decimalPlaces ) ); + + <a href="qcolor.html">QColor</a> color = element.valueColor(); + pix.<a href="qpixmap.html#fill">fill</a>( color ); + table-><a href="qtable.html#setPixmap">setPixmap</a>( i, 1, pix ); + table-><a href="qtable.html#setText">setText</a>( i, 1, color.<a href="qcolor.html#name">name</a>() ); + + <a href="qcombobox.html">QComboBox</a> *combobox = new <a href="qcombobox.html">QComboBox</a>; + for ( int j = 0; j < MAX_PATTERNS; ++j ) + combobox-><a href="qcombobox.html#insertItem">insertItem</a>( patterns[j] ); + <a name="x2603"></a> combobox-><a href="qcombobox.html#setCurrentItem">setCurrentItem</a>( element.valuePattern() - 1 ); + <a name="x2618"></a> table-><a href="qtable.html#setCellWidget">setCellWidget</a>( i, 2, combobox ); + + table-><a href="qtable.html#setText">setText</a>( i, 3, element.label() ); + + color = element.labelColor(); + <a name="x2606"></a> pix.<a href="qpixmap.html#fill">fill</a>( color ); + <a name="x2623"></a> table-><a href="qtable.html#setPixmap">setPixmap</a>( i, 4, pix ); + <a name="x2624"></a><a name="x2600"></a> table-><a href="qtable.html#setText">setText</a>( i, 4, color.<a href="qcolor.html#name">name</a>() ); +</pre> +<p> For each element in the element vector we must populate the table. +<p> If the element is valid we write its value in the first column (column +0, Value), formatting it with the specified number of decimal places. +<p> We read the element's value color and fill the blank pixmap with that +color; we then set the color cell to display this pixmap. We need to +be able to read back the color later (e.g. if the user changes it). +One way of doing this would be to examine a pixel in the pixmap; +another way would be to subclass <a href="qtableitem.html">QTableItem</a> (in a similar way to our +CanvasText subclass) and store the color there. But we've taken a +simpler route: we set the cell's text to the name of the color. +<p> Next we populate the pattern combobox with the patterns. We will use +the position of the chosen pattern in the combobox to determine which +pattern the user has selected. <a href="qtable.html">QTable</a> can make use of <a href="qcombotableitem.html">QComboTableItem</a> +items; but these only support text, so we use setCellWidget() to +insert <a href="qcombobox.html">QComboBox</a>'s into the table instead. +<p> Next we insert the element's label. Finally we set the label color in +the same way as we set the value color. +<p> <h2> The Slots +</h2> +<a name="2"></a><p> <pre> void SetDataForm::currentChanged( int, int col ) + { + colorPushButton-><a href="qwidget.html#setEnabled">setEnabled</a>( col == 1 || col == 4 ); + } +</pre> +<p> As the user navigates through the table currentChanged() signals are +emitted. If the user enters column 1 or 4 (value color or label color) +we enable the colorPushButton; otherwise we disable it. +<p> <pre> void SetDataForm::valueChanged( int row, int col ) + { + if ( col == 0 ) { + bool ok; + <a name="x2625"></a> double d = table-><a href="qtable.html#text">text</a>( row, col ).toDouble( &ok ); + if ( ok && d > EPSILON ) + table-><a href="qtable.html#setText">setText</a>( + row, col, QString( "%1" ).arg( + d, 0, 'f', m_decimalPlaces ) ); + else if ( !table-><a href="qtable.html#text">text</a>( row, col ).isEmpty() ) + table-><a href="qtable.html#setText">setText</a>( row, col, table-><a href="qtable.html#text">text</a>( row, col ) + "?" ); + } + } +</pre> +<p> If the user changes the value we must format it using the correct +number of decimal places, or indicate that it is invalid. +<p> <pre> void SetDataForm::setColor() + { + <a name="x2615"></a><a name="x2614"></a> setColor( table-><a href="qtable.html#currentRow">currentRow</a>(), table-><a href="qtable.html#currentColumn">currentColumn</a>() ); + table-><a href="qwidget.html#setFocus">setFocus</a>(); + } +</pre> +<p> If the user presses the Color button we call the other setColor() +function and put the focus back into the table. +<p> <pre> void SetDataForm::setColor( int row, int col ) + { + if ( !( col == 1 || col == 4 ) ) + return; + + <a name="x2601"></a> <a href="qcolor.html">QColor</a> color = QColorDialog::<a href="qcolordialog.html#getColor">getColor</a>( + QColor( table-><a href="qtable.html#text">text</a>( row, col ) ), + this, "color dialog" ); + <a name="x2599"></a> if ( color.<a href="qcolor.html#isValid">isValid</a>() ) { + <a name="x2617"></a> <a href="qpixmap.html">QPixmap</a> pix = table-><a href="qtable.html#pixmap">pixmap</a>( row, col ); + pix.<a href="qpixmap.html#fill">fill</a>( color ); + table-><a href="qtable.html#setPixmap">setPixmap</a>( row, col, pix ); + table-><a href="qtable.html#setText">setText</a>( row, col, color.<a href="qcolor.html#name">name</a>() ); + } + } +</pre> +<p> If this function is called with the focus on a color cell we call +the static <a href="qcolordialog.html#getColor">QColorDialog::getColor</a>() dialog to get the user's choice of +color. If they chose a color we fill the color cell's pixmap with that +color and set the cell's text to the new color's name. +<p> <pre> <a name="x2604"></a>void SetDataForm::<a href="qdialog.html#accept">accept</a>() + { + bool ok; + for ( int i = 0; i < ChartForm::MAX_ELEMENTS; ++i ) { + Element &element = (*m_elements)[i]; + double d = table-><a href="qtable.html#text">text</a>( i, 0 ).toDouble( &ok ); + if ( ok ) + element.setValue( d ); + else + element.setValue( Element::INVALID ); + element.setValueColor( QColor( table-><a href="qtable.html#text">text</a>( i, 1 ) ) ); + element.setValuePattern( + <a name="x2611"></a> ((QComboBox*)table-><a href="qtable.html#cellWidget">cellWidget</a>( i, 2 ))->currentItem() + 1 ); + element.setLabel( table-><a href="qtable.html#text">text</a>( i, 3 ) ); + element.setLabelColor( QColor( table-><a href="qtable.html#text">text</a>( i, 4 ) ) ); + } + + QDialog::<a href="qdialog.html#accept">accept</a>(); + } +</pre> +<p> If the user clicks OK we must update the elements vector. We iterate +over the vector and set each element's value to the value the user has +entered or <tt>INVALID</tt> if the value is invalid. We set the value color +and the label color by constructing <a href="qcolor.html">QColor</a> temporaries that take a +color name as argument. The pattern is set to the pattern combobox's +current item with an offset of 1 (since our pattern numbers begin at +1, but the combobox's items are indexed from 0). +<p> Finally we call <a href="qdialog.html#accept">QDialog::accept</a>(). +<p> <p align="right"> +<a href="tutorial2-07.html">« File Handling</a> | +<a href="tutorial2.html">Contents</a> | +<a href="tutorial2-09.html">Setting Options »</a> +</p> +<p> +<!-- eof --> +<p><address><hr><div align=center> +<table width=100% cellspacing=0 border=0><tr> +<td>Copyright © 2007 +<a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a> +<td align=right><div align=right>Qt 3.3.8</div> +</table></div></address></body> +</html> |