Реклама

Поиск

Добавление комментариев на сайт с Django

TutorialDjangoКомментарии, Django, Python, Materialized Path1595

Взявшись за реализацию комментариев на сайте под Django, я с удивлением обнаружил, что Django не предоставляет никаких модулей для реализации комментариев. Вернее он предоставлял его раньше, это был модуль django.contrib.comments, но в версии 1.7 его объявили как deprecated и предложили либо пилить самостоятельно, либо воспользоваться чем-нибудь вроде Disqus. Хорошо, он вроде тоже поддерживает подсветку синтаксиса кода, но... в статьях одна подсветка, в комментариях другая - это будет некрасиво. 

Поэтому будем внедрять собственный велосипед и ловить свои баги.

Для реализации комментариев необходимо:

  • Добавить новую модель, назовём её Comment;
  • Добавить представление, которое будет обрабатывать добавление комментария;
  • Добавить форму для ввода комментария;
  • Воспользоваться для организации древовидной структуры подходом Materialized Path;

Materialized Path в PostgreSQL

TutorialPostgreSQLMaterialized Path, PostgreSQL1062

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

Распространёнными подходами для организации древовидных структур являются:

Adjacency List
Список смежных вершин

Организация структуры данных заключается в том, что каждый объект хранит информацию о родительском объекте, то есть в строке таблицы имеется дополнительное поле, в котором указывается ID объекта, в который вложен данный объект.
Nested Set
Вложенное множество
Вложенные множества хранят информацию не Только о так называемых левом и правом ключе, а также уровне вложенности. Данный вариант организации структуры данных удобен для чтения, но более тяжело поддаётся модификации.
Materialized Path
Материализованный путь
Идея этой структуры данных заключается в том, что каждая запись хранит полный путь к корневому элементу дерева.

Рассмотрение этих структур данных было вызвано необходимостью внедрения на сайт поддержки комментариев для статей.

Реклама

Qt/C++ - Урок 013. QMenu - контекстное меню в QTableView

TutorialQtQMenu, QMenu example, QMenu Qt, Qt, контекстное меню, меню433

Для работы с контекстным меню в Qt используется класс QMenu . При совершении действий, которые должны вызвать меню, вызывается обработчик, который создаёт меню и привязывает обработчики к действиям в данном меню.

В данном уроке работа с контекстным меню будет показана на примере программного кода из урока по работе с QDataWidgetMapper . В данном уроке будет отредактировано два файла из предыдущего урока, но проект не заработает , если Вы не включите в него также файлы из предыдущего урока, которые не редактировались.

Программный код был написан в QtCreator 3.3.1 на основе Qt 5.4.1.

Структура проекта для QMenu

Структура проекта остается неизменной, как и в уроке, на котором основывается данный урок. Изменениям в программном коде будут подвергнуты лишь два файла:

  • mainwindow.h
  • mainwindow.cpp

Qt/C++ - Урок 037. Двумерный массив с помощью QVector

TutorialQtQt, QVector, двумерный, одномерный, массив229

Класс QVector относится к контейнерным классам и обеспечивает доступ к элементам по индексу, а также ряд дополнительных методов для удобства работы.

Экземпляр класса QVector по сути является одномерным массивом объектов. Если требуется задать в виде Вектора двумерный массив, то можно создать экземпляр QVector, который будет содержать другие экземпляры QVector.

Одномерный массив с помощью QVector

Для начала сохраним в Вектор одномерный массив типа int:

QVector <int> myVector;

int massive[4] = {1, 2, 3, 4};

for(int i = 0; i < 4; i++)
{
    myVector.push_back(massive[i]);
    qDebug() << "Value " << i << ": " << myVector.value(i);
}

И посмотрим вывод qDebug() :

Value  0 :  1
Value  1 :  2
Value  2 :  3
Value  3 :  4

Qt/C++ - Урок 008. QDataWidgetMapper - Работа с базой данных через виджет

TutorialQtmapper, QDataWidgetMapper, QDataWidgetMapper example, QSqlTableModel, qt, sql418

Для отображения данных в виджет с произвольной формой используется класс QDataMapperWidget . Для работы с этим виджетом по-прежнему требуется модель, для представления данных.

Например, QSqlTableModel или QSqlRelationalTableModel , но данные подставляются уже не в QTableView , а в различные произвольные объекты. Например QLineEdit или QComboBox. Или в диалоговое окно, для добавления записей, с которым поработаем в этой статье.

Итак, задача стоит следующая. Написать программу, которая выводит в таблицу список компьютеров, а каждый компьютер имеет три поля данных: Имя Хоста, IP-адрес и MAC-адрес. Также должна быть кнопка для вызова диалогового окна, через которое Мы можем добавить новое устройство в таблицу. Также у нас должна быть возможность редактирования записей через тоже самое диалоговое окно.

После того, как задача описана, приступаем к её реализации в программном коде, который был написан в QtCreator 3.3.1 на основе Qt 5.4.1.

Структура проекта для QDataWidgetMapper

Проект создается как Приложение Qt Widgets, в котором создаются следующие файлы:

  • QDataMapperWidget.pro - профайл;
  • mainwindow.h - заголовочный файл основного окна приложения;
  • mainwindow.cpp - исходный код окна;
  • main.cpp - основной исходный файл, с которого стартует приложение;
  • mainwindow.ui - формочка основного окна приложения;
  • database.h - заголовочный файл вспомогательного класса, применяющегося для работы с информацией, которая помещена в базу данных;
  • database.cpp - исходный файл вспомогательного класса, применяющегося для работы с информацией, которая помещена в базу данных;
  • dialogadddevice.h - заголовочный файл диалогового окна для добавления и редактирования записей;
  • dialogadddevice.cpp - исходный файл диалогового окна для добавления и редактирования записей;
  • dialogadddevice.ui

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

Реклама

QML - Урок 013. Позиционирование в QML с якорями ( Anchors )

TutorialQMLanchors, left, right, bottom, top, centerIn, Qt, QML226

В дополнение к более традиционным Grid, Row, Column, Qt Quick также предоставляет функционал для элементов слоёв, использующий концепцию якорей ( Anchors ). Каждый элемент может быть рассмотрен, как имеющий набор из 7 невидимых "якорных линий":

  • left;
  • horizontalCenter;
  • right;
  • top;
  • verticalCenter;
  • baseline;
  • bottom.

Baseline ( на данном рисунке) соответствует воображаемой линии, на которой помещается текст. Для элементов без текста это соответствует линии top.

QML - Урок 007. ListView Qml. Динамическое создание и удаление элементов

TutorialQMLAndroid, ListItem, ListModel, ListView, QML, Qt283

В статье про динамическое создание виджетов в Qt я уже рассказывал, как создавать и удалять кнопки динамически, а также как с ними взаимодействовать. И там использовался Vertical Layout , а случае с Qml мы сможем использовать ListView Qml, как аналогично используется при программирование в Java под Android. Что, к слову говоря, также применимо при программировании на Qt под Android.

В статье про динамическое создание виджетов использовались для примера объекты класса QButton. В данной статье будут использоваться объекты Button Qml, о кастомизации которых было рассказано в следующей статье . Но кнопки будут размещаться в ListView Qml.

Структура проекта для работы с ListView Qml

На это раз обойдёмся проектом, созданным по умолчанию и даже без дизайнера интерфейсов. Тем более, что на момент написания статьи не все параметры можно было задать в дизайнере. А структура проекта следующая:

  • QmlDynamic.pro - профайл проекта;
  • deployment.pri - файл правил деплоя на целевую платформу;
  • main.cpp - основной файл запуска приложения;
  • main.qml - qml файл с исходными кодами программы

QML - Урок 014. GridLayout QML - Позиционирование элементов

TutorialQMLGridLayout, Qt, QML, ячейка, cell, row, column173

Небольшая заметка, родившаяся из вопроса одного из постоянных читателей сайта. При разработке интерфейса приложения под QML для позиционирования объектов в GridLayout необходимо использовать функционал вложенных свойств Layout. Таких как:

  • Layout.row - указывает строку, в которой располагается объект;
  • Layout.column - указывает колонку, в которой располагается объект;
  • Layout.rowSpan - указывает, на сколько строк должен быть растянут объект;
  • Layout.columnSpan - указывает, на сколько колонок должен быть растянут объект;
  • Layout.minimumWidth - минимальная ширина объекта в слое;
  • Layout.minimumHeight - минимальная высота объекта в слое;
  • Layout.preferredWidth - предпочтительная ширина объекта в слое;
  • Layout.preferredHeight - предпочтительная высота объекта в слое;
  • Layout.maximumWidth - максимальная ширина объекта в слое;
  • Layout.maximumHeight - максимальная высота объекта в слое;
  • Layout.fillWidth - заполнение по ширине;
  • Layout.fillHeight - заполнение по высоте;
  • Layout.alignment - выравнивание в слое;

QML - Урок 003. Custom Dialog in QML Android

TutorialQMLcustom dialog, dialog android, qml custom dialog, qml custom dialog example, qml dialog android, qt, qt android, qt qml dialog266

После того, как Мы сделали кастомизированные кнопки в предыдущем уроке , настало время сделать Custom Dialog , который будет выглядеть более нативно для Android устройства, а может даже и смахивать по дизайну на IOS устройство. Во всяком случае Вы сможете более основательно подойди к реализации гайдов этих устройств.

Для создания диалога будет использоваться объект Dialog из библиотеки QtQuick.Dialog . А нюанс при работе с Custom Dialog под Android заключается в том, что Стандартные Кнопки, которые адекватно выглядят при разработке под Desktop, под Android выглядят вырвиглазно, да и ещё их проблематично кастомизировать для начинающего разработчика. Проще реализовать собственные кнопки с собственной стилизацией.

Разработка Custom Dialog

Разработку кастомизированного диалога продолжим на основе проекта из предыдущего урока. Там у нас были созданы две Custom Button , которые мы немного подправим по цветовой гамме, чтобы они лаконично выглядели по отношению к Диалогу. А также, используя прием по их стилизации, стилизуем кнопки диалогового окна, в которому будут присутствовать две кнопки: "OK" и "Cancel". Эти кнопки будут закрывать диалог.

Кнопки диалогового окна нужно будет прибить к нижней части диалога, а остальную часть отдадим под сообщение "Hello, World!!!", а также разделим кнопки серой линией друг с другом, и такой же линией отделим эти кнопки от сообщения. Будет похоже немного на IOS диалог. В качестве линии будет выступать прямоугольник Rectangle, такой же приём применяется и при разработке под Android на Java , только вместо QML используется XML вёрстка.

Для того, чтобы сделать нормальное кастомизированное содержимое диалогового окна, необходимо задать его параметру contentItem тот объект, который заменит содержимое. Наиболее удобным объектом является Rectangle , а уже в нём будем размещать все остальные объекты. Естественно никаких стандартных кнопок там уже и в помине не будет, так что можете о них забыть, но это не большая потеря на самом деле.

QML - Урок 016. База данных SQLite и работа с ней в QML Qt

TutorialQMLБаза данных, SQLite, Qt, QML, Android, DataBase, Model, View, MVC476

Небольшой пример по работе с базой данных в QML Qt . В данном уроке сводится воедино информация о применении сигналов и слотов в QML Qt , о доступе к C++ классам из QML слоя, реализации интерфейса приложения на QML, а также о реализации модели/представлении для таблицы базы данных.

База данных содержит таблицу со списком людей, в которой имеется четыре колонки:

  • id (INTEGER) - уникальный номер записи;
  • FirstName (VARCHAR (255)) - Имя;
  • SurName (VARCHAR (255)) - Фамилия;
  • Nik (VARCHAR (255)) - Ник.

Приложение должно реализовывать удаление и добавление записей в базу данных через интерфейс приложения. Для добавления записей в Базу данных будет использоваться три поля для ввода данных и кнопка, которая инициализирует добавление данных в базу данных SQL . Добавление записей в таблицу осуществляется через класс обёртку предназначенным для этого методом.Также в приложении присутствует класс ListModel , который реализует модель представления данных для отображения информации в TableView в слое QML.

Реклама

Реклама