ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
New WINDEV Mobile 28 feature!
Help / WINDEV Mobile tutorial / Tuto - Android and iOS: Developing an application
  • In this lesson you will learn the following concepts
  • Overview
  • Creating the report
  • Modifying the report
  • Printing the report through programming
Lesson 4.6. Printing the product catalog
In this lesson you will learn the following concepts
  • Creating a form report.
  • Printing the report.
Lesson duration

Estimated duration: 20 mn
Previous LessonTable of contentsNext Lesson
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.

  • To follow this lesson, open (if necessary) the "WM Product Management" project you worked on in the previous lesson.
    1. Go to the WINDEV Mobile home page (Ctrl + <).
    2. On the home page, click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management - Exercise".
    3. A dialogue box prompts you to open the project you worked on in the previous lesson. You can open the local copy or the original project. Select "Open the local copy".

      Answers

      		If you have not created the "WM Product Management" application, you can use the corrected project. This project contains all the elements created in this part and allows you to check your operations.
      To open the completed project, go to the home page and click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management - Answers".
Creating the report
  • To create a report:
    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.

      Note

      		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.
      Report creation wizard - Break
    9. No 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
      • Use the arrow buttons to the right of the list to change the order of the items.
        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.

      Note

      		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 the "Phoenix" skin template.
      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".

Note

Caution: The name and title are different.
  1. Validate.
  2. The report is displayed in the report editor.
    Report in edit mode
    Save the report (Ctrl + S).
The report is generated. We will now test the report to see the result.
  • Run the report by clicking Test element in the quick access buttons. The print destination can be:
    Choose print mode
  • 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.
Modifying the report
We will make some changes in the report created automatically so that it looks more like a product catalog.
  • Remove the text from the following controls: Caption, Description, Bar code, Price and Reference.
  • Select the control that corresponds to the product name. We will display the text in Arial size 20. To do so:
    1. Open the control description window (select "Description" in the context menu).
    2. In the "Style" tab, select the "Main caption" element.
    3. In "Font", select "Arial".
    4. In "Size", enter 20.
    5. Validate the description window.
    6. Adapt the control size (select "Adapt size" in the context menu) and move it to the top left of the "Body" block.
  • Select the control corresponding to the product description and move it to the right of the Image control.
  • 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. On the "Creation" tab, in the "Data" group, expand "Bar code" and select "EAN 128". Click in the report below the product description.
    3. To bind the control to the data file item:
      • Open the control description window (select "Description" in the context menu).
      • In the "Binding" tab, select "Bar_Code" in the Product data file.
      • Validate the control description window.
  • Enlarge the product image.
  • Reduce the size of the control that contains the reference and move it below the product image.
  • 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. Validate the description window.
    6. If necessary, enlarge the control to display the entire content.
  • 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.
  • 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 through programming
Once our report is complete, we will create a menu option in the "WIN_Menu" window to directly print the report.

  • To insert a menu into the "WIN_Menu" window:
    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. Validate the description window.
We will now modify the row we have just inserted.

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

Note

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.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment

Last update: 06/08/2023

Send a report | Local help