PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Step by step
  • Step 1: Creating an internal component
  • Step 2: Using the internal component
Lesson 9.1. The internal components
This lesson will teach you the following concepts
  • What is an internal component?
  • Creating an internal component, step by step.
  • Distributing and using an internal component.

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
An internal component is a group of project elements. This group is used to:
  • organize a project,
  • share elements between different projects (mainly via the Source Code Manager).
When an internal component is included in a project, all component elements are included in the project. The public elements can be handled in the editor directly. Furthermore, the internal component can be debugged from the project that is using it.
The projects that use an internal component have access in the WEBDEV editor to the name of objects, procedures or methods made visible by the component creator.
Creating a component is child's play.
How to proceed? Don't change anything, create your pages, procedures, classes. Then, when it's done, choose the option for creating a component and that's it!
An internal component can contain code, pages, an analysis, data files, etc.
Step by step

Step 1: Creating an internal component

We are going to create an internal component used to subscribe and unsubscribe to a newsletter in a Web site.
This component includes:
  • a page, used to see the list of persons who subscribed to the newsletter,
  • a Web control template that contains the different controls (edit of email address, validation button, ...),
  • an analysis describing the data file of subscribers.
To avoid having to develop the code required for the component to operate, all necessary elements have been grouped in a project named "WW_Internal_Component". We will be using this project to create our internal component. A new project will be created later to use this internal component.
  • To open the example project:
    1. Display the home page if necessary (Ctrl + <).
    2. In the home page, click "Tutorial" and select the project named "Internal Component (Exercise)".
    3. The project is loaded.
  • We are going to test the control template of this project:
    1. Display the Web control template named "TPLC_NewsletterSubscription" (double-click its name in the project explorer).
    2. Run the test of Web control template ( among the quick access buttons).
    3. Type an email address.
    4. Click "Validate" to add the address into the data file.
    5. Close the browser and go back to the editor.
    6. You can check the content of the data file with WDMap (accessible in the ribbon "Tools" pane).
We are now going to create our internal component.
  • To create an internal component:
    1. In the project explorer:
      • Select the "Internal components" folder.
      • Display the popup menu (right mouse click).
      • Select "New internal component".
      • The wizard for creating an internal component starts.
    2. Go to the next wizard screen.
    3. Identify your component: type the "InternalComponentNewsletterRegistration" name. The component caption is automatically proposed.
    4. Go to the next step.
    5. Select the elements that will be included in the component. In our case, all elements must be selected.
    6. Go to the next step.
    7. The wizard asks you to select the component elements that will be accessible from the client project.
      In our case, all elements must be selected.
    8. Go to the next step.
    9. This step is used to specify the mode for managing the component data. In our case, the internal component is using its own analysis.
    10. Select "Use a specific analysis" then, in the "Analysis" control, select the analysis corresponding to the current project ("WW_Internal_Component.wda" file found in the project subdirectory "WW_Internal_component.ana"). For example: "My Sites\My Examples\WW_Internal_Component (Exercises)\WW_Internal_Component.ana".
    11. End the wizard. WEBDEV will create the internal component in a specific directory of your project.
In the project explorer, the "TPLC_NewsletterSubscription" Web control template is no longer found in the list of Web control templates of project. On the contrary, the internal component that was just created is listed in the "Internal Component" folder, along with its different elements: analysis and Web control template.

Step 2: Using the internal component

Once created, your internal component can be used in any other WEBDEV project. Let's now see how this component can be re-used.

Note

In this example, we will present a "direct" use of internal component. To share resources, we recommend that you use the internal components via the Source Code Manager (SCM).
See Internal component for more details.
In our example, we are going to import the internal component into the "Full_WEBDEV_Site" project.
  • Open the "Full_WEBDEV_Site" project.
    1. Display the WEBDEV home page (Ctrl + <).
    2. In the home page, click "Tutorial" and select "Full WEBDEV Site (With pages)". The project is loaded.
  • Include the internal component in the project.
    1. In the ribbon, on the "Project" pane, in the "Project" group, expand "Import" and select "An internal component .. From a file".
    2. Select the file "My Sites\My Examples\WW_Internal_Component (Exercises)\InternalComponentNewsletterSubscription". This file corresponds to the component that was created previously.
    3. The internal component is included in the project.
  • To use the internal component, we are going to instantiate the Web control template supplied by the internal component in the site home page. To do so:
    1. In the editor, display the "PAGE_List_of_new_products" page (double-click its name in the project explorer).
    2. Move the looper found in the page to the bottom in order to insert the control template of internal component.
    3. Select the "Creation" pane of ribbon and in the "Containers" group, click "Control template".
    4. The window for selecting the template to instantiate is displayed.
      Note: The "TPLC_GPU_Connection" template corresponds to the control template used by the user groupware that we saw in a previous lesson.
    5. Select the template coming from the internal component and validate.
    6. Click the location where the Web control template must be positioned in the page.
  • We are going to check the operating mode of control template:
    1. Run the page test (Go among the quick access buttons).
    2. Type an email address.
    3. Click "Validate".
    4. A message confirms the registration.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment