Простой CEF учебник. Что это и с чем его едят?

NozmaD

Администратор
Команда форума
Администратор
Сообщения
165
Баллы
208
Введение:

Во первых, Chromium Embedded Framework (CEF) — это проект с открытыми исходными кодами, созданный в 2008 году как элемент управления Web browser, работающий на базе Chromium от Google.
На данный момент это довольно мощный инструмент для разработки настольных приложений. Достаточно сказать, что его используют такие широко известные продукты, как Evernote и Steam.

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

Давайте разбираться:

1. Meta файл: Файлы, которые используются CEF (все HTML файлы, JS включает, CSS, изображения и т. д.) должны быть подключены в meta.xml

Подключаются они таким образом:
XML:
<file src="название.расширение" />
2. JavaScript: Все операции над браузером выполняются на стороне клиента, то есть с использованием JavaScript. Поэтому создайте в своем проекте файл cef.js

3. Объявление переменной: Нам нужно объявить переменную, чтобы определить браузер. Она будет использоваться для управления нашим браузером (открыть/закрыть/сменить страницу и т.д.).

На первой строке введите следующее:
JavaScript:
var myBrowser = null; //Присваиваем null потому что браузер еще не создан, а переменную типа var нельзя объявить пустой.

4. Создание браузера: В зависимости от того, что вы делаете, будет зависеть и то, где будет создан браузер. Для примера сделаем инициализацию браузера в onResourceStart, так что бы он показывался когда игрок подключается к серверу.

Нам нужно ввести следующий код:
JavaScript:
API.onResourceStart.connect(function()
{
    var res = API.getScreenResolution(); //Получаем разрешение экрана игрока
    myBrowser= API.createCefBrowser(res.Width, res.Height); //Создаем браузер на весь экран.
    API.waitUntilCefBrowserInit(myBrowser); //Это не позволяет скрипту работать, он, по сути, приостанавливается, пока браузер не инициализируется
    API.setCefBrowserPosition(myBrowser, 0, 0);
    API.loadPageCefBrowser(myBrowser, "myfile.html"); //Загружаем вашу страницу.
    API.setCefBrowserHeadless(myBrowser, true); //Это удалит скролбары (и с права и с низу)
    API.showCursor(true); //Показывает курсор
    API.setCanOpenChat(false); //Запрещаем открывать чат пользователю.
});
5. Создание HTML-файла: После нам нужно создать html файл, который будет загружен и показан игроку.

Создайте новый файл HTML и введите следующее:
HTML:
<html>
    <form>
        <input type="text" id="username" placeholder="username"/>
        <input type="password" id="password" placeholder="password"/>
        <button onclick="logPlayer();" id="login">login</button>
    </form>
</html>
Внимание! Функция, вызываемая методом "onclick", будет рассмотрена в следующих шагах.

6. Получение значений: Далее нам нужно получить значения имени пользователя и пароля, которые ввели в CEF. Это можно сделать с помощью javascript.
Просто над тегом <html> создайте новый скрипт.

HTML:
<script>
    function logPlayer()  //this is the function we called with OnClick in the last step
    {
        var username = $("#username").val(); //Получаем значение из id "username" в var username
        var password = $("#password").val();//Получаем значение из id "password" в var password
        resourceCall("login", username, password); //Вызываем функцию login в js файле,  созданном нами на 2 шаге.
    };
</script>
Сохраняем и закрываем html файл.

7. Финал: Теперь нам нужно создать нашу функцию входа в систему, которую мы вызвали в сценарии html. !!Мы не будем привязывать это к базе данных и делать функции входа в систему действительно работающими, это просто демонстрация CEF.

Создайте функцию в файле cef.js (Пункт 2)

JavaScript:
function login(Username, Password)
{
    API.sendChatMessage("Твое имя " + Username + "; Твой пароль " + Password); //Показываем в чат введенные данные
    API.showCursor(false); //Скрываем курсор
    API.destroyCefBrowser(myBrowser); //Скрываем браузер (уничтожаем)
    API.setCanOpenChat(true); //Разрешаем снова пользователю писать в чат
}
На этом всё!

Автор мануала: TakeiT
Перевел: SkyLaGer
 
Верх