• Creating an internal window via a refactoring process.
• Changing the window content with a swipe gesture.

	Estimated time: 20 mn

Creating the Form window

• To create the form window:
  1. Create a new blank window.
     • Click in the quick access buttons.
     • The new element window appears: click "Window" then "Window".
     • In the wizard, select the "Standard" tab, choose "Blank" and validate.
  2. In the window for saving an element, specify:
     • the window title: "Product form".
     • the window name: "WIN_Advanced_FORM_Product".
  3. Validate.

• To create the Internal Window control:
  1. On the "Creation" tab, in the "Containers" group, expand "Internal window" and select "Swipe area (internal window)".
  2. Click at the desired location to create the control in the window (upper-left corner).
  3. Resize the Internal Window control so that it occupies the entire available space in the window.
  4. Change the anchors of the Internal Window control (select "Anchor" in the context menu): anchor the control vertically and horizontally ().
  5. Validate.

Creating the internal window

• To easily create the internal window, we will create it from the "WIN_Product_form" window of our project:
  1. If necessary, open "WIN_Product_form" in the editor (double-click its name in the "Project explorer" pane).
  2. Select all controls in the portrait layout (Ctrl + A).
  3. Open the context menu and select "Refactoring .. Create an internal window from the selection".
  4. The internal window is automatically created and the save window is displayed. Name the window "IW_Product" and validate.
  5. Open the internal window that we have just created in the editor: click "IW_Product" in the open document tabs.
  6. Open the description of the internal window. In the "UI" tab, change the window width: 360. This width corresponds to the width of the Internal Window control that we created in "WIN_Advanced_FORM_Product".
  7. Validate.

Swipe gesture in the Form window

• To associate the internal window with the Form window:
  1. Open the "WIN_Advanced_FORM_Product" window in the editor (click on it in the open document tabs).
  2. Select the Internal Window control and open its description ("Description" in the context menu).
  3. In the "General" tab, select the internal window ("IW_Product").
     
  4. In the "UI" tab, in the "Swipe to change content" section:
     • The "Allow swipe to change content" option is already checked because we have chosen the Internal Window control to swipe the content.
     • Check "Position on the current record when opening the internal window.".
     • The swipe orientation is "Horizontal" by default.
       
  5. In the "Content" tab, we will set how the internal window will be populated. This window will display the data of the Product data file:
     • Click "File/Query".
     • In the source, for the "Browsed file" option, select the "Product" data file.
       
  6. Validate the description window.

• To prevent the keyboard from appearing during the swipe gesture, we will use SIPVisible:
  1. Open the WLanguage events of the Internal Window control located inside "WIN_Advanced_FORM_Product".
  2. Write the following code in the "Selection by swipe ..." WLanguage event:
     
     SIPVisible(False)
     
  3. Close the code editor.

• To finish this window, we are going to add the validation option to the Action Bar. We have already done this in lesson 4.2 ("Creating and modifying a product"). Here, we will only present the main points:
  1. Select the Action Bar (at the top of the window).
  2. Open the Action Bar description window.
  3. Click number 2. The interface for editing options in the Action Bar appears.
  4. Click the "+" button to add an option. A new option is created at the top right.
  5. Change the characteristics of this option:
     • In the "Caption" area, type "Done".
     • In the "Preset image" area, expand the list and select "Done".
     • Validate the description window.
  6. To enter the code that saves the changes made to the "WIN_Advanced_FORM_Product" window:
     • Select the Action Bar control.
     • Click "OK".
     • A drop-down menu with the "Done" option is displayed.
     • Right-click the option.
     • Select "Code" in the context menu that appears.
     • Write the following WLanguage code in the "Select a menu" event:
       
       ScreenToFile()
       Product.Save()
       Close()
  7. Save changes by clicking in the quick access buttons.
  8. Close the code window (click the "X" icon in the upper-right corner of the code editor).

• To open the form window from the list of products:
  1. Open the "WIN_Advanced_LIST_Products" window in the editor (click on it in the open document tabs).
  2. Open the WLanguage events related to the Looper control.
  3. In the "Selecting a row ... " event, replace the following WLanguage code:
     
     Product.ReadSeek(ProductID,QRY_Products.ProductID)
     WIN_Product_form.OpenMobileWindow()
     
     with
     
     Product.ReadSeek(ProductID,QRY_Products.ProductID)
     WIN_Advanced_FORM_Product.OpenMobileWindow()
     

• We are going to test the project in the simulator:
  1. Click in the quick access buttons.
  2. In the Looper control that is displayed, click a product to see the details.
  3. Click the product form and move the mouse to the right or to the left. The product form automatically changes.
     

• managing emails,
• managing notifications,
• using the visualization panel,
• using the debugger,
• ...