RUI – библиотека для создания web-приложений на языке go

Хочу представить вам свой проект – библиотеку RUI (Remote User Interface). Библиотека предназначена для создания web-приложений на языке go. 

Особенностью библиотеки заключается в том, что вся обработка данных осуществляется на сервере, а браузер используется как тонкий клиент. Для связи клиента и сервера используется WebSocket. Для разработки вам не нужны HTML/CSS/JavaScript. Все разрабатывается на языке go.

Другие особенности библиотеки: поддержка светлой и темной тем, поддержка стилей оформления, мультиязыковая поддержка, поддержка экранов с разной плотностью пикселей

Библиотека бесплатна и распространяется под MIT лицензией. В данный момент библиотека находится в статусе беты

Если вас это заинтересовало, то начнем

И начнем конечно с приложения “Hello world”

package main  import "github.com/anoshenko/rui"  type helloWorldSession struct { }  func (content *helloWorldSession) CreateRootView(session rui.Session) rui.View { return rui.NewTextView(session, rui.Params { rui.Text : "Hello world!!!", }) }  func createHelloWorldSession(session rui.Session) rui.SessionContent { return new(helloWorldSession) }  func main() { app := rui.NewApplication("Hello world", "icon.svg", createHelloWorldSession) app.Start("localhost:8000") }

В функции main создается rui приложение и запускается основной цикл. При создании приложения задаются 3 параметра: имя приложения, имя иконки и функция createHelloWorldSession. Функция createHelloWorldSession создает структуру, реализующую интерфейс SessionContent:

type SessionContent interface { CreateRootView(session rui.Session) rui.View }

 Для каждой новой сессии создается свой экземпляр структуры.

Функция CreateRootView интерфейса SessionContent создает корневой элемент. Когда пользователь обращается к приложению набрав в браузере адрес «localhost:8000», то создается новая сессия, для нее создается новый экземпляр структуры helloWorldSession и в конце вызывается функция CreateRootView. Функция createRootView возвращает представление строки текста, создаваемое с помощью функции NewTextView.

Если вы хотите, чтобы приложение было видно вне вашего компьютера, то поменяйте адрес в функции Start:

              app.Start(rui.GetLocalIP() + ":80")

 Давайте немного украсим нашу надпись: расположим ее по центру, добавим рамку, тень. Для этого изменим функцию CreateRootView

func (content *helloWorldSession) CreateRootView(session rui.Session) rui.View { return rui.NewGridLayout(session, rui.Params{ rui.Width:               rui.Percent(100), rui.Height:              rui.Percent(100), rui.CellVerticalAlign:   rui.CenterAlign, rui.CellHorizontalAlign: rui.CenterAlign, rui.Content: []rui.View{ rui.NewTextView(session, rui.Params{ rui.Text:            "Hello world!!!", rui.FontName:        "Arial", rui.TextSize:        rui.Pt(24), rui.TextColor:       rui.White, rui.BackgroundColor: rui.Blue, rui.Padding:         rui.Px(40), rui.Border: rui.NewBorder(rui.Params{ rui.Style:         rui.SolidLine, rui.Width:         rui.Px(2), rui.ColorProperty: 0xff808080, }), rui.Radius: rui.Px(8), rui.Shadow: rui.NewViewShadow(rui.Px(2), rui.Px(2), rui.Px(4), rui.Px(2), 0x80808080), }), }, }) } 

Данный текст, по-моему, довольно ясен. Поэтому сделаю к нему всего пару пояснений.

Функции rui.Percent, rui.Pt  и rui.Px используются для задания размеров, соответственно, в процентах, pt и пикселях

Для того чтобы разместить текст по центру мы помещаем его в контейнер GridLayout.

Пространство контейнера GridLayout разбито на ячейки в виде таблицы. Все дочерние элементы располагаются в ячейках таблицы. В наше примере у GridLayout одна ячейка, в которую помещается текст.

Помимо GridLayout в библиотеке имеются следующие контейнеры:

ListLayout – дочерние элементы располагаются в виде списка (вертикального или горизонтального)

StackLayout  – дочерние элементы занимают все пространство контейнера и располагаются один над одним. Виден только один верхний

ColumnLayout — дочерние элементы располагаются в виде вертикального списка в несколько колонок

AbsolutLayout – положение и размеры дочерних элементов задаются вручную

DetailsView – сворачиваемый контейнер

Resizable – контейнер меняющий размер путем перетаскивания сторон его рамки

Для работы с данными библиотека имеет ряд контролов. Помимо уже использованного  TextView есть следующие:

ListView, TableView, DropDownList, Button, Checkbox, EditView, NumberPicker, ColorPicker, DatePicker, TimePicker, ProgressBar, ImageView, AudioPlayer, VideoPlayer

Назначение данных контролов понятно из их названия.

Кроме них есть еще  CanvasView. Это контрол на котором вы можете рисовать используя различные геометрические фигуры и изображения.

На этом пока все. Если вас заинтересовала моя библиотек, то почитать подробнее о ней можно в readme файле git репозитория (в нем библиотека описана довольно подробно).

Git репозиторий библиотеки

По адресу

Располагается demo программа которая показывает возможности библиотеки.

И в конце просьба не пинать меня сильно в коментах. Это просто проект для души, а не коммерческая библиотека.