14 Replies Latest reply on Oct 2, 2016 1:02 PM by andersborglund

    How to relate/connect Phonegap with my servlets?

    jacinthk49611481

      I have created a mobile survey successfully with HTML, CSS, Javascript and servlets. I am now trying to incorporating my whole mobile survey into an app. I have managed to put my HTML, CSS and Javascript files into Phonegap with all the script files. It looks exactly the same as it is on mobiles and tablets. But i have an issue - I could not submit my file into the database. I have been googling and some say that you should separate the files ( which i dont know how/what do you mean by separating the files) I do know that Phonegap is just the platform for HTML, CSS and Javascript. How should i separate them?

       

      this is the code in my survey.html

       

      <form id="myForm" name="myForm" method="post" action="FormServlet" data-confirm="Are you sure you want to submit the form now?">

      ..... more codes

       

      And this is the code in my formservlet

       

      @WebServlet(urlPatterns = {"/FormServlet"})

      public class FormServlet extends HttpServlet {

       

           @SuppressWarnings("empty-statement")

           protected void processRequest(HttpServletRequest request, HttpServletResponse response)

                   throws ServletException, IOException {

               response.setContentType("text/html;charset=UTF-8");

             

               try {

                  String r_ipaddress = request.getParameter("ip"); 

                  String r_firstname = request.getParameter("firstname"); 

                  String r_lastname = request.getParameter("lastname");

                ........................... mode codes

       

      how to actually get my survey.html talk to my database?

      can i still use servlet?

        • 1. Re: How to relate/connect Phonegap with my servlets?
          VectorP Level 4

          1. Separation means that you should be implementing some type of MVC architecture. In this case, you have a client (the app), a process (the servlet) and a database.

          2. The servlet should be able to receive POST data and return a string or json object to the app. It should validate the data and use the database API to store the data if valid.

          3. The app should be able to use XHR (ajax) to post the data and receive the response. Upon an error message from the servlet, it should redisplay the form with the data and an error message, otherwise it should continue the UI dialog with the user.

           

          One characteristic is that you should not use the 'action' attribute of the 'form' element. Instead, you catch the submit event of the form, dismiss the default action, build up an ajax (XHR) request and send it to the full url of your web service (which is the servlet).

           

          Make sure that you include the whitelist plugin from npm and a whitelist rule for the external server on 'access intent'. See the whitelist plugin's documentation.

           

          Before sending the data to the servlet, validate the data client side. Probably you would need an additional ajax request to receive validation rules from the server, too.

           

          Find a tutorial and examples using Google: "tutorial javascript ajax servlet" or similar.

          2 people found this helpful
          • 2. Re: How to relate/connect Phonegap with my servlets?
            kerrishotts Adobe Community Professional

            Regarding separation: you don't mention the sites you looked at, so it's difficult to infer what the sites were talking about, as the word takes on many different forms depending upon context.

             

            It's possible the sites you mentioned were referring to separating HTML, CSS, and JS from each other -- which is something you should do, but it has no real bearing on your particular issue here. In essence, though, you'd have something like this:

             

            • style.css -- the look of your app
            • app.js -- your app's bootstrap code
            • index.html -- your app's initial HTML

             

            The larger your app, the more files you're apt to have, and this will typically mean you'll move to some sort of bundling solution (Browserify / Webpack).

             

            It's possible the sites you mentioned were referring to separation of concerns and various design patterns -- that is, code blocks/files/objects (etc) should do only one thing rather than doing multiple things. @VectorP mentioned MVC, which is a good example. MVC is short for "model", "view", "controller". Instead of creating one huge object that manages the data and the rendering of that data (which is doing TWO things), you create three objects: one that works with the data (model), one that renders the data (view), and one that handles interaction between the two (controller). No one object is responsible for more than one task, and it makes it easier to reuse things down the line. It's important to note that MVC isn't the only pattern -- there's several, in fact.

             

            In fact, the above example of splitting your HTML, CSS, and JS is also an example of separation of concerns. Your HTML file is only responsible for the HTML. Your CSS file is only responsible for the appearance of your app, and your JS files are responsible for the logic.

             

            The idea behind separation of concerns is easier maintainability, reusability, and testability. When code is tightly coupled and does many things, it's difficult to do any of those things. But when code does one thing and one thing only, it's far easier to treat it like a building block, and it's easier to maintain and test it.

             

            While all of that's important, it doesn't have anything to do with your particular issue at hand.

             

            To your issue, I would make sure you aren't trying to put the servlet in the app bundle. PhoneGap is not a server, and as such, it doesn't understand PHP, Java, or anything else. Your only language is JavaScript. Put your servlet code on a server, and follow the steps provided by @VectorP, and you should be good. You should also be aware that introducing a backend component means you also have to be very worried about privacy and security. I would suggest taking a good look at the OWASP site: OWASP

            1 person found this helpful
            • 3. Re: How to relate/connect Phonegap with my servlets?
              jacinthk49611481 Level 1

              I have been working my files - HTML5, CSS, Javascript and servlets all in Netbeans IDE platform. With that I could successfully build a survey form and post all data into the database.

               

              And now by saying building the app (PhoneGap) with the servlet separately means HTML5, CSS, Javascript files are in Phonegap and then I have to write the servlet anew? I could still possible write inside the Netbeans IDE?

              • 4. Re: How to relate/connect Phonegap with my servlets?
                VectorP Level 4

                Why would you write your servlet anew? It's a java server side component already, which receives a request and returns data.

                Make it accessible from the app and you're good to go.

                 

                Netbeans as IDE is just fine, but any other code editor or IDE will do as well. It's a personal preference or a company policy...

                • 5. Re: How to relate/connect Phonegap with my servlets?
                  jacinthk49611481 Level 1

                  How shall I continue or start with?  I have no clue.. Everything works well if the survey is just a web link for people to fill in the survey and submit it online (As I managed to do everything in Netbeans). But now my lecturer asked me to make it into an app. I managed to incorporate the client side - the HTML and Javascript files into the Phonegap folder (It works but doesn't submit). And now I don't know how shall i link the PhoneGap to my database. Where shall i start with or continue with? Where shall I put my previously written and working servlet? I need to add AJAX in? AJAX is new to me...

                  • 6. Re: How to relate/connect Phonegap with my servlets?
                    VectorP Level 4

                    If ajax is new to you, then your lecturer gave you a nice, steep learning curve to go through. :-(

                    Have you never had any college classes on javascript's XHR?

                     

                    Your best bet would be to Google as I suggested, find a tutorial and examples and try to understand what you are doing.

                    1 person found this helpful
                    • 8. Re: How to relate/connect Phonegap with my servlets?
                      VectorP Level 4

                      I'm still puzzled about this school assignment. Looks like there are only two possibilities:

                      - your lecturer wants you to create an app just for the sake of it, hoping you will learn something somehow. He doesn't care for what OS, native or hybrid, etc...

                      OR

                      - he wants you to object, and argue that it doesn't make sense to publish an app for a survey, as people would have to find and install the app, first.

                      Have YOU ever installed an app, just to complete a survey? Would you ever?

                      1 person found this helpful
                      • 9. Re: How to relate/connect Phonegap with my servlets?
                        jacinthk49611481 Level 1

                        This is actually my dissertation and collaborate with the school of health science. They want to pilot test the survey in South Africa, mainly concerned with the health of the respondents due to daily and long hours of collecting water. They will purchase mobile phones and hopefully install the app. I understand your question but it does make sense if mobile phones are bought solely for survey. I am not sure if it is possible to get the app done in few days?

                        • 10. Re: How to relate/connect Phonegap with my servlets?
                          jacinthk49611481 Level 1

                          I have learned HTML, CSS, JavaScripts and Java servlets and have been working on these in the past few months and successfully created the mobile and web responsive survey. I do hope i can create an app for it...

                          • 11. Re: How to relate/connect Phonegap with my servlets?
                            jacinthk49611481 Level 1

                            This is my survey link Safewater App . I don't know if you could advise or recommend the easiest way or where i can start/continue with. For now, I have transferred my HTML, CSS, Javascript files into PhoneGap www folder.

                             

                            If i have used servlet in my web survey and it works. How can I reuse it and make it applicable with PhoneGap?

                            • 12. Re: How to relate/connect Phonegap with my servlets?
                              VectorP Level 4

                              I understand your question but it does make sense if mobile phones are bought solely for survey. I am not sure if it is possible to get the app done in few days?

                               

                              1. I don't understand the situation.

                              You want to buy those respondents a mobile phone and make it suitable to fill out a survey form. And you want it to be available in a couple of days. So far, so good.

                              But...you're almost done already! You have a mobile website, nicely done with jQuery, which can be accessed by the mobile browser. All you need to do is create an icon for the home screen, linked to the first page of the website, which will then open in the system browser.

                              Why would you want to get into further trouble:

                              - by having to enroll for Apple and/or Google's developer program (and pay for it)

                              - by having to develop and maintain something you haven't ever done....quickly

                              - by having to create certificates, provisioning files, signing keys for each platform

                              - by having to upload the app, and upload updates...thus being dependent on the Store's Reviews and Review Guidelines - and review delays

                              - by having to develop functionality (like the back button, handling online/offline status changes, etc) that are already present in the browser

                              - by having to test thoroughly for every platform and device you're targeting

                               

                              What would really be the additional value of having an app instead of using your website survey in the browser?

                               

                              2. If you still really want to build the app, you need to:

                              - pick either Phonegap CLI (for local builds) or Phonegap Build (to build in the cloud). Don't mix them up!

                              - add XHR functionality (I already gave you a Google search phrase)

                              - use your servlet as a web service (which is already in place)

                              - add functionality for the back button and online/offline status changes

                              - determine what device orientation you would like to present, and add icons and splashes. See the PGB Docs or Phonegap/Cordova docs

                              - use plugins for whitelisting and splashscreen

                              - add whitelisting rules for your server and other external content in config

                              - since you are using geolocation and Google API's, add the Geolocation plugin

                               

                              All these items can be found either directly in the Phonegap/Cordova/PGB Documentation or at Stackoverflow (etc)

                              1 person found this helpful
                              • 13. Re: How to relate/connect Phonegap with my servlets?
                                andersborglund Level 1

                                You need to catch the form result in Javascript and then use Ajax (preferably via JSON) to send the information to the server, where a script should pick it up and write it to the database.

                                1 person found this helpful