Tutorial - Developing an Android and iOS application

1. Click in the quick access buttons.
2. The window for creating a new element is displayed: click "Report" then "Report". The report creation wizard starts. The report creation wizard proposes several types of reports:
   
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".
   
   Go to the next step.
5. Display the data files and select the "Product" 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".
   
   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.
   
   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.
   
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.
    • ProductID will not be displayed in the report: uncheck ProductID.
    • 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.
      
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.
    
    Go to the next step.
13. This step is used to define the report layout.
    
    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".
    
    Go to the next step.
16. Finally, give a name and a title to the report and save it.
    • Enter name: "ETAT_Produit".
    • Enter the title: "Product Catalog".
      
      Warning
      The name and title are different.
17. Validate.
18. The report is displayed in the report editor.
    
    
19. Save the report (Ctrl + S).

1. Click in the quick access buttons.
2. In the print mode selection window, select "Report viewer".
   
3. Validate. The report is run and displayed in 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.

Removing captions

• a Static Text control that categorizes the details of the product ("Desc.:" in our report).
• a Static Text control bound to a data file item, which will display data.

Changing the product caption

1. Select the control that corresponds to the product name.
2. Open the control description window (select "Description" in the context menu).
3. On 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

Product bar code

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.

1. Open the control description window (select "Description" in the context menu).
2. On the "Binding" tab, select "Bar_Code" in the Product data file.
3. Validate the control description window.

Product price

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. On 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

1. Select the "Reorder" control.
2. Press the Space key on the keyboard: the label is modified.
3. Enter "Reorder date".
4. Validate (Press Enter).
5. Open the context menu of the control and select "Adapt size".

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.

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:

Save the report (Ctrl + S).

Run the report by clicking in the quick access buttons.

Select "Report viewer" and validate. The report is run and displayed in the report viewer.

Adding an option to the Multiline Zone control

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. On 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.

Configuring the new option

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

1. Click the Static Text 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.

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:

Programming the print functionality

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 the 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 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 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.