Framework7 Cordova - ListView with Images, Text ad OnClick


In this tutorial we want to see something that is quite common in mobile applications. How to create an android app with ListView that has images and text.

Then when the user clicks a single ListView item, we show a Framework7 dialog with the clicked item.

The app is android based and we create an APK and install in emulator using Cordova.

We are Building a Vibrant YouTube Community

We have a fast rising YouTube Channel of friends. So far we've accumulated more than 2.6 million agreggate views and more than 10,000 subscribers. Here's the Channel: ProgrammingWizards TV.

Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

Here's this tutorial in Video Format.

Pre-Requisites

This is a Framework7 Cordova Tutorial. So you need Cordova installed. We have a highly detailed tutorial including a video:

  1. Setting up Cordova and Creating First app.

If you are not sure what Framework7 is then start here.

Let's start.

main.js

This is our javascript file.

Create Javascript class

We can just the function keyword to create a class in javascript.

var mainClass = function () {..}

Create Instance Fields

First we will instantiate Framework7 and hold Dom7 in a variable.

    var myApp = new Framework7();
    var $$ = Dom7;

Dom7 is our selector engine. We can use it to reference DOM elements.

Create our Data Source

Our data source will comprise of images and text. We are creating a Cordova Framework7 ListView with images and text so we need the images as well.

You add the images in your project then we get the image sources.

So we will have an array with names and image paths or sources. Basically an array of objects.

    var galaxies = [{name: "StarBust", img: "assets/img/ic1011.png"},
        {name: "Ring Nebula", img: "assets/img/ringnebular.png"},
        {name: "Cartwheel", img: "assets/img/cartwheel.png"},
        {name: "Whirlpool", img: "assets/img/whirlpool.png"},
        {name: "Sombrero", img: "assets/img/sombrero.png"},
        {name: "IC1011", img: "assets/img/ic1011.png"}
        ....
    ];

Reference Display Section

That is the section onto which we will render our ListView.

    var displaySection = document.getElementById("displaySectionID");

Create a List Item

Our Cordova Framework ListView will comprise of multiple items. Each item has an image and a text.

Let's create the item.

    this.createListItem = function (galaxy, galaxyImg) {
        ..
        return listItem;
    }

This method will create the List item and return it. The source code is below.

Listen to List Item Click events

Each item in our Framework7 ListView is definitely clickable. When clicked we show a Framework7 dialog.

        listItem.onclick=function()
        {
            myApp.alert(galaxy,"Camposha.info");
        }

Create ListView

The Framework7 list items we created above make up a ListView.

    this.createListView = function () {..}

Full Code

/*
 - Main class.
 - Initialize Framework7 and Dom7 here.
 - Define data source.
 - Create ListItems and listview programmatically based on the data we have in the data source.
 - Handle listitem click event shwoing framework7 alert dialog
 */
var mainClass = function () {
    /*
     -Initialize your app
     -Export selectors engine
     - define data source
     */
    var myApp = new Framework7();
    var $$ = Dom7;
    var galaxies = [{name: "StarBust", img: "assets/img/ic1011.png"},
        {name: "Ring Nebula", img: "assets/img/ringnebular.png"},
        {name: "Cartwheel", img: "assets/img/cartwheel.png"},
        {name: "Whirlpool", img: "assets/img/whirlpool.png"},
        {name: "Sombrero", img: "assets/img/sombrero.png"},
        {name: "IC1011", img: "assets/img/ic1011.png"},
        {name: "Cosomos Redshift", img: "assets/img/cosmosredshift.png"},
        {name: "Virgo Stellar Stream", img: "assets/img/virgostellarstream.png"},
        {name: "Centaurus A", img: "assets/img/centaurusa.png"},
        {name: "Pinwheel", img: "assets/img/pinwheel.png"},
        {name: "Own Nebular", img: "assets/img/ownnebular.png"},
        {name: "Small Magellonic Cloud", img: "assets/img/smallamgellonic.png"},
        {name: "Messier 87", img: "assets/img/messier87.png"},
        {name: "Canis Majos Overdensity", img: "assets/img/canismajoroverdensity.png"},
        {name: "MilkyWay", img: "assets/img/milkyway.png"},
        {name: "Andromeda", img: "assets/img/andromeda.png"},
        {name: "Large Magellonic Cloud", img: "assets/img/largemagellonic.png"},
        {name: "Ursa Minor", img: "assets/img/ursaminor.png"},
        {name: "Triangulum", img: "assets/img/triangulum.png"}];

    var displaySection = document.getElementById("displaySectionID");

    /*
    - Attach ListView to displaysection
     */
    this.initializeApp = function () {
        displaySection.innerHTML = "";
        displaySection.appendChild(this.createListView());
    }
    /*
    - create a list item with image and text and return it
     */
    this.createListItem = function (galaxy, galaxyImg) {
        //create image and set its src attribute programmatically
        var img = document.createElement('img');
        img.setAttribute("src", galaxyImg);

        //create image section and set its class
        var imgSection = document.createElement('div');
        imgSection.className = "item-media";
        imgSection.appendChild(img);

        //create itemtitle and set its class and text
        var itemTitle = document.createElement('div');
        itemTitle.className = "item-title";
        itemTitle.appendChild(document.createTextNode(galaxy));

        //create inner section
        var innerSection = document.createElement('div');
        innerSection.className = 'item-inner';
        innerSection.appendChild(itemTitle);

        //create listitem and append imgsection and innser section
        var listItem = document.createElement('li');
        listItem.className = "item-content";
        listItem.appendChild(imgSection);
        listItem.appendChild(innerSection);

        //listitem click
        listItem.onclick=function()
        {
            myApp.alert(galaxy,"Camposha.info");
        }

        return listItem;
    }
    /*
    - Create ListView from ListItems
     */
    this.createListView = function () {
        //list block
        var listBlock = document.createElement('div');
        listBlock.className = "list-block";

        //list header/divider
        var listHeader = document.createElement('li');
        listHeader.className = "item-divider";
        listHeader.appendChild(document.createTextNode("Galactic List"));

        //listview
        var listView = document.createElement('ul');
        listView.appendChild(listHeader);

        //create list items
        for (var i = 0; i < galaxies.length; i++) {
            listView.appendChild(this.createListItem(galaxies[i].name,galaxies[i].img));
        }
        listBlock.appendChild(listView);

        return listBlock;
    }
}

//instantiate mainclass and initialize app
m = new mainClass();
m.initializeApp();

Then we go over to our user interface code written in html. Framework7 apps user interface are written in HTML and CSS.

Here's the html code.

index.html

<!--
- Our index.html file.
- Contains html markup for our page.
- Refernce Framework7 css as well as Framework7 js.
- Define mainview and add page content section to it.
- MainView will have navigationbar, content section and toolbar.
- Create a section for rendering our listview which we'll create programmatically.
-->
<!DOCTYPE html>
<html>
<head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Camposha.info</title>

    <!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="assets/css/my-app.css">

</head>
<body>

<!-- VIEWS-->
<div class="views">

    <!-- Your main view, should have "view-main" class-->
    <div class="view view-main">

        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">

                <!-- We have home navbar without left link-->
                <div class="center sliding">Camposha.info</div>
                <div class="right">
                    <!-- Right link contains only icon - additional "icon-only" class-->
                    <a href="#" class="link icon-only"> <i class="icon icon-bars"></i></a>
                </div>
            </div>
        </div>

        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">

            <!-- Page, data-page contains page name-->
            <div data-page="index" class="page">

                <!-- Scrollable page content-->
                <div class="page-content">
                    <!--List rendering section-->
                    <div id="displaySectionID">

                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Toolbar-->
        <div class="toolbar">
            <div class="toolbar-inner"><a href="#" class="link">Home</a><a href="#" class="link">About Us</a></div>
        </div>
    </div>

</div>

<!-- REFERENCE SCRIPTS-->
<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>

Result

I installed my APK in Nox Player emulator.

Framework7 Cordova ListView with Images and Text

Framework7 Cordova ListView with Images and Text

Best regards.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post