Рабочий стол в вашем браузере при помощи JavaScript

OS.js - JavaScript реализация рабочего стола в браузере с полноценным менеджером окон, API приложений, инструментами GUI и виртуальной файловой системой.

На данный момент, OS.js совершенно бесплатна, с открытым исходным кодом и находится на стадии разработки.

Web Рабочий стол

Обладает полностью настраиваемой веб-средой рабочего стола в браузере и Менеджером окон, настолько же быстрый, как и рабочий стол в Linux.

Благодаря виртуальной файловой системой, можно загружать, скачивать и редактировать файлы в различных облачных хранилищах, в том числе Google Drive, Dropbox и OneDrive

Имеет поддержку нескольких языков: норвежский, французский, немецкий, русский, голландский, польский, вьетнамский и китайский.

Приложения

Имеет набор стандартных приложений, таких как - файловый менеджер, аудио плеер, видео плеер, просмотр и редактирование изображений, калькулятор и различные текстовые редакторы.

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

Дополнительные приложения: PDF просмотрщик, XMPP Чат, Google Mail, Google Contacts, Тетрис и Wolfenstein3D.

Расширения

Os.js имеет простой и гибкий JavaScript API, благодаря которому вы сможете без труда внести какие-либо изменения и создавать свои приложения.

Вы также легко можете сделать свои style-, audio- и icon- темы.

Поставляется со специальной системой для простого развертывания и конфигурирования.

Установка

Просто запустите программу автоматической установки.

Прежде чем начать, обязательно прочитайте документацию по установке. Там вы также найдете инструкции о том, как загрузить и установить Os.js вручную.

curl -sS http://os.js.org/installer | sh

Инсталлятор для пользователей Windows: http://os.js.org/installer.exe

Список возможностей

  • Бесплатная и открытый исходный код
  • Очень простая установка
  • Работает во всех современных браузерах
  • Развертывается на любом сервере
  • Может полностью работать в браузере, без сервера
  • Простое использование API
  • Кастомизация всех модулей и возможность добавлять свои.
  • Многопользовательская поддержка с аутентификацией
  • Виртуальная файловая система - Хранение файлов в облачных хранилищах
  • Любой пользователь сможет работать с рабочим столом
  • Функция Drag-and-drop
  • Поддержка нескольких сессий, вы сможете перезагрузить рабочее пространство на любом компьютере
  • Локализация
  • Поставляется с пакетом приложений
  • Поддержка добавления пакетов с помощью внешних репозиториев
  • Присутствуют все необходимые инструменты для создания своих приложений
  • Клиент написан на Strict Mode JavaScript и использует стандарты ECMAScript 5.1
  • Поддержка Google API Javascript
  • Поддержка Windows Live API Javascript
  • Поддержка Google Drive
  • Поддержка Dropbox
  • Поддержка OneDrive
  • Запуск нативных GTK+ 3.x приложений с помощью Broadway.
  • Можно развернуть с использованием X11 в качестве полноценного решения для рабочего стола

Создание приложения

Создание из шаблона.

Простой запуск:

grunt create-package:MyName

Создает базовое приложение, в качестве шаблона.

Обновление манифеста

Манифест содержит информацию о Вашем пакете: название, описание, иконка и используемые ресурсы. Обновите файл package.json.

Данный этап не обязателен

Пример с использованием всех имеющихся записей:

{
  // ClassName
  "className":  "ApplicationMyName",

  // Если 'false' приложение не будет загружено (опционально)
  "enabled":    true,

  // Описание приложения (опционально)
  "description":"Application Long Description",

  // Название приложения
  "name":       "Application Name",

  // Категория приложения (опционально)
  "category":   "unknown",

  // Массив MIME строк (опционально)
  "mime":       null,

  // Иконка приложения
  "icon":       "apps/file-manager.png",

  // Запускать только один экземпляр ? (опционально)
  "singular":   false,

  // Показывать заставку при запуске приложения (опционально)
  "splash":     false,

  // Массив функций (опционально, используйте Utils.getCompability())
  "compability":[],

  // Список файлов, которые необходимо предварительно загрузить перед запуском приложения
  "preload":    [
    {"src": "main.js", "type": "javascript"},
    {"src": "main.css", "type": "stylesheet"},
    {"src": "foo.js", "type": "javascript", combine: false} // Не комбинируйте этот скрипт в 'dist'
  ],

  // Перевод имени и описания
  "names" : {
    "no_NO" : "Norwegian name"
  }
  "descriptions" : {
    "no_NO" : "Norwegian description"
  }
}

Установка

Теперь запустите следующую команду, чтобы добавить в глобальный манифест (сделать его видимым в OS.js)

grunt manifest

С использованием dist:

grunt packages:default/MyName

Где default - имя репозитория по умолчанию

Дизайн UI

<application-window data-id="MyNameWindow">

  <gui-vbox>
    <gui-vbox-container data-grow="0" data-shrink="1" data-basis="auto">
      <gui-menu-bar>

        <gui-menu-bar-entry data-label="LBL_FILE">
          <gui-menu data-id="SubmenuFile">
            <gui-menu-entry data-id="MenuClose" data-label="LBL_CLOSE"></gui-menu-entry>
          </gui-menu>
        </gui-menu-bar-entry>

      </gui-menu-bar>
    </gui-vbox-container>

    <gui-vbox-container data-grow="0" data-shrink="1" data-basis="auto">
       <gui-button-bar>
          <gui-button data-id="MyButtonOne">My Label</gui-button>
          <gui-button data-id="MyButtonTwo" data-icon="stock://16x16/places/folder_home.png">My Label and Icon</gui-button>
        </gui-button-bar>
    </gui-vbox-container>

    <gui-vbox-container data-grow="1" data-shrink="0" data-basis="auto" data-fill="true">
      <gui-textarea data-id="Text"></gui-textarea>
    </gui-vbox-container>

  </gui-vbox>


</application-window>

События и манипуляции

ApplicationMyNameWindow.prototype.init = function(wm, app, scheme) {
  var self = this;
  var root = Window.prototype.init.apply(this, arguments);

  // Рендер файла темы
  scheme.render(this, 'MyNameWindow', root);

  scheme.find(this, 'MenuClose').on('click', function() {
    self._close();
  });

  // Получение параметров
  scheme.find(this, 'MyButtonOne').on('click', function() {
    alert(scheme.find(self, 'Text').get('value'));
  });

  // Смена параметров
  scheme.find(this, 'MyButtonOne').on('click', function() {
    scheme.find(self, 'Text').set('value', 'CLICKED!');
  });

  // Создание UI элемента
  scheme.create(this, 'gui-button', {disabled: true}, root).on('click', function() {

  });

  return root;
};

Создание приложения с помощью Server API

Настройка сервера.

Node

Создайте файл api.js внутри пакета и используйте его в качестве шаблона:

(function() {

  module.exports = {
    MyServerMethod: function(args, callback, request, response) {
      // Здесь вы получите args.Argument от вызова приложения

      callback(
        false, // Сообщение об ошибке 
        {      
          foo: "bar"
        }
      );
    }
  };

})();

PHP

Создайте файл api.php внутри пакета и используйте его в качестве шаблона:

class ApplicationMyName // Которое вы задали в package.json
{

  public static function call($method, $args) {
    if ( $method === 'MyServerMethod' ) {
      return Array(
        "foo": "bar"
      );
    } else {
      throw new Exception("This is how you send an error");
    }

    return false;
  }

}

Установка приложения

Просто создайте новый метод в вашем приложении:

ApplicationMyName.prototype.myServerMethod = function(callback) {
  this._call('MyServerMethod', {'Argument': 'Some Value'}, function(data) {
    callback(false, response);
  }, function(error) {
    callback(error);
  });
};

Вызов метода

Пример нажатия кнопки в окне:

scheme.find(this, 'Button').on('click', function() {
  self._app.myServerMethod(function(error, result) {
    if ( error ) {
      alert('An error occured: ' + error);
      return;
    }
    // Or else do something with 'result'
    // In this example it should return {foo: bar}
    alert(result.foo);
  });
});

Создание IFrame приложения

Очень полезная функция, если не хотите исопльзовать Os.js API:

grunt create-package:default/MyPackageName:iframe

Пример кода

Для примера создадим директорию "data" внутри приложения, с файлом "index.html":

function ApplicationExample(args, metadata) {
  Application.apply(this, ['ApplicationExample', args, metadata, {
    src: 'data/index.html',
    title: metadata.name,
    icon: metadata.icon,
    width: 640,
    height: 480,
    allow_resize: false,
    allow_restore: false,
    allow_maximize: false
  }]);
}
ДЕМО СКАЧАТЬ

 

Перевод статьи Os.js

Тэги: APIplugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.