ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WINDEV Mobile 2024 feature!
Help / WINDEV Mobile Tutorial / Tutorial - Developing an Android and iOS application
  • Lesson 6 - Printing the product catalog
  • Overview
  • Creating the report
  • Report test
  • Editing the report
  • Removing captions
  • Changing the product caption
  • Product image, reference and description
  • Product bar code
  • Product price
  • Product reorder date
  • Report test
  • Printing the report programmatically
  • Adding an option to the Multiline Zone control
  • Configuring the new option
  • Programming the print functionality
  • To sum up

Developing an Android and iOS application

Lesson 6 - Printing the product catalog
We will cover the following topics:
  • Creating a form report.
  • Printing the report.
Durée de la leçon 20 mn
Overview
This lesson will show you how to print the list of products by reference.
To do so, we will create a form report to represent a data catalog.
What is a report?
A report provides a custom view of data: data entered in the database, in a text file, from a Table control, etc.
The principle for creating a report is as follows:
  • the data to be printed comes from a data source (data file defined in an analysis, query, etc.).
  • the report groups, sorts and formats the data.
The report can then be displayed in the mobile application as a PDF file.


Warning
This lesson is based on the WM Product Management example used in Lesson 1. To follow this lesson, you must have completed the steps from the previous lessons.
Creating the report
First, let's create a Form report. To do so, we will use the report creation wizard:
  1. Click Create an element in the quick access buttons.
  2. The new element window appears: click "Report" then "Report". The report creation wizard starts. The report creation wizard shows several types of reports:
    Report creation wizard - Type of report
  3. Select "Form". Go to the next step.
  4. Select the report data source. The report will be based on the Product data file. Select "A data file or existing query".
    Report creation wizard - Data source
    Go to the next step.
  5. In the list of data files and queries, select "Product".
    Report creation wizard - Select data file
    Go to the next step.
  6. Define the data file search key. In our case, the Product data file will be looped through using the product's reference. Select the search key: "Reference".
    Report creation wizard - Loop through the data file
    Go to the next step.
  7. The wizard allows you to define the data sorting options in the report. By default, the wizard proposes the item used as search key in the data file.
    Report creation wizard - Data sorting
    Keep the default options and go to the next step.
  8. The wizard asks you if you want to insert breaks into the report.
    What is a break?
    A Break is an operation used to group the records (or rows) according to one or more criteria. Caution, the records (or rows) will be printed.
    A break is ALWAYS linked to a sort.
    For more details, see Break in a report.
    Report creation wizard - Break
  9. We will not use breaks in this report. Select "Don't insert breaks into the report". Go to the next step.
  10. Specify the order in which the items will printed and how they will be distributed in the different blocks.
    • The ProductID item will not be displayed in the report: uncheck the ProductID item.
    • The items will be displayed in the Body block in the following order:
      • Caption
      • Photo
      • Description
      • Bar_Code
      • Price
      • Reference
      • Quantity
      • ReorderDate
    • For each item, select the corresponding row and use the arrow buttons to the right to move it up or down in the list.
      Report creation wizard - Items to display
  11. Go to the next step.
  12. As the report displays numeric items, this step allows you to define if calculations should be performed in the report. In our example, no calculations need to be performed. Click the "No calculation" button.
    Report creation wizard - Break
    Go to the next step.
  13. This step is used to define the report layout.
    Report creation wizard - Paper format
    Keep the default values with the "Portrait" orientation.
    Print margins
    When choosing the print margins, don't forget to take into account the physical margins of the printers. The physical margins of the printers are margins where no print is allowed. Furthermore, the physical margins may be different according to the type of printer.
  14. Go to the next step.
  15. This step allows you to select the report skin template. It is recommended to use the same skin template as for the windows. In our case, select "Material 3".
    Report creation wizard - Skin template of the report
    Go to the next step.
  16. Finally, give a name and a title to the report and save it.
    • Enter the name: "RPT_Product".
    • Enter the title: "Product Catalog".
      Warning
      The name and title are different.
  17. Validate.
  18. The report is displayed in the report editor.
    Report in edit mode
  19. Save the report (Ctrl + S).
The report is generated. We will now test the report to see the result.
Report test
To test the report we have just created:
  1. Click Test element in the quick access buttons.
  2. In the print mode selection window, select "Report viewer".
    Print mode
  3. Validate. The report is run and displayed in the report viewer.
    Report preview
You can print the current page or the entire document by clicking the printer ("Print" tab).
Close the report viewer.
By using the report viewer, you can see how the report will actually look when printed. This print mode is only available during development of the mobile application.
Editing the report
The wizard helped us obtain a ready-to-use report.
To discover the features of the report editor, we will make some changes to the report created automatically so that it looks more like a product catalog.

Removing captions

In a report, the caption and the content of a control are independent of each other. For example, the product details are displayed by two controls:
  • a Static control that categorizes the details of the product ("Desc.:" in our report).
  • a Static control bound to a data file item, which will display data.
To improve the layout of our report, remove the captions of the following controls: Caption, Description, Bar code, Price and Reference.

Changing the product caption

We will display the text in Arial size 20.
To do so:
  1. Select the control that corresponds to the product name.
  2. Open the control description window (select "Description" in the context menu).
  3. In the "Style" tab, select the "Main caption" element.
  4. In "Font", select "Arial".
  5. In "Size", enter 20.
  6. Confirm changes and close the description window.
  7. Adapt the control size (select "Adapt size" in the context menu) and move it to the top left of the "Body" block.

Product image, reference and description

Select the different controls in the page (Description, Bar code, Price, Reference and Reorder date) and move them to the right half of the report.
Select the photo of the product. Enlarge this control and place it under the product caption.
Reduce the control that contains the reference and move it below the product image.
Select the control corresponding to the product description and move it to the right of the Image control. Reduce it if necessary.

Product bar code

The bar code of the product is displayed as plain text. We will replace it with a Bar Code control.
  1. Delete the control that contains the bar code of the product.
  2. Select the controls below, and move them down.
  3. On the "Creation" tab, in the "Data" group, expand "Bar code" and select "EAN 128". Click in the report below the product description.
We will now bind the Bar Code control to the corresponding item in the data file:
  1. Open the control description window (select "Description" in the context menu).
  2. In the "Binding" tab, select "Bar_Code" in the Product data file.
  3. Validate the control description window.

Product price

We will modify the style of the product price so that it is visible in the catalog:
  1. Move the price control to the right of the Bar Code control.
  2. Open the control description window (select "Description" in the context menu).
  3. In the "Style" tab, select the "Main caption" element.
  4. Make the following changes:
    • In "Size", enter 20.
    • Check the boxes "B" (Bold) and "I" (Italics).
  5. Confirm changes and close the description window.
  6. If necessary, enlarge the control to display the entire content.

Product reorder date

Change the text of the "Reorder" control:
  1. Select the "Reorder" control.
  2. Press the Space key: the text can now be edited.
  3. Enter "Reorder date".
  4. Validate (Press Enter).
  5. Open the context menu of the control and select "Adapt size".
Align the "Reorder date" control to the right:
  1. Select the "Reorder date" control.
  2. On the "Modification" tab, in the "Quick edit" group, click the "Align right" icon.
  3. The date is automatically aligned to the right.
We will move the "Quantity" and "Reorder date" controls below the price:
  1. Select the "Quantity" and "Reorder date" controls (and their corresponding items).
  2. Move them below the bar code.

Report test

You will get the following report:
Report in edit mode
Save the report (Ctrl + S).
The report is completed. We will now test the report to see the result.
Run the report by clicking Test element in the quick access buttons.
Select "Report viewer" and validate. The report is run and displayed in the report viewer.
Report preview
You can print the current page or the entire document by clicking the printer ("Print" tab).
Close the report viewer and the simulator.
Printing the report programmatically
Now that our report is complete, we need to integrate a print functionality into our application. We will add an option to the Multiline Zone control in "WIN_Menu" to print this report.

Adding an option to the Multiline Zone control

To insert a new option in "WIN_Menu":
  1. Open the "WIN_Menu" window in the editor (e.g., double-click on it in the "Explorer" pane).
  2. Select the Multiline Zone control that contains the menu.
  3. Open the control description window (select "Description" in the context menu).
  4. In the "General" tab, add a new row between "Map of stores" and "Exit application":
    • Click "New row".
    • In the window that appears, select "Simple row with icon".
    • Click "Finish".
  5. In the Multiline Zone control description, select the new row and move it up one position using the arrows (before "Exit application").
  6. Confirm changes and close the description window.
We will now modify the row we have just inserted.

Configuring the new option

To change the image in the third row of the Multiline Zone control:
  1. Click the Image control in the third row.
  2. Open the image description window (double-click the control).
  3. In the description window:
    • Give a name to the image (e.g., "IMG_Print").
    • Click Context menu on the right of "Image". Select "Catalog" in the context menu that appears to select an image representing the action.
    • In the image catalog window, enter "Print" in the search box and press Enter.
    • Double-click the image you want to select.
    • In the image configuration window, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image (e.g., "Print") and validate.
  4. Validate the description window.
To change the text in the third row of the Multiline Zone control:
  1. Click the Static control in the third row.
  2. Open the description window (double-click the control).
  3. In the "General" tab of the description window:
    • Give a name to the control (e.g., "STC_Print").
    • Change the caption (e.g., "Print catalog").
  4. Confirm changes and close the description window.
  5. The menu appears in the editor.
"Print catalog" appears in gray. We will copy the style of "Map of stores" and apply it to our new menu option:
  1. Select "Map of stores".
  2. On the "Style" tab, in the "Style and skin template" group, select "Copy style".
  3. The mouse cursor turns into a brush.
  4. Click "Print catalog". This style is automatically applied to the control.
You get the following window:
Menu in edit mode

Programming the print functionality

We will change the WLanguage code used to select the Multiline Zone control.
  1. Select the Multiline Zone control.
  2. Open the associated WLanguage events (F2).
  3. Replace the line:
    CASE 3 // Exit application
    Close()
    with:
    CASE 3 // Print catalog
    iDestination(iGenericPDF)
    RPT_Product.Print()
    // Open file 
    ShellExecute(iLastFile())
    CASE 4 // Exit application 
    Close()
    In this WLanguage code:
    • iDestination allows you to configure the print destination. In our case (a mobile application), the report we created will be printed as a PDF file using the iPDFGeneric constant.
    • <Report>.Print prints the RPT_Product report. The corresponding PDF file is created.
    • ShellExecute displays the generated PDF file in the PDF reader (returned by iLastFile) available on the current device.
  4. Save changes by clicking Save element in the quick access buttons.
  5. Close the code window (click the "X" icon in the upper-right corner of the code editor).
Test the window and its menu options by clicking Test element in the quick access buttons. In the simulator, the PDF file of the product catalog is generated and opened in the PDF reader installed in the current computer.
Since the menu is also displayed as a sliding window in our example, the product catalog print option can also be added in the IW_MLZ_Options window.
To sum up
Completed project
Do you want to check the end result of the steps described here? A completed project is available. This project contains the windows and reports created and used in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - Develop an Android/iOS application", double-click "Android/iOS product management - Answers".
In this lesson, we discovered how to create and edit a report, as well as how to print it programmatically.
In the next lesson, we will see how to use web services in a WINDEV Mobile application.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/04/2023

Send a report | Local help