Приложения для DreamShell
Главный файлом в DreamShell приложении является XML файл, он описывает все содержимое приложения.
Рассмотрим его структуру:
PHP код:
<?xml version="1.0" encoding="UTF-8"?>
<app name="Test" version="1.0" icon="">
<resources>
<!-- Resources... -->
</resources>
<body>
<!-- Elements... -->
</body>
</app>
XML включает свой стандартный заголовок и несколько ключевых элементов.
Первый и самый главный это -
<app>, он содержит в себе все что касается приложения, а так же содержит атрибуты:
- name - Название приложения.
- version - Версия приложения.
- icon - Иконка приложения (путь к файлу изображения).
- extensions - Список расширений файлов (через пробел) поддерживаемых приложением.
Элемент <app> включает в себя еще 2 основных элемента, это <resources> и <body>.
Будем последовательны и рассмотрим элемент <resources>.
<resources>
Данный элемент является списком ресурсов, которые использует DS App. Кроме загрузки модулей и скриптов он выполняет очень важную роль в экономии ресурсов железа. Часто используется одна и та же картинка или шрифт в нескольких местах, для того чтобы не подгружать их по несколько раз и существует эта некая предзагрузка ресурсов, обращение к которым будет осуществляется по их уникальному имени.
Ресурсы бывают разных типов, на данный момент поддерживаются следующие:
- module - Дополнительные модули на Си.
- script - Скрипты, пока поддерживается только lua.
- font - Шрифты, ttf и bitmap.
- image - Изображения основных форматов.
- surface - Произвольный графический элемент.
- file - Произвольный файл, который можно будет использовать как источник для других ресурсов.
Элемент <module>
Пример:
PHP код:
<module src="/cd/apps/test/module.klf" />
Загружает дополнительный модуль написанный на Си. Имеет только один атрибут -
src который является путём к файлу модуля. Если модуль уже загружен, то он не загружается еще раз, а просто ставится метка что он используется еще в одном приложении. Дочерних элементов не имеет.
Элемент <script>
Пример:
PHP код:
<script type="text/lua" src="/cd/apps/test/script.lua" />
Загружает и
выполняет скрипт при открытии приложения. Дочерних элементов не имеет.
Если в приложении не задано ни одного скрипта, то контекст lua не инициализируется для этого приложения.
Атрибуты:
- type - Описывает тип скрипта, на данный момент поддерживается только text/lua.
- src - Путь к файлу скрипта.
Элемент <font>
Пример:
PHP код:
<font src="/cd/fonts/arial.ttf" type="ttf" size="14" name="arial" />
Загружает шрифт для дальнейшего использования в текстовых элементах интерфейса. Дочерних элементов не имеет.
Атрибуты:
- type - Описывает тип шрифта, на данный момент поддерживаются ttf (True Type Font) и bitmap (шрифт на изображении).
- src - Путь к файлу шрифта.
- size - Размер шрифта при отображении (только для TTF).
- name - Имя ресурса (данного шрифта). Должно быть уникальным, требуется для дальнейшего использования.
Элемент <image>
Пример:
PHP код:
<image src="/cd/images/logo.png" name="logo" />
Загружает изображение, поддерживаются почти все основные форматы. Дочерних элементов не имеет.
Атрибуты:
- src - Путь к файлу изображения.
- x - Позиция по оси X (если необходимо загрузить часть изображения).
- y - Позиция по оси Y (если необходимо загрузить часть изображения).
- width - Ширина (если необходимо загрузить часть изображения).
- height - Высота (если необходимо загрузить часть изображения).
- name - Имя ресурса (данного изображения). Должно быть уникальным, требуется для дальнейшего использования.
Элемент <surface>
Пример:
PHP код:
<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>
Универсальный элемент для создания графических примитивов, этот элемент можно использовать вместо изображений.
Дочерние элементы являются методами рисования. Поддерживаются следующие методы:
- fill - Заливка квадрата однородным цветом.
- blit - Наложение другого surface.
- line - Рисует линию.
- rect - Рисует произвольный квадрат
- circle - Рисует круг.
- trigon - Рисует треугольник.
- bezier - Рисует произвольную форму.
Атрибуты
surface:
- width - Ширина элемента.
- height - Высота элемента.
- name - Имя ресурса. Должно быть уникальным, требуется для дальнейшего использования.
- alpha - Прозрачность.
Атрибуты
fill:
- x - Позиция начала заливки по оси X (левого верхнего угла).
- y - Позиция начала заливки по оси Y (левого верхнего угла).
- width - Ширина заливки.
- height - Высота заливки.
- color - Цвет заливки в шестнадцатеричном виде, формат - RGB или RGBA.
Атрибуты
blit:
- x - Позиция по оси X.
- y - Позиция по оси Y.
- width - Ширина.
- height - Высота.
Атрибуты
line:
- x1 -
- y1 -
- x2 -
- y2 -
- aa - Использовать сглаживание (опционально)
- w - Ширина линии (опционально)
- color - Цвет в шестнадцатеричном виде, формат - RGB или RGBA.
Атрибуты
rect:
- x1 -
- y1 -
- x2 -
- y2 -
- color - Цвет в шестнадцатеричном виде, формат - RGB или RGBA.
Атрибуты
circle:
- x -
- y -
- rad -
- aa - Использовать сглаживание (опционально)
- fill - Залить цветом (опционально)
- color - Цвет в шестнадцатеричном виде, формат - RGB или RGBA.
Атрибуты
trigon:
- x1 -
- y1 -
- x2 -
- y2 -
- x3 -
- y3 -
- aa - Использовать сглаживание (опционально)
- fill - Залить цветом (опционально)
- color - Цвет в шестнадцатеричном виде, формат - RGB или RGBA.
Атрибуты
bezier:
- x -
- y -
- n -
- s -
- color - Цвет в шестнадцатеричном виде, формат - RGB или RGBA.
С элементом
<resources> на этом мы закончим, на данный момент он не поддерживает больше никаких дочерних элементов.
Переходим ко второму основному элементу -
<body>
<body>
В этом элементе вы уже расставляете свои элементы интерфейса.
Каждый из этих элементов имеет ряд общих атрибутов относящихся к размерам и положению на экране. Но о них позже, а сейчас рассмотрим сам элемент
<body>.
Название этого элемента говорит само за себя, сделан по аналогии с html. Так же имеет атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- background - Ссылка на name одного из ресурсов (image или surface), либо путь к файлу изображения.
- onload - Произвольная строка скрипта, экспортная функция Си или консольная строка. Выполняется при загрузке и открытии приложения.
- onunload - Произвольная строка скрипта, экспортная функция Си или консольная строка. Выполняется при выгрузке и закрытии приложения.
- onopen - Произвольная строка скрипта, экспортная функция Си или консольная строка. Выполняется при открытии загруженного приложения.
- onclose - Произвольная строка скрипта, экспортная функция Си или консольная строка. Выполняется при закрытии приложения без выгрузки.
Как видите основные атрибуты есть и тут. Далее они будут практически в каждом элементе.
Ну а теперь собственно переходим к элементам интерфейса.
Элемент <label>
Рисует текст в указанном месте. Часто используется как дочерний элемент других элементов.
Пример:
PHP код:
<label width="80" height="20" x="0" y="0" font="arial" color="#ffffff" name="label 2" text="Test 2">
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- font - Ссылка на ресурс или путь к файлу шрифта.
- color - Цвет текста в шестнадцатеричном виде, формат - RGB.
- align - Если элемент является вложенным, то этот атрибут поможет задать позицию по горизонтали относительно родителя. (left, right, center, stretch).
- valign - Если элемент является вложенным, то этот атрибут поможет задать позицию по вертикали относительно родителя. (top, bottom, center, stretch).
Примечание:
Атрибуты align и valign теоретически могут присутствовать у любого элемента, но не всегда они актуальны. В основном они используются для позиционирования вложенного label.
Элемент <image>
Рисует изображение в указанном месте. Может иметь дочерний элемент
label
Примеры:
PHP код:
<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>
Атрибуты:
- src - Ссылка на имя ресурса или путь к файлу изображения.
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя изображения. Должно быть уникальным, требуется для дальнейшего использования в скиптах (не обязателен).
Элемент <input>
Рисует элемент взаимодействующий с пользователем, в указанном месте. Может иметь дочерний элемент
label
Примеры:
PHP код:
<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):
- button - Кнопка. Может содержать дочерний элемент label.
- checkbox - Флажок. Может содержать дочерний элемент label.
- text - Ввод строки текста.
Общие Атрибуты (для всех типов input):
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
Атрибуты для типа
button:
- onclick - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при клике на кнопку левой кнопкой мыши или кнопкой A контроллера.
- oncontextclick - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при клике на кнопку правой кнопкой мыши или кнопкой B контроллера.
- onmouseover - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при наведении курсора на кнопку.
- onmouseout - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при выходе курсора из пределов кнопки.
- normal - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в нормальном состоянии.
- highlight - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в состоянии подсветки (наведения).
- pressed - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в нажатом состоянии.
- disabled - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в отключенном состоянии.
Атрибуты для типа
checkbox:
- onclick - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при клике на кнопку левой кнопкой мыши или кнопкой A контроллера.
- oncontextclick - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при клике на кнопку правой кнопкой мыши или кнопкой B контроллера.
- onmouseover - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при наведении курсора на кнопку.
- onmouseout - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается при выходе курсора из пределов кнопки.
- checked - Может иметь 2 значения "yes" и "no" (включен/выключен). По умолчанию (если атрибут не указан) стоит "no".
- onnormal - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в нормальном состоянии (включен).
- onhighlight - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в состоянии подсветки (включен).
- offnormal - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в нормальном состоянии (выключен).
- offhighlight - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид кнопки в состоянии подсветки (выключен).
Атрибуты для типа
text:
- onfocus - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается когда форма получает фокус (начало ввода текста).
- onblur - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается когда форма теряет фокус.
- font - Ссылка на ресурс или путь к файлу шрифта.
- fontcolor - Цвет шрифта в шестнадцатиричном виде, формат RGB.
- fontsize - Размер шрифта, указывается в том случае, если в атрибуте font вы указали путь к файлу шрифта, а не ссылка на ресурс.
- size - Максимальная длинна строки.
- normal - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид формы в нормальном состоянии.
- highlight - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид формы в состоянии подсветки.
- focus - Ссылка на ресурс или путь к файлу изображения. Определяет внешний вид формы в состоянии фокуса.
- value - Текст, который будет находится в форме по умолчанию.
Элемент <panel>
Данный элемент является некой оболочкой для списка элементов. Сам по себе визуально этот элемент ничего не представляет, кроме того что на него можно накладывать фоновый рисунок.
Главная его особенность, это объединение элементов (те, которые являются ему дочерними элементами) в единую группу, которая располагается на иной плоскости, отличительной от плоскости
body (кстати body по своей сути так же является элементом panel). Эта плоскость может быть небольших размеров визуально, но внутри она может располагать очень много элементов, даже если они не умещаются в ее видимую часть. Для того чтобы увидеть элементы, которые спрятаны за видимой частью panel, нужно передвинуть эту самую видимую часть. Как правило элемент панель используется тогда, когда вам нужен скроллинг длинных списков и т.п. Может содержать в себе любые дочерние элементы, которые поддерживает
body
Пример:
PHP код:
<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>
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя панели. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- background - Ссылка на ресурс или путь к файлу изображения. Если фоновый рисунок меньше панели, он размножится. Так же может быть указан просто цвет фона, в шестнадцатеричном виде, формат RGB
- xoffset - Положение видимой части панели по оси X.
- yoffset - Положение видимой части панели по оси Y.
- scrollbar - Ссылка на name одного из элементов scrollbar в документе, для скроллинга этой панели.
Элемент <scrollbar>
Этот элемент говорит сам за себя, это скролл. Как правило используется в связке с
panel, но может использоваться и для других целей (например выбор значения).
Пример:
PHP код:
<scrollbar x="0" y="0" width="40" height="480" onmove="movepanel()" pos="50" knob="knob" background="back" name="scroll1" />
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- background - Фон для скролла. Ссылка на ресурс или путь к файлу изображения.
- knob - Ползунок скролла. Ссылка на ресурс или путь к файлу изображения.
- onmove - Произвольная строка скрипта, экспортная функция Си или консольная строка. Вызывается когда тянут за ползунок скролла.
- pos - Позиция скролла по умолчанию (целое число).
Элемент <progressbar>
Индикатор процесса выполнения чего либо, хотя можно использовать и для других целей, например для вывода статистики (типа заполнено 80% из 100%).
Пример:
PHP код:
<progressbar width="200" height="30" x="0" y="0" name="prog1" pos="0.5" bimage="back" pimage="line" />
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- bimage - Фон. Ссылка на ресурс или путь к файлу изображения.
- pimage - Линия прогресса. Ссылка на ресурс или путь к файлу изображения.
- pos - Позиция прогресса по умолчанию (число с плавающей точкой).
Элемент <listbox>
Простой список из текстовых строк. Занимает гораздо меньше ресурсов чем список из
label, если функционала этого элемента хватает для вашей задачи, лучше использовать его, чем кучу элементов
label.
Пример:
PHP код:
<listbox x="0" y="0" width="200" height="200" name="list1" font="arial" fontcolor="#ffffff">
<item value="test 1" />
<item value="test 2" />
</listbox>
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- font - Ссылка на ресурс или путь к файлу шрифта.
- fontcolor - Цвет шрифта в шестнадцатиричном виде, формат RGB.
- fontsize - Размер шрифта, указывается в том случае, если в атрибуте font вы указали путь к файлу шрифта, а не ссылка на ресурс.
Про элементы списка думаю нет особого смысла писать, и так видно наглядно, больше они пока ничего не поддерживают.
Элемент <cardstack>
Данный элемент является контейнером для разных страниц вашего приложения. Если вашу приложению нужно много разных страниц, то для этого вам как раз пригодится элемент cardstack. Вообще этот элемент может содержать в себе любые дочерние элементы, которые поддерживает
body. Но для того чтобы было проще сгруппировать множество элементов в одну страницу, лучше использовать элемент
panel. Управлять показом страниц можно через API.
Пример:
PHP код:
<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>
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- background - Ссылка на ресурс или путь к файлу изображения. Если фоновый рисунок меньше панели, он размножится. Так же может быть указан просто цвет фона, в шестнадцатеричном виде, формат RGB
Элемент <rtf>
Элемент для отрисовки RTF документа с поддержкой форматирования.
Пример:
PHP код:
<rtf file="doc.rtf" x="322" y="0" width="315" height="180" offset="0" bgcolor="#F3F3F3" />
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- offset - .
- bgcolor - Цвет фона, в шестнадцатеричном виде, формат RGB
Элемент <filemanager>
Элемент для создания файлового менеджера.
Пример:
PHP код:
<filemanager x="322" y="0" width="315" height="180" />
Атрибуты:
- x - Позиция по оси X (левого верхнего угла).
- y - Позиция по оси Y (левого верхнего угла).
- width - Ширина.
- height - Высота.
- name - Имя элемента. Должно быть уникальным, требуется для дальнейшего использования в скриптах (не обязателен).
- path - Начальный путь.
- item_normal - Ссылка на ресурс или путь к файлу изображения.
- item_highlight - Ссылка на ресурс или путь к файлу изображения.
- item_pressed - Ссылка на ресурс или путь к файлу изображения.
- item_disabled - Ссылка на ресурс или путь к файлу изображения.
- item_font - Ссылка на ресурс или путь к файлу шрифта
- item_font_r - Цвет текста (красный компонент)
- item_font_g - Цвет текста (зеленый компонент)
- item_font_b - Цвет текста (синий компонент)
- item_font_color - Цвет текста (полностью)
- sb_knob - Ссылка на ресурс или путь к файлу изображения.
- sb_back - Ссылка на ресурс или путь к файлу изображения.
- sbbup_normal - Ссылка на ресурс или путь к файлу изображения.
- sbbup_highlight - Ссылка на ресурс или путь к файлу изображения.
- sbbup_pressed - Ссылка на ресурс или путь к файлу изображения.
- sbbup_disabled - Ссылка на ресурс или путь к файлу изображения.
- sbbdown_normal - Ссылка на ресурс или путь к файлу изображения.
- sbbdown_highlight - Ссылка на ресурс или путь к файлу изображения.
- sbbdown_pressed - Ссылка на ресурс или путь к файлу изображения.
- sbbdown_disabled - Ссылка на ресурс или путь к файлу изображения.
- onclick - Глобальная функция lua или экспортная функция Си.
- oncontextclick - Глобальная функция lua или экспортная функция Си.
- onmouseover - Глобальная функция lua или экспортная функция Си.
- onmouseout - Глобальная функция lua или экспортная функция Си.
Поиск
Пользователи
Календарь
Справка
![[Изображение: barbers.png]](http://www.dc-swat.ru/swat/barbers.png)