DroidScript
DroidScript
учимся и разрабатываем

Расширение функциональности Wifi IDE для разработки приложений в реальном времени

03.04.2017

Разработка приложений на DroidScript является невизуальной, что вносит определённые неудобства по сравнению с работой в визуальных средах прототипирования и проектирования интерфейсов, где можно сразу увидеть то, как примерно будут располагаться и отображаться виджеты на экране Android устройства. Однако, при помощи реализованного в DroidScript механизма удалённого управления кодом приложения ситуацию можно кардинально изменить и реализовать кодирование приложения с просмотром результатов работы кода в реальном времени! Это существенно повышает как эффективность прототипирования приложений на DroidScript, так и изучения его возможностей!

Для знакомства с базовыми возможностями данного механизма откройте Wifi IDE и запустите, например, приложение Hellow World, расположенное на вкладке примеров Samples. На экране Android появится пиктограмма робота и кнопка с надписью "Press Me". После этого перейдите на вкладку отладчика Debug. В нижней части области вкладки расположено однострочное поле ввода с приглашением "Type here to run code inside your App...". Скопируйте в него строку btn.SetBackColor('red') и нажмите клавишу Enter. Фон кнопки станет красным. Как это работает? Очень просто: при нажатии клавиши Enter код из поля ввода при помощи метода GET отправляется на выполнение серверу (в DroidScript).

Управлять кодом можно и при помощи строки браузера: введите в адресную строку http://ip:port/ide?cmd=exec&code=btn.SetBackColor('red'), где ip:port - адрес сервера DroidScript и выполните её. Кнопка btn в приложении окрасится в красный цвет.

Показанный механизм используется для изменения свойств объектов в приложении, но для разработки больших приложений необходимо расширить базовую функциональность Wifi IDE.

Расширение функциональности Wifi IDE разработчики рекомендуют производить при помощи механизма создания дополнительных вкладок, который доступен начиная с версии DroidScript 1.42. Вкладка Espruino является примером такого расширения, которое не удалится при обновлении Wifi IDE. Но вкладки не обладают необходимой нам функциональностью, поэтому гораздо проще дополнить исходный код редактора.

Для начала создайте в Wifi IDE новый проект Javascript (empty.js) и вставьте следующий код:

function openIntoFile( p_fileName ){
    var _text = app.ReadFile( p_fileName );
    try{
        window.eval( _text );
    }   
        catch(e){
    }   
}

Получилось пустое приложение с единственной функцией, которая предназначена для выполнения кода из переданного ей файла. После этого добавьте в приложение ещё один файл (into.js) с кодом простого приложения:

var btn1_click = function (){
	btn1.SetBackColor('red');
};

function btn3_click(){
	alert('Нажата кнопка 3');
}

try{
    
    app.DestroyLayout( layMain );
    
} catch(e){}    

layMain = app.CreateLayout( "linear", "FillXY" );
    
    btn1 = app.CreateButton( "Кнопка1");
    btn1.SetOnTouch( btn1_click );

    btn2 = app.CreateButton( "Кнопка2");
	 btn2.SetOnTouch( function(){
            
    	alert("Кнопка нажата");
            
    });

    btn3 = app.CreateButton( "Кнопка3");
    btn3.SetOnTouch( btn3_click );

layMain.AddChild( btn1 );
layMain.AddChild( btn2 );

app.AddLayout( layMain );

Итак, у нас получилось приложение с двумя файлами - empty.js и into.js. Первый файл является пустым шаблоном, а второй содержит код приложения. Блок try в его начале необходим для удаления компоновщика приложения со всеми расположенными на нём объектами. Если этого не делать, то при каждом запуске кода к уже существующим объектам в приложении будут добавлятьих их новые копии, что нам не нужно.

Запустите приложение - на экране Android появится чёрный экран. Теперь введите в строку браузера http://ip:port/ide?cmd=exec&code=openIntoFile("runinto.js") - на экране появится две кнопки. Идея, надеюсь, понятна, но работать со строкой браузера неудобно. Давайте реализует нужную функциональность в самом редакторе Wifi IDE, чтобы код выполнялся при нажатии, например, на клавиши Ctrl+E.

Сделайте копию файла DroidScript/.edit/ide.min.js на всякий случай. Если при редактировании этого файла возникнет ошибка, то Wifi IDE перестанет запускаться и можно будет всё вернуть обратно, загрузив эту копию.

Код в файле ide.min.js минифицирован и для начала его необходимо преобразовать в читаемый вид. Во многих редакторах есть функция данного преобразования (например, в Brackets с расширением beautify.io она доступна по сочетанию Ctrl+Shift+L). Также можно воспользоваться и web-сервисами, например, jsbeautifier.org.

После приведения кода в читаемый вид можно приступить к его правке:

  1. Откройте файл ide.min.js и добавьте функцию:

    function AS(){

// для версии выше DS 1.42
var n = "openIntoFile('" + client.appService.getOpenApp().activeEditorFile.filename +"');";

// для версий DS 1.42 и ниже
//var n = "openIntoFile('" + appService.getOpenApp().activeEditorFile.filename +"');";
    
return n.trim() != "" && NetUtils.ajaxGet({
            url: NetUtils.getServerUrl("ide?cmd=exec&code=" + encodeURIComponent(n))
        }), !1
    
}
    Здесь всё просто. В переменной n записывается строка вида "openIntoFile( имя файла текущей вкладки)".

  2. Найдите строку обработчика событий от клавиатуры n.keyCode == 83 и перед ней добавьте код вызова функции AS по нажатию сочетания Ctrl+E:

    if (n.keyCode == 69 && t) n.preventDefault(), AS(); // для версии выше DS 1.42
    // n.keyCode == 69 && n.ctrlKey ? (n.preventDefault(), AS()) : // для версии DS 1.42 и ниже

  3. Сохраните изменения в файле и перезапустите IDE
  4. Запустите приложение empty.js - на Android появится пустой экран
  5. Перейдите на вкладку into.js и нажмите Ctrl+E - на экране Android появятся две кнопки.

Если что-то не работает, то это может говорить о том, что страница загружается из кэша или у вас установлена другая версия редактора Wifi IDE. Для отладки можно использовать диалог alert и посмотреть, что происходит в коде. Ничего сложного в этом нет. При нажатии на Ctrl+L должна вызываться функция AS, в которой сначала формируется команда "openIntoFile( имя файла текущей вкладки)", которая затем отправляется в DroidScript на выполнение.

При желании можно совместить вызов функции AS с функцией сохранения кода и назначить это действие на отдельную свободную клавишу или их сочетание.

Также можно в редакторе создать кнопку, при нажатии на которую будет производиться выполнение внутреннего кода:

  1. Сделайте копию файла DroidScript/.edit/index.html.
  2. Откройте его в редакторе и найдите строку:

    <button id="runBtn" class="btn" data-toggle="tooltip" title="Run"><i class="icon-play"></i></button>

  3. Скопируйте этот код и вставьте его ниже для создания новой кнопки runBtnInto:

    <button id="runBtnInto" class="btn" data-toggle="tooltip" title="RunInto"><i class="icon-play"></i></button>

  4. Сохраните изменения
  5. Откройте файл ide.min.js и подобно имеющемуся в нём обработчику события onRun создайте обработчик onRunInto для своей кнопки с вызовом функции AS

Подведём итог. Показанный выше механизм позволяет разрабатывать не только интерактивные прототипы, но и вести разработку приложений в оконных средах с предварительным просмотром и взаимодействием с приложением на устройстве Android в реальном времени! Мне неизвестны программы, которые обладали бы аналогичной функциональностью.

© 2016-2024 
actech