Создание диалогов с помощью всплывающих подсказок

Быстрый и доступный способ попасть в подсказки: посмотрите эти диалоги!

диалоги

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

Недавно я полностью погрузился в разработку своей новой IDE на основе сотовой связи, Olive.jl. Что такое IDE на основе ячеек? Во многом Olive будет похож на стандартное приложение для ноутбука, только с гораздо более расширенными возможностями. Однако я предпочитаю термин IDE на основе ячеек, хотя оба они разумны. Однако Olive в основном работает с модулями и файлами Julia, а также будет включать в себя интерактивных разработчиков с «перетаскиванием». Я планирую сделать один из них для самого Toolips. По сути, это сделало бы интерфейс, похожий на Glade или Visual-Basic.

Хотя может показаться, что это много, и это действительно так, я на самом деле не вижу, чтобы это занимало намного больше времени, чем сами инструменты. Toolips на самом деле была сложной частью этого уравнения, я считаю, что написать настоящее приложение Olive будет довольно легко, хотя на этом пути, безусловно, будут сбои. Какое отношение все это имеет к диалогам?

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

По сути, Olive нужны диалоговые окна, которые могут всплывать и отображать контент. Таким образом, я решил создать воспроизводимый всплывающий модуль. Этот модуль просто обеспечивает основу для создания быстрых и простых диалогов с помощью всплывающих подсказок. Несмотря на то, что модуль прост, эта простота может дать отличное представление о том, как именно туллипы можно использовать в этом контексте для создания воспроизводимых интерфейсов.

диалоги всплывающих подсказок

Теперь, когда мы знаем, что такое диалоговое окно на самом деле и почему кто-то вроде меня может захотеть его создать, давайте быстро погрузимся в то, как я создаю их в туллипах. Начнем с диалоговой базы. Это диалоговый компонент с собственной верхней панелью:

function dialog(c::Connection,
    name::String, x::String = 35percent, y::String = 20percent;
    label::String = "popup")
    maindia::Component{:dialog} = Component(name, "dialog")
    style!(maindia, "margin-left" => x, "margin-top" => y, "width" => 30percent,
    "position" => "fixed", "display" => "block", "background" => "transparent", "border-width" => 0px)
    # top bar
    topbar::Component{:div} = div("bar$name")
    topblabel::Component{:b} = Toolips.b(text = label, align = "center")
    style!(topblabel, "color" => "white", "display" => "inline-block", "margin-left" => 5px)
    xbutton::Component{:button} = button("topx$name", text = "X", align = "right")
    on(c, xbutton, "click") do cm::ComponentModifier
        remove!(cm, maindia)
    end
    style!(xbutton, "color" => "white", "background-color" => "red", "display" => "inline-block", "float" => "right",
    "border-radius" => 4px, "border-width" => 0px)
    style!(topbar,
    "background-color" => "blue", "border-radius" => 4px, "padding" => 1px, "border-width" => 0px)
    push!(topbar, topblabel, xbutton)
    # contents
    maindia[:children] = [topbar]
    contentarea::Component{:div} = div("content$name")
    style!(contentarea, "background-color" => "white", "border-radius" => "3px",
    "border-top" => "0px", "border-width" => 5px, "border-color" => "gray")
    push!(maindia, contentarea)
    maindia
end

Это, конечно, очень сложно разобрать, если мы посмотрим на все сразу, но, как и построчно, это невероятно просто и включает только простые вызовы методов и декларативное программирование. Начнем с создания самого диалогового компонента:

maindia::Component{:dialog} = Component(name, "dialog")

Нам также нужно стилизовать этот диалог, сделав положение фиксированным и где-то в середине экрана в зависимости от наших значений x и y:

maindia::Component{:dialog} = Component(name, "dialog")
    style!(maindia, "margin-left" => x, "margin-top" => y, "width" => 30percent,
    "position" => "fixed", "display" => "block", "background" => "transparent", "border-width" => 0px)

Затем мы создаем верхнюю панельную часть коробки.

topbar::Component{:div} = div("bar$name")
    topblabel::Component{:b} = Toolips.b(text = label, align = "center")
    style!(topblabel, "color" => "white", "display" => "inline-block", "margin-left" => 5px)
    xbutton::Component{:button} = button("topx$name", text = "X", align = "right")
    on(c, xbutton, "click") do cm::ComponentModifier
        remove!(cm, maindia)
    end

Это включает в себя три разных компонента: один для метки диалогового окна, один для кнопки, которая закрывает диалоговое окно, и один для самой панели. Мы составляем их все вместе здесь:

push!(topbar, topblabel, xbutton)

Наконец, я создаю фактическую часть контента, которая, конечно же, будет меняться, а затем появляется диалоговое окно.

# contents
    maindia[:children] = [topbar]
    contentarea::Component{:div} = div("content$name")
    style!(contentarea, "background-color" => "white", "border-radius" => "3px",
    "border-top" => "0px", "border-width" => 5px, "border-color" => "gray")
    push!(maindia, contentarea)
    maindia

Я планирую использовать этот базовый формат для создания нескольких различных типов диалогов, однако моей первой реализацией такого диалога, конечно же, был простой информационный диалог, который также нуждается в кнопке «ОК», но, безусловно, работает, давайте посмотрим:

function textdialog(c::Connection, name::String; text::String = "text")
    d = dialog(c, name)
    mytp = p("text$name", text = text)
    push!(d[:children]["content$(d.name)"], mytp)
    d
end

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

function home(c::Connection)
    write!(c, DOCTYPE())
    td = textdialog(c, "mytext", text = "hello!")
    write!(c, td)
end
routes = [route("/", home), fourofour]
extensions = Vector{ServerExtension}([Logger(), Session()])
function start(IP::String = "127.0.0.1", PORT::Integer = 8000)
     ws = WebServer(IP, PORT, routes = routes, extensions = extensions)
     ws.start(); ws
end

Итак, это очень простой пример всплывающих окон в их первоначальном виде, однако в этих модулях будет больше, а вместе с ними и гораздо больше интересных вещей, которые можно сделать. Спасибо за чтение, и я надеюсь, что это было интересно и здорово смотреть. Это один из многих проектов toollips, находящихся в стадии разработки, и я невероятно взволнован, чтобы завершить их, так что до тех пор; Спасибо за чтение!