Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

513 linhas
12KB

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <style>
  6. #header
  7. {
  8. background: #2BA6E3;
  9. padding: 0.7em;
  10. text-align: left;
  11. }
  12. #header a
  13. {
  14. color: white;
  15. text-decoration: none;
  16. padding: 0.5em 1em 0.5em 1em;
  17. }
  18. .news_item
  19. {
  20. background: #FFFFFF;
  21. width: 720px;
  22. padding: 1em;
  23. margin-top: 2em;
  24. margin-bottom: 2em;
  25. border: 1px solid #E0E0E0;
  26. text-align: left;
  27. }
  28. .news_item_contents
  29. {
  30. color: #444;
  31. line-height: 1.5em;
  32. }
  33. .news_item_date
  34. {
  35. margin-bottom: 2em;
  36. color: #aaa;
  37. }
  38. body
  39. {
  40. background: #FAFAFA;
  41. }
  42. code, pre
  43. {
  44. font-family: monospace, serif;
  45. font-size: 1em;
  46. color: #7f0a0c;
  47. }
  48. figure
  49. {
  50. margin: 0px;
  51. padding: 0px;
  52. }
  53. img
  54. {
  55. width: 720px;
  56. }
  57. html
  58. {
  59. font-family: sans-serif;
  60. }
  61. a
  62. {
  63. color: #3A91CB;
  64. text-decoration: none;
  65. }
  66. #lang
  67. {
  68. float: right;
  69. }
  70. figcaption
  71. {
  72. color: #aaa;
  73. }
  74. table
  75. {
  76. border-collapse: collapse;
  77. }
  78. table, th, td
  79. {
  80. border: 1px solid #aaa;
  81. padding: 0.5em;
  82. margin-top: 0.5em;
  83. margin-bottom: 0.5em;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <center>
  89. <div id="header">
  90. <a href="../../ru/news/index.html">Новости</a>
  91. <a href="../../ru/page/games.html">Игры</a>
  92. <a href="../../ru/page/about.html">О нас</a>
  93. <div id="lang">
  94. <a href="../../en/news/2016-august-recap.html">EN</a>
  95. <a href="2016-august-recap.html">RU</a>
  96. </div>
  97. </div>
  98. <h1>В новостях</h1>
  99. <div class="news_item">
  100. <h2 class="news_item_title">
  101. <a href="2016-august-recap.html">Август 2016 кратко</a>
  102. </h2>
  103. <p class="news_item_date">
  104. 2016-09-03 00:00
  105. </p>
  106. <div class="news_item_contents">
  107. <figure>
  108. <img src="../../images/2016-09-03_august-recap.png" alt="Редактор со сферическим узлом сцены" /><figcaption>Редактор со сферическим узлом сцены</figcaption>
  109. </figure>
  110. <p>Эта статья описывает самые важные технические детали разработки за август: модуль UIQt, его переработку, новый подход к разработке на основе функционала и его преимущества.</p>
  111. <p><strong>Модуль UIQt</strong> - это коллекция компонент UI на основе Qt. Сейчас используем лишь для интерфейса редактора.</p>
  112. Список компонент модуля UIQt с описанием и размером кода:
  113. <table>
  114. <tr>
  115. <th>
  116. <strong>№</strong>
  117. </th>
  118. <th>
  119. <strong>Компонента</strong>
  120. </th>
  121. <th>
  122. <strong>Описание</strong>
  123. </th>
  124. <th>
  125. <strong>Размер (Б)</strong>
  126. </th>
  127. <th>
  128. <strong>Размер (%)</strong>
  129. </th>
  130. </tr>
  131. <tr>
  132. <td>
  133. 1
  134. </td>
  135. <td>
  136. UIQtAction
  137. </td>
  138. <td>
  139. Действия (события) для меню
  140. </td>
  141. <td>
  142. 11224
  143. </td>
  144. <td>
  145. 9
  146. </td>
  147. </tr>
  148. <tr>
  149. <td>
  150. 2
  151. </td>
  152. <td>
  153. UIQtAux
  154. </td>
  155. <td>
  156. Инициализирует Qt и главное окно. Предоставляет поиск виджета по имени для других компонент
  157. </td>
  158. <td>
  159. 15518
  160. </td>
  161. <td>
  162. 12
  163. </td>
  164. </tr>
  165. <tr>
  166. <td>
  167. 3
  168. </td>
  169. <td>
  170. UIQtDock
  171. </td>
  172. <td>
  173. Виджет стыковки
  174. </td>
  175. <td>
  176. 5273
  177. </td>
  178. <td>
  179. 4
  180. </td>
  181. </tr>
  182. <tr>
  183. <td>
  184. 4
  185. </td>
  186. <td>
  187. UIQtFileDialog
  188. </td>
  189. <td>
  190. Диалог выбора файла
  191. </td>
  192. <td>
  193. 8960
  194. </td>
  195. <td>
  196. 7
  197. </td>
  198. </tr>
  199. <tr>
  200. <td>
  201. 5
  202. </td>
  203. <td>
  204. UIQtMenu
  205. </td>
  206. <td>
  207. Меню для главного окна и на ПКМ (вроде меню по добавлению/копированию/вставке/удалению узла)
  208. </td>
  209. <td>
  210. 4566
  211. </td>
  212. <td>
  213. 3
  214. </td>
  215. </tr>
  216. <tr>
  217. <td>
  218. 6
  219. </td>
  220. <td>
  221. UIQtMenuBar
  222. </td>
  223. <td>
  224. Панель меню для главного окна
  225. </td>
  226. <td>
  227. 4222
  228. </td>
  229. <td>
  230. 3
  231. </td>
  232. </tr>
  233. <tr>
  234. <td>
  235. 7
  236. </td>
  237. <td>
  238. UIQtRunner
  239. </td>
  240. <td>
  241. Позволяет запустить QApplication
  242. </td>
  243. <td>
  244. 2450
  245. </td>
  246. <td>
  247. 2
  248. </td>
  249. </tr>
  250. <tr>
  251. <td>
  252. 8
  253. </td>
  254. <td>
  255. UIQtThumbnailDialog
  256. </td>
  257. <td>
  258. Диалог с изображениями
  259. </td>
  260. <td>
  261. 18615
  262. </td>
  263. <td>
  264. 14
  265. </td>
  266. </tr>
  267. <tr>
  268. <td>
  269. 9
  270. </td>
  271. <td>
  272. UIQtToolBar
  273. </td>
  274. <td>
  275. Панель инструментов для главого окна
  276. </td>
  277. <td>
  278. 4276
  279. </td>
  280. <td>
  281. 3
  282. </td>
  283. </tr>
  284. <tr>
  285. <td>
  286. 10
  287. </td>
  288. <td>
  289. UIQtTree
  290. </td>
  291. <td>
  292. Предоставляет сложные виджеты вроде Дерева сцены и Редактора свойств
  293. </td>
  294. <td>
  295. 51216
  296. </td>
  297. <td>
  298. 39
  299. </td>
  300. </tr>
  301. <tr>
  302. <td>
  303. 11
  304. </td>
  305. <td>
  306. UIQtWidget
  307. </td>
  308. <td>
  309. Общие свойства виджетов вроде фокуса и видимости
  310. </td>
  311. <td>
  312. 5465
  313. </td>
  314. <td>
  315. 4
  316. </td>
  317. </tr>
  318. </table>
  319. <p><strong>Мы переработали модуль UIQt</strong> для замены старого State API на новый Environment API, который позволяет делать то же самое лаконичнее, т.е. упрощает и ускоряет разработку.</p>
  320. <p>Переработку начали в июле и должны были закончить в том же месяце. Тем не менеe, работы завершили лишь в августе. Начальный план предполагал, что 28 часов должно хватить, но мы потратили 65. Мы оценивали необходимое время на основе количества вызовов публичного API каждой компоненты. Это хорошо сработало для небольших компонент, т.к. число вызовов их публичного API было примерно равно количеству их функционала, а сам функционал был очень маленький. Однако такой подход полностью провалился для компонеты UIQtTree, составляющей 39% кода модуля UIQt, потому что не было прямой связи между публичным API и функционалом.</p>
  321. <p><strong>Новый подход к разработке на основе функционала</strong> родился после решения проблем с переработкой UIQtTree. Т.к. Qt использует MVC, компонента UIQtTree состоит из нескольких классов. К тому моменту, когда UIQtTree могла отображать и управлять иерархией элементов, компонента уже имела размер в 27К. Мы заметили, что UIQtTree стала потреблять непомерное количество времени разработки даже для мелкого функционала. Это было явным проявлением <a href="http://rsdn.org/article/philosophy/Complexity.xml">количественной сложности</a>.</p>
  322. <p>Мы решили разбить UIQtTree на базовую часть и дополнительные. База содержит лишь необходимый минимум кода. Дополнение содержит код, специфичный для данного функционала, и может быть безболезненно изменено. В случае UIQtTree, отображение и управление иерархией элементов - это минимальный функционал, а переименование элементов - это дополнение.</p>
  323. <p>Текущий функционал UIQtTree состоит из следующих возможностей:</p>
  324. <table>
  325. <tr>
  326. <th>
  327. <strong>№</strong>
  328. </th>
  329. <th>
  330. <strong>Функционал</strong>
  331. </th>
  332. <th>
  333. <strong>Описание</strong>
  334. </th>
  335. <th>
  336. <strong>Размер (Б)</strong>
  337. </th>
  338. <th>
  339. <strong>Размер (%)</strong>
  340. </th>
  341. </tr>
  342. <tr>
  343. <td>
  344. 1
  345. </td>
  346. <td>
  347. Base
  348. </td>
  349. <td>
  350. Создание, изменение, отображение иерархии элементов
  351. </td>
  352. <td>
  353. 26966
  354. </td>
  355. <td>
  356. 52
  357. </td>
  358. </tr>
  359. <tr>
  360. <td>
  361. 2
  362. </td>
  363. <td>
  364. Item open state
  365. </td>
  366. <td>
  367. Хранит состояние свойства скрыто/отображено элемента
  368. </td>
  369. <td>
  370. 3094
  371. </td>
  372. <td>
  373. 6
  374. </td>
  375. </tr>
  376. <tr>
  377. <td>
  378. 3
  379. </td>
  380. <td>
  381. Item renaming
  382. </td>
  383. <td>
  384. Переименование элемента
  385. </td>
  386. <td>
  387. 3471
  388. </td>
  389. <td>
  390. 7
  391. </td>
  392. </tr>
  393. <tr>
  394. <td>
  395. 4
  396. </td>
  397. <td>
  398. Item selection
  399. </td>
  400. <td>
  401. Получение/установка выбранного элемента
  402. </td>
  403. <td>
  404. 2338
  405. </td>
  406. <td>
  407. 5
  408. </td>
  409. </tr>
  410. <tr>
  411. <td>
  412. 5
  413. </td>
  414. <td>
  415. Item value
  416. </td>
  417. <td>
  418. Предоставляет второй и последующие столбцы для элементов, используется Редактором свойств
  419. </td>
  420. <td>
  421. 1307
  422. </td>
  423. <td>
  424. 3
  425. </td>
  426. </tr>
  427. <tr>
  428. <td>
  429. 6
  430. </td>
  431. <td>
  432. Item value editing
  433. </td>
  434. <td>
  435. Редактирование значений элемента с помощью стандартного виджета
  436. </td>
  437. <td>
  438. 1996
  439. </td>
  440. <td>
  441. 4
  442. </td>
  443. </tr>
  444. <tr>
  445. <td>
  446. 7
  447. </td>
  448. <td>
  449. Item value editing with combobox
  450. </td>
  451. <td>
  452. Редактирование значений элемента с помощью виджета combobox
  453. </td>
  454. <td>
  455. 5819
  456. </td>
  457. <td>
  458. 11
  459. </td>
  460. </tr>
  461. <tr>
  462. <td>
  463. 8
  464. </td>
  465. <td>
  466. Item value editing with spinner
  467. </td>
  468. <td>
  469. Редактирование значений элемента с помощью виджета spinbox
  470. </td>
  471. <td>
  472. 5290
  473. </td>
  474. <td>
  475. 10
  476. </td>
  477. </tr>
  478. <tr>
  479. <td>
  480. 9
  481. </td>
  482. <td>
  483. Menu
  484. </td>
  485. <td>
  486. Меню на ПКМ
  487. </td>
  488. <td>
  489. 1248
  490. </td>
  491. <td>
  492. 2
  493. </td>
  494. </tr>
  495. </table>
  496. <p>Пример файла функционала Menu для UIQtTree: <a href="https://bitbucket.org/ogstudio-history/mjin-pre-pre/src/0c4cc3c3213f4687c0f3bd6a5426a6054cadd79b/f/TREE_MENU.cpp?at=Studio+0.10&amp;fileviewer=file-view-default">TREE_MENU</a>.</p>
  497. <p><strong>Преимущества подхода:</strong></p>
  498. <ol type="1">
  499. <li>Более быстрое чтение/понимание благодаря небольшому размеру</li>
  500. <li>Более простое и безболезненное изменение благодаря изолированному коду</li>
  501. </ol>
  502. <p>Есть и недостаток: новый подход требует изучения.</p>
  503. <p>На этом мы заканчиваем описание самых важных технических деталей разработки за август: модуль UIQt, его переработку, новый подход к разработке на основе функционала и его преимущества.</p>
  504. </div>
  505. </div>
  506. </center>
  507. </body>
  508. </html>