How to reuse ui component

Getting Help
1 
<div class="sm:col-span-4">
    <label for="username"
        class="block text-sm font-medium leading-6 text-gray-900">Username</label>
    <div class="mt-2">
        <div
            class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
            <input type="text" name="username" id="username"
                autocomplete="username"
                class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                placeholder="janesmith">
        </div>
    </div>
</div>

If I keep this input field in a file, how do I reuse it?
Different label, different input name and id?

Do I have to use the .go file to provide the required details?

2

Hi @Mahesh_Kumar1,

I guess the package html/template is what you need. It allows you to turn the HTML code into a template file with placeholders. Your Go code can then fill the placeholders with data.

The whole process is too much to explain here, but here are some links to get you started:

1 Like
3 
<div class="sm:col-span-4">
    <label for="{{.label}}"
        class="block text-sm font-medium leading-6 text-gray-900">{{.name}}</label>
    <div class="mt-2">
        <div
            class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
            <input type="text" name="{{.input_name}}" id="{{.input_name}}"
                autocomplete="{{.name}}"
                class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                placeholder="{{.placeholder}}">
        </div>
    </div>
</div>

It seems it is a very big work.
The go file is already doing lot of logic works to produce the data to the template.
Now additionally I have to maintain that file to implement the reusable ui.

Is this the only solution?
or
can I duplicate the ui? It seems easier to maintain instead of maintaining the ui in the go file…
What is the right approach? please advice.

I was using React for frontend. This is the first time I use go for front end. I used go for only rest api
It has very different comparing with React.

I am leaving react completely …

4

I do not know if I understand your question correct. But as @christophberger suggest html templates is also my choice to create “components” that you can reuse. Note that Go has no built in UI, so you have to use the HTML and CSS to create the UI.

First you create a “component”

{{define "component"}} // name the component accordingly
<p>This is a component</p>
{{end}}

And then you can reuse this component as many times you like in other templates.

<h1>Here is the base template</h1>
{{template "component"}} //this will call the html component
...

<h1>Here is another template</h1>
{{template "component"}} //this will call the same html component
...
1 Like
5 
{{define "input-simple"}}
{{.}}

<div class="sm:col-span-4">
    <label for="{{.Input}}"
        class="block text-sm font-medium leading-6 text-gray-900">{{.Label}}</label>
    <div class="mt-2">
        <div
            class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
            <input type="text" name="{{.Input}}" id="{{.Input}}"                
                class="block flex-1 border-0 bg-transparent py-1.5 pl-2 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                placeholder="{{.Placeholder}}" />
        </div>
    </div>
</div>

{{end}}

This is how I have implemented.
But I am not sure is this the right way.

Even though I am reusing the UI,
The go file which Execute this templates now handles the UI as well as the data required by the UI.
Is that normal?

6

It is normal to send data to the template {{.}} regardless of it i s a component or a base template. You can pass the data from the base template to the component by simply use the period.

{{template "component" . }}

If the HTML is good in the browser you have done it in the “right way”.

7

Thank you so much the support.
Both of you gave me a wonderful support.

It is difficult to switch from one framework to another to a person like me.
Your help give me lot of confidence to go in the right path.

Thanks a lot.

8

Go is not a framework. But using templates it behaves as a framework sort of. Not far from Angular IMO. Here is how one of my base templates looks like. Reusing components to make it more DRY…

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

<head>
  {{template "httphead"}}
</head>

<body data-theme="default" data-module="home" data-main="home">
  {{template "icn"}} {{template "nav"}}
  <main>
    {{template "header" "Home"}}
    <section>
      {{template "lst_home" .}}{{template "desk" .}}
    </section>
  </main>
  {{template "httpend"}}
</body>

</html>
1 Like
9

Wow. It is wonderful.
The way, you named the template are extraordinary.

Thanks a lot. I will keep this as the base…
Thank you so much for sharing this invaluable content.

10

BTW. Another way to reduce the numbers of sub templates (aka “components”) is to “embed” and define many related sub templates into ONE single template.

{{define "sub_home"}}
<div id="sub">
    <ul id="sublist">     
        <li id="sub_home"><a href="/home">{{trans "Home"}}</a></li>      
        <li id="sub_gwd"><a href="https://go4webdev.org">Hub go4webdev</a></li>     
    </ul></div>
{{end}}

{{define "sub_howto"}}
<div id="sub">
    <ul id="sublist">
        <li id="sub_html"><a href="/html">{{trans "HTML"}}</a></li>
    </ul>
</div>
{{end}}

{{define "sub_prefs"}}
<div id="sub">
    <ul id="sublist">
        <li id="sub_prefs"><a href="/prefs">{{trans "Personal"}}</a></li>
    </ul>
</div>
{{end}}
11

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.