Where to load webix?

0
votes

Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.

The webix quick start doc says:

<!DOCTYPE HTML>// specifies document type
<html>
    <head>
    <link rel="stylesheet" href="../../codebase/webix.css" type="text/css"> 
    <script src="../../codebase/webix.js" type="text/javascript"></script>  
    </head>
    <body>

e.g. it loads the library in the head.

Questions:

  • the webix lib should be loaded in the <head>?
  • if yes, where should be loaded jQuery and twitter bootstrap?
  • and in what order?
2
webix

2 Answers

3
votes

You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading

Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.

As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )

0
votes

You need to follow the below syntax or process for using the webix.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Title</title>


  <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">

  <link rel="stylesheet" type="text/css" href="assets/css/app.css" />

</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf-8" >
    webix.ui({
      view:"calendar",
      id:"calendar1"
    })
  </script>

</body>

</html>

Any dependencies must load on top webix.js, so that you can use them in your JS file.