使用phonegap将jsp web应用程序转换为混合应用程序

时间:2016-10-19 05:26:18

标签: java cordova jsp hybrid

我开发了一个网络应用程序,连接到Arduino UNO传感器和继电器开关。 在网页上,当我触摸按钮时,继电器开关打开/关闭。 我的计划是使用phonegap将此网络应用转换为智能手机应用。

我在谷歌搜索并发现了

我需要从我的jsp文件中分离'java'资源,因为phonegap只能感知html,css,javascript。

然后,我如何将这些元素从我的编码中分离出来?如下所示:

<!-- Main page that shows a simple on/off control and 
    DHT11 sensor value -->

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.Test.domain.Relay" %>

<%
    Relay relay = new Relay();
    pageContext.setAttribute("relay", relay);
%>
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fan Control</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.6.4.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>
<style>
    #footer{
        height: 86px;
        text-indent: -9999px;
        background-image: url(Logo.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 0 0 0;
        position: absolute;
        bottom: 0;
    }
    #header{
        height: 86px;
        text-indent: -9999px;
        background-image: url(headerImage.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 0 0 0;
    }
    #FanOn:onClick{
        background: green;
    }
</style>
<script>
    $(document).ready(function(){
        var timer = setInterval(function(){
            $.get("http://192.168.0.54", function(data){
                $("#temperatureValue").val(data);
            });

            $("#form1").attr("action","Processing.jsp");
            $("#form1").submit();

        }, 1000);

        $("#FanOn").click(function(){
            $("#fanState").val("1");
            $("#form1").attr("action","Processing.jsp");
            $("#form1").submit();
        });

        $("#FanOff").click(function(){
            $("#fanState").val("0");
            $("#form1").attr("action","Processing.jsp");
            $("#form1").submit();
        });

        $("#LampOn").click(function(){
            $("#lampState").val("1");
            $("#form1").attr("action","Processing.jsp");
            $("#form1").submit();
        });

        $("#LampOff").click(function(){
            $("#lampState").val("0");
            $("#form1").attr("action","Processing.jsp");
            $("#form1").submit();
        });
        $("#footer").click(function(){
            window.location.replace("http://www.samwooinc.net");
        });

    });
</script>
</head> 
<body> 
<div data-role="page" id="page">
    <div data-role="header" id="header">
        <h1>FAN Control Example</h1>
    </div>
    <div data-role="content">
        <form method="GET" id="form1" action="" target="haha">
            <div class="ui-field-contain">
                <label for="temperatureValue">Current Temperature</label>
                <input type="text" id="temperatureValue" name="temperatureValue" value="0" data-inline="true">          
            </div>

            <label for="FanSwitch">FAN Control</label>
            <div data-role="navbar" id="FanSwitch">
                <ul>
                    <li><a href="" id="FanOn">FanOn</a></li>
                    <li><a href="" id="FanOff">FanOff</a></li>
                </ul>
            </div>

            <label for="LampSwitch">LAMP Control</label>
            <div data-role="navbar" id="LampSwitch">
                <ul>
                    <li><a href="" id="LampOn">LampOn</a></li>
                    <li><a href="" id="LampOff">LampOff</a></li>
                </ul>
            </div>  

            <input type="hidden" id="fanState" name="fanState" value="998">
            <input type="hidden" id="lampState" name="lampState" value="234">

        </form>
    </div>
    <div data-role="footer" id="footer">
        <h2>footer</h2>
    </div>
</div>
<iframe name="haha">
</iframe>
</body>
</html>

因此,例如,如何从jsp文件中分离出这样的编码?:

<%@ page import="com.Test.domain.Relay" %>

<%
    Relay relay = new Relay();
    pageContext.setAttribute("relay", relay);
%>

0 个答案:

没有答案