program编程设计代做、data留学生编程代写、C/C++程序语言代做

日期：2020-11-18 11:33

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.