News

Build a custom mobile framework using Topcoat

Full-on frameworks like jQuery Mobile can be a little bloated, we show you how to create a custom interface for your apps with Topcoat

Build-a-custom-mobile-framework-using-Topcoat

There are tons of mobile UI frameworks out there that offer something unique. However, some of them are a little on the bloated side when all you really need is the transition effects between pages and a few UI elements to get you started. That’s exactly what we are going to focus on in this tutorial. We are still going to use jQuery, but we’ll be using the leaner version 2 as this doesn’t have support for old IE browsers.

Adobe has built a very lightweight set of CSS UI components called Topcoat that we’ll use to start our UI. This has no JavaScript and renders quickly in the DOM, so we can easily build on this to create a custom UI. For transitions on our pages we’re going to use the Effeckt.css library, which, while it isn’t quite finished yet, will give us quick and easy page transitions that mostly use CSS and only have JavaScript to switch classes on objects. We’re not focusing too much on the app’s functionality except to show how to render a Google map when it isn’t on screen, as this can cause problems. Ready to make a custom UI? Let’s get going!

DOWNLOAD TUTORIAL FILES

Start the project

From the tutorial files, copy the Start Folder to your computer and open this folder in Brackets code editor. There is the barebones of a four-page app in the body with sections for each page to go. In the head section, we’ll add the CSS we need to work with. This is the Topcoat UI library (topcoat.io) and Effeckt.css library (h5bp.github.io/Effeckt.css).

001    <link rel=”stylesheet” href=”css/topcoat-mobile-dark.min.css”>
002    <link rel=”stylesheet” href=”css/modules/page-transitions.css”>

Link the JS libraries

At the bottom of the document we will add the JavaScript files that we need to power this. You will find a comment called ‘libs’ at the bottom of the body section. Add the code shown, just below this. We are using jQuery, Modernizr and initialising Effeckt.js, then including the code that writes the CSS for the page transitions.

001    <script src=”js/libs/jquery-2.1.1.min.js”> </script>
002    <script src=”js/libs/modernizr.js”> </script>
003    <script src=”js/Effeckt.js”></script>
004    <script src=”js/modules/page-transitions. js”></script>

Add the heading

Inside the two <div>s that start the first page add the following code, which will set up a header for the app on the screen. This uses Topcoat’s mobile UI styles to make this work. We also add in here an image as our main logo for the app. You can save this and have a quick look at it in the browser now.

001    <div class=”topcoat-navigation-bar”>
002        <div class=”topcoat-navigation-bar__item center full”>
003            <h1 class=”topcoat-navigation-bar__title”> Festival Survivor</h1>
004        </div>
005    </div>
006    <img class=”logo” src=”img/fist.png”>

Create the navigation

We are going to use Topcoat’s list to create our navigation. This creates a simple list on our page, so here we set up the <div> that will wrap it, give it a title in the h3 tag and create the unordered list. Because Topcoat is lightweight and only using CSS, we can easily add to it in order to create extra formatting.

001    <div class=”topcoat-list”>
002            <h3 class=”topcoat-list__header”>App Sections</h3>
003            <ul class=”topcoat-list_container”>

First link

Here we are adding our first link for navigation using the Effeckt.css library. You can see the transitions in here and the page that this is going to link to, which is ‘page-2’. Further down the code you will see an id of ‘page-2’ on the next block of code. This will create a transition from one page to the next.

001    <a href=”#” class=”effeckt-page-transition-
button” data-effeckt-transition-in=”slide-
from-right” data-effeckt-transition-
out=”slide-to-left” data-effeckt-
transition-page=”page-2”><li class=
”topcoat-list__item”>
002            Schedule<span class=”list-right”>&#8594;</span>
003            </li></a>

Second link

The next code we add will link up to page 3. This link has an additional ID. We need to detect if this is clicked later as we need to build a Google map for when the user clicks it. If a Google map isn’t present on the screen when you create it, then the map doesn’t render properly when it is clicked.

001    <a href=”#” id=”link-3” class=”effeckt-
page-transition-button” data-effeckt-
transition-in=”slide-from-right” data-
effeckt-transition-out=”slide-to-left” 
data-effeckt-transition-page=”page-3”>
<li class=”topcoat-list__item”>
002        Friend Finder<span class=”list-right”> &#8594;</span>
003        </li></a> 

Third link

Our final link is dropped in now. The link title is ‘customize’ and positioned to the right, in a separate span is an ASCII code for a right arrow symbol. We will position this arrow later when we add some CSS to style this up the way we need it to look. Save your page before continuing with the next code.

001    <a href=”#” class=”effeckt-page-transition-
button” data-effeckt-transition-in=”slide-
from-right” data-effeckt-transition-out=
”slide-to-left” data-effeckt-transition-
page=”page-4”><li class=”topcoat-list_
_item”>
002            Customize<span class=”list-right”>&#8594;</span>
003            </li></a>

Finish the page

We now finish the page by closing the unordered list and adding a link to the author of the Creative Commons image that we will place in the background. Save and check this page in the browser. At this stage it’s beginning to look like an app, but we need to style up some of the content. So, in the ‘head’ section of the page, add an opening and closing style tag.

001    </ul>
002        </div>
003            <div class=”credit”>Photo Credit: <a 
href=”http://www.flickr.com/
photos/41463627@N05/8999209560/”
>josemanuelerre</a><a href=”https://
creativecommons.org/licenses/
by-nd/2.0/”> cc</a></div>

Add the background

Inside the style tag add this CSS. The background is made to fill the screen and the text colour is changed slightly. We then begin styling up page 1 by making this fill the available space and placing an image in the background to give the app the look that we want behind the main logo. Save and test this.

001        html, body{width: 100%; height: 100%;color: #ddd;}
002            #page-1{ 
003                width: 100%;
004                height: 100%;
005                background: url(img/bg.jpg) 
no-repeat center center fixed; 
006                -webkit-background-size: cover;
007                -moz-background-size: cover;
008                -o-background-size: cover;
009                background-size: cover;
010            }

Position right

Our logo is now positioned to have a little padding at the top and bottom, it is also centred horizontally in the browser window. We then turn our attention to the span that has the class ‘list-right’. This contains the arrows for our app, so we will style them to be on the right-hand side of the screen.

001    .logo{display: block; margin: 60px auto;}
002        .list-right{
003            display: inline-block;
004            position: relative;
005            float: right;
006        }

Finish the links

We now add the code that will make the links work and add the credit to the bottom of the screen. Save this and view it in the browser to see the first page complete. You can click on the links and navigate to the other pages, however there is nothing on them yet and also no way to get back to the first page!

001     a, .topcoat-list__item { 
002            color: #c6c8c8; text-decoration: none;
003        }
004        .topcoat-navigation-bar__title .
topcoat-button {
005            margin: 10px 20px 0 0;
006        }
007        .credit{
008            padding: 20px;
009        }

Start page 2

Inside the first two <div>s for page 2, add the code as shown. This is almost the same as in Step 3, except this has a button in the top bar that will give us a link back to the first screen. If you save and test this in the browser you can link across to the second page and back again.

001    <div class=”topcoat-navigation-bar”>
002            <div class=”topcoat-navigation-bar_
_item full”>
003                <h1 class=”topcoat-navigation-bar_
_title”><button class=”topcoat-
button effeckt-page-transition-
button” data-effeckt-transition-
in=”slide-from-left” data-effeckt-
transition-out=”slide-to-right” data
-effeckt-transition-page=”page-1”>
Home</button> Your Location</h1>
004            </div>
005        </div>

Add the content

We are also going to create a list on this page for the content, however these are not going to be links. If this were a real app, we’d probably code a way to add these to an array of favourites and display those on the app on another page. Notice that we are making use of the classes that we created in CSS earlier.

001        <div class=”topcoat-list”>
002        <h3 class=”topcoat-list__header”>
Events</h3>
003        <ul class=”topcoat-list__container”>
004            <li class=”topcoat-list__item”>
005                Awesome Indie Rockers<span class=
”list-right”>9:15pm</span>
006            </li> 

Finish the content

Here we add our final two list elements – feel free to add more as necessary. The styling from Topcoat ensures that we get a nicely formatted list displayed in the mobile browser. At the end, we close off the unordered list and the <div> for the list container. Save this and take a look in the browser.

001    <li class=”topcoat-list__item”>
002                    Captain Hipster<span class=”list-
right”>10:15pm</span>
003                </li>
004                <li class=”topcoat-list__item”>
005                    Polaroid Camera Crew<span class=
”list-right”>11:15pm</span>
006                </li>
007            </ul>
008        </div>

Add the third page

Move into the space between the <div>s for page 3 in the code. Similar to page 1 and 2, we are adding a header onto this screen. This has a Back button but the effect for moving between pages is for the page to scale out behind the new page that will scale in over the top. Save the page and give it a test in your browser.

001    <div class=”topcoat-navigation-bar”>
002            <div class=”topcoat-navigation-bar__
item full”>
003                <h1 class=”topcoat-navigation-bar_
_title”><button class=”topcoat-
button effeckt-page-transition-
button” data-effeckt-transition-
in=”scale-down-from-front” data-
effeckt-transition-out=”scale-down-
to-behind” data-effeckt-transition-
page=”page-1”>Home</button> Friend 
Finder</h1>
004            </div>
005        </div>

Add a map

We’re going to add a Google Map to the page, but it won’t render properly so we have to call it through JavaScript when this page – or <div> to be more precise – is displayed in the browser. We’ve also added a slider on here with Topcoat so that you can see some of the interface widgets that are available.

001    <div id=”maps”></div>
002        <div class=”content”>
003            Search Range: <input type=”range” 
class=”topcoat-range”>
004        </div>

Link to Google Maps

Move to the bottom of the page and after the existing script tags add the code here. This links up the Google Maps library so that we can display a Google Map. We get the ‘maps’ id and then get ready to call the code into here by calling the initialize function.

001    <script src=”https://maps.googleapis.com/
maps/api/js?v=3.exp&sensor=false”></script>
002        <script>  
003            function displayMap() {
004                document.getElementById(‘maps’)
.style.display=”block”;
005                initialize();
006            }

Initialise the map

Here we zoom to the appropriate level and define our area of interest. You will need to change the latitude and longitude to make it more relevant for your uses. The map is then built using the new command to create the map inside the <div> tag with the id of ‘maps’.

001    function initialize() {
002            var myOptions = {
003                zoom: 14,
004                center: new google.maps.LatLng
(43.6561, -79.3803),
005                mapTypeId: google.maps.MapTypeId.
ROADMAP
006            }
007            map = new google.maps.Map(document.
getElementById(“maps”), myOptions);
008        }

Detect the page

The easiest way to test if the page is open is to check if the ‘link-3’ button has been pressed and, if so, then we call the displayMap function after half a second to give the transition time to take effect. We call the Google Maps resize to make the map fit the space available, which is what causes the problem.

001    $( “#link-3” ).bind( “click touchstart”, 
function() {
002                setTimeout(function() {
003                    displayMap();
004                    google.maps.event.trigger
(map, “resize”);
005                }, 500);
006            });
007        </script>

Style the map

Move to the style tags at the top of the page and add the following CSS code that styles up the map space. Here we are also styling a horizontal rule that will be used in the next few steps. Save the page and view this in the browser in order to see the map rendered correctly on the screen of the app.

001    #maps{ width:100%; height: 400px; }
002        .content{ padding: 20px;}
003        hr {
004            border: none;
005            height: 1px;
006            background-color: #ccc; 
007            overflow: hidden;
008        }

Page 4 content

Now we will finish the final page of the app. Move your cursor to page 4 and add the following code in to add the header. Again, this header has a Home button that will enable us to get back to the homepage of the app from here. You can test whether the navigation is working to this screen and back again.

001    <div class=”topcoat-navigation-bar”>
002            <div class=”topcoat-navigation-bar_
_item full”>
003                <h1 class=”topcoat-navigation-bar_
_title”><button class=”topcoat-
button effeckt-page-transition-
button” data-effeckt-transition-in=
”slide-from-bottom” data-effeckt-
transition-out=”slide-to-top” data-
effeckt-transition-page=”page-1”>
Home</button> Your Location</h1>
004            </div>
005        </div>

App finished

Add this final page content now, which shows toggle switches – and feel free to add some more. Save the page and test it in the browser. What you should see this time is the content sliding up from below as a transition going back to the homepage.

001    <div class=”content”>
002        <p>Twitter Friends: <hr>
003            <label class=”topcoat-switch”>
004                <input type=”checkbox” class=
”topcoat-switch__input” checked>
005                <div class=”topcoat-switch__toggle”>
</div>
006            </label>
007        </p>
008        <br>
009    <button class=”topcoat-button--cta” >Save
</button>
010    </div>
×