PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 25 feature!
  • 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.
Lesson duration

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. In addition, the internal component can be debugged directly from the project that uses 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 use 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 "Internal Component (Exercise)".
    3. The project is loaded.
  • We are going to test the control template of this project:
    1. Open the Web control template named "TPLC_NewsletterSubscription" (double-click its name in the "Project explorer" pane).
    2. Run the test of Web control template ( Test an element among the quick access buttons).
    3. Type an email address.
      Control template test
    4. Click "VALIDATE" to add the address to 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" pane:
      • Select the "Internal components" folder.
      • Open the popup menu (right click).
        Internal component in the
      • Select "New internal component".
      • The internal component creation wizard starts.
    2. Go to the next step of the wizard.
    3. Identify your component: enter "InternalComponentNewsletterSubscription". 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.
      Internal component creation wizard
    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.
      Internal component creation wizard
    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 uses its own analysis.
      Internal component creation wizard
    10. Select "Use a specific analysis" then, in the "Analysis" control, select the analysis corresponding to the current project ("WW_Internal_Component.wda" in the project subdirectory "WW_Internal_component.ana"). For example: "My Sites\My Examples\WW_Internal_Component (Exercises)\WW_Internal_Component.ana".
    11. Finish the wizard. WEBDEV will create the internal component in a specific directory of your project.
In the "Project explorer" pane, the "TPLC_NewsletterSubscription" Web control template is no longer in the project's list of Web control templates. On the contrary, the internal component that was just created is listed in the "Internal components" folder, along with its different elements: analysis and Web control template.
Internal component in the

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.

Remark

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. Open 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 (Exercices)\InternalComponentNewsletterSubscription.wci". 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, open the "PAGE_List_of_new_products" page (double-click its name in the "Project explorer" pane).
    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 the ribbon and in the "Containers" group, click "Control template".
    4. The window for selecting the template to instantiate is displayed.
      Selecting the control template
      Remark: 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.
      Creating a template model in the page
  • We are going to check the operating mode of control template:
    1. Run the page test ( Test an element among the quick access buttons).
    2. Type an email address.
    3. Click "VALIDATE".
    4. A message confirms the subscription.
      Testing the operating mode of the control template
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment