Uncertain if my desired idea is feasible or not, but why not try now.
The structure of my MVC4 Master page is as follows:
<head runat="server">
<meta charset="utf-8" />
<title>RYTE HCMS</title>
<meta name="viewport" content="width=device-width" />
<link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" />
<link href="~/Content/jquery-ui.datepicker.min.css" rel="stylesheet" />
<link href="~/Content/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<%: Scripts.Render("~/bundles/modernizr") %>
<style type="text/css">
.wrap {
white-space: normal !important;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a" data-url="master-page" id="master-page">
<div data-role="header" data-position="fixed">
<asp:ContentPlaceHolder ID="Header" runat="server">
<a href="#leftpanel" data-panelid="leftpanel" data-icon="bars" data-role="link" style="height: 17px"></a>
<h1>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</h1>
<% Html.RenderPartial("LoginUserControl"); %>
</asp:ContentPlaceHolder>
</div>
<div data-role="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<script src="<%=Url.Content("~/Scripts/jquery-1.11.1.min.js")%>"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="<%=Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")%>"></script>
<script type="text/javascript">
$(document).on("pageinit", "#master-page", function () {
$(document).on("swipeleft swiperight", "#master-page", function (e) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ($.mobile.activePage.jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#right-panel").panel("open");
} else if (e.type === "swiperight") {
$("#leftpanel").panel("open");
}
}
});
});
</script>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</body>
I aim to load and apply CSS/JQuery in the Android WebView. My goal is to store the files within the android mobile app and implement them as the page loads inside the webView.
If these files are not loaded in a specific order, the design will fall apart. This approach is essential to ensure that users do not perceive it as a web app. Currently, upon each refresh/reload, it takes around 1-2 seconds for jquery mobile and CSS to load.
Considering that MVC4 pages are compiled on a remote server, is this task achievable?