Details
-
Improvement
-
Resolution: Done
-
High
-
None
Description
The tutorial is missing a part about content and edit views. Without them you cannot create a new Content that will use our custom Field Type. To add them, the developer has to create yui.yml configuration file in the config directory. It will look like this:
system: default: yui: modules: ez-contenteditformview: requires: - 'ez-tweet-editview' ez-rawcontentview: requires: - 'ez-tweet-view' tweeteditview-ez-template: type: 'template' path: bundles/ezsystemstweetfieldtype/templates/fields/edit/tweet.hbt ez-tweet-editview: requires: ['ez-fieldeditview', 'event-valuechange', 'tweeteditview-ez-template'] path: bundles/ezsystemstweetfieldtype/js/views/fields/ez-tweet-editview.js tweetview-ez-template: type: 'template' path: bundles/ezsystemstweetfieldtype/templates/fields/view/tweet.hbt ez-tweet-view: requires: ['ez-fieldview', 'tweetview-ez-template', 'ez-asynchronousview'] path: bundles/ezsystemstweetfieldtype/js/views/fields/ez-tweet-view.js
Next, the developer needs to register the file using prepend method. This means he will have to replace the "prepend" method from the file "DependencyInjection/EzSystemsTweetFieldTypeExtension.php" with the following content:
public function prepend(ContainerBuilder $container) { $configFiles = [ 'ez_platformui' => 'config/yui.yml', 'ezpublish' => 'config/ez_field_templates.yml' ]; foreach ($configFiles as $extensionName => $configFileName) { $configFile = __DIR__ . '/../Resources/' . $configFileName; $config = Yaml::parse(file_get_contents($configFile)); $container->prependExtensionConfig($extensionName, $config); } }
Next the developer needs to implement js and templates files, which means creating following files:
Resources/public/js/views/fields/ez-tweet-editview.js file:
YUI.add('ez-tweet-editview', function (Y) { "use strict"; /** * Provides the field edit view for the Tweet (eztweet) fields * * @module ez-tweet-editview */ Y.namespace('eZ'); var FIELDTYPE_IDENTIFIER = 'eztweet', VALIDATION_PATTERN = /^https?:\/\/twitter.com\/([^\/]+)\/status\/[0-9]+$/; /** * Tweet edit view * * @namespace eZ * @class TweetEditView * @constructor * @extends eZ.FieldEditView */ Y.eZ.TweetEditView = Y.Base.create('tweetEditView', Y.eZ.FieldEditView, [], { events: { '.ez-tweet-input-ui input': { 'blur': 'validate', 'valuechange': 'validate' } }, /** * Validates the current input of tweet * * @method validate */ validate: function () { var validity = this._getInputValidity(); if ( validity.typeMismatch || !this._isValidUrl() ) { this.set('errorStatus', Y.eZ.trans('url.not.valid', {}, 'fieldedit')); } else if ( validity.valueMissing ) { this.set('errorStatus', Y.eZ.trans('this.field.is.required', {}, 'fieldedit')); } else { this.set('errorStatus', false); } }, /** * Defines the variables to imported in the field edit template for text * line. * * @protected * @method _variables * @return {Object} containing isRequired, maxLength and minLength * entries */ _variables: function () { var def = this.get('fieldDefinition'); return { "isRequired": def.isRequired }; }, /** * Returns the input validity state object for the input generated by * the tweet template * * See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState * * @protected * @method _getInputValidity * @return {ValidityState} */ _getInputValidity: function () { return this.get('container').one('.ez-tweet-input-ui input').get('validity'); }, /** * Returns the currently filled tweet value * * @protected * @method _getFieldValue * @return String */ _getFieldValue: function () { return this.get('container').one('.ez-tweet-input-ui input').get('value'); }, /** * Checks twitter url validity. Regexp is tested only * if field is not empty. * Otherwise, the email address edit view could accept email * that will be considered invalid when creating/updating a content. * * @protected * @method _isValidUrl * @return {Boolean} */ _isValidUrl: function () { if (this._getFieldValue().length > 0) { return VALIDATION_PATTERN.test(this._getFieldValue()); } return true; } }); Y.eZ.FieldEditView.registerFieldEditView( FIELDTYPE_IDENTIFIER, Y.eZ.TweetEditView ); });
Resources/public/js/views/fields/ez-tweet-view.js file:
YUI.add('ez-tweet-view', function (Y) { "use strict"; /** * Provides the Tweet field view * * @module ez-tweet-view */ Y.namespace('eZ'); /** * The Tweet field view * * @namespace eZ * @class TweetView * @constructor * @extends eZ.FieldView */ Y.eZ.TweetView = Y.Base.create('tweetView', Y.eZ.FieldView, [], { /** * Returns the value to be used in the template. If the value is not * filled, it returns undefined otherwise an object with a `url` entry. * * @method _getFieldValue * @protected * @return Object */ _getFieldValue: function () { var value = this.get('field').fieldValue, res; if ( !value || !value.url ) { return res; } res = {url: value.url}; return res; } }); Y.eZ.FieldView.registerFieldView('eztweet', Y.eZ.TweetView); });
Resources/public/templates/fields/edit/tweet.hbt file:
<div class="pure-g ez-editfield-row"> <div class="pure-u ez-editfield-infos"> <label for="ez-field-{{ content.contentId }}-{{ fieldDefinition.identifier }}"> <p class="ez-fielddefinition-name"> {{ translate_property fieldDefinition.names }}{{#if isRequired}}*{{/if}}: </p> <p class="ez-editfield-error-message"> </p> </label> </div> <div class="pure-u ez-editfield-input-area ez-default-error-style"> <div class="ez-editfield-input"><div class="ez-tweet-input-ui"><input type="text" value="{{ field.fieldValue.url }}" class="ez-validated-input" id="ez-field-{{ content.contentId }}-{{ fieldDefinition.identifier }}" {{#if isRequired}} required{{/if}} ></div></div> {{> ez_fielddescription_tooltip }} </div> </div>
Resources/public/templates/fields/view/tweet.hbt file:
<div class="ez-fieldview-row pure-g"> <div class="ez-fieldview-label pure-u"> <p class="ez-fieldview-name"><strong>{{ translate_property fieldDefinition.names }}</strong></p> </div> <div class="ez-fieldview-value pure-u"><div class="ez-fieldview-value-content"> {{#if isEmpty }} {{translate 'fieldview.field.empty' 'fieldview'}} {{else}} {{ value.url }} {{/if}} </div></div> </div>