CODEWITHSUNDEEP
javascriptjquerycordovajquery-mobile
AppRoyale
AppRoyale

Reputation: 403

Phonegap and jQuery Mobile architecturally problems

Iam building my first mobile application so far and have no clue if my solution is good or not.

I used one single template(html file) with only one data-role="page". Each content element is just a div which gets hidden or shown via javascript. Please check following code to make it clear. This is also the entry point of my application.

 $(document).delegate("#index", "pageinit", function(event, ui) {
      initRotation();
      initNavigation();
      initImpressum();
      initService();
      cookie = null;
      ......
      isLoggedIn(); //returns cookie = true || false
      if (cookie == null) {
        $('#login').show();
        $('#home, #foot, #service').hide();
        initRegistration();
  } else {
      $('#login, #service').hide();
      $('#foot, #home').show();
      $('#naviHome').addClass("ui-btn-active"); // ui-state-persist?!
      createHomeContentFromServer();
  }
});

I have several problems now.

  1. The app is kind of slow.
  2. Pageinit event gets fired too often. Can you prevent it?
  3. The code is not very readable for third persons since I got like 100 external javascript files. (Every time the user does something ~500 divs gets hidden and 10 shown)
  4. Do you have a full example of an app with a good architecture?

Upvotes: 1

Views: 475

Answers (1)

Red2678
Red2678

Reputation: 3297

Your app is slow because it is loading that one big page each time. The page init is firing multiple times probably because you are reloading that one big page each time you click a link.

In JQM, you have many data-role="page", not just one. Below is the standard template that Dreamweaver CS6 produces. It uses the JQ & JQM CDN's and is formatted for four pages. It should give you a good start:

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"     rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
<div data-role="header">
    <h1>Page One</h1>
</div>
<div data-role="content">   
    <ul data-role="listview">
        <li><a href="#page2">Page Two</a></li>
        <li><a href="#page3">Page Three</a></li>
        <li><a href="#page4">Page Four</a></li>
    </ul>       
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
    <h1>Page Two</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header">
    <h1>Page Three</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>
</div>

<div data-role="page" id="page4">
<div data-role="header">
    <h1>Page Four</h1>
</div>
<div data-role="content">   
    Content     
</div>
<div data-role="footer">
    <h4>Page Footer</h4>
</div>

Upvotes: 1

Related Questions