|
|
|
|
- Web Component control overview
- Creating a Web Component control
- Entering the different resources of a Web component
- Using additional resources
- Characteristics of the Web Component control
The Web Component control
Web Component control overview The Web Component control allows you to easily include any external Web resource in a WEBDEV site. Several re-usable Web resources are available on Internet: Bootstrap snippets, JQuery.UI components, Angular.JS components, etc. Specialized sites propose resources (free or paid). In most cases, external Web resources (Angular JS, Bootstrap Snippets, etc.) come as three components: - an HTML code,
- a CSS code,
- a JavaScript code.
Dependency files may be provided (images, etc.). A framework must be installed. The Web Component control is used to manage all these resources. Creating a Web Component control To create a Web Component control: - On the "Creation" tab, in the "Integration" group, click "Web component".
- Click where you want to create the control in the page. The control appears in the editor.
Remark: The dimensions of the control are optimized to take up the available space at the specified position. If necessary, resize the control using the handles.
To view the characteristics of the control, select "Description" in the context menu. Tip: If you know the type of resources used, you can add a preset Web Component control: it is directly associated with the external resources of databases. To add a preset Web Component control: - On the "Creation" tab, in the "Integration" group, expand "Web component" and select select the type of Web component to create:
- JQuery
- JQuery UI
- Bootstrap
- Angular
- Click where you want to create the control in the page. The control appears in the editor.
Entering the different resources of a Web component The different resources (HTML code, CSS code and JS code) can be associated with the Web Component control: - in the "General" tab of the control description:
- In "HTML - CSS - JS source codes", click "Edit".
- A window is displayed, allowing you to enter the necessary codes.
- Paste the necessary codes for your component.
- in the code tabs associated with the control:
- Select the Web Component control.
- Three specific tabs are displayed at the top of the page editor: "HTML", "CSS" and "JavaScript".
- In each tab, type the code required by your component. For example:
Using additional resources The Web resource used may required additional frameworks. The "General" tab of the Web Component control description window allows you to: - Add external resources by typing the URL of the JavaScript or CSS resource.
- Add CSS resources, if necessary.
Characteristics of the Web Component control The control description window allows you to define the main characteristics of the Web Component control: - The "General" tab is used to enter the different codes associated with the control and the external resources used (see previous paragraph).
Remark: In most cases, if a site provides Web resources, it specifies them. - The "UI" tab is used to specify whether the HTML rendering must be displayed in edit mode. If "Display the HTML rendering in edit" is checked:
- the HTML code is interpreted and displayed.
- the edit mode may be slowed down.
- the rendering is calculated without running the JavaScript code and without "media queries".
- The "Details" tab is used to view the local browser and server procedures linked to the control. You have the ability to add, delete or edit these procedures.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|