Приложение для DreamShell, как оно устроено?

Главный файлом в DreamShell приложении (далее просто DS App) является XML файл, он описывает все содержимое приложения. Рассмотрим его структуру: 
<?xml version="1.0" encoding="UTF-8"?>
<app name="Test" version="1.0" icon="">
	<resources>
		<!-- Resources... -->
	</resources>
	<body>
		<!-- Elements... -->
	</body>
</app>
XML включает свой стандартный заголовок и несколько ключевых элементов.
Первый и самый главный, это <app> он содержит в себе все что касется приложения, а так же содержит атрибуты: Элемент <app> включается в себя еще 2 основных элемента, это <resources> и <body>.
Будем последовательны и рассмотрим элемент <resources>.

<resources>

Данный элемент является списком ресурсов, которые использует DS App. Кроме загрузки модулей и скриптов он выполняет очень важную роль в экономии ресурсов железа. Часто используется одна и та же картинка или шрифт в нескольких местах, для того чтобы не подгружать их по несколько раз и существует эта некая предзагрузка ресурсов, обращение к которым будет осуществлятся по их уникальному имени.
Ресурсы бывают разных типов, на данный момент поддерживаются следующие:


Элемент <module>

Пример:
<module src="/cd/apps/test/module.klf" />

Загружает дополнительный модуль написанный на Си. Имеет только один атрибут - src который является путём к файлу модуля. Если модуль уже загружен, то он не загружается еще раз, а просто ставится метка что он используется еще в одном приложении. Дочерних элементов не имеет.


Элемент <script>

Пример:
<script type="text/lua" src="/cd/apps/test/script.lua" />

Загружает и выполняет скрипт при открытии приложения. Дочерних элементов не имеет.

Атрибуты:



Элемент <font>

Пример:
<font src="/cd/fonts/arial.ttf" type="ttf" size="14" name="arial" />

Загружает шрифт для дальнейшего использования в текстовых элементах интерфейса. Дочерних элементов не имеет.

Атрибуты:



Элемент <image>

Пример:
<image src="/cd/images/logo.png" name="logo" />

Загружает изображение, поддерживаются почти все основные форматы. Дочерних элементов не имеет.

Атрибуты:



Элемент <surface>

Пример:
<surface width="135" height="40" name="surf">
	<fill x="0" y="0" width="135" height="40" color="#005050C0" />
	<fill x="0" y="0" width="135" height="20" color="#00FFFFFF" />
</surface>

Универсальный элемент для создания графических примитивов, этот элемент можно использовать вместо изображений.
Дочерние элементы являются методами рисования. В данный момент поддерживается только 1 метод - fill (заливка квадрата однородным цветом).

Атрибуты surface:

Атрибуты fill:



С элементом <resources> на этом мы закончим, на данный момент он не поддерживает больше никаких дочерних элементов. Переходим ко второму основному элементу - <body>

<body>

В этом элементе вы уже расставляете свои элементы интерфейса. Каждый из этих элементов имеет ряд общих атрибутов относящихся к размерам и положению на экране. Но о них позже, а сейчас рассмотрим сам элемент <body>. Название этого элемента говорит само за себя, сделан по аналогии с html. Так же имеет атрибуты:
Как видите основные атрибуты есть и тут. Далее они будут практически в каждом элементе.
Ну а теперь собственно переходим к элементам интерфейса.

Элемент <label>

Рисует текст в указанном месте. Часто используется как дочерний элемент других элементов.

Пример:
<label width="80" height="20" x="0" y="0" font="arial" color="#ffffff" name="label 2" text="Test 2">

Атрибуты:

Примечание:
Атрибуты align и valign теоретически могут присутствовать у любого элемента, но не всегда они актуальны.


Элемент <image>

Рисует изображение в указанном месте. Может иметь дочерний элемент label

Примеры:
<image src="logo" width="640" height="100" x="0" y="0" name="image1" />

<image src="/cd/images/label.png" width="260" height="23" x="0" y="0" name="image2">
	  <label width="260" height="20" x="0" y="0" font="arial" color="#ffffff" name="label 1" text="Test 1" />
</image>

Атрибуты:



Элемент <input>

Рисует элемент взаимодействующий с пользователем, в указанном месте. Может иметь дочерний элемент label

Примеры:
<input type="button" onclick="print('button clicked');" normal="bNorm" highlight="surf" pressed="bPress" disabled="bNorm" x="200" y="200" width="135" height="40" name="Button 1">
	  <label width="100" height="20" x="0" y="0" font="arial" color="#ffffff" name="button label" text="Button" />
</input>

<input type="checkbox" onclick="print('checkbox clicked')" onnormal="bCheck" onhighlight="bCheck" offnormal="bUncheck" offhighlight="bUncheck" x="300" y="300" width="40" height="40" name="check 1">
	  <label width="70" height="20" x="0" y="0" font="arial" color="#ffffff" name="checkbox label" text="Check" />
</input>

<input type="text" font="arial" fontcolor="#ffffff" size="20" normal="#00ff00" highlight="#ff0000" focus="#ffffff" x="0" y="0" width="100" height="30" name="text 1" />

Данный элемент может быть нескольких типов (указывается в атрибуте type):

Общие Атрибуты (для всех типов input):

Атрибуты для типа button:

Атрибуты для типа checkbox:

Атрибуты для типа text:



Элемент <panel>

Данный элемент является некой оболочкой для списка элементов. Сам по себе визуально этот элемент ничего не представляет, кроме того что на него можно накладывать фоновый рисунок.
Главная его особенность, это обединение элементов (те, которые являются ему дочерними элементами) в единую группу, которая распологается на иной плоскости, отличительной от плоскости body (кстати body по своей сути так же является элементом panel). Эта плоскость можеть быть небольших размеров визуально, но внутри она может распологать очень много элементов, даже если они не умещаются в ее видимую часть. Для того чтобы увидеть элементы, которые спрятаны за видимой частью panel, нужно передвинуть эту самую видимую часть. Как правило элемент панель используется тогда, когда вам нужен скроллинг длинных списков и т.п. Может содержать в себе любые дочерние элементы, которые поддерживает body

Пример:
<panel x="0" y="0" width="640" height="480" xoffset="0" yoffset="0" background="back" scrollbar="scroll1" name="panel1">
	<input type="button" onclick="print('button clicked');" normal="bNorm" highlight="surf" pressed="bPress" disabled="bNorm" x="200" y="200" width="135" height="40" name="Button 1" />
</panel>

Атрибуты:



Элемент <scrollbar>

Этот элемент говорит сам за себя, это скролл. Как правило используется в связке с panel, но может использоваться и для других целей (например выбор значения).

Пример:
<scrollbar x="0" y="0" width="40" height="480" onmove="movepanel()" pos="50" knob="knob" background="back" name="scroll1" />

Атрибуты:



Элемент <progressbar>

Индикатор процесса выполенения чего либо, хотя можно использовать и для других целей, например для вывода статистики (типа заполнено 80% из 100%).

Пример:
<progressbar width="200" height="30" x="0" y="0" name="prog1" pos="0.5" bimage="back" pimage="line" />

Атрибуты:



Элемент <listbox>

Простой список из текстовых строк. Занимает гораздо меньше ресурсов чем список из label, если функционала этого элемента хватает для вашей задачи, лучше использовать его, чем кучу элементов label.

Пример:
<listbox x="0" y="0" width="200" height="200" name="list1" font="arial" fontcolor="#ffffff">
	<item value="test 1" />
	<item value="test 2" />
</listbox>

Атрибуты:

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


Элемент <cardstack>

Данный элемент является контейнером для разных страниц вашего приложения. Если вашу приложению нужно много разных страниц, то для этого вам как раз пригодится элемент cardstack. Вообще этот элемент может содержать в себе любые дочерние элементы, которые поддерживает body. Но для того чтобы было проще сгруппировать множетсво элементов в одну страницу, лучше использовать элемент panel. Управлять показом страниц можно через API.

Пример:
<cardstack background="back" x="0" y="0" width="640" height="480" name="pagestack">
	<panel x="0" y="0" width="640" height="480" name="page1">
		<input type="button" onclick="print('button clicked');" normal="bNorm" highlight="surf" pressed="bPress" disabled="bNorm" x="200" y="200" width="135" height="40" name="Button on page 1" />
	</panel>
	<panel x="0" y="0" width="640" height="480" name="page2">
		<input type="button" onclick="print('button clicked');" normal="bNorm" highlight="surf" pressed="bPress" disabled="bNorm" x="200" y="200" width="135" height="40" name="Button on page 2" />
	</panel>
</cardstack>

Атрибуты: