ExtJS 7 и Spring Boot 2. Как построить SPA, взаимодействующее с вашим API и внешними ReactJS плагинами?

  • Tutorial
Последние версии Ext JS, особенно Modern Toolkit снизили порог вхождения во фреймворк (примеры Kitchen Sink), упростили создание нужного интерфейса (привет Sencha Architect) и добились минимального размера веб-приложений (Sencha Cmd).

Пожалуй, Хабр нужно разбавить примером реализации «ситуационного центра», где в реальном времени можно наблюдать камеры и события с них (все данные фейковые).



Начнем. Создадим Spring Boot проект с 2 контроллерами, которые будут отдавать список камер, существующие события, а также возможность подписки на новые события (через WebSocket).


Далее добавим необходимые модели, хранилища, вьюшки и внешние зависимости:



Более детально вьюшка карты, взаимодействующая с React компонентом карты.
Ext.define('Cameras.view.override.Map', {
    override: 'Cameras.view.Map',
    
    config: {
        cameras: {},
        react: null
    },
    
    initialize: function() {
        let that = this;
        let e = React.createElement;
        
        this.setReact(ReactDOM.render(e(createReactClass({
            getInitialState: function() {
                return { items: [], center: [55.751574, 37.573856]};
            },
            render: function() {
                let placemarks = [];

                for(let i=0; i < this.state.items.length; i++) {
                    let location = this.state.items[i].get("location");

                    placemarks.push(e(window.ReactYandexMaps.Placemark, {
                        geometry: [location.latitude, location.longitude],
                            options: {
                                preset: 'islands#blueCircleDotIconWithCaption',
                                iconCaptionMaxWidth: '50'
                            }
                        }));
                }
        

                let map = e(window.ReactYandexMaps.Map, {
                    state: { center: this.state.center, zoom: 10 },
                    width: '100%',
                    height: '100%'
                }, placemarks);

                return e(window.ReactYandexMaps.YMaps, null, map);
            }
        })), this.mapContainer.dom));
    },
    
    getElementConfig: function() {
        return {
            reference: 'element',
            className: 'x-container',
            children: [{
                reference: 'bodyElement',
                style: 'width: 100%; height: 100%',
                className: 'x-inner',
                children: [{
                    style: 'width: 100%; height: 100%',
                    reference: 'mapContainer',
                    className: Ext.baseCSSPrefix + 'map-container'
                }]
            }]
        };
    },
    
    addCamera: function(cameraModel) {    
        if(!this.containsCamera(cameraModel)) {
            this.getCameras()[cameraModel.get("id")] = cameraModel;
            
            this.getReact().setState({
                items: Object.values(this.getCameras())
            });
            
            this.fitCamera(cameraModel);
        }
    },
    
    removeCamera: function(cameraModel) {
        if(this.containsCamera(cameraModel)) {
            delete this.getCameras()[cameraModel.get("id")];
            
            this.getReact().setState({
                items: Object.values(this.getCameras())
            });
        }
    },
    
    fitCamera: function(cameraModel) {
        if(this.containsCamera(cameraModel)) {
            let location = this.getCameras()[cameraModel.get("id")].get("location");
            
            this.getReact().setState({
                center: [location.latitude, location.longitude]
            });
        }
    },
    
    privates: {
        containsCamera: function(cameraModel) {
            cameraId = "" + cameraModel.get("id");
        
            return Object.keys(this.getCameras()).includes(cameraId);
        }
    }
});


Также условимся, что события будут исходить от компонента CamerasGrid, т.к. именно этот компонент отвечает за добавление/удаление камер с карты.

Контроллер компонента CamerasGrid, добавляющий компоненту генерацию событий
Ext.define('Cameras.view.CamerasGridViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.camerasgrid',

    init: function() {
        let socket = new WebSocket("ws://localhost:8080/events/sub");

        socket.onopen = function(e) {
            console.log('onopen');
        };

        socket.onmessage = this.onMessage.bind(this);
    },

    onMessage: function(event) {
        let data = Ext.decode(event.data);

        let gridData = this.getView().getStore().getData();

        for(let i=0; i < gridData.length; i++) {
            let checked = gridData.getAt(i).get("checked");

            if(checked !== undefined && checked) {
                if(gridData.getAt(i).get("id") == data.camera.id) {
                    this.fireViewEvent("cameraRecognition", data);
                }
            }
        }
    }
});


В итоге получается довольно занятный интерфейс. Замечу, что при правильном проектировании архитектуры приложения (даже такого маленького), время на создание оного совсем невелико, до пары часов.



Код примера доступен на github.com.

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 0

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое