Обучающие материалы | Nwicode CMS

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

Посмотреть структуру и скачать пример можно на Github

Что такое макет?

Макеты являются основой ваших приложений, они определяют дизайн главной страницы вашего приложения.

Snimokekrana2019-04-14v9.31.50.png

Что вам нужно занть

  • Новая идея для крутого интерфейса, чтобы поделиться с пользователями!
  • Знание html / css / javascript
  • Следуйте этим инструкциям

Определить два имени:

  • Ваше имя пакета, как MyAwesomeLayout.
  • Ваш макет code, который должен быть уникальным и ограничен 50 символами, например my_awesome_layout.

Эти два имени будут  гарантировать, что ваш макет находится в пространстве имен, избегая конфликтов с любым другим макетом.

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

Структура макета пакета

Макеты установлены в папке app/local/modules

Ниже приведена полная и минимально необходимая структура для макета

MyAwesomeLayout.zip
├─ resources
│  ├─ db
│  │  └─ data
│  │     └─ my_awesome_layout.php
│  ├─ design
│  │  └─ desktop
│  │     └─ flat /** Flat design */
│  │        └─ images
│  │           └─ customization
│  │              └─ layout
│  │                 └─ homepage
│  │                    └─ my_awesome_layout.png
│  └─ var
│     └─ apps
│        └─ modules
│           └─ layout
│              └─ home
│                 └─ my_awesome_layout
│                    ├─ hooks.js
│                    ├─ style.css
│                    └─ view.html
├─ init.php
├─ package.json
└─ [...]

package.json

package.json Используется установщиком 


{

  "name": "MyAwesomeLayout",
  "description": "MyAwesomeLayout description",
  "type": "layout",
  "version": "1.0",
  "release_note": {
    "url": "http://www.yourdomain.com/your-layout.html",
    "show": true
  },
  "dependencies": {
    "system": {
      "type": "Start",
      "version": "1.1.0"
    }
  }
}

поле Необходимость Описание
название да Имя пакета, избегайте пробелов и чисел, так как это также ваше имя класса и имя папки в app/local/modules/MyAwesomeLayout/[...]
описание да Описание пакета
тип да должно быть layout
версия да Ваша версия макета, для обновлений
Release Note нет url: ссылка на действительное описание HTML, которое будет отображаться в модальном окне при установке, show: (true / false) для принудительного отображения
зависимости да версия *: минимум 1.1.0, тип: Start / Studio / Saas минимальный тип установки 

* версия должна быть не ниже 1.1.0

Файл init.php используется для подключения и регистрации файлов макета и обновления ресурсов.

Однако синтаксис и методы, используемые внутри Init, остаются такими же, как и в старых файлах начальной загрузки.

<?php

$init = function($bootstrap) {
    # Register assets
    # This path must be "/app/local/modules/MyAwesomeLayout/resources/var/apps/"
    # Where "MyAwesomeLayout" is your layout package name #what-you-need
    \Nwicode_Assets::registerAssets(
        "MyAwesomeLayout", 
        "/app/local/modules/MyAwesomeLayout/resources/var/apps/"
    );

    # Hook javascript to index.html
    # These path are relative to the previously defined before:
    # "/app/local/modules/MyAwesomeLayout/resources/var/apps/"
    \Nwicode_Assets::addJavascripts(array(
        "modules/layout/home/my_awesome_layout/hooks.js",
    ));

    # Hook stylesheets to index.html
    # These path are relative to the previously defined before:
    # "/app/local/modules/MyAwesomeLayout/resources/var/apps/"
    \Nwicode_Assets::addStylesheets(array(
        "modules/layout/home/my_awesome_layout/style.css",
    ));

    # Register a custom form for the Layout Options
    \Siberian_Feature::registerLayoutOptionsCallbacks("my_awesome_layout", "MyAwesomeLayout_Form_MyAwesomeLayout", function($datas) {
        $options = array();

        return $options;
    });
};

$bootstrap является ссылкой на Zend Bootstrap, если вам нужно подключить его.

Размер иконки и изображения


Если вашему макету требуются изображения с нестандартным соотношением для иллюстрации функций, вы можете зарегистрировать функцию обратного вызова в так называемой функции init.php.

\Nwicode_Feature::registerRatioCallback("my_awesome_layout", function($position) {
    $sizes = array(
        "width" => 800,
        "height" => 400,
    );

    return $sizes;
});


my_awesome_layout это ваш уникальный код макета.

$position является позицией текущей функции, таким образом, вы можете иметь разные размеры для разных позиций в макете.

функция должна возвращать массив с width и height ключами.

Data

Этот файл создает и обновляет запись в базе данных и копирует ресурсы во время установки

Если вам нужно изменить параметры в вашем модуле при предоставлении обновления, вы должны изменить значения здесь

Примечание: вы никогда не должны меняться, так code как это уникальный код, используемый для обновления вашего макета, иначе это создаст новый макет.

<?php
/** Available in Nwicode 1.1.0+ only */
$default_options = \Nwicode_Json::encode(array(
    "borders" => "border-right",
    "borders" => "border-left",
    "borders" => "border-top",
    "label" => "label-left",
    "textTransform" => "title-lowcase",
));

# MyAwesomeLayout
$datas = array(
    'name'                       => 'MyAwesomeLayout',
    'visibility'                 => \Application_Model_Layout_Homepage::VISIBILITY_HOMEPAGE,
    'code'                       => 'my_awesome_layout',
    /** Preview is relative to [...]/resources/design/desktop/[flat|nwicode]/images/  */
    'preview'                    => '/customization/layout/homepage/my_awesome_layout.png',
    'use_more_button'            => 1,
    'use_horizontal_scroll'      => 0,
    'number_of_displayed_icons'  => 8,
    'position'                   => "bottom",
    "order"                      => 1200,
    "is_active"                  => 1,
    "use_subtitle"               => 1,
    "use_homepage_slider"        => 1,
    "options"                    => $default_options,
);

$layout = new \Application_Model_Layout_Homepage();
$layout
    ->setData($datas)
    ->insertOrUpdate(array("code"));

# Copying assets at installation time
# same path as in `Nwicode_Assets::registerAssets`
\Nwicode_Assets::copyAssets("/app/local/modules/MyAwesomeLayout/resources/var/apps/");

поле Необходимость Описание
название да Это название вашего макета, это может быть My Awesome Layout
видимость да VISIBILITY_HOMEPAGE, VISIBILITY_ALWAYS, VISIBILITY_TOGGLE
код да должен быть ваш код_компоновки, здесь my_awesome_layout
предварительный просмотр да Это изображение используется в разделе Дизайн> ВЫБЕРИТЕ СВОЙ ПЛАН
use_more_button да Работает ли ваш макет с модальным и поэтому требует more_button
use_horizontal_scroll да -
number_of_displayed_icons да Количество функций, используемых при использовании use_more_buttonэтого заполнителяfeatures.overview.options
позиция да Положение вашего меню: внизу, слева, справа
порядок да Заказ в разделе Дизайн> ВЫБЕРИТЕ СВОЙ 
is_active да должно быть 1
use_subtitle да Использует ли ваш макет субтитры. /! 
use_homepage_slider нет Разработан ли ваш макет для работы с homepageslider.
опции нет Параметры по умолчанию для вашего макета 

Layout Grid Ex

Layout Grid Example - пример макета для NWICODE CMS.

Для удобства изучения мы создали минималистичный макет, в котором постараемся разобрать работу с классом HomepageLayout, а также работу с формой настроек макета.
Структура макета похожа на структуру обычного модуля, но имеет несколько ключевых особенностей: файл bootstrap.php, в котором модуль подключается именно как макет и подключает свою форму настроек:

<?php
$defined_options = array(
	"text_1" => "Demo<br>Company",
	"text_2" => "Company<br>Introduction",
);

$default_options = Nwicode_Json::encode($defined_options);

$datas = array(
    'name' => 'Layout Grid Ex',
    'visibility' => Application_Model_Layout_Homepage::VISIBILITY_HOMEPAGE,
    'code' => 'layout_grid_ex',
    'preview' => '/customization/layout/homepage/layout_grid_ex.png',
	'preview_new' => '/customization/layout/homepage/layout_grid_ex_modal.png',
    'use_more_button' => 0,
    'use_horizontal_scroll' => 0,
    'number_of_displayed_icons' => 198,
    'position' => "bottom",
    "order" => 1201,
    "can_uninstall" => 1,
    "is_active" => 1,
	'options' => $default_options
);

$layout = new Application_Model_Layout_Homepage();
$layout->setData($datas)    ->insertOrUpdate(array("code"));
Nwicode_Assets::copyAssets("/app/local/modules/LayoutGridEx/resources/var/apps/");

Так же , мы прописали начальные значения полей text_1 и text_2. Значения use_more_button, number_of_displayed_icons и use_horizontal_scroll работают, но являются устаревшими. Мы рекомендуем все рассчеты, а также управление выводом делать именно в самом макете. Значения preview и preview_new должны содержать путь к примерным обложкам макета, которые будут показаны в списке макетов. Они должны находиться в папке resources/design/desktop/flat/images/customization/layout/homepage


Файлы переводов работают так же, как и в модулях - в папке translations/default находятся csv и lst файл переводов. layout_grid_ex.csv соджержит все фразы и их переводы, а в mobile.lst те фразы, переводы которых необходимо вынести в приложение.


Макет

Макет должен состоять из двух файлов view.html (та часть, что выводится на экран), style.css (необязательный) и hook.js (обработчик макета). Файлы макеты должны находиться в папке resources/var/apps/modules/layout/home/layout_grid_ex/, они загружаются автоматически при старте приложения. В hook.js обязательно создать сервис, который будет выполняться при подготовке к запуску макета:

/**
 *
 * Layout_Grid_Ex example
 *
 * All the following functions are required in order for the Layout to work
 */
App.service('layout_grid_ex', function ($rootScope, HomepageLayout) {

    var service = {};

    /**
     * Must return a valid template
     *
     * @returns {string}
     */
    service.getTemplate = function() {
        return "modules/layout/home/layout_grid_ex/view.html";
    };

    /**
     * Must return a valid template
     *
     * @returns {string}
     */
    service.getModalTemplate = function() {
        return "templates/home/l10/modal.html";
    };

    /**
     * onResize is used for css/js callbacks when orientation change
     */
    service.onResize = function() {
        /** Do nothing for this particular one */
    };

    /**
     * Manipulate the features objects
     *
     * Examples:
     * - you can re-order features
     * - you can push/place the "more_button"
     *
     * @param features
     * @param more_button
     * @returns {*}
     */
    service.features = function(features, more_button) {
        /** Place more button at the end */
        features.overview.options.push(more_button);

        return features;
    };

    return service;

});

Так же, если макет должен обладать какой то логикой (как в нашем примере), то прописать дополнительные задачи, которые необходимо совершить при старте макета (у нас это запуск контроллера agc242templatecontroller), в который и обернут наш макет, находящийся в view.html.

App.controller('agc242templatecontroller', function($scope,Url,$ionicSideMenuDelegate,$rootScope, $timeout, $translate, $location, $compile, $sce, $window, Application, Customer,   Dialog,  HomepageLayout, $log, $http)
{
	$scope.is_loading = true;
	$scope.is_logged_in = Customer.isLoggedIn();
	$scope.avatar_url = null;
	$scope.options = {};
	$scope.features_all = [];
	$scope.features_options = [];
	HomepageLayout.getFeatures().then(function(features) {
		console.log("Get layout options:");
		console.log(features);
		$scope.options = features.layoutOptions;
		features.options.forEach(function(element) {
			if (element.is_visible) $scope.features_all.push(element);
		});
		$scope.features_options = $scope.chunkArray($scope.features_all,3);
		console.log($scope.features_options);
	});
	
	
	
	$scope.chunkArray = function(myArray, chunk_size){
		var index = 0;
		var arrayLength = myArray.length;
		var tempArray = [];
		
		for (index = 0; index < arrayLength; index += chunk_size) {
			myChunk = myArray.slice(index, index+chunk_size);
			// Do something if you want with the group
			tempArray.push(myChunk);
		}

		return tempArray;
	}
	
	$scope.openFeature = function(feature) {
		console.log("openFeature clicked:");
		console.log(feature);
		HomepageLayout.openFeature(feature, $scope);

	};	
	
});

Так как мы выводим иконки в три столбца, то нам удобнее сначала сформировать массив нужных модулей (учтите, что некотрые модули имет атрибут is_visible=false), после чего разбить его на части по три модуля в каждой. Еще мы прописали свою функицию модуля.

Все настройки макета находятся в объекте HomepageLayout в layoutOptions. Мы назначаем их нашему массиву $scope.options = features.layoutOptions; после чего уже в шаблоне обращаемся к нашим данным так: <ion-text color="primary" text-right ng-bind-html="options.text_1"></ion-text> и так <div class="title"><ion-text color="primary">{{item.name}}<ion-text></div> согласно правилам AngularJS.

Сам список модулей мы выводим двумя циклами из нашего массива массивов модулей $scope.features_options:

	  <ion-row ng-repeat="row in features_options">
		<ion-col ng-repeat="item in row" text-center>
			<div class="item_feature" ng-click="openFeature(item)">
				<img src="{{item.icon_url}}" ng-src="{{item.icon_url}}">
				<div class="title"><ion-text color="primary">{{item.name}}<ion-text></div>
			</div>
		</ion-col>
	  </ion-row>

В силу простоты макета мы не использовали файл стилей style.css, а указали стили в самом макете.


Вернуться

Есть вопросы — спрашивайте!

Наши специалисты помогут Вам и окажут бесплатную консультацию

Документация

Новости 1 - 20 из 51
Начало | Пред. | 1 2 3 | След. | Конец