2. Presentation title here
● Frontend architecture overview
● Writing modular javascript with OroCRM
○ Application Modules
○ Page Components
● Practical examples
Agenda
Add Custom UI Controls to Your Application
3. Presentation title here
RequireJS proposes AMD
(Asynchronous Module Definition)
JavaScript Modularity
Add Custom UI Controls to Your Application
4. Presentation title here
● define - method for facilitating module
definition
● require - method for handling dependency
loading
RequireJS
Add Custom UI Controls to Your Application
5. Presentation title here
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function
/*function for instantiating
the module or object*/
);
define() method
Add Custom UI Controls to Your Application
7. Presentation title here
# Resources/config/requirejs.yml
config:
shim: # configures exports and dependencies
map: # maps the module_ids
paths: # path mappings for the module names under the
baseUrl
'jquery': 'bundles/bundle/jquery.js'
build:
paths:
# extends requirejs configuration for the build
process
'bootstrap': 'empty:'
RequireJSBundle Configuration
Add Custom UI Controls to Your Application
8. Presentation title here
● RequireJS
● jQuery + jQuery-UI + Bootstrap
● Backbone + Chaplin
Technology Stack
Add Custom UI Controls to Your Application
10. Presentation title here
Oro Application Workflow
Add Custom UI Controls to Your Application
// oroui/js/app/routes.js
define(function () {
return [
['*pathname', 'page#index']
];
});
13. Presentation title here
is extended from BaseComponent
(‘oroui/js/app/components/base/component’ module)
implements
Backbone.Events and Chaplin.EventBroker
public methods
initialize() and dispose()
protected methods
_deferredInit() and _resolveDeferredInit()
see Page Component documentation http://goo.gl/BHxhgc
PageComponent
Add Custom UI Controls to Your Application
14. Presentation title here
{% set options = {
metadata: metaData, // configuration options
data: data // initial data
} %}
<div
data-page-component-module
="path/to/component/module"
data-page-component-options
="{{ options|json_encode }}"></div>
Define PageComponent
Add Custom UI Controls to Your Application
16. Presentation title here
Compositions (global components, views etc.)
beforeAction: function() {
// Reuse the Header view
this.reuse('header', Header,
{region: 'header'});
}
see Chaplin.Composer documentation http://goo.gl/OMwq6e
Composer
Add Custom UI Controls to Your Application
17. Presentation title here
Performs necessary actions on start up, including
the following:
● defines global components/views (that exist
irrespective of the active controller)
● registers handlers in the mediator (see Chaplin.
mediator doc http://goo.gl/r5pmfX)
App Module
Add Custom UI Controls to Your Application
18. Presentation title here
# Resources/config/requirejs.yml
config:
appmodules:
- oroui/js/app/modules/views-module
- oroui/js/app/modules/messenger-module
App Module Declaration
Add Custom UI Controls to Your Application
19. Presentation title here
require([
'oroui/js/app/controllers/base/controller'
], function (BaseController) {
BaseController.loadBeforeAction([
'oroui/js/app/views/page/content-view'
], function (PageContentView) {
BaseController.addToReuse(
'content', PageContentView,
{ el: 'mainContainer' }
);
});
});
App Module Definition
Add Custom UI Controls to Your Application
21. Presentation title here
$ app/console cache:clear
$ app/console assets:install --symlink
$ app/console assetic:dump
$ app/console oro:translation:dump
$ app/console oro:requirejs:dump
Useful Commands
Add Custom UI Controls to Your Application
22. Presentation title here
Example 1
Add Custom UI Controls to Your Application
Navigation History:
● History is a list of links with the page titles and URLs.
● History items are ordered by time of visit (the latest are
on the top).
● Records in the history are unique (by URL).
● Shows information on the number of visits and the time
of the last visit for each record.
● “Clear the list” action is available for the history.
23. Presentation title here
Example 1, Outline
Add Custom UI Controls to Your Application
1. Create App Module and History Component.
2. Create Model, Collection and Views
3. Develop control logic in History Component
4. Create templates for views
5. Reorder collection items on visited page
6. Add js translations
7. Add tooltips for the history links
24. Presentation title here
Example 2
Add Custom UI Controls to Your Application
Task: Add WYSIWYG editor.
Requirements:
● WYSIWYG editor should have a base set of functions
● Extend WYSIWYG and provide way to insert links from
PinBar and Favorites collections
25. Presentation title here
Example 2, Outline
Add Custom UI Controls to Your Application
1. Add a new FormType – WYSIWYG, as extend for the
Textarea.
2. Define template block for WYSIWYG
3. Choose third-party WYSIWYG editor library
4. Bind the editor to HTML markup
5. Implement extra actions for WYSIWYG
26. Presentation title here
Conclusions
Add Custom UI Controls to Your Application
1. Always keep in mind the life cycle of your
component/view/model/collection
(think who is going to take care of them,
when they are not in use anymore)
28. Presentation title here
Conclusions
Add Custom UI Controls to Your Application
3. Extend your application components from
component oroui/js/app/components/base/component
view oroui/js/app/views/base/view
collection-view oroui/js/app/views/base/collection-view
model oroui/js/app/models/base/model
collection oroui/js/app/models/base/collection
