- In this lesson you will learn the following concepts
- Step by step
- Step 1: Creating an internal component
- Step 2: Using the internal component
Lesson 9.1. Internal components
In this lesson you will learn 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
An internal component is a set of elements from a project. 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.
Projects that use an internal component have access in the WEBDEV editor to the name of the objects, procedures or methods made visible by the component creator.
Creating a component is very simple.
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 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 (email address, validation button, etc.),
- an analysis describing the subscriber data file.
To avoid having to develop the code required for the component, all necessary elements have been grouped in a project named "WW_Internal_Component". We will use this project to create our internal component. Then, we will use the internal component in the "Full WEBDEV Site" project.
- To open the example project:
- Start WEBDEV 28.
- Go to the WEBDEV home page if necessary (Ctrl + <).
- On the home page, click "Tutorial", then in "Part 9 - Lesson 9.1 - Internal components", double-click "Internal component (Exercise)".
- The project is loaded.
|A corrected project with an internal component is available. To open the corrected project, go to the home page and click "Tutorial", then in "Part 9 - Lesson 9.1 - Internal components", double-click "Internal component (Answers)".|
- We are going to test the control template of this project:
- Open the Web control template named "TPLC_NewsletterSubscription" (double-click its name in the "Project explorer" pane).
- Test the Web control template (click in the quick access buttons).
- Type an email address.
- Click "VALIDATE" to add the address to the data file.
- Close the browser and go back to the editor.
- 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:
- In the "Project explorer" pane:
- Select the "Internal components" folder.
- Right-click to open the context menu.
- Select "New internal component".
- The internal component creation wizard starts.
- Go to the next step of the wizard.
- Identify your component: enter "InternalComponentNewsletterSubscription". The component caption is automatically proposed.
- Go to the next step.
- Select the elements that will be included in the component. In our case, all elements must be selected.
- Go to the next step.
- 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.
- Go to the next step.
- This step is used to specify the mode for managing the component data. In our case, the internal component uses its own analysis.
Select "Use a specific analysis", then, in the "Analysis" option, select the analysis corresponding to the current project ("WW_Internal_Component.wda" in the project subdirectory "WW_Internal_component.ana"). For example: "My Projects\My Examples\WW_Internal_Component (Exercises)\WW_Internal_Component.ana".
- 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.
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 reused.
|In this example, we will see how to use the internal component directly. To share resources, we recommend that you use the internal components via the Source Code Manager (SCM).|
In our example, we will import the internal component into the "Full WEBDEV Site" project.
- Open the "Full_WEBDEV_Site" project.
- Go to the WEBDEV home page (Ctrl + <).
- On the home page, click "Tutorial", then in "Part 9 - Lesson 9.1 - Internal components", double-click "Full WEBDEV Site (Exercise)".
- WEBDEV opens a dialog box to inform you that the project has already been opened and prompts you to open the local version or overwrite the project with the original version. To retrieve your changes, click "Open the local copy".
|A corrected project is available. This project allows you to perform the different operations in this lesson. To open the corrected project, go to the home page and click "Tutorial", then in "Part 9 - Lesson 9.1 - Internal components", double-click "Full WEBDEV Site (Answers)".|
- Include the internal component in the project.
- In the ribbon, on the "Project" tab, in the "Project" group, expand "Import" and select "An Internal component .. From a file".
- Select the following file: "My Projects\My Examples\WW_Internal_Components (Exercises)\InternalComponentNewsletterSubscription\InternalComponentNewsletterSubscription.wci". This file corresponds to the component that was created previously.
- The internal component is included in the project.
- To use the internal component, we are going to instantiate the Web control template provided by the internal component in the site home page. To do so:
- In the editor, open the "PAGE_List_of_new_products" page (double-click its name in the "Project explorer" pane).
- Move the looper to the bottom of the page in order to insert the control template of the internal component.
- Select the "Creation" pane of the ribbon and in the "Containers" group, click "Control template".
- The window for selecting the template to instantiate is displayed.
- Select the template coming from the internal component and validate.
- Click the location where the Web control template must be positioned in the page.
- We will test how the control template works:
- Test the page (click in the quick access buttons).
- Type an email address.
- Click "VALIDATE".
- A message confirms the subscription.
Click [Add] to post a comment