PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of Web Component control
  • Creating a Web Component control
  • Entering the different resources of Web component
  • Using additional resources
  • Characteristics of Web Component control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of Web Component control
The Web Component control is used to 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, ...
Specialized sites propose resources, either free or for a fee.
In most cases, the external Web resources (Angular JS component, Snippet Bootstrap, ...) are supplied in the format of three components:
  • an HTML code,
  • a CSS code,
  • a JavaScript code.
Dependency files may also be supplied (images, ...). A framework must also be installed.
The Web Component control is used to manage all these resources.
Creating a Web Component control
To create a Web Component control:
  1. On the "Creation" pane, in the "Integration" group, click "Web component".
    Creating a Web Component control
  2. Click the position where the control will be created in the page. The control appears in creation mode.
    Note: The dimensions of created control are optimized in order to occupy the available space at the specified position. If the control size does not suit you, resize the control via its handles.
To display the control characteristics, select "Description" from the popup menu of control.
Tip: If you know the type of resources used, you have the ability to include a preset Web Component control: it is directly associated with the external resources of databases. To include a preset Web Component control:
  1. On the "Creation" pane, in the "Integration" group, expand "Web component" and choose the type of Web component to create:
    • JQuery
    • JQuery UI
    • Bootstrap
    • Angular
  2. Click the position where the control will be created in the page. The control appears in creation mode.

Entering the different resources of Web component

The association between the different resources and the Web Component control (HTML code, CSS code and JS code) is performed:
  • in the "General" tab of control description:
    1. In the "HTML - CSS - JS source codes", click "Edit".
      Editing the HTML - CSS - JS code
    2. A window is displayed, allowing you to enter the necessary codes.
    3. Past the necessary codes to your component.
      Editor of HTML - CSS - JS codes
  • in the code tabs associated with the control:
    1. Select the Web Component control.
    2. Three specific tabs are displayed at the top of page editor: "HTML", "CSS" and "Javascript".
      Tabs specific to HTML - CSS - JS codes
    3. In each tab, type the code required by your component. For example:
      HTML code editor

Using additional resources

The Web resource used may required additional frameworks. The "General" tab in the description of Web Component control is used to:
  • Add external resources by typing the URL of the Javascript or CSS resource.
    Entering JS or CSS resources
  • Add a Web framework: the "Use a Web framework" button starts a wizard proposing the most common Web frameworks.
    Wizard for including Web framework
    Select the requested framework and the corresponding resources are automatically included.
Characteristics of Web Component control
The description window of control is used to define the main characteristics of 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: In the sites providing resources, the necessary Web resources are indicated in most cases.
  • The "GUI" tab is used to specify whether the HTML rendering must be displayed in edit. If "Display the HTML rendering in edit" is checked:
    • the HTML code is interpreted and displayed.
    • the edit of the page 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.
Minimum required version
  • Version 22
Comments
Click [Add] to post a comment