Simply 5 steps to add a GUI to your Golang program (using Electron)

Source: Internet
Author: User
This is a creation in Article, where the information may have evolved or changed. Creating a Golang app is a simple and easy thing to do, but sometimes you want to make your app a little more fun: Create a gui! In this article, I'll add a GUI to a simple Golang program by using bootstrap in the Astilectron tool and Bundler. Our GUI-Golang app opens a folder and displays its contents. Here you can find the complete [code] (HTTPS://GITHUB.COM/ASTICODE/GO-ASTILECTRON-DEMO):! [] (Https://raw.githubusercontent.com/studygolang/gctt-images/master/go-gui-electron/0.png) # # First step: Organize the project structure folder structure as follows: ' |--+ resources |--+ app |--+ static |--+ css |--+ base.css |--+ js |--+ index.js |--+ lib |--+ ... (All the Css/js libs we need) |--+ index.html |--+ icon.icns |--+ icon.ico |--+ icon.png|--+ bundler.json|--+ main.go|--+ Message.go "You will see that we need 3 different format icons to complete the compilation of different platforms: '. Icns ' for ' Darwin ' platform, '. ico ' for ' windows ' platform, '. png ' for ' Linux ' platform. We will use the following CSS/JS library:-[Astiloader] (Https://github.com/asticode/js-toolbox)-[Astimodaler] (Https://github.com/asticode /js-toolbox)-[Astinotifier] (Https://github.com/asticode/js-toolbox)-[Chartjs] (http://www.chartjs.org/)-[ Fontawesome] (http://fontawesome.io/) # # Second Step: Building Infrastructure # # # Go First we need a ' maIn.go ' Import of [Astilectron] (Https://github.com/asticode/go-astilectron) Bootstrap source package: ' Gopackage mainimport ("Flag" " Github.com/asticode/go-astilectron "" Github.com/asticode/go-astilectron-bootstrap "" github.com/asticode/ Go-astilog "" github.com/pkg/errors ")//Varsvar (AppName stringbuiltat stringdebug = flag. Bool ("D", false, "enables the debug mode") W *astilectron. Window) Func Main () {//Initflag.parse () Astilog. Flaginit ()//Run Bootstrapastilog. DEBUGF ("Running app built at%s", Builtat) If err: = Bootstrap. Run (Bootstrap. Options{astilectronoptions:astilectron. Options{appname:appname,appicondarwinpath: "Resources/icon.icns", Appicondefaultpath: "Resources/icon.png",}, Debug: *debug,homepage: "index.html", menuoptions: []*astilectron. Menuitemoptions{{label:astilectron. Ptrstr ("File"), submenu: []*astilectron. Menuitemoptions{{label:astilectron. Ptrstr ("about")},{role:astilectron. Menuitemroleclose},},}},onwait:func (_ *astilectron. Astilectron, IW *astilectron. Window, _ *astilectron. Menu, _ *astiLectron. Tray, _ *astilectron. Menu) Error {w = Iwreturn nil},windowoptions: &astilectron. Windowoptions{backgroundcolor:astilectron. Ptrstr ("#333"), Center:astilectron. Ptrbool (True), Height:astilectron. Ptrint (), Width:astilectron. Ptrint (700),},}); Err! = Nil {astilog. Fatal (Errors. Wrap (Err, "Running Bootstrap Failed"))}} ' 2 global variables ' AppName ' and ' Builtat ' will pass [bundler] (https://github.com/asticode/ Go-astilectron-bundler) package is added automatically. Then we will find that our homepage becomes ' index.html ', we will have a menu containing 2 items (' About ' and ' close ') and will appear a ' 700x700 ', ' Center aligned ', ' #333 ' background-colored window. We're going to add the ' Debug ' option on go because we need to use the HTML/JS/CSS Debug tool. Finally we will point to ' Astilectron. The pointer to window ' is stored in the global variable ' W ' for subsequent use of the ' onwait ' option, which contains a callback function that executes immediately when the window, menu, and all other objects are created. # # # HTML Now we need to create our HTML home page in ' resources/app/index.html ': ' ' html<! DOCTYPE html>

via:https://medium.com/@social_57971/how-to-add-a-gui-to-your-golang-app-in-5-easy-steps-c25c99d4d8e0

Author: asticode Translator: Fengchunsgit proofreading: Rxcai polaris1119

This article by GCTT original compilation, go language Chinese network honor launches

This article was originally translated by GCTT and the Go Language Chinese network. Also want to join the ranks of translators, for open source to do some of their own contribution? Welcome to join Gctt!
Translation work and translations are published only for the purpose of learning and communication, translation work in accordance with the provisions of the CC-BY-NC-SA agreement, if our work has violated your interests, please contact us promptly.
Welcome to the CC-BY-NC-SA agreement, please mark and keep the original/translation link and author/translator information in the text.
The article only represents the author's knowledge and views, if there are different points of view, please line up downstairs to spit groove

8,107 reads ∙5 likes
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.