Обзор Visual Layout Editor (VLE) 2.0

Недавно корпорация Curl выпустила новую версию одноименного языка веб программирования Curl 2.0. Отличительной особенностью по сравнению с предыдущей версией (1.7 и 1.7.1) есть наличие средства визуального проектирования интерфейса: Visual Layout Editor (VLE).

Рис.1. Внешний вид Visual Layout Editor.

VLE входит в состав Surge Lab IDE (средства для облегчения написания програм на языке Curl) и вызывается из меню Tools --> Visual Layout Editor.

Рис.2. Вызов средства визуального проектирования VLE.

Окно VLE можно поделить на 4-ре части. Вверху находится меню и кнопки быстрого вызова (такие как cоздать новый проект, открыть файл, записать, запустить программу на выполнение и т.д.). Справа находится палитра компонентов (Palette) на которой представлены основные компоненты языка Curl (хотя на самом деле их гораздо больше). В средней части окна представлено непосредственно окно проектируемой программы (Layout). И справа окно свойств (Properties) которое меняется в зависимости от выбраного объекта и показывает его свойства и события (Event Handlers) которые он может обрабатывать.

Принцип работы напоминает Delphi. Например, если поставить на окно проекта кнопку (CommandButton) и сделать на ней двойной щелчок мышкой то откроется окно для ввода кода обработки события нажатия кнопки.

Рис.3. Окно для ввода кода обработки события.

Если мы введем в этом окне строчку {popup-message “Test!”} то получим программу которая при нажатии на кнопку будет открывать окно сообщения с надписью Test!.

Рис.4. Вид программы в Internet Explorer.

Так выглядит код программы сгенерированый VLE:

{curl 2.0 applet}

|| Begin Metadata DO NOT EDIT

{import * from CURL.CANVAS-LAYOUT.RUNTIME-SUPPORT,

   version = "1.0",

   location = "runtime-support.scurl"

}

|| End Metadata

{define-canvas-layout-class MyContainer {inherits LayoutEditorContainer}

  || Begin Metadata DO NOT EDIT

  design-time-class = "EditorDesignCanvas",

  run-time-class = "RadioCanvas",

  || End Metadata

  width = 192.75pt,

  height = 126.75pt,

  background = "#D4D0C8",

  border-width = 1.5pt,

  border-color = "#D4D0C8",

  border-style = "raised",

  font-family = "Tahoma",

  font-size = 8pt,

  control-appearance-changeable? = true,

  {layout-element void:CommandButton

    || Begin Metadata DO NOT EDIT

    x = 78pt,

    y = 78pt,

    || End Metadata

    {CommandButton

      label = "command-button-1",

        {on Action do

           {popup-message"Test!"}

        }

    }

 }

}

{value {new MyContainer}.container}

Как видно из приведенного выше примера писать простые программы c помощью VLE достаточно просто. Особенно это касается программистов знакомых с такими средствами визуального проектирования как Delphi или С++ Builder.

Автор: Федотов А.В.

e-mail: feal@pbank.if.ua