Ceylon уже работает на JVM, будь то в чистом виде, через JBoss Modules, Vert.x, контейнеры сервлетов Java EE, такие как WildFly, или контейнеры OSGi, а также на виртуальных машинах JavaScript, таких как Node.js и браузер. Но сегодня мы собираемся объяснить, как запускать Ceylon на мобильных устройствах, не только в браузере (хотя он действительно играет в этом роль), но и в виде приложений через Apache Cordova.
Apache Cordova позволяет вам писать приложения для любой мобильной платформы, включая Android и iOS, используя только HTML, CSS и JavaScript. Поскольку Ceylon компилируется в JavaScript, это прекрасно, поскольку позволяет нам запускать наши приложения Ceylon на iOS через серверную часть компилятора JavaScript.
Обратите внимание, что в этой статье используется Ceylon 1.2.3, который еще не выпущен, потому что среда выполнения JavaScript в Cordova на Android имела одну особенность, с которой нам приходилось работать в реализации JavaScript языкового модуля. К счастью, вы можете получить ночные сборки Цейлона 1.2.3 и Цейлона 1.2.3 SDK .
Написание заявки на Цейлон Кордова
Установка Apache Cordova
Сначала установите Apache Cordova и добавьте две платформы. Я не смог протестировать платформу iOS, так как для сборки требуется платформа OSX и устройство iOS, и мне не хватает обоих, поэтому я объясню, как упаковать Android и браузер, и пусть вы, ребята, попробуете это. для iOS, но я достаточно верю в Apache Cordova, что он будет просто работать ™.
|
1
2
3
4
|
# Install npm, the Node.js package manager$ sudo apt-get install npm# Then install Apache Cordova$ npm install cordova |
Небольшое примечание: для меня это установленные вещи в ./node_modules/cordova и команда Apache Cordova в ./node_modules/cordova/bin/cordova , поэтому измените свой путь, как вам нужно.
|
1
2
3
4
5
6
|
# Create your application$ cordova create ceylon-cordova-demo$ cd ceylon-cordova-demo# Now add the browser and Android platforms$ cordova platform add browser$ cordova platform add android |
На данный момент ваше приложение готово к проверке в вашем браузере:
|
1
|
$ cordova platform run browser |
Или в эмуляторе Android, если вы уже загрузили Android SDK:
|
1
2
|
$ ANDROID_HOME=.../Android/Sdk cordova platform build android$ ANDROID_HOME=.../Android/Sdk cordova platform run android |
Немного отвлекся от стиля
Написание приложения с использованием только HTML и CSS означает, что вы должны приложить некоторые усилия, чтобы оно выглядело хорошо, и вместо этого я решил делегировать использование Polymer, чтобы мое приложение имело внешний вид приложений Android Material Design, чтобы оно выглядело еще более похожим на родное приложение на Android. Без сомнения, похожий внешний вид существует для iOS.
Итак, давайте загрузим Polymer в исходные тексты нашего приложения:
|
1
2
3
4
5
6
|
$ npm install bower$ cd www$ bower init# At this point just hit enter/Yes/No until it's set up $ bower install --save Polymer/polymer$ bower install --save Polymerelements/paper-item |
А теперь отредактируйте www/index.html чтобы использовать Polymer:
|
1
2
3
|
<script src="bower_components/webcomponentsjs/webcomponents.js"></script><link rel="import" href="bower_components/paper-item/paper-item.html"><link rel="import" href="bower_components/paper-item/paper-item-body.html"> |
Вам также следует удалить CSS по умолчанию:
|
1
|
<link rel="stylesheet" type="text/css" href="css/index.css"> |
Получение require.js и jQuery
Ceylon компилирует в модули JavaScript с помощью require.js , поэтому нам также придется скачать его:
|
1
2
|
$ cd www/js$ wget http://requirejs.org/docs/release/2.2.0/minified/require.js |
Наша демонстрация на Ceylon будет использовать jQuery для добавления элементов на HTML-страницу, поэтому нам это также нужно:
|
1
2
|
$ cd www$ bower install --save jquery |
Теперь отредактируйте www/index.html чтобы использовать оба:
|
1
2
|
<script type="text/javascript" src="js/require.js"></script><script src="bower_components/jquery/dist/jquery.js"></script> |
Написание заявления Цейлона
Мы собираемся написать тривиальное приложение, которое запрашивает у Ceylon Herd список модулей, чтобы отобразить их в списке.
Давайте начнем с создания модуля Ceylon в source/cordova/demo/module.ceylon :
|
1
2
3
|
module cordova.demo "1.0.0" { import ceylon.json "1.2.3";} |
И основной метод нашего приложения в source/cordova/demo/run.ceylon :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import ceylon.json { parseJson = parse, JsonObject = Object, JsonArray = Array }shared void run() { dynamic { // The HTML element where we'll add our items dynamic target = jQuery("#target"); // The function called when we get data from the server void success(dynamic data){ // Parse the JSON assert(is JsonObject json = parseJson(data), is JsonArray results = json["results"]); // Iterate modules for(res in results){ assert(is JsonObject res); // Get the list of versions assert(is String name = res["module"], is JsonArray versions = res["versions"]); // Join them value versionText = ", ".join(versions.narrow<String>()); // Now add the HTML items dynamic item = jQuery("<paper-item/>"); dynamic body = jQuery("<paper-item-body two-line/>").appendTo(item); jQuery("<div/>").text(name).appendTo(body); jQuery("<div secondary/>").text(versionText).appendTo(body); target.append(item); } } // Query Herd for the list of modules jQuery.get("https://modules.ceylon-lang.org/api/1/complete-modules?module=ceylon.", null, success, "text"); }} |
<Теперь очевидно, что использование jQuery для добавления HTML далеко от идеала, поэтому я не могу дождаться, когда кто-нибудь расширит ceylon.html, чтобы разрешить веб-компоненты Polymer!
Теперь мы можем скомпилировать наше приложение для JavaScript:
|
1
|
$ ceylon compile-js |
И скопируйте наш скомпилированный модуль и все его зависимости туда, где приложение Apache Cordova найдет их в www/modules :
|
1
|
$ ceylon copy --with-dependencies --js --out www/modules cordova.demo/1.0.0 |
Вызов модуля Цейлона из приложения Cordova
Поскольку мы собираемся использовать встроенный require.js и подключаться к Ceylon Herd, нам необходимо настроить разрешения Apache Cordova в www/index.html , поэтому найдите эту строку и отредактируйте ее следующим образом:
|
1
2
3
4
5
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' connect-src *"> |
Нам осталось только вызвать нашу функцию Цейлона в www/index.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<script type="text/javascript"> // tell require.js where our Ceylon modules are require.config({ baseUrl:'modules', }); // when the document is ready jQuery(function(){ // load our Ceylon module require(['cordova/demo/1.0.0/cordova.demo-1.0.0'], function(client) { // and call our run method client.run(); });});</script> |
И настройку целевых элементов HTML, в которые мы собираемся добавить каждый загруженный модуль (в том же файле):
|
1
2
3
4
5
|
<body id="app" unresolved> <app-shell class="fit"> <div id="target" role="listbox"></div> </app-shell></body> |
Пробую
И это все, попробуйте в вашем браузере:
|
1
|
$ cordova platform run browser |
Или в эмуляторе Android:
|
1
2
|
$ ANDROID_HOME=.../Android/Sdk cordova platform build android$ ANDROID_HOME=.../Android/Sdk cordova platform run android |
Если у вас есть инструменты разработки для OSX и iOS, попробуйте это на платформе iOS Cordova и дайте мне знать, как это работает 🙂
В будущем мы выиграем от наличия API-интерфейса с безопасным типом данных перед API-интерфейсом Cordova JavaScript, который позволяет получать доступ к собственным мобильным API, таким как камера, GPS, контакты, но даже без него вы уже можете использовать их с помощью dynamic блоков.
| Ссылка: | Ceylon на мобильных устройствах от нашего партнера JCG Гэвина Кинга в блоге команды Ceylon Team . |