How to integrate EJ Controls in GoLang?
What is GoLang?
Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. We can integrate Syncfusion EJ controls with GoLang. Here, we have loaded the packages where this sample figures out the JS Views.
How to Install GoLang?
Refer this installation guide to install GoLang. Ensure whether GoLang is installed in your machine in this location (C:\Go). Please refer the below screenshot.
Steps to create the GoLang project with EJ Control?
We can use command prompt to create the project.
Step 1: Create an empty directory to maintain the GoLang project named as “gosample” by using the below command.
$ mkdir gosample
Step 2: Create a file named as main.go and load the following packages.
[main.go]
package main import ( "html/template" "net/http" ) type Page struct { Title string Body []byte } func renderTemplate(w http.ResponseWriter, tmpl string, p *Page) { t, _ := template.ParseFiles(tmpl + ".html") t.Execute(w, p) } func editHandler(w http.ResponseWriter, r *http.Request) { renderTemplate(w, "edit", &Page{}) } func main() { http.HandleFunc("/sync/", editHandler) http.ListenAndServe(":8085", nil) }
In the above code snippet,
- We have imported the following two packages.
- html/template
This package is part of the Go standard library. This is used to keep the HTML in a separate file, allowing us to change the layout of our edit page without modifying the underlying Go code.
- net/http
This is used to build the web application.
- We have used “renderTemplate” method to process the html file.
- We can use “HandleFunc” method to specify the handler(e.g.-sync).
- We have used “ListenAndServe” method to specify the port number (e.g.-8085) in which the gosample project will be hosted.
Step 3: Create the html file (edit.html) within gosample project and refer the required scripts, css file to render EJ controls. We have passed this html file to renderTemplate method.
[edit.html]
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" /> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <link href="//cdn.syncfusion.com/15.3.0.26/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <link href="15.3.0.26/themes/web/content/default.css" rel="stylesheet" /> <link href="15.3.0.26/themes/web/content/default-responsive.css" rel="stylesheet" /> <script src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script> <script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> <script type="text/javascript" src="//cdn.syncfusion.com/15.3.0.26/js/web/ej.web.all.min.js "></script> </head> <body> <input id="datepick" type="text" /> <script type="text/javascript"> $(function () { $("#datepick").ejDatePicker({width:"100%", value: new Date()}); }); </script> </body> </html>
Step 4: You can use the below commands to compile and run the application
$ go build main.go - This command is used to build the project.
$ wiki - This command is used to run the project.
Step 5: Open the browser and give the html file(main.html) as a localhost using handler (sync) and port number (8085) specified in the main.go file.
e.g. – “http://localhost:8085/sync/edit.html”