Tutorial for creating the base application Gallery
Gallery
This tutorial demonstrates how you can create simple application gallery using TAU library. The main features of the Gallery include:
- shows all images which can be scrollable
- preview one selected image
- jump to beginning list of images
Tutorial Goal
Building from scratch application with the following functionalities:
- Showing all images on the first page
- The images can be selected
- List of images can be scrolled
- On the first page will be located a button with functionality of scrolling to the beginning of list
- The image after click will show in new page.
- The image on the new page can be zoomed.
Step 1: Generating simple app from Tizen SDK
First we should create simple basic app, which can be a base application for develop. For creating default application go to menu File in Tizen SDK and select New->Tizen Web Project. In window which is appearing select Basic-> Basic Application then type name for app Gallery and click Finish. After this operations should be created application with default files structure like here
Step 2:
When you have created a basic application, you may go to edit a
file index.html. Before you start check out the section header.
Because the application will runs on mobile or wearable devices,
you need to add tau.css styles for the corresponding profile.
If you want create mobile app you should add style css from profile mobile
add link to header like below:
<!-- Use 'mobile' or 'wearable' to chose device tau profile -->
<link rel="stylesheet" type="text/css" href="js/lib/tau/mobile/theme/default/tau.css"/>
or profile wearable :
<!-- Use 'mobile' or 'wearable' to chose device tau profile -->
<link rel="stylesheet" type="text/css" href="js/lib/tau/wearable/theme/default/tau.css"/>
and also add your own styles for application.
<link rel="stylesheet" type="text/css" href="css/style.css"/>
And now the whole section header should look like below:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>
<title>Gallery</title>
<!-- Use 'mobile' or 'wearable' to chose device tau profile -->
<link rel="stylesheet" type="text/css" href="js/lib/tau/mobile/theme/default/tau.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
Step 3:
In this step you need create two basic pages:
- page where application displays all images
- page for view single image
First page
First page is a div block with class=ui-page and id=galleryPage.
Here you can add title header Gallery like below:
<div id="galleryPage" class="ui-page">
<header class="ui-header">
<h1 class="ui-title ui-title-text-fadeout">Gallery</h1>
</header>
</div>
And now you need to add content for first page. To do this,
add section tag with id galleryPageSection and class ui-content.
Add to this section tag list of all images. In this case images will
be shown as div background. div tag will have class img-container
and data-url to source image. Example is below:
<div class="img-container" data-url="images/k.jpg" style="background-image:url('images/k.jpg');"></div>
Here add button to application which will scroll list of images to top.
The button let will created from div which has data role data-role="button"
and id moveToTop. In the next steps to this button will add a function
to scrolling.
<div id="moveToTop" data-role="button" class="ui-btn" >Move to top</div>
Full code for first page is shown below:
<div id="galleryPage" class="ui-page">
<header class="ui-header">
<h1 class="ui-title ui-title-text-fadeout">Gallery</h1>
</header>
<section id="galleryPageSection" class="ui-content">
<div class="img-container" data-url="images/k.jpg" style="background-image:url('images/k.jpg');"></div>
<div class="img-container" data-url="images/o.jpg" style="background-image:url('images/o.jpg');"></div>
<div class="img-container" data-url="images/r.jpg" style="background-image:url('images/r.jpg');"></div>
<div class="img-container" data-url="images/w.jpg" style="background-image:url('images/w.jpg');"></div>
<div class="img-container" data-url="images/a.jpg" style="background-image:url('images/a.jpg');"></div>
<div class="img-container" data-url="images/b.jpg" style="background-image:url('images/b.jpg');"></div>
<div class="img-container" data-url="images/c.jpg" style="background-image:url('images/c.jpg');"></div>
<div class="img-container" data-url="images/h.jpg" style="background-image:url('images/h.jpg');"></div>
<div class="img-container" data-url="images/x.jpg" style="background-image:url('images/x.jpg');"></div>
<div class="img-container" data-url="images/z.jpg" style="background-image:url('images/z.jpg');"></div>
<div id="moveToTop" data-role="button" class="ui-btn" >Move to top</div>
</section>
</div>
Second page:
Second page is a div with id imagePage and class ui-page. This page is need
for preview selected image. When some image on the first pages will be clicked,
then path to source image will get from data-url and set as source
to tag <img>, After that will trigger event changepage to imagePage page
and shows the image. By default source to img is set to empty string.
Code for second page is below:
<div id="imagePage" class="ui-page">
<img id="imageToShow" src=""/>
</div>
Step 4:
Finally need to link to TAU library sources and add script to the application
<script src="js/lib/tau/mobile/js/tau.js"></script>
<script src="js/main.js"></script>
This step is finalizing the edition of the file index.html.
Example is attached at the bottom off the page.
Step 5:
When the index.html is ready, you can add styles for content.
#galleryPage .ui-scrollview-view {
padding: 0 !important;
}
#galleryPage #moveToTop {
clear: both;
}
#galleryPage .img-container {
float: left;
width: 50%;
height: 50%;
background-position: center, center;
background-size: cover;
}
#imagePage {
background-size: contain;
background: no-repeat center, center;
overflow-x: visible;
overflow-y: visible;
}
#imageToShow {
min-width: 100%;
min-height: 100%;
}
Step 6:
In this step we will create the main.js file. First of all create immediate function with function to close the app.
<script>
(function () {
'use strict';
/**
* Closing application
*/
var closeApp = function () {
tizen.application.getCurrentApplication().exit();
};
/**
* Initialize function
*/
var init = function () {
var galleryPage = document.getElementById("galleryPage"),
imagePage = document.getElementById("imagePage"),
imageToShow = document.getElementById("imageToShow"),
moveToTopBtn = document.getElementById("moveToTop");
// add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
// no tau.activePage.id on mobile profile
var activePageId = document.querySelector(".ui-page-active").getAttribute("id");
if(e.keyName == "back") {
if (activePageId === "galleryPage") {
closeApp();
} else {
window.history.back();
}
}
});
};
// init functions when all DOM content is loaded
document.addEventListener('DOMContentLoaded', function(e) {
init();
});
}());
</script>
This code block calculate proper size images in gallery page, and add click listener for each image, which after event change page to view image.
<script>
// Calculate proper size for image in gallery page
galleryPage.addEventListener("pageshow", function(ev) {
var section = document.getElementById("galleryPageSection"),
sectionHeight = Math.ceil(0.5 * parseInt(section.style.height)) + "px",
sectionWidth = Math.ceil(0.5 * parseInt(document.width)) + "px",
imageDivs = document.querySelectorAll(".img-container"),
i = imageDivs.length;
while (i--) {
imageDivs[i].style.height = sectionHeight;
imageDivs[i].style.width = sectionWidth;
// Add Click event to gallery element
// for changing page and load proper image
imageDivs[i].addEventListener("click", function(ev) {
var imgSrc = this.getAttribute("data-url");
ev.stopPropagation();
ev.preventDefault();
imagePage.style.backgroundImage = "url(" + imgSrc + ")";
imageToShow.setAttribute("src", imgSrc);
imageToShow.style.display = "none";
tau.changePage("#imagePage");
});
}
});
</script>
Now you need add the function which will scroll to top of list images. To create the function add this code block:
<script>
/**
* Animation for scrolling view to top
*/
var moveToTop = function(currentTop, stepTop) {
var section = document.getElementById("galleryPageSection"),
secTop = currentTop || section.scrollTop,
stepTop = stepTop || Math.floor(secTop / 25);
if (secTop >= stepTop) {
setTimeout(function() {
section.scrollTop = secTop - stepTop;
moveToTop(secTop - stepTop, stepTop);
}, 20);
} else {
section.scrollTop = 0;
}
};
</script>
and add to init() function event listener
<script>
// Add click event to button for view scrolling top
moveToTopBtn.addEventListener("click", function(ev) {
moveToTop();
});
</script>
Finally whole file should looks like below:
<script>
(function () {
'use strict';
/**
* Closing application
*/
var closeApp = function () {
tizen.application.getCurrentApplication().exit();
};
/**
* Animation for scrolling view to top
*/
var moveToTop = function(currentTop, stepTop) {
var section = document.getElementById("galleryPageSection"),
secTop = currentTop || section.scrollTop,
stepTop = stepTop || Math.floor(secTop / 25);
if (secTop >= stepTop) {
setTimeout(function() {
section.scrollTop = secTop - stepTop;
moveToTop(secTop - stepTop, stepTop);
}, 20);
} else {
section.scrollTop = 0;
}
};
/**
* Initialize function
*/
var init = function () {
var galleryPage = document.getElementById("galleryPage"),
imagePage = document.getElementById("imagePage"),
imageToShow = document.getElementById("imageToShow"),
moveToTopBtn = document.getElementById("moveToTop");
// Calculate proper size for image in gallery page
galleryPage.addEventListener("pageshow", function(ev) {
var section = document.getElementById("galleryPageSection"),
sectionHeight = Math.ceil(0.5 * parseInt(section.style.height)) + "px",
sectionWidth = Math.ceil(0.5 * parseInt(document.width)) + "px",
imageDivs = document.querySelectorAll(".img-container"),
i = imageDivs.length;
while (i--) {
imageDivs[i].style.height = sectionHeight;
imageDivs[i].style.width = sectionWidth;
// Add Click event to gallery element
// for changing page and load proper image
imageDivs[i].addEventListener("click", function(ev) {
var imgSrc = this.getAttribute("data-url");
ev.stopPropagation();
ev.preventDefault();
imagePage.style.backgroundImage = "url(" + imgSrc + ")";
imageToShow.setAttribute("src", imgSrc);
imageToShow.style.display = "none";
tau.changePage("#imagePage");
});
}
});
// center image
imagePage.addEventListener("click", function(ev) {
if (imageToShow.style.display === "none") {
imageToShow.style.display = "block";
window.scrollTo(
(imageToShow.offsetWidth - window.innerWidth ) / 2,
(imageToShow.offsetHeight - window.innerHeight) / 2
);
} else {
window.scrollTo(0, 0);
imageToShow.style.display = "none";
}
});
// Add click event to button for view scrolling top
moveToTopBtn.addEventListener("click", function(ev) {
moveToTop();
});
// add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
// no tau.activePage.id on mobile profile
var activePageId = document.querySelector(".ui-page-active").getAttribute("id");
if(e.keyName == "back") {
if (activePageId === "galleryPage") {
closeApp();
} else {
window.history.back();
}
}
});
};
// init functions when all DOM content is loaded
document.addEventListener('DOMContentLoaded', function(e) {
init();
});
}());
</script>
OK, so now we have to put it all together. Link to the finished demo application is added at bottom. The app can be downloaded and imported to Tizen SDK IDE and deployed to a device or emulator to checkout.