|
|
|
|
|
|
|
|
|
|
- Web Component control overview
- Creating a Web Component control
- Entering the different resources of a Web component
- Using additional resources
- Characteristics of Web Component controls
The Web Component control
Web Component control overview The Web Component control allows you to easily include any external Web resource in a WEBDEV website. Several re-usable Web resources are available on Internet: Bootstrap snippets, JQuery.UI components, Angular.JS components, ... 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.
Note: The dimensions of the field created are optimized to occupy the space available at the position indicated.. 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 integrate a predefined Web Component control: it is directly associated with the basic external resources required.. To add a preset Web Component control: - In the "Creation" pane, in the "Integration" group, click on "Web component" and choose 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 Web Component controls 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).
Note: On resource sites, the required Web resources are often indicated.. - 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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|