LungoJS

Наткнулась на ссылку на LungoJS - фреймворк для мобильных приложений, использующий HTML5, CSS3 и JavaScript: http://www.lungojs.com/

Ссылки

---

Захотелось попробовать, но вдруг поняла, что не знаю с какого края начать, потому как "последняя встреча с android'ом была давно, и лёгкая забывчивость дает о себе знать".

Хорошая статья о структуре типового android-проекта в Eclipse: http://www.androidteach.com/2013/02/android_8.html

И очень хорошее руководство по WebView и отображению html: http://developer.android.com/guide/webapps/webview.html.

Задача

---

Итак, давно было желание написать "разучивалку текстов песен": список песен, при выборе появляется текст и проигрывается минусовка. На карте памяти будет папка LyricsLearner, содержащая 2 подкаталога: text и music. Текст и музыка для одной песни будут носить одно имя, но разные расширения. Меню приложения будет показывать имена песен, то есть имена файлов из папки text. Если существует соответствующий файл в папке music, то будем показывать иконку, кликнув по которой можно воспроизвести музыку.

Приступим

---

Открываем Eclipse, если еще не установлен - устанавливаем с marketplace'а Android Development Tools. Создаем Android Project.

Создавая проект, мы создали одну Activity (отдельное окно с элементами пользовательского интерфейса): MainActivity.java.

@Override
public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
}

Данная Activity использует layout res->layout->activity_main.xml. Посмотрим на него:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</RelativeLayout>

Если бы мы хотели Hello, World!, то добавили бы в layout компонент TextView - текстовый компонент. Однако, если мы хотим использовать LungoJS - нам нужен компонент, умеющий отображать html - это WebView.

Изменим MainActivity и layout: наш WebView должен узнать, что он должен отображать, должен ли он выполнять JS и так далее.
MainActivity:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // set activity_main.xml as layout
    setContentView(R.layout.activity_main);
    WebView webView = (WebView) findViewById(R.id.webView);
    // allow JavaScript
    webView.getSettings().setJavaScriptEnabled(true);
    // show index.html
    webView.loadUrl("file:///android_asset/index.html");
}

activity_main.xml (layout нам больше не нужен, все свободное место будет занимать WebView):

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@+id/webView"
  tools:context=".MainActivity" />

Загружаем Lungo с сайта, копируем в наш проект в папку assets: папку app, папку lungo.js и index.html. В файле app ->app.js раскомментируем init и запустим наше приложение. Вуаля, наш прототип готов.

Имена и namespace

---

lng есть внутри namespace'ов папки app, а вот снаружи есть только LUNGO:

var App = (function(lng, undefined) {
    // lng is defined (look at function args)
})(LUNGO);
// lng is not defined, but you can use LUNGO: var mobile = LUNGO.Core.isMobile();

Продолжим

---

TODO: продолжение следует