Именно в этот самый момент, пока мы ещё не очень далеко продвинулись (а сам я продвинулся за время, пока не было публикаций про "Vue.js", достаточно далеко), хочется прервать прямое повествование про сам фреймворк, а порекомендовать вам очень полезное для разработчиков программное обеспечение, против которого я, кстати, очень долго сопротивлялся, но теперь понимаю, что сопротивлялся неоправданно.

Речь в публикации пойдёт о расширенном блокноте "Notepad++". Помнится, я в самом начале серии всех публикаций в направлении своей новой деятельности, связанной со "Vue.js", говорил, что у меня на компьютере предустановлен очень удобный и нашпигованный по последнему слову техники "Total Commander". Если не помните такого, то перечитайте - всё рядом (https://www.liveinternet.ru/users/flash_a/post434539131/).

Так вот расширенный "Total Commander" меня снова выручил, поскольку в него для редактирования текстовых файлов по клавише "F4" встроен не обычный блокнот ("Notepad.exe"), а блокнот второго поколения ("..\Soft\Notepad2\Notepad.exe"). Да, если открыть диалоговое окно конфигурации файлового менеджера, то там прописан следующий страшный путь: "%commander_path%\Soft\Notepad2\Notepad.exe" (Рисунок 1). Собственно, хорошо видно, что это плагин (специальная подключаемая подпрограмма, адаптированная под "Total Commander").

Рисунок 1 - Подключённый "Notepad2" в "Total Commander TechAdmin"

"ДАЛЕЕ ПРОДОЛЖЕНИЕ ПУБЛИКАЦИИ..."

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ

Если что-то из нижеследующего вам, ну, совершенно не понятно откуда взялось, то стоит прочитать предыдущую публикацию по данной тематике здесь: https://www.liveinternet.ru/users/flash_a/post437914082/. Заодно скачать обучающие примеры оттуда же будет не лишним.

На следующем шаге изучения фреймворка "Vue.js" мы разберём составление списков, поскольку сами по себе списки предполагают использование циклических конструкций. И это ещё далеко не высший пилотаж, но уже что-то посложнее вывода простого сообщения с приветствием.

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

- массивами;
- записями;
- форматом текстовой базы данных "json";
- тегами, отвечающими за списочные структуры.

Начнём с самого простого и интуитивно понятного из этого перечня. Если вспомните тот же Microsoft Office Word, то списки в нём бывают как нумерованными, таки и маркированными.

Нумерованные списки используются там, где важно отразить приоритет упоминаемых элементов, их последовательность или количество; маркированные же списки - это все остальные наборы данных.

У наших элементов в примерах, конечно же будут порядковые номера, поскольку они являются элементами базы данных, которые должны отличаться друг от друга хоть чем-то уникальным, потому, пускай имеет место искусственный уникальный идентификатор. Впрочем, об этом позже. Не в данной публикации уж точно. Пока мы считаем, что совершенно незнакомы с какой-либо базой данных. Забыли. Никакой базы данных нет и в помине.

Для примера составим маркированный список. Сначала вручную, чтобы освежить в памяти HTML (или же продолжить его изучение). Зная, как прописываются списки вручную, позже в красках можно будет понять и всю прелесть использования возможностей фреймворка "Vue.js".

За основу всё равно берём составленную ранее страничку "index.html" (из предыдущей публикации). Да, она будет изменена до неузнаваемости, но не придётся повторно прописывать базовые конструкции, обуславливающие гипертекстовую разметку в текстовом файле. Вместе с тем у нас уже будет подключен модуль "Vue.js".

Итак, создадим сначала маркированный список, содержащий первое сообщение (message1). Заменим теги абзаца/параграфа (р) на теги маркированного списка (ul), а также заключим первое сообщение в теги элемента списка (li).

Пример кода для составления списка, состоящего из одного элемента

"ДАЛЕЕ ПРОДОЛЖЕНИЕ ПУБЛИКАЦИИ..."

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ

Сразу ввожу одно очень важное определение, процитировав первую же ссылку в Яндексе: "Фреймворк - программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта."

По долгу службы я начал разбираться с JavaScript'ом и фреймворком "Vue.js". Таковой мне порекомендовали. Хочется сразу отметить, что самое толковое, что есть в отношении этого фреймворка - это основная документация, официальное руководство от производителя. У меня был (да и остаётся не заданным) ряд вопросов к авторам различных статей на «Хабре» (https://habr.com/) из серии "как?", "что?" "откуда?", "почему так?" Метался из стороны в сторону, от статьи к статье, и спустя время всё равно приходил на страницы основной документации и находил там правильные ответы на свои вопросы.

Да, признаюсь, первое прочтение не дало, ровным счётом, ничего, но как только появлялись конкретные задачи - находились и решения к ним.

Поэтому первое, что мне хочется выделить и сохранить здесь - это ссылку на официальное руководство "Vue.js".

https://ru.vuejs.org/v2/guide/

Без него просто никуда.

Таким образом, имеется вполне конкретная цель: разобраться с "Vue.js". А на вопрос "зачем?" отвечают поставленные мною самим и моими коллегами задачи:

- предоставить результат конвертации данных из локальной базы в серверную в удобной форме для анализа приёмочной комиссией;
- следовательно: разработать графический пользовательский интерфейс для демонстрации с использованием передовых Интернет-технологий;
- следовательно: выбрать перспективный фреймворк на замену "Flex";
- следовательно: изучить объектную модель выбранного перспективного фреймворка;
- следовательно: перейти от строк таблиц базы данных к экземплярам классов, хранимым в оперативной памяти;
- следовательно: подобрать нужные структуры (деревья / таблицы / поля) и настроить фильтры для приемлемой демонстрации сведений, необходимых для анализа приёмочной комиссией.

Такое, как видите, получается классическое решение задачи, позиционируемой на этапе анализа предметной области согласно спиральной модели жизненного цикла любого программного обеспечения.

Специфика разработчика: я являюсь специалистом, которого в вузе пять лет учили создавать только толстые клиентские приложения. Очень лениво мне сейчас в красках рассказывать, что такое толстый клиент, но раз это обучающая статья, то это необходимо сделать. Буду краток. Толстый клиент - это программное обеспечение, размещаемое на рабочем компьютере конечного пользователя, которое решает не только задачи отображения информации в удобной форме, но и само проводит какие-то расчёты, причём не обязательно сопрягается с базой данных для хранения результатов и исходных данных. Входная и выходная информация толстых клиентов может храниться всего навсего в текстовых файлах и этого достаточно. Тот проект, над которым я работал во время написания кандидатской диссертации, тоже являлся толстым клиентским приложением. И это такой качественный, надёжный и самодостаточный толстый клиент.

Когда же я устроился на работу ведущим программистом, совмещая эту деятельность с преподавательской, вот тут-то понеслось всё самое интересное. Мир оказался куда многограннее. Современность требовала создания тонких клиентов (программного обеспечения для отображения информации, отправки запросов и приёма результатов запросов), а также мудрых серверных приложений. Шаг сродни принятию научным сообществом, что Земля не плоская, а круглая (до перехода к эллиптической форме предстоял ещё один шаг). Все сразу захотели, чтобы я чётко разделял задачи клиента, задачи сервера и задачи, связанные напрямую с базой данных (многоуровневые, вложенные SQL-запросы).

Всё, что долгое время для меня было единым целым, неделимым, распалось на фрагменты мозаики. Потребовалось более тщательное планирование и увязка фрагментов между собой. Это особая вещь, которая заставляет совершенно под другим углом смотреть на программирование. Вот и перешли от круга к эллипсу.

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

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

Да, энтузиасты решили какие-то свои, частные задачи, но они являются, преимущественно, задачами построения типовых сайтов, а не задачами организации специфической информационно-управляющей системы. Поэтому копался я, копался, а всё равно вернулся к официальному руководству, к разделу с примерами:

https://ru.vuejs.org/v2/examples/

И это, опять же, дало мне куда больший рывок, чем все те статьи на "Хабре", которые были прочитаны. И если раньше я считал "Хабр" за классную IT-площадку, то теперь меня "Хабр", откровенно, бесит, потому что в моём нынешнем представлении действительности - это сборище хвастунов, которые не нацелены научить своих читателей. Они просто показывают там, какие они молодцы, что они что-то сделали, они разобрались. Вернее, не так. Все они, априори, считают, что все их читатели, без исключения, знакомы с азами передовой разработки веб-приложений на языке JavaScript.

То есть, давайте мельком взглянем, с чего же начинается большинство статей по веб-разработке на "Хабре"? Например, просто типовая статья без оглядки на конкретное приложение / примочку:

"Выполните следующие шаги, чтобы установить [примочку] и начать работу с ней.

• Создайте директорию для вашего проекта. С точки зрения сервера эта директория будет корневой.
• Откройте эту директорию через терминал.
• Теперь скачайте и установите [примочку]. Аргумент -g указывает npm на то, что пакет следует скачивать в основную папку для хранения пакетов, а не в текущую директорию.

• $ npm install -g grunt-cli"

npm install, npm install, npm install…

Весь "Хабр" пестрит этим. Но реально нет там такой статьи, где тебе расскажут специфику от нулевой отметки о том, что, да откуда берётся? То есть по каким-то другим, постановочным статьям на "Хабре" ещё можно понять, что под терминалом понимается, на самом деле, консоль, а под консолью, в свою очередь, понимается "Командная строка" операционной системы, которая вызывается либо через "Пуск > Все программы > Стандартные > Командная строка", либо просто нажимается "Пуск" и в строке поиска прописываются три заветные буквы "cmd", которые подтверждаются нажатием на клавишу "Enter".

Но даже если ты нашёл определение терминала и попытался ввести упомянутую конструкцию "npm install", то всё равно ничего не получится, потому что автор не потрудился сказать, что когда-то давно он установил на свой компьютер программное обеспечение "Node.js", который позволяет ему устанавливать все примочки для проектов без особого труда.

Да, я нашёл ответы на эти вопросы и скачал себе "Node.js". Да, у меня заработали команды "npm install". Но вы думаете это помогло мне постичь данный дзен? Естественно нет. Это была дорога, которая лишь вывела меня на свет, на вершину горы, но к обрыву. А дальше-то что? Идти некуда. И вернулся я к истокам.

Но если считаете, что понимаете авторов и всю нитку повествования с этими всякими "npm", то следует скачать первым делом "Node.js" (https://nodejs.org/en/), ибо без него машина не просто не тронется с места, она даже не заведётся.

Далее я бился над проблемой поиска IDE (среда разработки приложений). Без IDE как без рук. И я спорил, спорил, спорил с коллегами о том, что все эти фреймворки, которые они рекомендуют, конечно, дело хорошее, но вот с наличием среды разработки для их использования какая-то информационная пропасть. Но то было мышление программиста, работавшего долгое время с толстыми клиентскими приложениями... А в споре, как известно, рождается истина. И мне дали понять, что я бьюсь головой об стену в поисках IDE одним простым вопросом:

- А зачем тебе IDE?
- Как же? А кто всё это безобразие компилировать будет? – Возразил я.
- Это же JavaScript, он, по сути, компилируется браузером. Можно писать код хоть в блокноте.

Один простой вопрос - одно простое решение. Можно писать в блокноте... Да и нужно, собственно, писать в блокноте, чтобы изучать и чувствовать всю специфику языка и технологии.

И, конечно, как только я сел и тупо скопировал простейший пример "Vue.js" в блокнот, то он у меня, не поверите, заработал.

Не сразу, естественно, ибо есть специфика на сайте - там всё поделено на рубрики:

- результат (Result);
- гипертекстовая разметка (HTML);
- скрипт, программный сценарий (Script);
- настройка стилевого оформления (CSS).

Если понимаешь, как взаимно увязать фрагменты этой мозаики - всё будет работать."ДАЛЕЕ ПРОДОЛЖЕНИЕ ПУБЛИКАЦИИ..."

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ

Я раньше считал, что только у нас в стране техническая поддержка занимается отписками и переводами стрелок на другие службы. А н-нет, оказывается, это общемировое... Ну, либо мне попался соотечественник, выдавший мне ответ на английском языке.

Да будет вам известно, квадрокоптером летаю исключительно с телефона любимой жены. С моим телефоном леталка так и не подружилась. Вообще говоря, я ждал-ждал, что, быть может, несколько месяцев пройдёт и выпустят долгожданное обновление... В общем, уже три обновления с момента покупки устройства прошло, а результатов всё нет. И, собственно, в очередной раз понял я, что под лежачий камень вода не течёт и надо бы что-либо написать официальным представителям, намекнуть, так сказать, что существует такая проблема, может быть обратят внимание... Ага, ждите... У меня вопрос был следующего характера, если вкратце:

"Есть квадрокоптер (фото с доказательством приобретения прилагается) с одной стороны, есть телефон Sony X Performance с другой стороны. Квадрокоптер нормальный, работоспособный - проверено, телефон тоже нормальный, месяцами и заграницей проверенный - не жалуюсь. Разными проводами попробовал подключать их между собой - ноль эффекта. Вроде бы, включаешь пульт ДУ / выключаешь пульт ДУ при подсоединённом телефоне - вибрация на телефоне идёт. Очевидно, сигнал есть, но в приложении "DJI GO 4" глухо, как в танке - не подключён и не подключён. Столь же очевидно, что проблема не в железе, а в ПО. Планируется ли поддержка Sony X Performance в перспективе? Спасибо."

Я этот вопрос, естественно, задал более строго и структурно на английском языке:

"Good daytime! I've bought Phantom 4 Pro this summer (some monthes ago) and still have a problem with the connection to the mobile phone (it is Sony Xperia X Performance [F8132]). Do You plan to support this device or I had to miss hope? It is alright with the Phantom 4 Pro. I've tested it successfully with the my wife's iPhone for several times but I want to use it with my own mobile phone. I've tryed some different USB connectors and there is still no results. I think the problem is in software "DJI GO 4" because when turning RC on it is a vibration at mobile device but at the application it is always text "Disconnected". So there is a signal between the devices but not enough for them to work properly. Waiting for the answer. Thank You very much forward."

И вот, что мне ответили:

"Hello, we are sorry, but this device is not supported. If and when it will be, we cannot say at this time. That is up to the development team."

Перевод на русский язык избыточен. Спасибо большое, кэп!

Серия сообщений "Активная позиция":
Часть 1 - ВЗАИМОДЕЙСТВИЕ СО СТРУКТУРАМИ ПРАВИТЕЛЬСТВА
Часть 2 - ОБРАЩЕНИЕ К ПРАВИТЕЛЬСТВУ №2
Часть 3 - EXPOCITYTRANS 2016. СО СТУДЕНТАМИ
Часть 4 - JACKIE-O - TSUKIAKARI (GINGA DENSETSU WEED, RUS)
Часть 5 - ТЕХНИЧЕСКАЯ ПОДДЕРЖКА, ТАКАЯ ТЕХНИЧЕСКАЯ ПОДДЕРЖКА
Часть 6 - К ВОПРОСУ О ПОЛЁТАХ КВАДРОКОПТЕРОВ НАД МОСКВОЙ
Часть 7 - БЛОГ-ТУР ПО СТАНЦИИ ШЕЛЕПИХА (ТПК) СОСТОЯЛСЯ
...
Часть 20 - ПРО ТРОТУАР МЕЖ РЯБИНОВОЙ И НИКУЛИНСКОЙ
Часть 21 - УЧЕБНО-МЕТОДИЧЕСКОЕ
Часть 22 - ДЕНЬ БЕЗ ТРАНСПОРТА 52: ПОСТ-COVIDАЛИПСИС. АНОНС

Как выяснилось, не лишено смысла такое мероприятие, как наглядное знакомство читателей с бочкообразными искажениями на фотографиях. Когда говорят об искажениях перспективы типа "рыбий глаз" - это вопросов не вызывает, всё понятно, ибо на слуху и повсеместно демонстрируется, да за специфику фотоискусства выдаётся. Но там хочешь/не хочешь, а править искажения надо.

И, всё же, "бочка". Покупая универсальный, туристический объектив, я соглашался с условиями, что искажения от него на кадрах, принципиально, будут, и мне потребуется с ними мириться. Мирился. Стали раздражать. Знать, настало время с ними бороться.

Впрочем, здесь я уже не буду с подробностями возвращаться к исторической составляющей, поскольку задача ставится иная - показать исходное изображение с характерной "бочкой", а также рядом вывести результат его правки. Чтобы не выглядело излишне занудно, разбавлю публикацию парочкой скриншотов из программы PTLens без какого-либо пользовательского руководства. На примере видно, что процесс довольно быстр и прост.

Изображение в PTLens в исходном состоянии (дверь в левой части кадра характерно искажена)

"ДАЛЬНЕЙШИЙ ОБЗОР"

Немного разбавлю прогулки и новости из жизни столицы примерчиком из области программирования и алгоритмизации. Давненько тут не было ничего компьютерного. А что? Чем богаты, тем и делимся.

Во времена, когда я был студентом, в курсе учебной практики не выдавалась такая задача как "Угадай число" на LabView. Когда же я пришёл преподавать, то мой преподаватель-куратор, с которым первое время имел удовольствие работать в рамках этой самой дисциплины в паре, задал студентам такую задачку. Одну на всех, общую. Затем, при защите, он задавал по ней кучу математических вопросов типа: "Сможете это доказать?", "В каком диапазоне работает датчик случайных чисел?", "Это зачем?", "Это как?", "Почему тут плюс единица?", "Почему минус единица?", "Зачем округляем до большего целого?" и другие. Я, в общем-то, не люблю задавать студентам одни и те же вопросы на одной паре, ибо кто-то подслушает, затем совершенно бездумно ответит, а позже и вовсе забудет. Так пару лет я принимал это задание, конечно, когда оно у всех было общим, но на третий год для меня стало это скучным - решил его немного усовершенствовать. Далее представлю результат решения одной из задач, сформулированных в результате модификации.

Звучит она так: "Угадай число и выведи на график все неправильные, попутно встретившиеся при поиске, значения".

Эта публикация рассчитана на тех, кто мало-мальски знаком с LabView и владеет базовыми навыками программирования и алгоритмизации. Выполнен пример на довольно старой версии LabView 6.1, но мне приходится не слезать с неё, поскольку на кафедре и в вычислительном центре ИТТСУ имеется лицензия только на эту версию. Студенты качают с торрентов и более продвинутые версии этого пакета прикладных программ для разработки виртуальных приборов.

Основные моменты алгоритма:

1. Через цифровой контроллер "Вводимое число" пользователь вводит значение от 1 до границы, задаваемой константой масштаба.
2. Это значение направляется в структуру (тело) цикла с предусловием While, где сравнивается по логике "не равно" с преобразованной реализацией псевдослучайного числа.
3. На каждой итерации цикла вырабатывается псевдослучайное число, которое масштабируется численной константой (умножается на численную константу) до нужного предела (в примере до 1000). Так диапазон псевдослучайных чисел расширяется с 0-1 до 0-1000.
4. Полученное значение продолжает содержать "десятичный хвост", от которого следует избавиться посредством округления. В примере использовано округление до ближайшего большего целого (+бесконечность). Реально могут быть использованы и другие операторы округления, но не хочется возиться с математическим порогом округления в 0,5. Нужно понимать, что эта операция смещает диапазон с 0-1000 к 1-1000. Ноль, поданный на вход, алгоритмом никогда не будет отгадан - программа зациклится. Это один из моментов, который можно в программке усовершенствовать, но мне, опять же, лень.
5. Цикл While работает до тех пор, пока число на цифровом контроллере не равно преобразованной реализации псевдослучайного числа.
6. Итератор (или параметр цикла i выполняет роль абсциссы графика) индексируется и передаётся на первые ячейки элемента-связки. При этом его финальное состояние выводится на цифровой индикатор "Количество итераций" и суммируется с константой, равной единице, с целью смещения от нуля. LabView без дополнительных предустановок всё считает с нуля.
7. На второй цифровой индикатор выводится последняя преобразованная реализация псевдослучайного числа.
8. На каждой итерации, посредством индексации, снимается преобразованная реализация псевдослучайного числа и подаётся на вторые ячейки элемента-связки.
9. Элемент-связка формирует индексированные точки (x;y), по которым может быть построен график. x - итерация, y - преобразованная реализация псевдослучайного числа.

Извините, если что-то осталось за гранью вашего понимания. Я старался не допускать терминологических ошибок, оттого некоторые предложения получились витиеватыми. Далее основные проблемные моменты попытался снять в картинках и комментариях.

P.S. Говоря контекстное меню, я имею в виду, что на элемент было произведено нажатие правой кнопкой мыши (ПКМ), дабы избавить текст от частого упоминания ПКМ.

Возможная реализация интерфейса виртуального прибора "Угадай число"

"ДАЛЕЕ СКРИНШОТЫ"

Серия сообщений "LabView":
Часть 1 - LABVIEW. НЕХИТРЫЕ ЗАДАЧКИ ПО ПРОГРАММИРОВАНИЮ. УГАДАЙ ЧИСЛО
Часть 2 - LABVIEW. ОЗНАКОМЛЕНИЕ С ПОЛЬЗОВАТЕЛЬСКИМ ИНТЕРФЕЙСОМ
Часть 3 - LABVIEW. НАСТРОЙКА ШРИФТОВ
...
Часть 11 - LABVIEW. ИСПОЛЬЗОВАНИЕ БЛОКА ОБЪЕДИНЁННОЙ АРИФМЕТИКИ
Часть 12 - LABVIEW. ЗАГОТОВКА GUI И КОДА ВП -УМНЫЙ КАЛЬКУЛЯТОР-
Часть 13 - LABVIEW. ИСПОЛЬЗОВАНИЕ CASE-СТРУКТУРЫ В ЛОГИЧЕСКОМ РЕЖИМЕ