Getting Started on Linux

9 Jun 20213 minutes to read

The below guidelines demonstrate how to create an javascript application and configure with our Essential Studio Components on Linux.

Open your terminal window and execute the following commands to create the sample folder

  • HTML
    • mkdir sample

    The above command create the directory name called sample.In this directory create the html page called sample.html by using the below command.

  • HTML
    • cd sample
cat > sample.html

    Edit the sample

    The sample can be edited by using one of the following ways,

    • Using default Linux editors like gedit.
    • Using terminal window.

    Using default Linux editors like gedit.

    In the sample HTML file refer all the required CDN links for the scripts and style sheets within the <head> section as shown below,

  • HTML
    • <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My first HTML page</title>
        <link href="http://cdn.syncfusion.com/24.2.3/js/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script> 
    </head>
    <body>    
    </body>
</html>

    Adding Syncfusion Widget into your HTML page

    Add the <input> element within the <body> section, which acts as a container for ejDatePicker widget to render and then initialize the ejDatePicker widget within the script section as shown below,

  • HTML
    • <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My first HTML page</title>
        <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script> 
    </head>
    <body>     
        <!--Container for ejDatePicker widget-->
        <input id="startDate" type="text" /> 

        <script type="text/javascript">
            $(function () {
                // initialization of ejDatePicker control
                $("#startDate").ejDatePicker();
            });
        </script>
    </body>
</html>

    Using terminal window.

    Create a sample using the command cat > sample.html and edit the sample in the terminal window itself by pressing enterkey. To Add the Syncfusion widget into your HTML page, refer the link
    and press ctrl + D to save and exit.

    Getting-Started-on-Linux_images

    To run the sample, execute the below command.

  • HTML
    • firefox sample.html

    The web browser and the screen will display the DatePicker widget as shown below,
    Control-Initialization_images9

    The DatePicker control is rendered with its default appearance now. You can then use its various available properties to set its value and also make use of its available events to trigger when necessary.