Frontend

Frontend Development

Dracory provides a beautiful, expressive API for building your application's frontend. Dracory uses the HB (HTML Builder) package for creating dynamic HTML content directly in Go, eliminating the need for separate template files while maintaining clean, readable code.

Introduction to HB

HB is a pure Go HTML builder that allows you to create HTML elements programmatically. It provides a fluent interface for building complex HTML structures without the need for template files.

import "github.com/gouniverse/hb"

func buildHTML() string {
    div := hb.Div().
        ID("content").
        Class("container").
        Child(hb.H1().Text("Hello, World!")).
        Child(hb.P().Text("Welcome to Dracory"))
    
    return div.ToHTML()
}

Working with Layouts

Dracory provides a layout system that makes it easy to create consistent page structures across your application. The layout system is based on the dashboard package, which provides a responsive, modern UI framework.

import (
    "net/http"
    "project/app/layouts"
    "github.com/gouniverse/hb"
)

func Handler(w http.ResponseWriter, r *http.Request) string {
    content := hb.Div().
        Class("my-content").
        Child(hb.H1().Text("Page Title")).
        Child(hb.P().Text("Page content goes here."))
    
    webpage := layouts.NewUserLayout(r, layouts.Options{
        Request: r,
        Title:   "My Page",
        Content: content,
        Scripts: []string{"// Custom JavaScript"},
    })
    
    return webpage.ToHTML()
}

CSS and JavaScript

Dracory makes it easy to include CSS and JavaScript in your pages. You can include stylesheets and scripts from CDNs or add inline styles and scripts directly in your controllers.

Including CSS

// Add stylesheet URLs
webpage := layouts.NewUserLayout(r, layouts.Options{
    // ...
    StyleURLs: []string{
        "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
    },
})

// Add inline styles
webpage := layouts.NewUserLayout(r, layouts.Options{
    // ...
    Styles: []string{
        `.my-class { color: blue; }`,
    },
})

Including JavaScript

// Add script URLs
webpage := layouts.NewUserLayout(r, layouts.Options{
    // ...
    ScriptURLs: []string{
        "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js",
    },
})

// Add inline scripts
webpage := layouts.NewUserLayout(r, layouts.Options{
    // ...
    Scripts: []string{
        `document.addEventListener('DOMContentLoaded', function() {
            console.log('Page loaded');
        });`,
    },
})

Working with Forms

Forms are an essential part of web applications. Dracory makes it easy to create and process forms using the HB package.

func createForm() hb.TagInterface {
    return hb.Form().
        Method("POST").
        Action("/submit").
        Child(hb.Div().
            Class("form-group").
            Child(hb.Label().For("name").Text("Name")).
            Child(hb.Input().
                Type("text").
                ID("name").
                Name("name").
                Class("form-control").
                Placeholder("Enter your name"))).
        Child(hb.Div().
            Class("form-group").
            Child(hb.Label().For("email").Text("Email")).
            Child(hb.Input().
                Type("email").
                ID("email").
                Name("email").
                Class("form-control").
                Placeholder("Enter your email"))).
        Child(hb.Button().
            Type("submit").
            Class("btn btn-primary").
            Text("Submit"))
}

AJAX and API Integration

Dracory makes it easy to build interactive applications with AJAX and API integration. You can use the built-in JavaScript utilities or integrate with popular libraries like Axios or Fetch.

// Example of AJAX with Fetch API
const script = `
document.addEventListener('DOMContentLoaded', function() {
    const loadDataButton = document.getElementById('loadData');
    const dataContainer = document.getElementById('dataContainer');
    
    loadDataButton.addEventListener('click', function() {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                dataContainer.innerHTML = '';
                data.forEach(item => {
                    const div = document.createElement('div');
                    div.textContent = item.name;
                    dataContainer.appendChild(div);
                });
            })
            .catch(error => console.error('Error:', error));
    });
};
`

Responsive Design

Dracory is built with responsive design in mind. The default layout uses Bootstrap, which provides a responsive grid system and components that work well on all devices.

To create responsive layouts, use the Bootstrap grid system:

func responsiveLayout() hb.TagInterface {
    return hb.Div().
        Class("container").
        Child(hb.Div().
            Class("row").
            Child(hb.Div().
                Class("col-lg-4 col-md-6 col-sm-12").
                Child(hb.H3().Text("Column 1")).
                Child(hb.P().Text("Content for column 1"))).
            Child(hb.Div().
                Class("col-lg-4 col-md-6 col-sm-12").
                Child(hb.H3().Text("Column 2")).
                Child(hb.P().Text("Content for column 2"))).
            Child(hb.Div().
                Class("col-lg-4 col-md-12 col-sm-12").
                Child(hb.H3().Text("Column 3")).
                Child(hb.P().Text("Content for column 3"))))
}