Javascript.Галерея
Материал из Hivext Wiki
Содержание |
Делаем простую галерею картинок
В этом уроке создадим галерею с функциями загрузки и отображения уже загруженных картинок. Галерея полностью написана на JavaScript без программирования серверной части, скрипты можно разместить на любом домене (хостинге) и все функции загрузки и отображения будут работать.
Смотрим документацию
Нужны сервисы Файловое хранилище для загрузки и хранения файлов, Структуры для хранения путей к картинкам и Управление доступом чтобы не зарегистрированные пользователи (гости) могли тоже просматривать и загружать картинки.
Часть работ (генерация идентификатора, подготовка необходимых типов и установка политики доступа) выполним через API Консоль и после перейдем к программированию логики приложения.
Подготавливаем данные
Перед началом разработки необходимо получить идентификатор приложения (APPlication IDentificator - APPID) так как это основное требование платформы чтобы можно было вызывать методы сервисов (подробнее). Получить идентификатор можно через API Консоль или через Управление приложениями. В данном уроке сделаем все через API Консоль. После получения идентификатора нужно определить типы, установить права доступа, но обо всем по порядку с разъяснением зачем это нужно делать.
Входим в API Консоль
Запускаем API Консоль и входим под своим аккаунтом через сервис Идентификация и аутентификация, метод Signin.
Генерируем идентификатор приложения
Каждое приложение имеет своё рабочее окружение (базы данных, типы, объекты, ресурсы). Чтобы одно приложение отделить от других это окружение создается платформой автоматически при генерации идентификатора. Поэтому мы должны с генерировать идентификатор под нашу Галерею картинок. Идентификатор приложения можно привязать к конкретному домену или нескольким доменам, для этого в методе GenerateApp предусмотрен параметр domain (в дальнейшем domain можно изменить через метод ChangeAppInfo).
После успешной аутентификации перейдем в сервис Управление приложениями и создадим новый идентификатор. Изначально во всех методах в параметре appid указан идентификатор API Консоли, после создания своего идентификатора можно будет переключить на него. В поле domain ничего не указываем, чтобы можно было тестировать с localhost, потом можно указать домен (домены) на котором разместится приложение. Если домен указан, то вызовы методов с других доменов под вашим appid будут блокироваться.
Идентификатор создан и теперь он доступен в списке активных идентификаторов. Выбираем его.
Теперь все вызываемые методы и создаваемые данные будут ассоциироваться с вашим приложением.
Определяем нужные типы данных
Если в приложении потребовалось хранение структурированных данных, то необходимо воспользоваться сервисом Структур - он напрямую работает с базой данных вашего приложения и поможет быстро создать нужные таблицы, поля и записи. В галерее требуется хранить пути к уже загруженным картинкам, поэтому создадим необходимые типы и поля.
Переходим в сервис Структур и создадим нужный тип данных для хранения пути к картинке. Назовем тип picture и создадим в нем поле path - в нем будут храниться пути.
type = picture
fields = { path : "string" }
Тип данных создан успешно, в базе данных создалась таблица с полями которые вы задали.
Устанавливаем права доступа
По умолчанию после создания приложения, необходимых типов и объектов, доступ к ним закрыт для пользователей и гостей. Основное правило которому следует система прав доступа: все что не разрешено - запрещено. Из этого правила следует что пока мы не разрешим доступ к типам данных и объектам нашего приложения никто не сможет, ни создавать новые объекты, ни читать их и т.д. Поэтому нужно перейти в сервис Управления доступа и открыть доступ к необходимым типам и объектам (подробнее о правах доступа).
В примере с простой галереей достаточно создать одну роль (назовем ее users) и указать права доступа при работе с типом picture (напомню что данный тип мы создали в предыдущем пункте через сервис Структур). Далее необходимо применить эту роль на пользователей и гостей приложения Gallery.
Создадим роль users.
Установим политику доступа для роли users на тип и объекты picture.
| Для роли users можно создавать объекты типа picture.
object = picture - означает что права применяются к типу picture. | Для роли users можно читать все объекты типа picture.
object = picture/* - означает что права применяются к любым объектам (созданным и не созданным) типа picture. |
| 
|
Свяжем роль users с приложением Gallery, пользователями и гостями.
| Применим роль к нашему приложению и пользователям. | Применим роль к нашему приложению и гостям. |
| 
|
Теперь пользователи и гости приложения Gallery могут создавать и читать объекты типа picture.
Необходимые данные готовы можно перейти к написанию приложения.
Пишем приложение
Большинство работ было выполнено через API Консоль, созданы идентификатор приложения и тип данных в базе с необходимым полем, заданы права доступа к типу и объектам приложения Gallery. Осталась малая часть разработки, запрограммировать логику приложения. Ниже представлен финальный код приложения.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Простая галерея картинок</title>
<head>
<script src="http://code.hivext.ru/frameworks/js/core.js" type="text/javascript"></script>
<script src="http://api.hivext.ru/1.0/data/base.js" type="text/javascript"></script>
<script src="http://api.hivext.ru/1.0/storage/uploader.js" type="text/javascript"></script>
<style type="text/css">
body {
font-family: "Lucida Grande", Tahoma, Verdana, Arial, Sans-Serif;
font-size: 12px;
color: #333;
}
#error {
border: 1px solid #ff5050;
background-color: #ffc5b5;
padding: 4px 10px;
display: none;
font-size: 10px;
font-weight: bold;
text-align: center;
}
.pic {
width: 250px;
height: 150px;
border: 8px solid #ddd;
margin: 4px;
}
</style>
<script type="text/javascript">
function main() {
function id(sId) { return document.getElementById(sId); }
// Методы отображения ошибок (чтобы было все красиво и информативно).
var Error = {
Show : function(nCode, sText) {
id("error").innerHTML = "Error [" + nCode + "] " + sText;
id("error").style.display = "block";
setTimeout(function() { Error.Hide(); }, 2000);
},
Hide : function() { id("error").style.display = "none"; }
};
// Функция создания картинки.
function CreateImage(sPath) {
var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = sPath;
return oImg;
}
// Идентификатор приложения и сессия.
var sAppid = "3292317fb67e88e4653bb470ffff7eb0",
sSession = "guest", // Для гостей переменная session может принимать любые значения.
nFid;
// Получаем все объекты типа picture.
Data.Base.GetObjects(sAppid, sSession, "picture", function(oResponse) {
if(oResponse.result == 0 && oResponse.objects) {
// В каждом объекте содержится свойство path содержащее путь к картинке.
// Отобразим уже загруженые картинки.
for(var i=oResponse.objects.length-1; i>=0; i--) {
var oImg = CreateImage(oResponse.objects[i].path);
id("content").appendChild(oImg);
}
} else Error.Show(oResponse.result, oResponse.error);
});
// Повесим обработчик на загрузку файла.
id("upload").onchange = function() {
// Если началась новая загрузка прервем предыдущую, если была.
Storage.Uploader.Abort(nFid);
nFid = parseInt(Math.random()*100000); // Генерация случайного идентификатора.
// Начинаем загрузку файла.
Storage.Uploader.Upload(nFid, this, function(oResponse) {
if(oResponse.result == 0) {
// После загрузки файла, подготовим путь и создадим объект типа picture.
// В свойство path запишем путь к картинке.
var sPath = oResponse.file + "/view";
Data.Base.CreateObject(sAppid, sSession, "picture",
"{ path : '" + sPath + "' }", function(oResponse) {
// Если объект создан успешно, отобразим загруженую картинку в интерфейсе.
if(oResponse.result == 0) {
var oImg = CreateImage(sPath);
if(id("content").childNodes.length)
id("content").insertBefore(oImg, id("content").childNodes[0]);
else id("content").appendChild(oImg);
} else Error.Show(oResponse.result, oResponse.error);
});
} else Error.Show(oResponse.result, oResponse.error);
});
}
}
</script>
</head>
<body onload="main()">
<div id="error"></div>
Загрузить картинку <input id="upload" type="file" />
<br /><br />
<div id="content"></div>
</body>
</html>
Результат
http://code.hivext.ru/examples/js/gallery/
