~oif-team/ubuntu/natty/qt4-x11/xi2.1

<td width="1">  </td><td class="postheader" valign="center"><a href="index.html">Home</a> · <a href="classes.html">All Classes</a> · <a href="mainclasses.html">Main Classes</a> · <a href="annotated.html">Annotated</a> · <a href="groups.html">Grouped Classes</a> · <a href="functions.html">Functions</a></td>

<td align="right" valign="top" width="230"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></td></tr></table><h1 align="center">Calendar Example</h1>

Files:

<ul>

<li><a href="richtext-calendar-mainwindow-cpp.html">richtext/calendar/mainwindow.cpp</a></li>

<li><a href="richtext-calendar-mainwindow-h.html">richtext/calendar/mainwindow.h</a></li>

<li><a href="richtext-calendar-main-cpp.html">richtext/calendar/main.cpp</a></li>

</ul>

The Calendar example shows how to create rich text content and display it using a rich text editor.

<center><img src="images/calendar-example.png" /></center>Specifically, the example demonstrates the following:

<ul>

<li>Use of a text editor with a text document</li>

<li>Insertion of tables and frames into a document</li>

<li>Navigation within a table</li>

<li>Insert text in different styles</li>

</ul>

The rich text editor used to display the document is used within a main window application.

<h2>MainWindow Class Definition</h2>

The <tt>MainWindow</tt> class provides a text editor widget and some controls to allow the user to change the month and year shown. The font size used for the text can also be adjusted.

<pre>  class MainWindow : public QMainWindow

{

Q_OBJECT

public:

MainWindow();

public slots:

void setFontSize(int size);

void setMonth(int month);

void setYear(QDate date);

private:

void insertCalendar();

int fontSize;

QDate selectedDate;

QTextBrowser *editor;

};</pre>

The private <tt>insertCalendar()</tt> function performs most of the work, relying on the <tt>fontSize</tt> and <tt>selectedDate</tt> variables to write useful information to the <tt>editor</tt>.

<h2>MainWindow Class Implementation</h2>

The <tt>MainWindow</tt> constructor sets up the user interface and initializes variables used to generate a calendar for each month.

<pre>  MainWindow::MainWindow()

{

selectedDate = QDate::currentDate();

fontSize = 10;

QWidget *centralWidget = new QWidget;</pre>

We begin by setting default values for the selected date that will be highlighted in the calendar and the font size to be used. Since we are using a <a href="qmainwindow.html">QMainWindow</a> for the user interface, we construct a widget for use as the central widget.

The user interface will include a line of controls above the generated calendar; we construct a label and a combobox to allow the month to be selected, and a spin box for the year. These widgets are configured to provide a reasonable range of values for the user to try:

<pre>  QLabel *dateLabel = new QLabel(tr("Date:"));

QComboBox *monthCombo = new QComboBox;

for (int month = 1; month <= 12; ++month)

monthCombo->addItem(QDate::longMonthName(month));

QDateTimeEdit *yearEdit = new QDateTimeEdit;

yearEdit->setDisplayFormat("yyyy");

yearEdit->setDateRange(QDate(1753, 1, 1), QDate(8000, 1, 1));</pre>

We use the <tt>selectedDate</tt> object to obtain the current month and year, and we set these in the combobox and spin box:

The font size is displayed in a spin box which we restrict to a sensible range of values:

<pre>  QLabel *fontSizeLabel = new QLabel(tr("Font size:"));

QSpinBox *fontSizeSpinBox = new QSpinBox;

fontSizeSpinBox->setRange(1, 64);

fontSizeSpinBox->setValue(10);

editor = new QTextBrowser;

insertCalendar();</pre>

We construct an editor and use the <tt>insertCalendar()</tt> function to create a calendar for it. Each calendar is displayed in the same text editor; in this example we use a <a href="qtextbrowser.html">QTextBrowser</a> since we do not allow the calendar to be edited.

The controls used to set the month, year, and font size will not have any effect on the appearance of the calendar unless we make some signal-slot connections:

<pre>  connect(monthCombo, SIGNAL(activated(int)), this, SLOT(setMonth(int)));

connect(yearEdit, SIGNAL(dateChanged(QDate)), this, SLOT(setYear(QDate)));

connect(fontSizeSpinBox, SIGNAL(valueChanged(int)),

this, SLOT(setFontSize(int)));</pre>

The signals are connected to some simple slots in the <tt>MainWindow</tt> class which we will describe later.

We create layouts to manage the widgets we constructed:

<pre>  QHBoxLayout *controlsLayout = new QHBoxLayout;

controlsLayout->addWidget(dateLabel);

controlsLayout->addWidget(monthCombo);

controlsLayout->addWidget(yearEdit);

100

controlsLayout->addSpacing(24);

101

controlsLayout->addWidget(fontSizeLabel);

102

controlsLayout->addWidget(fontSizeSpinBox);

103

controlsLayout->addStretch(1);

104

105

QVBoxLayout *centralLayout = new QVBoxLayout;

106

centralLayout->addLayout(controlsLayout);

107

centralLayout->addWidget(editor, 1);

108

centralWidget->setLayout(centralLayout);

109

110

setCentralWidget(centralWidget);</pre>

111

Finally, the central widget is set for the window.

112

Each calendar is created for the editor by the <tt>insertCalendar()</tt> function which uses the date and font size, defined by the private selectedDate and <tt>fontSize</tt> variables, to produce a suitable plan for the specified month and year.

113

<pre>  void MainWindow::insertCalendar()

114

{

115

editor->clear();

116

QTextCursor cursor = editor->textCursor();

117

118

QDate date(selectedDate.year(), selectedDate.month(), 1);</pre>

119

We begin by clearing the editor's rich text document, and obtain a text cursor from the editor that we will use to add content. We also create a <a href="qdate.html">QDate</a> object based on the currently selected date.

120

The calendar is made up of a table with a gray background color that contains seven columns: one for each day of the week. It is placed in the center of the page with equal space to the left and right of it. All of these properties are set in a <a href="qtexttableformat.html">QTextTableFormat</a> object:

121

<pre>  QTextTableFormat tableFormat;

122

tableFormat.setAlignment(Qt::AlignHCenter);

123

tableFormat.setBackground(QColor("#e0e0e0"));

124

tableFormat.setCellPadding(2);

125

tableFormat.setCellSpacing(4);</pre>

126

Each cell in the table will be padded and spaced to make the text easier to read.

127

We want the columns to have equal widths, so we provide a vector containing percentage widths for each of them and set the constraints in the <a href="qtexttableformat.html">QTextTableFormat</a>:

128

<pre>  QVector<QTextLength> constraints;

129

constraints << QTextLength(QTextLength::PercentageLength, 14)

130