Текст книги "Разработка Android-приложений в деталях"

При соединении с сервисом Google Drive происходит извлечение информации из базы данных и запись ее в файл каталога Google Drive.

Размер базы данных и периодичность сбора информации о местоположении устанавливаются в Options меню класса MainActivity.

Панель навигации класса MainActivity позволяет запустить трекинг, остановить трекинг и очистить базу данных.

Вызов метода finish () в методе onStop () предотвращает возврат к уже открытому интерфейсу приложения и заставляет авторизироваться заново для доступа к настройкам и управлению приложением.

Для просмотра собранного и сохраненного трекинга создадим отдельное приложение.

Файл манифеста этого приложения:

?xml version=«1.0» encoding=«utf-8»? >

<manifest xmlns: android="http://schemas.android.com/apk/res/android"

package="com.babytrackingviewer»>

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION» />

<uses-permission android:name="android.permission.INTERNET» />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE» />

<application

android: allowBackup=«true»

android: icon="@mipmap/ic_launcher»

android: label="@string/app_name»

android: supportsRtl=«true»

android: theme="@style/AppTheme»>

<! —

The API key for Google Maps-based APIs is defined as a string resource.

(See the file «res/values/google_maps_api. xml»).

Note that the API key is linked to the encryption key used to sign the APK.

You need a different API key for each encryption key, including the release key that is used to

sign the APK for publishing.

You can define the keys for the debug and release targets in src/debug/ and src/release/.

– >

<meta-data

android:name="com.google.android.geo. API_KEY»

android: value="@string/google_maps_key» />

<activity

android:name=".MapsActivity»

android: label="@string/title_activity_maps»>

<intent-filter>

<action android:name="android.intent.action.MAIN» />

<category android:name="android.intent.category.LAUNCHER» />

</intent-filter>

</activity>

<activity

android:name="com.google.android.gms.ads.AdActivity»

android: configChanges=«keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize»

android:theme="@android:style/Theme.Translucent» />

</application>

</manifest>

Приложение начинается с активности, которая загружает Google карту:

import android.content.Context;

import android.content.Intent;

import android.content.IntentSender;

import android. os. Bundle;

import android.support.v4.app.FragmentActivity;

import com.google.android.gms.ads.AdRequest;

import com.google.android.gms.ads.AdView;

import com.google.android.gms. appindexing. AppIndex;

import com.google.android.gms.common.ConnectionResult;

import com.google.android.gms.common. GooglePlayServicesUtil;

import com.google.android.gms.common. api. GoogleApiClient;

import com.google.android.gms.common.api.ResultCallback;

import com.google.android.gms. drive. Drive;

import com.google.android.gms. drive. DriveApi;

import com.google.android.gms. drive. DriveContents;

import com.google.android.gms. drive. DriveFile;

import com.google.android.gms. drive. DriveFolder;

import com.google.android.gms. drive. DriveId;

import com.google.android.gms. drive. OpenFileActivityBuilder;

import com.google.android.gms.maps.CameraUpdateFactory;

import com.google.android.gms.maps. GoogleMap;

import com.google.android.gms.maps. OnMapReadyCallback;

import com.google.android.gms.maps.SupportMapFragment;

import com.google.android.gms.maps.model.LatLng;

import com.google.android.gms.maps.model.MarkerOptions;

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

import java.util.ArrayList;

import java.util.List;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback, GoogleApiClient.ConnectionCallbacks, GoogleApiClient. OnConnectionFailedListener {

private GoogleMap mMap;

private GoogleApiClient mGoogleDriveApiClient;

private static final int RESOLVE_CONNECTION_REQUEST_CODE=1;

private static final int REQUEST_CODE_SELECT = 2;

private Context context;

private List <LocationDB> locations;

@Override

protected void onCreate (Bundle savedInstanceState) {

super. onCreate (savedInstanceState);

setContentView(R.layout.activity_maps);

context=this;

locations=new ArrayList <LocationDB> ();

// Obtain the SupportMapFragment and get notified when the map is ready to be used.

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager ()

.findFragmentById(R.id.map);

mapFragment.getMapAsync (this);

AdView mAdView = (AdView) findViewById(R.id.adViewBan);

AdRequest adRequest = new AdRequest. Builder ().build ();

mAdView. loadAd (adRequest);

mGoogleDriveApiClient = new GoogleApiClient. Builder (this)

.addApi (Drive. API)

.addScope(Drive.SCOPE_FILE)

.addConnectionCallbacks (this)

.addOnConnectionFailedListener (this)

.addApi (AppIndex. API).build ();

mGoogleDriveApiClient.connect ();

}

/**

* Manipulates the map once available.

* This callback is triggered when the map is ready to be used.

* This is where we can add markers or lines, add listeners or move the camera. In this case,

* we just add a marker near Sydney, Australia.

* If Google Play services is not installed on the device, the user will be prompted to install

* it inside the SupportMapFragment. This method will only be triggered once the user has

* installed Google Play services and returned to the app.

*/

@Override

public void onMapReady (GoogleMap googleMap) {

mMap = googleMap;

}

@Override

public void onConnected (Bundle bundle) {

IntentSender intentSender = Drive. DriveApi

.newOpenFileActivityBuilder ()

.setMimeType (new String [] {DriveFolder. MIME_TYPE, «text/plain»})

.build (mGoogleDriveApiClient);

try {

startIntentSenderForResult (

intentSender, REQUEST_CODE_SELECT, null, 0, 0, 0);

} catch (IntentSender.SendIntentException e) {

}

}

@Override

public void onConnectionSuspended (int i) {

}

@Override

public void onConnectionFailed (ConnectionResult connectionResult) {

if (connectionResult. hasResolution ()) {

try {

connectionResult.startResolutionForResult (this, RESOLVE_CONNECTION_REQUEST_CODE);

} catch (IntentSender.SendIntentException e) {

}

} else {

GooglePlayServicesUtil.getErrorDialog(connectionResult.getErrorCode (), this, 0).show ();

}

}

@Override

protected void onActivityResult (final int requestCode, final int resultCode, final Intent data) {

switch (requestCode) {

case RESOLVE_CONNECTION_REQUEST_CODE:

if (resultCode == RESULT_OK) {

mGoogleDriveApiClient.connect ();

}

break;

case REQUEST_CODE_SELECT:

if (resultCode == RESULT_OK) {

DriveId driveId = (DriveId) data.getParcelableExtra (

OpenFileActivityBuilder. EXTRA_RESPONSE_DRIVE_ID);

DriveFile selectedFile = Drive.DriveApi.getFile (mGoogleDriveApiClient, driveId);

selectedFile. open (mGoogleDriveApiClient, DriveFile.MODE_READ_ONLY, null)

.setResultCallback (new ResultCallback <DriveApi. DriveContentsResult> () {

@Override

public void onResult (DriveApi. DriveContentsResult result) {

if (!result.getStatus().isSuccess ()) {

return;

}

DriveContents contents = result.getDriveContents ();

BufferedReader reader = new BufferedReader (new InputStreamReader(contents.getInputStream ()));

StringBuilder builder = new StringBuilder ();

String line;

try {

while ((line = reader.readLine ())!= null) {

String [] tokens = line. split (»,»);

LocationDB location=new LocationDB ();

location. date=tokens [0];

location.latitude=Double.parseDouble (tokens [1]);

location.longitude=Double.parseDouble (tokens [2]);

locations.add (location);

}

reader.close ();

} catch (IOException e) {

e.printStackTrace ();

}

mMap.clear ();

for (LocationDB location: locations) {

LatLng pos = new LatLng(location.latitude, location. longitude);

mMap.addMarker (new MarkerOptions ().position (pos).title (location. date));

mMap.moveCamera(CameraUpdateFactory.newLatLng (pos));

}

}

});

}

break;

}

}

@Override

protected void onStop () {

super. onStop ();

if (mGoogleDriveApiClient!= null) {

mGoogleDriveApiClient. disconnect ();

}

}

}

Файл компоновки активности:

<RelativeLayout xmlns: android="http://schemas.android.com/apk/res/android"

xmlns: tools="http://schemas.android.com/tools"

android: layout_width=«wrap_content»

xmlns: ads="http://schemas.android.com/apk/res-auto"

android: layout_height=«wrap_content»

tools:context=".MapsActivity»>

<com.google.android.gms.ads.AdView

android: id="@+id/adViewBan»

android: layout_width=«wrap_content»

android: layout_height=«wrap_content»

ads: adSize=«BANNER»

ads: adUnitId="@string/banner_ad_unit_id»

android: layout_alignParentTop=«true»

android: layout_centerHorizontal=«true»>

</com.google.android.gms.ads.AdView>

<RelativeLayout

android: layout_width=«wrap_content»

android: layout_height=«wrap_content»

android: layout_below="@+id/adViewBan»

>

<fragment xmlns: android="http://schemas.android.com/apk/res/android"

xmlns: map="http://schemas.android.com/apk/res-auto"

xmlns: tools="http://schemas.android.com/tools"

android: id="@+id/map»

android:name="com.google.android.gms.maps.SupportMapFragment»

android: layout_width=«match_parent»

android: layout_height=«match_parent»

tools:context="com.tmsoftstudio.babytrackingviewer.MapsActivity» />

</RelativeLayout>

</RelativeLayout>

Активность приложения создает и включает объект GoogleApiClient, обеспечивающий доступ к сервису Google Drive.

После соединения с сервисом Google Drive открыватся диалоговое окно, предлагающее выбрать файл каталога Google Drive, содержащий информацию о местоположении для отображения на Google карте.

После выбора файла, информация из него извлекается и делится на дату, долготу и широту. Далее информация о местоположении добавляется на Google карту в виде маркеров.

Для того чтобы готовое приложение отображало Google карты, в Google консоле нужно создать Android ключ с указанием пакета приложения и SHA-1 certificate fingerprint сертификата готового приложения.

Для получения SHA-1 certificate fingerprint можно воспользоваться командной строкой:

C:Usersuser> cd C:Program FilesJavajdk1.8.0_65bin

C:Program FilesJavajdk1.8.0_65bin> keytool -list -keystore C:Usersuser.androidkeystore. jks

Enter keystore password:

Keystore type: JKS

Keystore provider: SUN

Your keystore contains 1 entry

entry, 04.06.2015, PrivateKeyEntry,

Certificate fingerprint (SHA1): 1D:0E:08:20:D2:A7:F9:CB:9C:77:31:EA: CE:32:…

После получения Android ключа, уничтожьте файл google_maps_key и в файле манифеста в теге <meta-data> прямо укажите Android ключ.

Создание мобильных Web сайтов

С появлением мобильных устройств и соответственно мобильных Web браузеров возникла необходимость адаптации или даже создания отдельных мобильных версий существующих Web сайтов, созданных для отображения десктопными Web-браузерами.

Мобильные устройства требуют адаптации Web сайтов для отображения экранами различных размеров, а также использования возможностей сенсорного экрана и учета ограниченности Интернет соединения и ресурсов мобильного устройства.

В качестве первого шага создания мобильного Web сайта можно использовать готовые шаблоны Responsive HTML5 CSS3 Website Templates (https://w3layouts.com/free-responsive-html5-css3-website-templates/).

Использование viewport мета тега улучшает представление Web контента на мобильном устройстве, позволяя установить ширину и масштаб представления.

<meta name = «viewport» content=«width=device-width, initial-scale=1»/>

Или

<meta name = «viewport» content=«user-scalable=no, width=device-width»/>

Для фиксации заголовка и подвала Web страницы используется CSS элемент position: fixed.

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

}

Для отложенной загрузки изображений можно использовать JavaScript.

<div>

<p data-hash=«hash»>

</p>

</div>

$ (window).load (function () {

$('p[data-hash]').prepend (function (index) {

var hash = $(this).attr (’data-hash’)

return '<img width=«100» height=«100» alt=«» src="http://sample.com/' + hash + «»>»

})

})

div {

padding-left: 10px;

min-height: 100px;

position: relative;

}

div p img {

display: block;

position: absolute;

top: 0;

left: 0;

}

Вместо изображений можно использовать HTML символы (http://www.w3schools.com/html/html_symbols.asp).

Для организации звонка из Web страницы можно использовать ссылку в виде:

Call Us <a href=«tel:+18005550199»> 1—800—555—0199 </a>

Использовать разные CSS стили для разного типа экранов:

<link rel=«stylesheet» type=«text/css» href=«style. css» media=«screen, handheld» />

<link rel=«stylesheet» type=«text/css» href=«enhanced. css» media=«screen and (min-width: 30em)» />

<! – [if (lt IE 9) & (!IEMobile)]>

<link rel=«stylesheet» type=«text/css» href=«enhanced. css» />

<! [endif] – >

Или

/*Default styles*/

li {

float: left;

width: 50%;

}

/*Display 3 per row for medium displays (like mobile phones in landscape or smaller tablets) */

@media screen and (min-width: 28.75em) {

li {

width: 33.3333333%;

}

}

/*Display 6 to a row for large displays (like medium tablets and up) */

@media screen and min-width: 40.5em) {

li {

width: 16.6666667%;

}

}

Или

<link rel=«stylesheet» media=» (max-width: 640px)» href=«max-640px. css»>

<link rel=«stylesheet» media=» (min-width: 640px)» href=«min-640px. css»>

<link rel=«stylesheet» media=» (orientation: portrait)» href=«portrait. css»>

<link rel=«stylesheet» media=» (orientation: landscape)» href=«landscape. css»>

Для небольших изображений использовать Base64 кодировку.

.data {

background: url (data: image/png; base64,iVBORw…) no-repeat 100% 43%;

}

Использовать раскрывающееся при нажатии меню сайта, скрытое изначально или использовать меню Hamburger Menu.

Проверять наличие сенсорного экрана, например, с помощью библиотеки Modernizr, и добавлять обработку жестов, например, с помощью библиотеки Hammer.

Использовать раскрывающийся при нажатии на заголовок текст, скрытый изначально.

Обеспечить оффлайн доступ к ресурсам сайта, используя интерфейс Service Workers (https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md).

Использовать для перевода пикселей в проценты формулу:

target ÷ context = result

h1 {

width: 70.85%; /* 700px / 988px = 0.7085 */

}

Использовать гибкие изображения:

img {

max-width: 100%;

}

Проанализировать, адаптирован ли Web сайт для мобильных устройств, можно с помощью сервиса https://www.google.com/webmasters/tools/mobile-friendly. Это поможет избежать таких сообщений от поисковой машины Google:

These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

Разработка мобильного Web сайта с помощью Web Starter Kit

Установим на компьютере платформу Node. js (https://nodejs.org), обеспечивающую выполнение JavaScript кода на стороне сервера.

Для проверки инсталляции наберите в командной строке:

node —v

Далее скачаем набор разработчика Web Starter Kit (https://developers.google.com/web/tools/starter-kit/).

Создадим Workspace каталог и скопируем в него файлы набора Web Starter Kit.

Для установки компилятора с++ и необходимых библиотек установим Visual Studio Community (https://www.visualstudio.com/products/visual-studio-community-vs) и создадим в ней после установки C++ проект, при этом установим все необходимые инструменты и библиотеки.

В командной строке, используя инструмент npm среды выполнения Node. js, наберем:

cd C:UsersuserWebStarterKit

npm install

В результате будут установлены необходимые Node. js модули.

Далее в командной строке наберем:

npm install gulp —g

В результате будет установлен сборщик JS проектов Gulp. js.

Для проверки инсталляции в командной строке можно набрать:

gulp -v

Далее запустим локальный сервер с помощью команды:

gulp serve

В результате в браузере будет открыта страница index.html папки app. Завершить работу сервера можно с помощью комбинации клавиш Ctr – C.

Другие команды Gulp. js:

gulp

– сборка и оптимизация проекта. В результате в папке dist появится собранный и оптимизированный сайт.

gulp serve: dist

– тестирование собранного и оптимизированного сайта.

gulp pagespeed

– анализ скорости загрузки сайта.

Открыть сайт можно также с помощью локального Web сервера, например, установив Python (https://www.python.org/) и используя командную строку:

python -m SimpleHTTPServer 80

которая запускает простой HTTP сервер, идущий в комплекте с дистрибутивом Python.

Далее можно открыть адрес http://localhost/ в Web браузере и перейти в каталог http://localhost/WebStarterKit/app/.

Используя инструменты Chrome DevTools можно вести разработку сайта.

Создание мобильного Web сайта на основе Vosao CMS

Помимо создания Backend модулей для Android приложений, платформа Google App Engine for Java обеспечивает полноценный бесплатный хостинг для развертывания динамических сайтов, созданных с использованием языка Java.

Vosao CMS представляет собой систему управления контентом, предназначенную для развертывания на платформе Google App Engine for Java.

Шаблон сайта по умолчанию, поставляемый с Vosao CMS, не адаптирован для мобильных устройств, поэтому требуется установка нового шаблона, реализующего принципы Responsive Web Design with HTML5 and CSS3.

Для развертывания Vosao CMS используем Eclipse IDE for Java EE Developers с установленным плагином Google Plugin for Eclipse.

По умолчанию среда Eclipse использует не набор JDK, а среду выполнения JRE, поэтому после установки плагина Google Plugin for Eclipse, перед созданием GAE-проекта, в меню Windows среды Eclipse выберем команду Preferences, в диалоговом окне которой откроем раздел Java | Installed JREs и кнопкой Add добавим предварительно инсталлированный набор JDK.

Скачаем WAR файл Vosao CMS (http://code.google.com/p/vosao/downloads/list) и распакуем его. Уберем из дистрибутива файл backends. xml.

Сделаем слияние содержимого каталога war проекта VosaoCMS с содержимым дистрибутива.

Для развертывания проекта на платформе GAE, его необходимо предварительно зарегистрировать. Для регистрации проекта откроем Web-браузер и войдем в консоль администрирования по адресу https://appengine.google.com/.

После регистрации проекта для его загрузки в App Engine в среде Eclipse откроем в редакторе файл appengine-web. xml папки war/WEB-INF проекта и в тэг <application> вставим зарегистрированный идентификатор приложения. Сохранив сделанные изменения, с помощью кнопки Sign in to Google пройдем авторизацию для доступа к Google-сервисам. В окне Project Explorer щелкнем правой кнопкой мышки на узле проекта и в контекстном меню выберем команду Google | Deploy to App Engine, в диалоговом окне мастера нажмем кнопку Deploy. В результате проект будет развернут на GAE-платформе.

В Web-браузере откроем консоль администрирования https://appengine.google.com/ GAE-платформы, в разделе Application которой, нажатием ссылки приложения откроем станицу администрирования приложения. В разделе Application Settings | Application Default Version URL: станицы администрирования приложением будет указан URL-адрес запроса к приложению, открывающий его страницу приветствия.

Откроем ссылку CMS Configuration.

Введем логин [email protected] и пароль admin.

Откроем ссылку Конфигурация и меню Пользователи. Кнопкой Добавить добавим нового администратора сайта.

Зайдем в консоль управления сайтом .appspot.com/cms/# в качестве нового администратора сайта.

Откроем ссылку Конфигурация и меню Пользователи. Кнопкой Удалить удалим старого администратора сайта.

Теперь логин [email protected] и пароль admin действовать не будут, а для входа в консоль управления сайтом .appspot.com/cms/# нужно будет вводить логин и пароль нового администратора сайта.

Меню Профиль консоли управления сайтом позволяет изменить пароль администратора, а меню Язык – локализацию консоли управления сайтом.

Откроем меню Шаблоны.

Шаблон сайта устанавливает общий внешний вид для всех страниц сайта, определяя содержимое шапки страницы, ее подвала и боковой панели.

Шаблон сайта состоит из страницы с разметкой шапки, подвала и боковой панели, а также блока для включения содержимого остальных страниц сайта, файлов CSS-стилей и файлов изображений шаблона.

Кроме того, шаблон сайта может содержать команды для генерации динамических страниц и специальных эффектов.

Каждая страница сайта может иметь свой шаблон или все страницы сайта могут иметь общий шаблон.

Шаблон назначается для страницы сайта следующим образом:

– Открываем меню Контент консоли.

– Выбираем страницу и открываем Редактировать свойства страницы.

– Открываем список шаблонов и выбираем шаблон.

– Нажимаем кнопку Сохранить.

Vosao-шаблоны обрабатываются движком Apache Velocity Engine.

Перечень некоторых Velocity-команд:

(PageEntity) $service.findPage (path) – возвращает последнюю опубликованную версию страницы по ее ЧПУ. Объект PageEntity, возвращаемый командой, представляет страницу и имеет такие свойства как title, friendlyURL, content и comments.

(List) $service.findPageChildren (path, [count]), (List) $service.findPageChildren (path, [publishDate]), (List) $service.findPageChildrenOrdered (path, [count]) – возвращают список последних опубликованных версий дочерних страниц.

(List) $service.getCommentsByPage (path) – возвращает список объектов CommentEntity страницы. Объект CommentEntity представляет комментарий и имеет свойства content, publishDate, pageID и disabled.

(Text) $service.findContent (path, [language]) – возвращает содержимое страницы.

(List) $service.findChildrenContent (path, [language]) – возвращает содержимое дочерних страниц.

(UserEntity) $service.findUser (email) – возвращает объект UserEntity по адресу электронной почты. Объект UserEntity представляет пользователя и имеет свойства name, email, password (зашифрованный) и role.

(Text) $page. title – возвращает заголовок страницы.

(Text) $page.content – возвращает содержимое страницы.

(Text) $page.friendlyURL – возвращает локальный адрес страницы.

(PageEntity) $page.parent – возвращает родительскую страницу.

(Text) $page. template – возвращает шаблон страницы.

(Date) $page. publishDate> – возвращает дату публикации страницы.

(Text) $page.comments – возвращает комментарии страницы.

(Text) $config.commentsEmail – возвращает адрес уведомления комментариев.

(Text) $config.commentsTemplate – возвращает шаблон комментариев.

(Text) $config.siteDomain – возвращает домен сайта.

(Text) $config.siteEmail – возвращает адрес электронной почты сайта.

(Text) $config.formTemplate – возвращает шаблон форм.

Для автоматического заполнения карты сайта скачаем плагин Instant Sitemap по адресу http://code.google.com/p/vosao/downloads/list – файл sitemap-0.9.war и установим его с помощью меню Расширения | Конфигурация расширений.

После установки, открыв ссылку плагина, можно определить глубину карты и исключить из нее URL-адреса.

Для создания файла sitemap. xml откроем меню Шаблоны и добавим шаблон с заголовком sitemap. xml, URL-именем sitemap. xml и содержимым в виде строки:

$plugin.sitemap.renderXML ()

Откроем меню Контент и добавим потомка к домашней странице с URL-адресом /sitemap. xml. Назначим в качестве шаблона страницы шаблон sitemap. xml и отметим флажок Пропустить пост обработку, после чего отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить.

Для создания файла robots. txt откроем меню Шаблоны и добавим шаблон с заголовком robots. txt, URL-именем robots. txt и содержимым в виде строки:

Sitemap: http://…/sitemap.xml

Откроем меню Контент и добавим потомка к домашней странице с URL-адресом /robots. txt. Назначим в качестве шаблона страницы шаблон robots. txt и отметим флажок Пропустить пост обработку, после чего отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить.

Для изменения шаблона сайта скачаем бесплатный шаблон с сайта https://w3layouts.com и распакуем его архив.

Войдем в Vosao-консоль и откроем меню Шаблоны, нажмем кнопку Добавить.

Введем заголовок и URL-имя шаблона и в рабочую область редактора шаблона скопируем содержимое файла index.html скачанного шаблона.

Нажмем кнопку Сохранить и продолжить.

Откроем вкладку Ресурсы, затем вкладку Подпапки.

С помощью кнопки Добавить подпапку создадим папки для CSS-стилей и изображений шаблона.

Открыв созданную папку откроем вкладку Файлы и с помощью кнопки Загрузить файл загрузим соответствующие файлы скачанного шаблона.

Далее требуется проверить все пути в HTML-файле и CSS-файле шаблона, добавляя /file/theme/HTML5/.

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

Уберем в шаблоне статический контент и добавим вместо него команду:

$page.content

Данная команда будет динамически вставлять контент страницы, к которой прикреплен шаблон.

Если требуется создание страницы, содержащей обзоры дочерних страниц каталога, тогда нужно сначала получить все страницы каталога:

#set ($pagesAll = ${service.findPageChildren (»/digital-camera»)})

Затем посчитать их количество:

#set ($count = $pagesAll.size ())

Вывести первые четыре обзора:

#set ($pagesActive = ${service.findPageChildren (»/digital-camera», 0, 4)})

#foreach ($p in $pagesActive)

<li class=«span3»>

<div class=«product-box»>

${service.renderStructureContent($p.friendlyURL, «article-overview»)}

</div>

</li>

#end

Затем вставить остальные обзоры для прокрутки:

#set ($pages = ${service.findPageChildren (»/digital-camera», 5, $count)})

#foreach ($p in $pages)

<li class=«span3»>

<div class=«product-box»>

${service.renderStructureContent($p.friendlyURL, «article-overview»)}

</div>

</li>

#end

В свойствах такой страницы нужно не забыть отметить флажок Velocity обработка.