photo album interactive tutorial

7 posts, 0 answers
  1. Andy
    Andy avatar
    2 posts
    Member since:
    Nov 2014

    Posted 12 Nov 2014 Link to this post

    Hi, absolute beginner here, this is probably a silly question but I'm breaking my head here.
    I've been trying to get the photo album interactive tutorial for the Telerik platform to work, and all is well up until step 3. In step 4 a function is added to add an image to a listview. I can get the button in the app, but it does not respond, i.e. no image is added to the listview (not in emulator, not on real phone which is a Windows phone).
    Any hints? A link to where I can download the actual solution to the tutorial would also help a lot.
    thanks! Andy

    my app.js (probably where the error is):
    (function () {
        document.addEventListener("deviceready", function () {

            window.listView = kendo.observable({
                addImage: function () {
                    $("#images")
                        .data("kendoMobileListView")
                        .prepend(["images/08.jpg"]);
                }
            });
            
            var app = new kendo.mobile.Application(document.body, {
                skin: "flat"
            });
            $("#images").kendoMobileListView({
                dataSource: ["images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg"],
                template: "<img src='#: data #'>"
            });
            navigator.splashscreen.hide();
        });
    }());

    and my index.html:
    <!DOCTYPE html>
    <html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="scripts/app.js"></script>
    </head>

    <body>
        <div data-role="view" data-model="listview" data-title="Photos">
            <div data-role="navbar">
      <span data-role="view-title"></span>
      <button data-role="button" data-align="left" data-bind="click: addImage">Add</button>
    </div>
            <ul id="images"></ul>
        </div>
    </body>

    </html>






  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 17 Nov 2014 Link to this post

    Hello Andy,

    Thank you for contacting us and for starting the Telerik Platform tutorial lessons.

    In fact, your code is right, only it seems that the ViewModel passed to the view (data-model="viewmodel") is named viewmodel, and the code in app.js reads window.viewModel. The proper binding would be data-model="viewModel".

    This is needed for the initialization of the Kendo Mobile Application in app.js:

    var app = new kendo.mobile.Application(document.body, {
     
                skin: "flat"
     
            });

    The initialized Application locates the declaratively initialized (with the data- attributes) Kendo UI widgets (View, Navbar, etc.) and their respective ViewModels. Then they are rendered when the "deviceready" event is received.

    I hope that this will be helpful for you in order to continue with our Getting Started tutorials.

    For your further reference I am attaching the completed first tutorial lesson in case you need it. To run it - just enter the API key of your Backend Services project at line 3 of app.js.

    Please, let me know if I may be of any further assistance.

    Regards,
    Anton Dobrev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Andy
    Andy avatar
    2 posts
    Member since:
    Nov 2014

    Posted 17 Nov 2014 in reply to Anton Dobrev Link to this post

    Hi Anton,
    Your hint about the viewmodel name was absolutely correct, I can't believe I overlooked this again and again. Anyway, I'm back on track now.
    Thanks for your very helpful reply. 
    Andy
  4. Brian
    Brian avatar
    1 posts
    Member since:
    Nov 2014

    Posted 25 Nov 2014 in reply to Anton Dobrev Link to this post

    Great postings. 

    Would anyone happen to have a completed photo album project that includes the views folder? 

    Thanks,

  5. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 27 Nov 2014 Link to this post

    Hello,

    @Andy

    I am glad that this worked on your side.


    @Brian

    The tutorial that works with the app layout, navigation and views is about a separate app, called Books.

    Could you be more specific about this? If you are having any troubles with the tutorial - please, specify them in a separate thread and we will be happy to assist you.

    If you are referring to the Photo Album tutorial - it is attached in its completed state in this thread.

    Let me know if you have further questions.

    Regards,
    Anton Dobrev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Mike
    Mike avatar
    1 posts
    Member since:
    Feb 2016

    Posted 05 Feb in reply to Anton Dobrev Link to this post

    The demo for Telerik Platform, hybrid Step 1 returns a blank screen -- there seems to be a missing { in the generated code at line 26

            app = new kendo.mobile.Application(document.body);
        }, false); 

     

    and cutting and pasting to replace that line with app = new kendo.mobile.Application(document.body, { layout: "main-layout" });

    provides no help.  Below is my code for app.js

    (function () {
        var app;

        window.Books = {
            data: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "data/books.js",
                        type: "get",
                        dataType: "json"
                    }
                },
            schema: {
                data: "books"
            }
        }),
            back: function() {
            },
            settings: function() {
            }
        };

        document.addEventListener("deviceready", function () { 
            navigator.splashscreen.hide();

            app = new kendo.mobile.Application(document.body);
        }, false);

        window.app = app;
    }());

     ----------------------------

    and here for index.html

     

    <!DOCTYPE html>
    <html>

    <head>
        <title>Great Books</title>
        <meta charset="utf-8" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="css/main.css" rel="stylesheet" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/details.js"></script>
        <script src="js/favorites.js"></script>
    </head>

    <body>
        <div data-role="view" id="index" data-title="Books">
            <ul data-role="listview" data-source="Books.data" data-template="books-template"></ul>
        </div>
        <script type="text/x-kendo-template" id="books-template">
            <a href="views/details.html?##id=#: isbn #">
                <div class="bookImage"><img src="#: image_url #" />
                </div>
                <div class="bookTitle">#: name #</div>
                <div class="bookAuthor">#: author #</div>
            </a>
        </script>
        <!-- Add Tutorial Markup Here -->
        <div data-role="layout" data-id="main-layout">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
            <div data-role="footer">Footer</div>
        </div>
    </body>

    </html>

     
     
     
     
     
  7. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 10 Feb Link to this post

    Hi Mike,

    Looking at the shared code snippets, it seems you are referring to the "Create App layout and navigation" tutorial, Lesson 1: "Working with app layouts".
    Point e. states: Open the app.js file in the js folder and modify the Kendo UI application constructor to include your layout:
    app = new kendo.mobile.Application(document.body, { layout: "main-layout" }); 

    Although you mention it, this change seem to not be presented in the specific code for app.js you shared. You could also test the completed great-books-app (there is a big blue button Try in AppBuilder) to verify how it is supposed to work. Would you please ensure that you have applied all the steps listed in the guidance?

    Regards,
    Dimitrina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top