осн прог. Цель лабораторной работы Установка и настройка среды программирования adt bundle Задачи лабораторной работы
 Скачать 3.46 Mb.
|
|
Цель лабораторной работы: разработка приложения, демонстрирующего геолокационные возможности. Задачи лабораторной работы: • Разработать приложение, получающее координаты устройства и отслеживающее их изменения. 13.1 Введение В данной работе рассмотрим процесс создания приложения. 13.2 Разработка приложения, получающего координаты устройства и отслеживающего их изменение Создадим приложение. Далее будем править java файл, определяющий класс активности приложения. Внесем в этот класс следующие дополнения: • Нам потребуется экземпляр класса LocationManager, поэтому в методе onCreate() запишем следующую конструкцию: • LocationManager mlocManager = • (LocationManager) getSystemService(Context.LOCATION_SERVICE); экземпляр класса LocationManager, как и большинство системных сервисов, создается с помощью вызова метода getSystemService(). • Укажем, что в приложении необходимо получать обновления координат, сделаем это с помощью вызова метода requestLocationUpdates() класса LocationManager: • mlocManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, • 0, 0, mlocListener); первый параметр метода указывает способ получения координат, для этого используются константы класса LocationManager: GPS_PROVIDER - сообщает, что координаты определяются с помощью GPS; NETWORK_ PROVIDER - сообщает, что координаты определяются с использованием сигналов сотовых вышек и WiFi. В случае, когда необходимо получать координаты и с GPS, и от сотовых вышек необходимо вызвать метод requestLocationUpdates() дважды: один раз первый параметр должен быть равен GPS_PROVIDER, второй раз - NETWORK_ PROVIDER. Второй и третий параметры метода управляют частотой обновлений. Второй определяет минимальное время между извещениями об обновлениях, третий - минимальное изменение расстояния между извещениями об обновлениях. Если оба эти параметра имеют нулевое значение, то извещения об обновлениях появляются настолько часто, насколько это возможно. Последний параметр указывает на слушателя, который получает вызовы при обновлениях координат. В нашем случае слушателем является переменная mlocListener - реализация интерфейса LocationListener. • Теперь необходимо объявить переменную mlocListener: • LocationListener mlocListener = new LocationListener(){ • public void onLocationChanged(Location location) { • tvLat.append(" "+location.getLatitude()); • tvLon.append(" "+location.getLongitude()); • } • public void onStatusChanged(String provider, int status, • Bundle extras) {} • public void onProviderEnabled(String provider) {} • public void onProviderDisabled(String provider) {} • }; Переменная mlocListener инициализируется реализацией интерфейса LocationListener. Этот интерфейс содержит 4 метода, каждый из которых должен быть определен в реализации интерфейса. Нас интересует метод onLocationChanged(), который вызывается каждый раз при изменении показаний GPS датчика, в этом методе всего лишь выполняется вывод полученных координат в информационные поля. • Чтобы разрешить получать обновления координат с помощью сигналов от сотовых вышек (NETWORK_PROVIDER) или с GPS датчика (GPS_PROVIDER), необходимо в файле манифеста добавить строку: • (для работы с сигналами сотовых вышек) или (для работы GPS датчиком). Без этих полномочий приложение "сломается" во время выполнения, когда попробует запросить обновление координат. Если в приложении в качестве источника координат используются и NETWORK_PROVIDER, и GPS_PROVIDER, в манифесте достаточно запросить только полномочия на ACESS_FINE_LOCATION. Тогда как ACCESS_COARSE_LOCATION позволяет работать только с NETWORK_PROVIDER. В листинге 13.1 представлен код приложения, позволяющего получать координаты устройства и отслеживать их изменения, используя GPS приемник. После создания приложения, разумеется, необходимо протестировать его работу. Проще всего это сделать, используя реальное устройство под управлением Android, но если устройства под рукой нет, можно использовать виртуальное устройство. Однако при этом необходимо решить вопрос, каким образом имитировать передачу данных о местоположении на эмулятор. Проще всего воспользоваться для этого DDMS. В Eclipse откройте компоновку (Perspective) DDMS, в этой компоновке выберите вкладку Emulator Control . С помощью инструмента DDMS, можно имитировать обновление данных о местоположении несколькими способами: • вручную передать значения широты и долготы на виртуальное устройство; • использовать GPX файл, описывающий маршрут для считывания эмулятором; • использовать KML файл, описывающий отдельные метки местности для последовательной передачи на виртуальное устройство. 13.3 Заключение В этой части работы рассмотрели вопросы разработки приложений, способных получать координаты устройства и отслеживать их изменения. Разработанное приложение реагирует на изменения координат устройства и выдает новые координаты в соответствующие информационные поля. package com.example.lab5_4_geolocation; import android.location.Location; import android.location.LocationListener; import android.location.LocationManager; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.widget.TextView; public class MainActivity extends Activity { TextView tvOut; TextView tvLon; TextView tvLat; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tvOut = (TextView)findViewById(R.id.textView1); tvLon = (TextView)findViewById(R.id.longitude); tvLat = (TextView)findViewById(R.id.latitude); // Получаем сервис LocationManager mlocManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE); LocationListener mlocListener = new LocationListener(){ public void onLocationChanged(Location location) { //Called when a new location is found by the network location provider. tvLat.append(" "+location.getLatitude()); tvLon.append(" "+location.getLongitude()); } public void onStatusChanged(String provider, int status, Bundle extras) {} public void onProviderEnabled(String provider) {} public void onProviderDisabled(String provider) {} }; //Подписываемся на изменения в показаниях датчика mlocManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, mlocListener); // Если gps включен, то ... , иначе вывести "GPS is not turned on..." if (mlocManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) { tvOut.setText("GPS is turned on..."); } else { tvOut.setText("GPS is not turned on..."); } } } Листинг 13.1. Получение геолокационных данных Внимание! Если Вы увидите ошибку на нашем сайте, выделите её и нажмите Ctrl+Enter. © Национальный Открытый Университет "ИНТУИТ", 2016 | www.intuit.ru Самостоятельная работа 9. Использование сторонних библиотек Цель лабораторной работы: Научиться писать приложения с использованием сторонних библиотек Задачи лабораторной работы: • Научиться подключать библиотеки • Научиться использовать библиотеки в своих приложениях 15.1 Использование библиотеки для построения графиков AChartEngine Рассмотрим пример подключения библиотеки AChartEngine, предназначенной для построения графиков. На сайте разработчика ( http://code.google.com/p/achartengine ) помимо самой библиотеки можно найти подробную документацию, оформленную в стиле Javadoc pages, примеры использования библиотеки, а также ее исходный код. В разделе Downloads также можно скачать демонстрационные примеры использования библиотеки. 1. Создайте проект Graphics. 2. Чтобы подключить библиотеку, нужно скачать ее с сайта разработчика, потом просто перетащить из проводника в папку libs вашего проекта в Eclipce. 3. Теперь нужно добавить строку 4. Теперь перейдем к файлу MainActivity.java. Создайте и инициализируйте три массива (в методе onCreate()). В первом будут содержаться цвета, во втором - подписи, в третьем - значения. 5. int[] values = new int[] { 25,25,25,25 }; 6. String[] bars = new String[] {"Bananas", "Kiwi", "Oranges", "Cream"}; 7. int[] colors = new int[] { Color.YELLOW, Color.GREEN, Color.RED, Color.WHITE }; 8. Создайте объект CategorySeries и загрузите в него массивы строк с подписями и значения. При построении диаграмм будут использоваться именно эти данные. 9. CategorySeries series = new CategorySeries("Pie Chart"); 10. Создайтеобъект DefaultRenderer. CategorySeries и DefaultRenderer определенывбиблиотеке AChartEngine. 11. DefaultRenderer dr = new DefaultRenderer(); 12. Для каждого цвета в диаграмме создайте SimpleSeriesRenderer и установите его в этот цвет. Затем каждый SimpleSeriesRenderer добавьте в DefaultRenderer. Таким образом, имеем один Render на каждый Series. К слову, Render может включать другой Render, таким образом можно создавать подкатегории. 13. for (int v=0; v<4; v++){ 14. series.add(bars[v], values[v]); 15. SimpleSeriesRenderer r = new SimpleSeriesRenderer(); 16. r.setColor(colors[v]); 17. dr.addSeriesRenderer(r); 18. } 19. Создайте объект PieChartIntent и передайте ему CategorySeries и DefaultRenderer. 20. return ChartFactory.getPieChartIntent(this, series, dr, "Fruit Salad"); С помощью PieChartIntent можно показать диаграмму, как отдельную деятельность. 21. С помощью методов библиотеки можно изменить размер и цвет подписей, включить зум: 22. dr.setZoomEnabled(true); 23. dr.setChartTitleTextSize(20); 24. dr.setLegendTextSize(TEXT_SIZE); 25. dr.setChartTitleTextSize(20); 26. dr.setZoomButtonsVisible(false); 27. dr.setLabelsTextSize(TEXT_SIZE); 28. dr.setLegendTextSize(TEXT_SIZE); 29. dr.setLabelsColor(Color.BLACK); 30. Для удобства можно создать дополнительную переменную, в которой будет храниться размер текста. 31. private static final int TEXT_SIZE = 40; 32. 33. Intent intent = buildIntent(); 34. startActivity(intent); 35. } 36. 37. public Intent buildIntent() { 38. int[] values = new int[] { 25,25,25,25 }; 39. 40. 41. 42. dr.addSeriesRenderer(r); 43. } 44. dr.setChartTitleTextSize(20); 45. 46. dr.setLabelsColor(Color.BLACK); 47. return ChartFactory.getPieChartIntent( 48. this, series, dr, "Fruit Salad"); 49. } Рис. 15.1. Приложение, запущенное на эмуляторе увеличить изображение Рис. 15.2. Приложение, запущенное на устройстве package com.mypackage.graphics; import org.achartengine.ChartFactory; import org.achartengine.chart.PieChart; import org.achartengine.model.CategorySeries; import org.achartengine.renderer.DefaultRenderer; import org.achartengine.renderer.SimpleSeriesRenderer; import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { private static final int TEXT_SIZE = 40; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Intent intent = buildIntent(); startActivity(intent); } public Intent buildIntent() { int[] values = new int[] { 25,25,25,25 }; String[] bars = new String[] {"Bananas", "Kiwi", "Oranges", "Cream"}; int[] colors = new int[] { Color.YELLOW, Color.GREEN, Color.RED, Color.WHITE }; CategorySeries series = new CategorySeries("Pie Chart"); DefaultRenderer dr = new DefaultRenderer(); for (int v=0; v<4; v++){ series.add(bars[v], values[v]); SimpleSeriesRenderer r = new SimpleSeriesRenderer(); r.setColor(colors[v]); dr.addSeriesRenderer(r); } dr.setZoomButtonsVisible(true); dr.setZoomEnabled(true); dr.setChartTitleTextSize(20); dr.setLegendTextSize(TEXT_SIZE); dr.setChartTitleTextSize(20); dr.setZoomButtonsVisible(false); dr.setLabelsTextSize(TEXT_SIZE); dr.setLegendTextSize(TEXT_SIZE); dr.setLabelsColor(Color.BLACK); return ChartFactory.getPieChartIntent(this, series, dr, "Fruit Salad"); } } Листинг 15.1. Код MainActivity.java Внимание! Если Вы увидите ошибку на нашем сайте, выделите её и нажмите Ctrl+Enter. © Национальный Открытый Университет "ИНТУИТ", 2016 | www.intuit.ru Самостоятельная работа 10. Работа с базами данных в Android Цель лабораторной работы: Разработка Android приложения, демонстрирующего возможности работы с базой данных SQLite. Задачи лабораторной работы: • создать приложение; • настроить интерфейс приложения; • реализовать логику приложения. 17.1 Введение Для достижения цели, поставленной в лабораторной работе, сформулируем требования к разрабатываемому приложению. Приложение демонстрирует возможности работы с базой данных, предполагает реализацию следующих действий: • добавление записей в базу данных; • считывание строк и вывод на экран; • удаление базы данных. 17.2 Создание приложения Создадим новое Android приложение: Project Name: Lab7_1-SQLite; Package Name: com.example.lab7_1_sqlite; Activity Files: SQLiteActivity.java, activity_sqlite.xml. 17.3 Настройка интерфейса Разрабатываемое приложение является учебно-тренировочным, предполагает демонстрацию возможностей работы с базой данных: создание, добавление записей, просмотр записей, удаление базы данных. Поэтому интерфейс будет максимально простым: нам понадобятся два поля для ввода данных (в таблице базы данных два столбца), поле для вывода записей базы данных и три кнопки, по одной на каждое действие: добавление записей, вывод записей, удаление базы. В нашем случае активность приложения имеет вид, показанный на рис. 17.1 . Разумеется, не обязательно в точности воспроизводить предложенный внешний вид приложения, а на самом деле даже имеет смысл настроить интерфейс по своему усмотрению, чтобы потренировать навыки работы с компонентами и настройками пользовательского интерфейса. Рис. 17.1. Внешний вид приложения для демонстрации основных возможностей базы данных SQLIte в системе Android 17.4 Реализация логики Для создания и обновления базы данных, Android предоставляет класс SQLiteOpenHelper. Для работы с этим классом в приложении необходимо создать класс-наследник, в котором обязательно реализовать методы: onCreate() и onUpgarde(). Создадим новый класс, назовем его, например, MyOpenHelper: public class MyOpenHelper extends SQLiteOpenHelper{...} Реализуем метод onCreate(): public void onCreate(SQLiteDatabase DB) { String query="create table " + TABLE_NAME + " (_id integer primary key autoincrement, " + field_name_1 + " TEXT, " + field_name_2 + " TEXT)"; DB.execSQL(query); } Параметром метода onCreate() является объект класса SQLiteDatabase, позволяющего работать с базой данных напрямую. В строке query формируется запрос на создание таблицы, где TABLE_NAME - константа, содержащая имя таблицы, FIELD_NAME_1 - константа, содержащая имя первого столбца, FIELD_NAME_2 - константа, содержащая имя второго столбца. Все эти константы объявлены в классе MyOpenHelper: public String TABLE_NAME="first_table"; public String FIELD_NAME_1="first_field"; public String FIELD_NAME_2="second_field"; Метод execSQL() класса SQLiteDatabase запускает запрос на выполнение. Еще необходимо реализовать метод onUpgrade(), в нашем случае он ничего существенного не делает, но необходимо прописать реализацию этого метода даже, если это будет пустая реализация: public void onUpgrade(SQLiteDatabase DB, int oldVersion, int newVersion) { Log.d("myLogs","| Upgrade |"+DB.toString()); } Система потребует создать конструктор класса MyOpenHelper, т. к. для его предка конструктор без параметров не определен, поэтому добавим в код класса следующие строчки: MyOpenHelper(Context ct, String nm, SQLiteDatabase.CursorFactory cf, int vs){ super(ct, nm, cf, vs); } Полученный конструктор не делает ничего особенного, просто вызывает конструктор предка, т. е. класса SQLiteOpenHelper. Мы описали создание вспомогательного класса, необходимого нам для создания и открытия базы данных, полный код этого класса представлен в листинге 17.1 Пришло время описать реализацию заявленных функций приложения. Далее будем работать с классом активности, описание которого находится в файле SQLiteActivity.java. Выполним необходимую подготовку, зададим переменные, как поля класса активности: EditText field1, field2, result; MyOpenHelper myHelper = null; SQLiteDatabase DB; Вторая строка определяет объект класса MyOpenHelper, а третья - объект класса SQLiteDatabase, далее в программе все взаимодействия с базой данных после ее создания будут выполняться через этот объект. Далее в методе onCreate() активности создадим экземпляр класса MyOpenHelper, для создания, открытия и возможно управления базой данных, имя которой myDB: myHelper=new MyOpenHelper(this, "myDB", null, 1); Для работы приложения необходимо задать действия, которые будут выполняться при нажатии на кнопки, для этого настроим свойство On Click кнопок: • для кнопки Ввод данных свойству On Click присвоим значение insertIntoDatabase, при нажатии на кнопку будет вызываться метод с этим именем, реализованный в классе активности; • для кнопки Вывод данных свойству On Click присвоим значение readDatabase, при нажатии на кнопку будет вызываться метод с этим именем, реализованный в классе активности; • для кнопки Delete свойству On Click присвоим значение deleteDatabase, при нажатии на кнопку будет вызываться метод с этим именем, реализованный в классе активности. Рассмотрим реализацию метода insertIntoDatabase(). В этом методе после проверки того, что в поля введены значения, получаем экземпляр базы данных с разрешением на запись: DB = myHelper.getWritableDatabase(); Далее формируем запись, добавляемую в таблицу: ContentValues CV = new ContentValues() CV.put(myHelper.FIELD_NAME_1,field1.getText().toString()); CV.put(myHelper.FIELD_NAME_2,field2.getText().toString()); После этого добавляем запись в таблицу и закрываем экземпляр базы данных: DB.insert(myHelper.TABLE_NAME,null,CV); DB.close(); Полный код рассмотренного метода можно найти в листинге 17.2 Рассмотрим реализацию метода readDatabase(). В этом методе сначала получаем экземпляр базы данных с разрешением на чтение: DB = myHelper.getReadableDatabase(); Далее формируем и выполняем запрос к базе данных на получение всех значений из базы, результат запроса помещается в объект класса Cursor: String columns[]={"_id",myHelper.FIELD_NAME_1, myHelper.FIELD_NAME_2}; Cursor cursor=DB.query(myHelper.TABLE_NAME, columns, null, null, null, null, "_id"); После этого выведем содержимое класса Cursor в поле на форме, предназначенное для вывода информации: if(cursor!=null){ cursor.moveToFirst(); if (cursor.moveToFirst()) { do { result.setText(result.getText().toString()+"\n" +cursor.getString(0)+") "+cursor.getString(1)+", "+cursor.getString(2)); } while (cursor.moveToNext()); } } В этом кусочке кода основное внимание можно обратить на работу с классом курсор, очень похоже на работу со списками. Начиная с начала списка получаем значения элементов и передвигаемся на следующий элемент, пока не достигнем конца. После всех манипуляций с базой данных необходимо ее закрыть: DB.close(); Полный код рассмотренного метода можно найти в листинге 17.2 Рассмотрим реализацию метода deleteDatabase. В этом методе сначала получаем экземпляр базы данных с разрешением на запись: DB = myHelper.getWritableDatabase(); Удалим таблицу, с помощью метода delete() класса SQLiteDatabase: DB.delete(myHelper.TABLE_NAME, null, null); После всего закроем базу: DB.close(); Полный код рассмотренного метода можно найти в листинге 17.2 17.5 Заключение В работе на примере простого приложения рассмотрели выполнение основных операций с базами данных: создание, добавление записей, просмотр всех записей таблицы, удаление. Для выполнения выборок из таблицы, необходимо познакомиться с основами построения запросов в SQLite и сформировать запрос для метода query() класса SQLiteDatabase. package com.example.lab7_1_sqlite; import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.database.sqlite.SQLiteOpenHelper; import android.util.Log; public class MyOpenHelper extends SQLiteOpenHelper { public String TABLE_NAME="first_table"; public String FIELD_NAME_1="first_field"; public String FIELD_NAME_2="second_field"; MyOpenHelper(Context ct, String nm, SQLiteDatabase.CursorFactory cf, int vs){ super(ct, nm, cf, vs); } @Override public void onUpgrade(SQLiteDatabase DB, int oldVersion, int newVersion) { Log.d("myLogs","| Upgrade |"+DB.toString()); } @Override public void onCreate(SQLiteDatabase DB) { Log.d("myLogs","| Create |"+DB.toString()); String query="create table " + TABLE_NAME + " ( _id integer primary key autoincrement, " + FIELD_NAME_1 + " TEXT, " + FIELD_NAME_2 + " TEXT)"; DB.execSQL(query); } } Листинг 17.1. Класс MyOpenHelper package com.example.lab7_1_sqlite; import android.os.Bundle; import android.app.Activity; import android.content.ContentValues; import android.database.Cursor; import android.database.sqlite.SQLiteDatabase; import android.util.Log; import android.view.View; import android.widget.EditText; public class SQLiteActivity extends Activity { MyOpenHelper myHelper = null; EditText field1, field2, result; SQLiteDatabase DB; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sqlite); myHelper=new MyOpenHelper(this, "myDB", null, 1); field1=(EditText)findViewById(R.id.field1); field2=(EditText)findViewById(R.id.field2); result=(EditText)findViewById(R.id.dbResult); } public void insertIntoDatabase(View v){ if(!field1.getText().toString().equals("") && !field2.getText().toString().equals("")){ Log.d("myLogs","Insert INTO DB ("+field1.getText().toString()+ "," + field2.getText().toString()+")"); DB = myHelper.getWritableDatabase(); String query="create table if not exist " + myHelper.TABLE_NAME + " (_id integer primary key autoincrement, " + myHelper.FIELD_NAME_1 + " TEXT, " + myHelper.FIELD_NAME_2 + " TEXT)"; ContentValues CV = new ContentValues(); CV.put(myHelper.FIELD_NAME_1,field1.getText().toString()); CV.put(myHelper.FIELD_NAME_2,field2.getText().toString()); DB.insert(myHelper.TABLE_NAME,null,CV); DB.close(); field1.setText(""); field2.setText(""); } } public void readDatabase(View v){ result.setText(""); Log.d("myLogs","READ FROM DB"); DB = myHelper.getReadableDatabase(); String columns[]={"_id",myHelper.FIELD_NAME_1, myHelper.FIELD_NAME_2}; Cursor cursor=DB.query(myHelper.TABLE_NAME, columns, null, null, null, null, "_id"); if(cursor!=null){ cursor.moveToFirst(); if (cursor.moveToFirst()) { do { result.setText(result.getText().toString()+ "\n" + cursor.getString(0) + ") " + cursor.getString(1) + "," + cursor.getString(2)); } while (cursor.moveToNext()); } } DB.close(); } public void deleteDatabase(View v){ Log.d("myLogs","Delete Database"); DB = myHelper.getWritableDatabase(); DB.delete(myHelper.TABLE_NAME, null, null); DB.close(); } } Листинг 17.2. Класс SQLiteActivity Внимание! Если Вы увидите ошибку на нашем сайте, выделите её и нажмите Ctrl+Enter. © Национальный Открытый Университет "ИНТУИТ", 2016 | www.intuit.ru Самостоятельная работа 11. Установка и настройка среды программирования Intel XDK. Создание первых приложений Цель лабораторной работы: Установка и настройка среды Intel XDK и создание простейших приложений на основе пустого шаблона и встроенных примеров. Задачи лабораторной работы: • Установить и настроить среду программирования Intel XDK. • Создать первое приложение Hello, world!. • Создать приложение "Часы". • Рассмотреть работу приложения "Orientation" из встроенных примеров. • Научиться запускать приложение на эмуляторе мобильного устройства. • Научиться осуществлять тестирование приложения на мобильном устройстве, собирать и компилировать apk-файлы. 19.1 Введение Лабораторная работа посвящена различным аспектам разработки мобильных приложений для ОС Android с использованием среды Intel XDK. В ней содержатся указания по установке и настройке среды, созданию приложений как "с нуля", так и из готовых шаблонов, запуску приложений в эмуляторе и на мобильных устройствах. Имеются задания для самостоятельной работы. 19.2 Установка и настройка среды Скачать среду можно на сайте разработчика http://xdk-software.intel.com/ ( рис. 19.1 ). Чтобы приступить к загрузке, достаточно выбрать "Download Intel XDK NEW". Вы будете переведены на страницу скачивания дистрибутива для Вашей операционной системы, например, Intel® XDK download for Microsoft Windows, где через 5 секунд начнется загрузка. увеличить изображение Рис. 19.1. Сайт разработчика Установка среды разработки не представляет собой ничего сложного - типичный набор действий для установки приложения ( рис. 19.2 ). После завершения установки инсталлятор предложит вам две гиперссылки на сайты, где можно найти документацию по среде и задать свои вопросы по работе с Intel XDK ( рис. 19.3 ). увеличить изображение Рис. 19.2. Установка среды увеличить изображение Рис. 19.3. Поддержка пользователей Итак, среда Intel XDK установлена, ярлык на нее добавлен в главное меню операционной системы ( рис. 19.4 ). При запуске приложение предложит авторизоваться ( рис. 19.5 ). Если учетной записи Intel XDK еще нет, среда предложит пройти стандартную процедуру регистрации ( рис. 19.6 ). При следующем запуске окна авторизации достаточно будет выбрать пункт "Keep me logged in on this computer " для автоматической авторизации на данном компьютере ( рис. 19.4 ). Рис. 19.4. Intel XDK в меню пуск WIN7 увеличить изображение Рис. 19.5. Авторизация увеличить изображение Рис. 19.6. Регистрация После авторизации мы увидим основное окно среды, проекты, над которыми уже велась работа, с указанием даты создания и модификации, а также места их расположения, и пункты меню для работы в панели управления ( рис. 19.7 ). увеличить изображение Рис. 19.7. Главное окно среды 19.3 Создание проекта на основе пустого шаблона Выбрав пункт "New Project", мы попадаем в окно для выбора вида создаваемого приложения. Здесь мы можем создать приложения "с чистого листа": стартового шаблона HTML- файла и сценария Javascript. В этом случае достаточно лишь указать имя создаваемого проекта и директорию для его хранения ( рис. 19.8 ). Система дает советы по работе с создаваемым приложением ( рис. 19.9 ). увеличить изображение Рис. 19.8. Создание нового проекта "с чистого листа" увеличить изображение Рис. 19.9. Подсказки среды После этого мы попадаем во вкладку "Develop", где можем видеть заготовку нашего будущего приложения ( рис. 19.10 ). увеличить изображение Рис. 19.10. Код заготовки будущего проекта Рассмотрим этот код подробнее. Это практически стандартная web-страница с подключенным скриптом intelxdk.js, отвечающим за основную функциональность приложения. Для того чтобы web-страница функционировала как мобильное приложение, по умолчанию задан ряд настроек. Так, сделаны мета-определения для корректной работы в браузере телефона: initial-scale=1.0"> Данный код определяет ширину страницы (в данном случае приложения), равной ширине устройства, и задает начальный масштаб. Кроме того, поставлен запрет на любое масштабирование - как начальное при загрузке, так и пользовательское - уже после загрузки (maximum-scale=1.0, minimum-scale=1.0, user- scalable=0). С помощью свойств каскадных таблиц стилей реализован запрет на выделение любых компонентов, за исключением элементов ввода и редактирования текстовых полей: -webkit-user-select:none; и -webkit-user-select:text; За запуск всех функциональных возможностей, реализованных в скрипте intelxdk.js, отвечают строки, реализованные во втором скрипте, явно прописанном в коде приложения: /* This code is used to run as soon as Intel activates */ var onDeviceReady=function(){ //hide splash screen intel.xdk.device.hideSplashScreen(); }; document.addEventListener("intel.xdk.device.ready",onDeviceReady,false); Программирование на JavaScript - программирование каких-либо действий, основанных на событиях. Модель событий DOM2, реализованная в виде иерархической структуры объектов документа HTML, позволяет реализовать стандартные способы создания, захвата, обработки и отмены событий в древовидной структуре типа иерархии. События начинают жизненный цикл на вершине иерархии (на уровне Document) и движутся вниз через вложенные объекты к цели. Этот процесс называется фазой захвата. За это в DOM2 отвечает метод addEventListener с тремя аргументами: строковое название события, у нас это intel.xdk.device.ready, обработчик события - onDeviceReady, и логический параметр - фаза захвата. Если значение фазы равно true - то обработчик сработает по мере перемещения вглубь по иерархии, если false - на обратном "пути". Как только Javascript будет загружен, событие intel.xdk.device.ready будет обработано. Итак, заготовка приложения есть, можно приступать к разработке пользовательских приложений. 19.4 Разработка первого приложения В основе мобильного приложения, разрабатываемого с использованием Intel XDK, как мы уже выяснили ранее, обычная web-страница с таблицей стилей и скриптами javascript для реализации реакций на события. А значит, все наши знания по HTML5, CSS и javascript вполне применимы. Начнем с классического "Hello world!". Для этого вполне достаточно прописать в теле страницы, в данном случае приложения, например, абзац текста ( рис. 19.11 ): Hello world! увеличить изображение Рис. 19.11. Код приложения "Hello world!" Проверить полученный результат можно с помощью вкладки "Emulate", где среда позволяет сымитировать работу на самых популярных устройствах ( рис. 19.12 ). увеличить изображение Рис. 19.12. Простейшее приложение на эмуляторе Всем, кто знаком с тройкой HTML+CSS+Javascript, открыты огромные просторы для творчества! Например, почему бы не создать свои "авторские" часы? Отображаться время будет с помощью заголовка 1 уровня, которому мы зададим размер, цвет и выравнивание по центру: Стиль прописан в таблице стилей #times {color:red;font-size:50pt;text-align:center;} За "автоматику" часов будет отвечать две функции Javascript. Функция startTime получает текущее системное время и задает его элементу с идентификатором times. function startTime(){ var d=new Date(); var h=d.getHours(); var m=d.getMinutes(); var s=d.getSeconds(); m=FullTime(m); s=FullTime(s); document.getElementById('times').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500); } |