Как реализовать UI как в Scratch

173
25 сентября 2018, 04:10

Сегодня в Google Play наткнулся на интересную программу, конструктор, в котором были реализованы кубики (не знаю как они называются) как на картинке.

Вот мне стало интересно, а как такие вещи реализовывать?

Answer 1

Концепция. Каждое действие (цикл, условие, арифметика) - это отдельный класс, унаследованный от родительского класса ParentAction. У каждого класса есть своя реализация. Для каждого блока - у вас переопределен метод исполнения. Параметры передаются в конструктор класса.

abstrast class ParentAction() {
    abstract fun execute(child: ParentAction)
}

Разберем простой пример: вывести в цикле 5 раз некоторую строчку. В UI части - пользователь собирает два блока, один вложенный в другой. Проходя его дерево блоков изнутри-наружу, мы собираем верную цепочку, последовательность исполнения блоков. В данном примере класс Printf - минимальное действие. Им нельзя ничего обернуть. Смотрите классы ниже:

сlass Foreach(private val count: Int, child: ParentAction): ParentAction {
        override fun execute() {
             for(i : 0..count) {
                 child.execute()
             }
        }
}

Класс Printf:

сlass Printf(private val str: String): ParentAction {
        override fun execute() {
            print(str)
        }
}

Тогда, при обратном прохождении дерева пользователя, мы получаем:

  1. Генерируем объект класса Printf с указанными пользователем параметрами
  2. Генерируем объект класса Foreach и передаем ему на вход класс Printf, дабы тот, запускал его внутри себя.
  3. Запускаем метод execute у класса Foreach.

Все. Шарманка закрутилась. Для реализации математики, вам придется организовать работу с "памятью", дабы разные классы могли последовательно читать из общего источника. В итоге, у вас получается простой компилятор, "надстройка". Конечно, все зависит от вашей задачи. Если вы хотите создать программу для обучения детей основам программирования, то данная реализация уместна. Если же вы хотите разработать графический язык программирования, то вам следует углубиться в разработку собственного компилятора, т.к. данная надстройка не будет отличать высокой эффективностью. Удачи!

READ ALSO
Как сделать волнистую полоску на css?

Как сделать волнистую полоску на css?

Подскажите, как можно сделать вот такую полоску лесенкой с помощью css

212
Мобильные запросы Instagram как сгенерировать signed_body?

Мобильные запросы Instagram как сгенерировать signed_body?

У меня есть запросы в Fiddler`e там с десктоп программы отправляется

186
Ошибка GET запроса nodejs

Ошибка GET запроса nodejs

Есть такой код

214