Monday, January 19, 2015

Sample mobile JSP


<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
 <head>
  <title><%= myappProperties.sitePageTitle() %> Action Menu</title>
  <s:head />
  <jsp:include page="/mobile/mobileScriptsAndStyles.jsp"></jsp:include>
  <style type="text/css">
   p img {
    max-width: 100%;
   }
  </style>
  
  <script type="text/javascript" src="js/mobile/scaleImage.js"></script>
  <script type="text/javascript">
   $("div[data-role='page']").live("pageshow", function(event, ui) {
    <s:if test="account.profilePic != null && account.profilePic != ''">
     scaleImage("profile/${account.accountId}/${account.profilePic}", "profilePicture2", 60, 60);
    </s:if>
    <s:elseif test="genderOfPhoneBookEntry == \"F\"">
     scaleImage("img/noImageFemale.png", "profilePicture2", 60, 60);
    </s:elseif>
    <s:else>
     scaleImage("img/noImageMale.png", "profilePicture2", 60, 60);
    </s:else>
   });
  </script>
 </head>

 <body>
  <div data-role="page" data-theme="c">
   <div data-role="content" style="background-color:#FFFFFF;">
    <!-- Menu button -->
    <div id="toggleButton" onclick="toggleMenu();" style="width: 26px; height: 26px; background: url(img/mobile/list.png) 0 0 no-repeat; cursor: pointer; float: left;"></div>
    <!-- Menu overlay -->
    <div id="menuClickOverlay">
     <%@ include file="/mobile/logo.jsp" %><br />
     
     <div data-role="content">
      <%@ include file="/mobile/popupCommon.jsp" %>
      <div id="agentProfile" style="width: 100%; min-width: 0px; line-height:auto; margin-top:0px;">
       ${account.profilePageHtml}
      </div>
     </div>
    </div>
    <!-- /Menu overlay -->
    <!-- Menu -->
    <%@ include file="/mobile/mobileMenu.jsp" %>
    <!-- /Menu -->
   </div>
   
   <jsp:include page="/mobile/navbar.jsp"></jsp:include>
  </div>
 </body>
</html>

mobileScriptsAndStyles.jsp
<%@page import="net.mycom.myapp.misc.myappProperties" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=yes">

<link rel="apple-touch-icon-precomposed" href="img/mobile/apple-touch-icon.png" />
<link rel="apple-touch-startup-image" href="img/mobile/apple-touch-startup-image.png" />

<link rel="stylesheet" href="css/mobile/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/mobile/jquery.mobile-1.1.0.c_mycom.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).bind("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
  $.mobile.hashListeningEnabled = false;
 });
</script>
<script type="text/javascript" src="js/mobile/jquery.mobile-1.2.0.min.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/<%= myappProperties.siteTheme() %>.css" rel="stylesheet" type="text/css" />


<style type="text/css">
 /* Menu
  */
 .ui-btn-text,
 .ui-btn input, .ui-btn button,
 .ui-checkbox, .ui-radio,
 .ui-checkbox input, .ui-radio input,
 .ui-checkbox .ui-btn, .ui-radio .ui-btn,
 .ui-select .ui-btn select {
  z-index: 0;
 }
 
 /* Counters on menu */
 .ui-li-count {
  display: none;
 }
 /* /Menu
  */
  /* prevent zooming */
  .ui-select .ui-btn select{font-size: 50px;}
</style>

<jsp:include page="/analytics.jsp" />

No comments:

Post a Comment