Tom Kelly (MS Teams)
Coursework 2: Responsive Layouts
Date set: 9.11.20
Date due: 23.11.20
Weighting: 35%
Goals for this CW:
● Demonstrate a working understanding of writing custom layouts
in C++ and Qt
● Create a prototype layout for an app
● Design a beautiful responsive layout
Getting started:
● Watch the video.
● Download and extract this zip file
● Open the .pro file with Qt Creator
● Set the first command line argument to point to the folder which
contains your unzipped source code. Add double quotes around
the folder.
● Run the project. It creates a main window with several coloured
labels which can be manually resized. Try changing the size of the
window; observe the responsive design - the number, location and
size of the widgets change.
● Run the project in automatic test mode (warning your screen
will flash rapidly):
1. Add a second command line argument: test (without
quotes).
2. Run the program again.
3. Observe that a number of different window sizes are
displayed, screenshots are taken, and written to the report
directory in the root of the project. The program then exits.
View the report/index.html in a browser and observe the
terrible responsive design.
4. Set the project back to manual mode for your
development by removing the program argument test.
● There is a new system for generating a file to submit. Try this
now.
1. add a second command line argument pack (without
quotes)
2. run the program again. Check the "Application Output"
tab in Qt Creator for any error messages.
3. your files and report are packed into a file submit.patch
in the directory above your source output.
4. check that your submit.patch contains both your
automatically generated report and your source code by
replacing the command line argument pack with unpack.
This will extract to the submit.patch to the directory
2020/11/10 16:30
https://minerva.leeds.ac.uk/bbcswebdav/pid-8239642-dt-content-…4881_XJCO2811/cw2/CW2_%20Repsonsive%20Qt/CW2RepsonsiveQt.html ⻚：2/4
tmp_xxxx, located next to the patch file. (you should do this
before submission!)
5. Your project will be graded using this automatic script
and report; you are encouraged to submit early and
often….
6. ...so please submit this default submit.patch to Minerva
now.
● The project contains three important C++ classes:
1. ResponsiveWindow: This subclasses QWidget and
creates the widgets to be displayed in the
ResponsiveWindow::createWidgets function. It sets
a ResponsiveLayout and adds various
ResponsiveLabels.
2. ResponsiveLayout: This subclasses QLayout and
arranges the ResponsiveLabels in the window using the
ResponsiveLayout::setGeometry function.
3. ResponsiveLabel: This subclasses QLabel and
creates a label widget with a name and a coloured
background.
● Read the classes to understand how they work together to
create the layout you have observed. Lecture 6 discusses such
custom layouts.
● The following widgets and associated colours have been
predefined in the ResponsiveLabel header file. (Lecture 5
introduces some useful terminology):
1. home link (kHomeLink)
2. shopping basket button (kShoppingBasket)
3. sign-in - assume user is logged out (kSignIn)
4. navigation tags - main site areas (kNavTabs)
5. advertisements for related products (kAdvert)
6. search button (kSearchButton)
7. search result - there may be several of these on one
page (kSearchResult)
8. search text field (kSearchText)
9. show next page of search results (kSearchForward)
10. show previous page of search results
(kSearchBackward)
11. detailed search options - price, product rating, category
etc.. (kSearchOptions)
Your task:
● You will create a prototype layout for a page of a mobile app.
This prototype will demonstrate which widgets are shown on what
sized devices and how their layout adapts in a responsive manner.
● In this coursework you will build a single responsive page layout
for a shopping app. The page will show search results.
● Notes:
○ You should carefully plan which labels are shown at
different screen sizes. You may wish to sketch the widgets
on paper before you write code.
2020/11/10 16:30
https://minerva.leeds.ac.uk/bbcswebdav/pid-8239642-dt-content-…4881_XJCO2811/cw2/CW2_%20Repsonsive%20Qt/CW2RepsonsiveQt.html ⻚：3/4
○ Only use ResponsiveLabel widgets with a simple text
description (and a single QScrollArea if you attempt the
extension task).
○ The widgets don't need to do anything (i.e. signals and
slots are not required; nothing is expected to happen when
you click on a label).
○ None of Qt's built-in layouts may be used
(QVBoxLayout…).
○ You may wish to do a little market research to
understand which widgets are prioritised at which sizes on
real-world shopping apps and websites.
○ Use Qt Creator and a GNU C++ compiler as in the labs.
○ Do not edit the files with the warning "DO NOT EDIT
THIS FILE" at the top. They will be used to grade your
work.
○ The window should show a usable, beautiful, and
useful layout whether sized at its minimum (320x320
pixels) or its maximum (1280 x 720 pixels), as well as all
sizes in between. Landscape and portrait orientations
should be considered.
○ The prototype is for a full-screen app with a touch-based
interface (for a variety of different sized mobile and tablets
devices). The widgets should be positioned and sized
accordingly.
○ We will take the physical dimension of the minimum size
window (320x320 pixels) to be 4.5x4.5 cm (about the size
of BlackBerry Q5 screen). Larger physical dimensions are
taken to be scaled proportionally.
○ It is suggested to add the maximum number of
ResponsiveLabels required for all possible layouts in
ResponsiveWindow::createWidgets and hide them
as required in
ResponsiveLayout::setGeometry. Widgets can be
hidden by moving them outside the window bounds.
○ Follow the following code formatting rules:
■ comment your code with single-line comments
(using //) such that someone familiar with C++ and
this project description (i.e. the person doing the
grading) is able to follow it.
■ indentation and braces as per 1TBS.
■ class names begin with capital letters,
■ variable names begin with lower-case letters.
■ constant globals to begin with a lower-case 'k'.
■ function length should be limited to 50
lines (excluding empty lines and comments).
■ line length should be limited to 100 characters.
■ there should be no unused (commented or
inaccessible) code.
Marks will be awarded for:
● layouts which show appropriate placed widgets in response to
varying window sizes and orientations.
2020/11/10 16:30
https://minerva.leeds.ac.uk/bbcswebdav/pid-8239642-dt-content-…4881_XJCO2811/cw2/CW2_%20Repsonsive%20Qt/CW2RepsonsiveQt.html ⻚：4/4
○ show all provided widgets at the largest size; fewer at
smaller sizes.
○ marks are available for up to four discrete layouts, each
with different sets of widgets and layout strategies (e.g. two
horizontal and two vertical layouts).
● widgets which do not overlap and do not extend beyond the
edge of the window.
● layouts which have beautiful, non-zero, and appropriate spacing
between the widgets (lecture 7).
● code which compiles, runs, and adheres to the above formatting
rules.
● more challenging extension tasks:
○ research and use QtScrollArea to allow the page to
scroll and show more kSearchResults (and any other
widgets you feel appropriate).
○ create a second custom layout for your scroll area which
positions 17 square kSearchResults in a responsively
sized grid layout. For example, you may only have one
grid-column in small layouts, but more for wide layouts.
The horizontal and vertical spacing between the results,
and around the grid, should be consistent.
To submit:
● Compress your project and automatically generated report with
the pack command line argument as described above.
○ Validate the contents of the submit.patch file by using the
unpack command line argument. Ensure it includes the
latest automatically generated report and your code.
○ But...do not otherwise change the .patch file.
● Use Minerva to submit submit.patch by the deadline at the top of
this page.
● You may submit multiple times. Only the most recent will be
graded. You are encouraged to submit early and often.