OGS-Main
/
ogs-site

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>Август 2016 кратко</title>

    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/normalize.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/foundation.min.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/style.css" />
    <link rel="stylesheet" href="http://opengamestudio.org/theme/css/pygments.css" />	
    <script src="http://opengamestudio.org/theme/js/custom.modernizr.js"></script>

    <!-- So Firefox can bookmark->"abo this site" -->
        <link href="feeds/all.atom.xml" rel="alternate" title="Opensource Game Studio" type="application/atom+xml">

</head>

<body>

<!-- Nav Bar -->
<nav>

<!-- Show menu items and pages -->
<div class="row">
    <div class="large-12 columns top-bar">
	    <h1><a href="http://opengamestudio.org">Opensource Game Studio</a></h1>
    </div>
</div>
<div class="row top-menu">
<div class="large-12 columns">
        <a href="/pages/projects.html" class="menu-button secondary">Projects</a>
        <a href="/pages/about.html" class="menu-button secondary">About</a>

</div>
</div>
</nav>
<!-- End Nav -->


<!-- Main Page Content and Sidebar -->
<div class="row">

    <!-- Main Blog Content -->
    <div class="large-9 columns">
<article>
    <header>
        <h3 class="article-title"><a href="http://opengamestudio.org/2016-august-recap-ru.html" rel="bookmark"
        title="Permalink to Август 2016 кратко">Август 2016 кратко</a></h3>
    </header>

<h6 class="subheader" title="2016-09-03T00:00:00+03:00">Sat 03 September 2016
            <a class="button secondary small translation-button" href="http://opengamestudio.org/2016-august-recap.html">en</a>

</h6>    <p><img alt="2016-august-recap" src="http://opengamestudio.org/2016-09-03_august-recap.png"></p>
<p>Эта статья описывает самые важные технические детали разработки за август: модуль UIQt, его переработку, новый подход к разработке на основе функционала и его преимущества.</p>
<p><strong>Модуль UIQt</strong> - это коллекция компонент UI на основе Qt. Сейчас используем лишь для интерфейса редактора.</p>
<p>Список компонент модуля UIQt с описанием и размером кода:<table>
<tr>
  <th><strong>№</strong></th>
  <th><strong>Компонента</strong></th>
  <th><strong>Описание</strong></th>
  <th><strong>Размер (Б)</strong></th>
  <th><strong>Размер (%)</strong></th>
</tr>
<tr>
  <td>1</td>
  <td>UIQtAction</td>
  <td>Действия (события) для меню</td>
  <td>11224</td>
  <td>9</td>
</tr>
<tr>
  <td>2</td>
  <td>UIQtAux</td>
  <td>Инициализирует Qt и главное окно. Предоставляет поиск виджета по имени для других компонент</td>
  <td>15518</td>
  <td>12</td>
</tr>
<tr>
  <td>3</td>
  <td>UIQtDock</td>
  <td>Виджет стыковки</td>
  <td>5273</td>
  <td>4</td>
</tr>
<tr>
  <td>4</td>
  <td>UIQtFileDialog</td>
  <td>Диалог выбора файла</td>
  <td>8960</td>
  <td>7</td>
</tr>
<tr>
  <td>5</td>
  <td>UIQtMenu</td>
  <td>Меню для главного окна и на ПКМ (вроде меню по добавлению/копированию/вставке/удалению узла)</td>
  <td>4566</td>
  <td>3</td>
</tr>
<tr>
  <td>6</td>
  <td>UIQtMenuBar</td>
  <td>Панель меню для главного окна</td>
  <td>4222</td>
  <td>3</td>
</tr>
<tr>
  <td>7</td>
  <td>UIQtRunner</td>
  <td>Позволяет запустить QApplication</td>
  <td>2450</td>
  <td>2</td>
</tr>
<tr>
  <td>8</td>
  <td>UIQtThumbnailDialog</td>
  <td>Диалог с изображениями</td>
  <td>18615</td>
  <td>14</td>
</tr>
<tr>
  <td>9</td>
  <td>UIQtToolBar</td>
  <td>Панель инструментов для главого окна</td>
  <td>4276</td>
  <td>3</td>
</tr>
<tr>
  <td>10</td>
  <td>UIQtTree</td>
  <td>Предоставляет сложные виджеты вроде Дерева сцены и Редактора свойств</td>
  <td>51216</td>
  <td>39</td>
</tr>
<tr>
  <td>11</td>
  <td>UIQtWidget</td>
  <td>Общие свойства виджетов вроде фокуса и видимости</td>
  <td>5465</td>
  <td>4</td>
</tr>
</table></p>
<p><strong>Мы переработали модуль UIQt</strong> для замены старого State API на новый Environment API, который позволяет делать то же самое лаконичнее, т.е. упрощает и ускоряет разработку.</p>
<p>Переработку начали в июле и должны были закончить в том же месяце. Тем не менеe, работы завершили лишь в августе. Начальный план предполагал, что 28 часов должно хватить, но мы потратили 65. Мы оценивали необходимое время на основе количества вызовов публичного API каждой компоненты. Это хорошо сработало для небольших компонент, т.к. число вызовов их публичного API было примерно равно количеству их функционала, а сам функционал был очень маленький. Однако такой подход полностью провалился для компонеты UIQtTree, составляющей 39% кода модуля UIQt, потому что не было прямой связи между публичным API и функционалом.</p>
<p><strong>Новый подход к разработке на основе функционала</strong> родился после решения проблем с переработкой UIQtTree. Т.к. Qt использует MVC, компонента UIQtTree состоит из нескольких классов. К тому моменту, когда UIQtTree могла отображать и управлять иерархией элементов, компонента уже имела размер в 27К. Мы заметили, что UIQtTree стала потреблять непомерное количество времени разработки даже для мелкого функционала. Это было явным проявлением <a href="http://rsdn.org/article/philosophy/Complexity.xml">количественной сложности</a>.</p>
<p>Мы решили разбить UIQtTree на базовую часть и дополнительные. База содержит лишь необходимый минимум кода. Дополнение содержит код, специфичный для данного функционала, и может быть безболезненно изменено. В случае UIQtTree, отображение и управление иерархией элементов - это минимальный функционал, а переименование элементов - это дополнение.</p>
<p>Текущий функционал UIQtTree состоит из следующих возможностей:</p>
<table>
<tr>
  <th>**№**</th>
  <th>**Функционал**</th>
  <th>**Описание**</th>
  <th>**Размер (Б)**</th>
  <th>**Размер (%)**</th>
</tr>
<tr>
  <td>1</td>
  <td>Base</td>
  <td>Создание, изменение, отображение иерархии элементов</td>
  <td>26966</td>
  <td>52</td>
</tr>
<tr>
  <td>2</td>
  <td>Item open state</td>
  <td>Хранит состояние свойства скрыто/отображено элемента</td>
  <td>3094</td>
  <td>6</td>
</tr>
<tr>
  <td>3</td>
  <td>Item renaming</td>
  <td>Переименование элемента</td>
  <td>3471</td>
  <td>7</td>
</tr>
<tr>
  <td>4</td>
  <td>Item selection</td>
  <td>Получение/установка выбранного элемента</td>
  <td>2338</td>
  <td>5</td>
</tr>
<tr>
  <td>5</td>
  <td>Item value</td>
  <td>Предоставляет второй и последующие столбцы для элементов, используется Редактором свойств</td>
  <td>1307</td>
  <td>3</td>
</tr>
<tr>
  <td>6</td>
  <td>Item value editing</td>
  <td>Редактирование значений элемента с помощью стандартного виджета</td>
  <td>1996</td>
  <td>4</td>
</tr>
<tr>
  <td>7</td>
  <td>Item value editing with combobox</td>
  <td>Редактирование значений элемента с помощью виджета combobox</td>
  <td>5819</td>
  <td>11</td>
</tr>
<tr>
  <td>8</td>
  <td>Item value editing with spinner</td>
  <td>Редактирование значений элемента с помощью виджета spinbox</td>
  <td>5290</td>
  <td>10</td>
</tr>
<tr>
  <td>9</td>
  <td>Menu</td>
  <td>Меню на ПКМ</td>
  <td>1248</td>
  <td>2</td>
</tr>
</table>

<p>Пример файла функционала Menu для UIQtTree: <a href="https://bitbucket.org/ogstudio-history/mjin/src/0c4cc3c3213f4687c0f3bd6a5426a6054cadd79b/f/TREE_MENU.cpp?at=Studio+0.10&amp;fileviewer=file-view-default">TREE_MENU</a>.</p>
<p><strong>Преимущества подхода:</strong></p>
<ol>
<li>Более быстрое чтение/понимание благодаря небольшому размеру</li>
<li>Более простое и безболезненное изменение благодаря изолированному коду</li>
</ol>
<p>Есть и недостаток: новый подход требует изучения.</p>
<p>На этом мы заканчиваем описание самых важных технических деталей разработки за август: модуль UIQt, его переработку, новый подход к разработке на основе функционала и его преимущества.</p>
<p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>

</p>


</article>
    </div>
    <!-- End Main Content -->

    <!-- Sidebar -->
    <aside class="large-3 columns">
        <!--k
        <h5 class="sidebar-title">Site</h5>
        <ul class="side-nav">
            <li><a href="http://opengamestudio.org/archives.html">Archives</a>
            <li><a href="http://opengamestudio.org/tags.html">Tags</a>


                <li><a href="http://opengamestudio.org/feeds/all.atom.xml" rel="alternate">Atom feed</a></li>
        </ul>

		
        <h5 class="sidebar-title">Categories</h5>
        <ul class="side-nav">
            <li><a href="http://opengamestudio.org/category/news.html">News</a></li>
   
        </ul>
        -->


        <h5 class="sidebar-title">Ads</h5>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- ogs2 -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-4473792248813084"
             data-ad-slot="9024247127"
             data-ad-format="auto"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

    </aside> <!-- End Sidebar -->

</div> <!-- End Main Content and Sidebar -->


<!-- Footer -->
<footer class="row">
    <div class="large-12 columns">
        <hr />
        <div class="row">
            <div class="large-7 columns">
                <p>Proudly powered by <a href="http://getpelican.com">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.</p>
            </div>
            </div>
    </div>
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-3773114-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
</footer>