02.08.2009 | 11:00

В этот раз я опишу пример взаимодействия Flash и UMI.CMS. На примере я опишу ту самую «карусель» товаров, которую давно обещал описать в каментах предыдущего поста. Задача была сделать крутящуюся карсусель из изображений товаров, взятых из каталога. Как только я занялся решением этой задачи, тут же для себя уяснил что с математикой у меня плохо. Попытки описать траекторию анимации и траекторию движения только доказали это. Поэтому решил найти что-то подобное среди готовых решений. Немного погуглив, нашел на форуме сайта demiart.ru реализацию карусели из картинок. Посмотрел, данные берутся из XML, - то что нужно. Во флешке пришлось многое изменить, из оригинала оставил лишь часть, отвечающую за анимацию. Исходник я приложил, каждый потом сможет сделать то, что ему нужно. Здесь же я освещу лишь общие моменты, дабы не отбирать хлеб у фрилансеров и у себя тоже :) 

Здесь можно посмотреть  живой пример. Итак, чтобы увидеть сиё творение необходимо будет создать 2 файла, скопировать ещё 2 и отредактировать один файлик. Первым делом создадим правило для umap. Откроем папку /umaps/, найдем и откроем файл sitemap.xml. Между последним закрывающим тегом </mathch> и закрывающим тегом </sitemap> необходимо разместить следующий код:

<match pattern="^getRandObjects/(.*)$">
    <param name="cache" value="10" />
    <generate src="usel://getObjects/{1}" />
    <transform src="./xsltTpls/karusel-objects.xsl"></transform>
    <serialize type="xml" />
</match>

 

Этим мы сообщили системе, что по запросу somesite.ru/getRandObjects/ ей будет необходимо получить данные по протоколу usel и трасформировать полученные данные по XSLT шаблону.

Далее нам нужно создать XML файл для usel. Usel — это протокол для взаимодействия с API umiSelection. На входе он получает xml файл, который описывает какие именно данные нам нужны, а на выходе отдает xml с результатом выборки из базы данных. Создадим в папке /usels/ файл с названием getObjects.xml и поместим туда следующий код:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selection mode="and">
  3.   <target result="pages">
  4.     <type module="catalog" method="object" />
  5.     <category depth="{3}">{1}</category>
  6.   </target>
  7.   <sort>rand()</sort>
  8.   <limit>{2}</limit>
  9. </selection>

 

Здесь мы говорим, что нам нужны случайные (7-ая строчка) объекты каталога (4-ая строчка) из указанного раздела каталога с указанной глубиной (5-ая строчка), с ограниченим на выборку (8-ая строчка) и результатом выборки должны быть страницы (3-ая строчка).

Все, остаётся создать шаблон, по которому будут трансформироваться полученные данные. Откроем папку /xsltTpls/, создадим файл с именем karusel-objects.xsl и поместим этот код:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="//www.w3.org/1999/XSL/Transform">
  3. <xsl:output encoding="utf-8" method="xml" indent="yes"/>
  4.  
  5.   <xsl:template match="/">
  6.     <catalog_items>
  7.       <items>
  8.         <xsl:apply-templates select="udata/page"/>
  9.       </items>
  10.     </catalog_items>
  11.   </xsl:template>
  12.  
  13.   <xsl:template match="page">
  14.       <xsl:apply-templates select="document(concat('upage://', @id))/udata/page/properties" />
  15.     </xsl:template>
  16.  
  17.     <xsl:template match="properties">
  18.      <item>
  19.         <image><xsl:value-of select="document(concat('udata://system/makeThumbnailFull/(.', string(group/property[@name='header_pic']/value), ')/70/70'))/udata/src" /></image>
  20.       <link_to><xsl:value-of select="../@link" /></link_to>
  21.       <item_name><xsl:value-of select="../name" /></item_name>
  22.       <price><xsl:value-of select="group/property[@name='price']/value" /> руб.</price>
  23.     </item>
  24.     </xsl:template>
  25.  
  26. </xsl:stylesheet>

Внимательный читатель заметит, что для создания превью я использую функцию makeThumbnailFull. В отличии от обычного makeThumbnail, данный макрос при жестко заданных значениях ширины и восоты не деформирует её, если соотношения сторон расходятся от заданных, а обрезает лишнее. Иногда очень полезно, когда при верстке необходимо вставлять изображения с фиксированными размерами, а «сплющивать» их не хочется. Незнаю почему разработчики её держат в секрете, я её обнаружил помоему ещё в версии 2.6.5.

Тут есть еще один важный момент. Найдите следующий код: string(group/property[@name='header_pic']/value). Я использую в качестве основного изображения товара «Картинку для заголовка», если вы используете другое поле то подставьте его имя вместо 'header_pic'.

В принципе все готово, остаётся закинуть  два файлика: этот в папку /js/, и этот в папку /images/, и можно смело в нужное место в любом шаблоне вставлять следующий код:

  1. <div id="umi-karusel-cont">
  2. <script src="/js/swfobject.js" mce_src="/js/swfobject.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.         var rnumber = Math.floor(Math.random()*9999999);
  5.         var so = new SWFObject("/images/catalog.swf?r="+rnumber,
  6.                                 "umi-karusel",
  7.                                 "350",
  8.                                 "140",
  9.                                 "9",
  10.                                 "#ffffff");
  11.         so.addParam("allowScriptAccess", "always");
  12.         so.addVariable("path", "адрес каталога");
  13.         so.addVariable("depth", "глубина");
  14.         so.addVariable("limit", "10");
  15.         so.write("umi-karusel-cont");
  16. </script>

 

Обратите внимание на последние строчки снизу, не забудьте прописать путь и глубину выборки. Как и обещал: исходник флешки в формате fla (Adobe Flash CS4).

Читайте также:

Категории

Теги

модуль партнеры технологии Кейсы маркетинг обзоры UMI продукты UMI мероприятия UMISummit business облако тегов кастомы uwdc Челябинск разработчики конференция Конкурс UMIRU exchange 28 Обмен данными 1C Интеграция с 1С версии UMICMS хостинг юмихост umihost UMICMS рейтинг MySQL разделение баз данных developer программинг менеджмент xslt документация шаблоны Служба Заботы маркетинг веб студии москва события лицензии новинки UMI Edu UMI Cloud интернетмагазин интернет-магазин интернет магазин интернет-маркетинг видео flash actionscript каталог анимация техподдержка tpl local scope macro кейсы итоги года SAPE seo мероприятие рынок веб разработки экономика Алексей Самойлов Сергей Котырев KINETICA CMS Сибирская интернетнеделя UMIWorkshop umi_workshop акция Золотой сайт партнерская_программа партнерство стратегия highload РуПромо Машков версия 2_7 кэширование скорость стихи день рождения статьи пресс конференция версия 2_5 Edit_in_Place онлайн платежи кризис достижения CeBIT внедрения umi cms блоги верстка релиз EditInPlace изучение Юми создание модуля модули ReMIX UMI_CMS_Net iPhone XML драйвер как убрать лампочку форма обратной связи языковые версии CMS Pistols музыка UMICMS 28 удобство юзабилити usability user experience интерфейсы CMS Eye tracking ай тракинг usability test UXRussia управление сайтом RIW Russian internet week Softool выставки интернет клиенты сайты umisound cms pistols РИФ 2011 Tagline качество 2012 UMISound Полюса Илья Разин Марат Машков

Авторы блога