This is a migrated thread and some comments may be shown as answers.

Mobile Application Navigation - remote views issue(s)

9 Answers 717 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Lee asked on 11 Apr 2012, 12:04 PM

Hi,
I built the functionality and framework for my mobile application using the MVC model prior to integrating with Kendo UI and therefore every action has it own php page. eg. view.php , delete.php, update.php, reply.php. I didn't realise that the Kendo UI Mobile would only work with one file using views. I had read that I can use remote views to link between pages but this doesn't seem to be working well for me. I have read the documentation but am not sure I fully understand it or even if its correct. Can anyone help with my navigation?

I have an index page as set out below:

<div data-role="view" data-title="Control Panel">

<div data-role="header">

<a data-role="backbutton">Back</a>

</div

>

  <?php if (isset($error)){  echo '<p style="color:red">Error: '. $error .'</p>';} ?>

<ul data-role="listview" data-style="inset">

<li><a href="messages/listall">Customer Messages (<?=$unread_messages?>)</a></li>

</ul>

<script>

var listView = $("#listView").kendoMobileListView({

pullToRefresh: true,

appendOnRefresh: true

});

</script>

<div data-role="footer">

<div data-role="tabstrip">

<a href="index" data-icon="/mobile_kendo/">Home</a>

<a href="" data-icon="refresh">Refresh</a>

<a href="settings" data-icon="settings">Settings</a>

</div>

<script>

var app = new kendo.mobile.Application($(document.body), {

icon: "URL to a web clip icon"

});

</script>

I have a listall page which is has the same header and footer as above and then the different central part as set out below:


<div data-role="view" data-title="Control Panel">
    <div data-role="header">
        <a data-role="backbutton">Back</a>
    </div>

<

h2>Messages</h2>

<table>

<?php echo $unread_messages . ' - unread messages'; ?>

<tr>

<th>From</th><th>Intro</th><th>Date</th><th>Status</th>

</tr>

<?php foreach ($messages as $message):?>

<?php if ($message->isnew == 1){ ?>

<tr style="font-weight:bold">

<?php } else { ?>

<tr>

<?php } ?>

<td><?=$message->customer_name?></td><td><a href="messages/view/<?=$message->id?>"><?=$message->message?></a></td><td><?=$message->created?></td><td><?=$message->isnew?></td>

</tr>

<?php endforeach?>

</table

>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="index" data-icon="/mobile_kendo/">Home</a>
            <a href="" data-icon="refresh">Refresh</a>
            <a href="settings" data-icon="settings">Settings</a>
        </div>
    </div>
   <script>
      var app = new kendo.mobile.Application($(document.body), {
         icon: "URL to a web clip icon"
     });
 
   </script>

I have a view page as below:


<div data-role="view" data-title="Control Panel">
    <div data-role="header">
        <a data-role="backbutton">Back</a>
    </div><

h2>Message</h2>

<p>Date: <?=$message->message->created?></p>

<p>From: <?=$message->message->customer_name?></p>

<p>Email: <a href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></a></p>

<p>Telephone: <?=$message->message->customer_telephone?></p>

<p>Location IP:<?=$message->message->ip?></p>

<p>Message: <?=$message->message->message?></p>

<p><a href="../markasread/<?=$message->message->id?>/0">Mark as unread</a> | <a href="../delete/<?=$message->message->id?>">Delete</a></p>



    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="index" data-icon="/mobile_kendo/">Home</a>
            <a href="" data-icon="refresh">Refresh</a>
            <a href="settings" data-icon="settings">Settings</a>
        </div>
    </div>
   </div> 
   <script>
      var app = new kendo.mobile.Application($(document.body), {
         icon: "URL to a web clip icon"
     });
 
   </script>

My Issues are:
1) When I select theCustomer Messages link on the index page (messages/listall), the # is added automatically to the URL and is causing issues.

2) On the listall page, I select a message in the list and this does not put the # in front of the URL. This takes me to the view page but does not have the styling of the application applied. Why is this?

3) When I select the back button its adds the #, this sometimes works and sometimes doesn't depending on what page Im on. How can I get it to work for all pages?

4) As the code from the different pages is being appended to the main index page, when I perform an action, this is executed multiple times and I only want it to perform the operation once.

Any help would be much appreciated.

9 Answers, 1 is accepted

answered on 11 Apr 2012, 05:19 PM

If I add data-rel="external" to all the links, it navigates to the page correctly and without the hash tag but the page does not have the application styling. I do not want these links to be classed as external as they are all part of the application.

I made a mistake with the Test Google link as I should have added data-rel="external" for this but I am not sure how to treat my other links to get them all working correctly.

I do have the view definition on all pages, I just did not post this as its exactly the same data as the homepage. I will edit the above and repost my full code.

Many thanks for your help with this.

answered on 17 Apr 2012, 12:11 PM

Hello, I'm still awaiting a reply to this and I am still struggling with the navigation of my application.

Please can you explain the best way to navigate between the pages of my App when the functionality and display code is all in separate PHP files? I am still not clear on how to do this properly this from your explanation below or from the help files and would be very grateful for working examples of a mobile app that navigates between separate files as opposed to navigating between Divs in the same file.

I have a functioning application using the Remote Views as explained, which appears to navigate between some pages well but I still have a list of problems with some pages and need a better understanding of how it works in order to resolve these issues.

I would be grateful for any assistance with this as we do want to purchase your product but need the basics of this in place.

Many thanks

answered on 14 Oct 2012, 05:27 PM

Ok so I've found that navigation is quirky. I haven't completely nailed down all the controlling factors but was able to get this working.

My page 1 -> 2 navigation was using a listview with a template for items having a single root anchor element, which according to docs is automatically styled by kendo, as opposed to if you use multiple root elements or a non-anchor. When I switched this to have a div also at the root then even navigating to page 2 had the same problem I'd seen from page 2 to 3 previously. If I applied the data-role="button" to the anchor then it works again, and page 2 -> 3 magically started working also (page 2 to 3 is also a listview with a template having a single anchor). The problem with this is that the km-button style is now applied to the listview items and I really want to remove that and keep the custom look I had.
So as an experiment I put things back the way I had it (single anchor) and applied the data-role="button" on the 2nd page listview template. And that worked as well. Again, the style is not what I want, but the navigation and styling of the next page is working.

Seems a little quirky, but I can work around the button styling issue for now by binding to dataBound:

taskListView.bind("dataBound", function(e) {

taskListView.element.find('.km-button').removeClass('km-button');

});

EDIT: Final answer. Turned out the previous "workaround" was good enough to work in browser on desktop, but could still see a flash when running on the device. So instead, I still set the role to button (which implies a km-button class) but then used a separate css rule to "undo" the specific parts of km-button I didn't want, which for me was:

border-radius: 0;

background: transparent;

color: black;

text-align: left;

text-shadow: none;