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:

•     Download and extract the zip file

•    Open the .dJo file with Qt Creator

o  For lab linux:

▪     module load legacy-eng

▪     module add qt/5.15.2

▪     module add gcc

▪    qtcreator responsive.pro

•     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 - but the design is terrible.

•     Run the project in automatic test mode (warning your screen will flash rapidly):

1.  Add a command line argument: }9s} (without quotes).

2.  Add another command line argument: a valid path where a folder called “report” will be created. Use quotation marks around the path.

3.   Run the program again.

4.   Observe that a number of different window sizes are displayed, screenshots are taken, and written to the J9doJ} directory in the root of the project. The program  then exits. View the J9doJ}/!np9x.V}m/ in a browser and observe the terrible        responsive design.

5.   Set the project back to manual mode for your development by removing the program argument }9s}.

•    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 responsive layout you have observed.

•    The following widgets and associated colours have been predefined in the J9sdons!v9一/eq9/.V file.

1.   home link (kHomeLink)

2.  shopping basket button (kShoppingBasket)

3.  sign-in button - assume user is logged out (kSignIn)

4.   menu button - (kMenu)

5.   navigation tabs - main site areas (kNavTabs)

6.   advertisements for related products (kAdvert)

7.  search box - a text field (kSQuery)

8.  search button - performs a new search (kSButton)

9.  search result, consisting of:

•    search result image (kSResultImage)

•    search result description (kSResultText)

10. next page of search results button (kSForward)

11. previous page of search results button (kSBackward)

12. detailed search options - price, product rating, category etc.. (kSOptions)

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. You will build a single responsive page layout for a shopping app. The page will       show search results.

Specific tasks & Marking criteria:

Implement a responsive layout, where widgets are appropriately placed according to different window sizes. (6 Marks)

Widgets should not overlap and do not extend beyond the edge of the window. (3 Marks)

Adapt the size of the labels according to their function, trying to allow for readability in all possible window sizes. (3 Marks)

Ensure the Layout has beautiful, non-zero, and appropriate spacing between the widgets without any large gaps. (3 Marks)

Add up to two additional label types of your own and include them in your layout. (2 Marks)

Implement two extra alternative layouts (to a total of 3). One Horizontal and one vertical     layout which should be picked according to the aspect ratio of the screen, and a “compact” layout”, when the window is too small to hold most of your labels. Everything should still be responsive. (6 Marks)

Research and use QScrollArea to allow the page to scroll and show more search results (a search result is a kSResultImage and a kSResultText). (6 Marks)

Create a layout for your scroll area which positions 17 search results in a responsively sized grid layout. Each whole search result (a kSResultImage and a kSResultText) should    take up a square of space. The horizontal and vertical spacing between the results,              and around the grid, should be consistent. (6 Marks)

Notes:

•   You should carefully plan which labels are shown at different screen sizes and    orientations by researching which elements are prioritised at which sizes on real- world shopping apps and websites.

•   You may wish to sketch the widgets on paper before you write code.

•    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).

•    It is not necessary for all the label text to always be visible.

•    None of Qt's built-in layouts may be used (QVBoxLayout…).

•    Do not edit the files with the warning "DO NOT EDIT THIS FILE" at the top. They will be used during the marking process.

•    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 a small mobile phone screen). Larger physical        dimensions are taken to be scaled proportionally.

•   Avoid large gaps in any layouts. Space after a final search result, e.g., to finish the row, is acceptable.

•    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   setting their size to zero.

To submit:

•    Zip your project and submit to gradescope by the deadline at the bottom of this document.

•    Your folder should contain only your source code and the .pro file.

•    You may submit multiple times. Only the most recent will be graded. Please submit early and often