I am making a Book like app in Phonegap with Quiz... I want to keep 20 chapters for learning C. I am confused on how to use the single page architecture for such an app. I have also made a similar app for Android using JQuery Mobile and Android WebView before I was familiar with Phonegap but the application contained a number of (around 15 ) pages..and the Look & Feel was no more much native.
Any Suggestions on how to follow a single page architecture to create a book accessing its page contents from WebSQL for e.g. Chapter_title, page_heading, topic_contents ... and images if any.
Couple of months back I was in your situation. I experimented with jquery mobile, native application and phonegap. Building a web application at first seemed very attractive at first as the coding is a lot easier compared to native applications.Even though my answer is not very specific to your question it might be helpful to others. Here is my opinion based on my research:
Using phonegap slows your application responses, it loads slowly and together with jquery mobile the response and load time increases. So I didnot use it.
Using jquery alone was no different in Gingerbread mobile and on emulator you can clearly see the lag in switching between one div to another div. I didnot use it either.
What I did was android Webview. I wrote my own javascript and css and placed them on the section of my page. Used .... for changing pages on button click. This approach worked wonders for me and gave nearly native performance.
To follow the single page architecture in html use div element as I have mentioned in step 3 above. You can write a script to convert your WebSql data to json format. Then in your page where you need to call the data using javascript parse the data. Using json in really simple.
Related
I wrote a web-app with the jquery mobile framework. Unfortunately too often it takes too long until the page is completely loaded (average time around 4-6 secs) what makes the usability horrible.
Using destop browsers there's almost no waiting time. Newer phones or tablets are acceptable refering to speed.
Server-sided processing (like db queries) running fast using c3p0 connection pooling. So I exclude that this could be the problem why page shows delayed.
Sometimes it also takes too long until success-method of an ajax-call is triggered.
Do you have any suggestions what I can do to get a better performance? I'm using a "multipage" template which means (if I'm not wrong) that request redirected from Spring-Controller calls suited jsp (Resolver) as view to open. All logic coming from spring controller attributes are integrated in jstl-tags in the jqm-page. I don't know if this is a good approch, but corresponds to classic web development.
In case I won't get a better performance, is it recommendable to develop a native app for android and ios if the app is often used? I read that web apps are a solution for websites that are now and then visited by their users but not in steady use by them. Does maybe an hybrid approach cause a better preformance?
As described here:
If you're using a single page template, but would prefer to lazy load in a few key pages in the background to avoid seeing the Ajax loader, we recommend using the pre-fetch feature instead of moving to a multi-page template. To pre-fetch a page, simply add the data-prefetch attribute to any link and jQuery Mobile will lazy load this page in the background after the primary page has loaded. Here's an example:
<a href="foo/bar/baz" data-prefetch>link text</a>
To begin, my web programming knowledge is very dated. I learned some html/java back in high school about 15 years ago and for fun have decided to put it to use and help a friend make an offline web based html database for a collection of his data that up until now he's kept in nothing but word and excel docs. So there is nothing fancy here. I'm mainly just formatting and linking pages. And make a ton of use out of tables. Lame, I know.
Anyway, here's the issue I've run into...
I'm pretty much done. I've just been going and fixing mistakes here and there. Grunt work. Every so often I've tried to display it on my Samsung Galaxy Note 2 and been rather pleased with the results. I'm not using any program that alters the display for mobile or anything. Just straight html/java with a bit of css I've started to learn while taking on this project. So sometimes I have to pinch to zoom and make the page fit on my mobile device, but I'm not too worried about it.
The problem I've come across is that a series of the pages with tables on them don't appear to work correctly. Each table has links to anchor points further down the same page. On PC, these links function properly. But for some reason on my phone when I tap on those links they don't respond at all. Not every page with tables has this issue I should note, only a small cluster.
All I'm using for code is an 'a href' tag in the table leading to an 'a name' anchor further down the page.
Any ideas?
You might be using HTML5, a tags don't have a name attribute.
try using:
id="titleofyourchoice"
instead of:
name="titleofyourchoice"
I am currently developing a native android app. My app has a lot of activities. I want to develop native android app. But in some case, I want to use a webview where the entire layout is just a webview. Not linear or relative or another layout, just a webview. All of the images and other things running in HTML. All of screen will run in HTML5.
So, I can partially transfer my app into iphone app or other platforms. This is the benefit of this way to me.
But I don't know. Is this way better? What will the performance be? What is the disadvantages of converting to an HTML5 app?
Can you explain?
There is a very good presentation about this very topic.
Performance: You are adding an additional layer in between, A webkit engine cannot always match native (and sometimes hardware accelerated) rendering performance.
Disadvantages: One is that the API use is limited, you can bind a page's JavaScript to Native code, but not all functionality is available.Though you might want to have a look at capabilities of Cordova project. Another is that emulating complex widgets via JavaScript will slow down the page.
Portability: Indeed is a great advantage, that's why PhoneGap and Cordova are popular. Though many like Facebook App etc have switched to native App for better performance.
The approach you require actually depends on your requirements. This may be my personal rant but IMHO: a markup can be only twisted so far, it can't out-perform industrial grade GUI programming setups as of yet.
Cons WebView
Can't use full performance of device, Since web view form an extra layer.
Web view can't listen all user event.
You can't fully share or save data from your web view to app.
Take more time to load. Other we get all things in a simple API and can be rendered.
Changing a simple fields in page need to load full page again.
Online required, can't extend offline features.
Orientation changes and full screen make difficulties.
Pros of using Web view
One page for both android and IOS.
I think the main advantage is the ability to make changes without the need for each user to update the app on his device, because all the pages are on your server.
No wait for app store approval for updation.
Some Techniques
Native elements TOGETHER with WebView. I think it will be much better, as there are a lot of functions that can't be done with WebView only. The combination of the two is much more recommended.
Rendering from locally, Create an assets directory for HTML files – Android internally maps it to file:///android_asset/ (note singular asset). So you can feed your web view form locally even if you are offline.
I think -by using this way- your app quality will be weak and app will be hard to use because the webview object not having a lot of tools that you can make it be compatible with android. e.g you can't share or save data from your webview to app. whatever that reference on your app what need and what dosen't need, by the way i tried to develop an app with html but it was bad.
I would like to create an application that support in both Android and iPhone.
It will be a interactive system for people to chat,share photos, etc.
So, it will consist lo-gin system, and all information for users will stored in mysql.
The question is here, should I write two sets of code for Android and iPhone or use some cross platform tools such as Phonegap + jQueryMobile for development.
1)I am wondering if html + css + javascript can complete all the functions that I want to include in this application if I use Phonegap.For example, how to handle the data transfer when loading data from db, should I create many .html for different pages. And the performance of using Phonegap...
2)Also, how about the time of development. Suppose there is one developer for Android, and one for iPhone. If we develop separately, we cannot help each other. On the other hand, web may be easier and we can research on this together.
3)Then, for the UI, it is easier for native language. But it is much difficult for web to make the things like mobile application.
I have asked a lot of questions. But I really think about this kind of issue for a long time and this is the time for me to have the decision.
Can anyone help me and give me some idea? Really thx....
Consider these Factors & Make your own wise decision,
which coding technique are you familiar with (HTML, CSS, JS) or (Java, C#).
For your First Question about data transfer from db,(your question is not clear internal db or server side db) if internal db Here is My QuestionI couldn't find the solution with the given answers, Help me if you can solve the same.(if you are talking about server side db) both for native & Cross platform it has to be achieved by API's
Time of Development is less in PhoneGap, when consider for both platforms since you are coding for both platforms simultaneously.
UI is Easier in Native ONLY when you go with Default styles,
For example consider yourself adding a Customized Button in *.png format.
you are gonna add single button multiple times in multiple sizes. If you wanna achieve clicked or Hover Effect you are Gonna add 2 more Customized Buttons. Which makes totally 3 images for single click for single Screen & Single Orientation, to achieve Correct Quality, u have to add same image in different sizes in ldpi, mdpi, hdpi, x-hdpi, no-dpi which finally brings you 5x3=15 images for single Button.(imagine the size of your app). Finally you have to add few lines of Codes to achieve Clicked effect
The same can be achieved in CSS with few lines of Codes(hardly 5 KB). Many animations also can be achieved easily with js.
UI can be changed when ever you want with change in few lines of codes.UI - PhoneGap Wins your app runs in Browser, both Android & iOS use the same browser engine Webkit, but still significant differences even in Webkit
Here are few more issues in PhoneGap,
Performance Native wins. In PhoneGap your browser has to load js, CSS which gives you notable delay, which cannot be ignored. If you want awesome UI go with CrossPlatform. To achieve performance choose Native.
Finally time to take decision.
It depends on what your requirements are. Evaluate if all your requirements are possible with Phonegap. For a list of supported features see: http://phonegap.com/about/features
Note that you can only use the native phone functionality that phonegap provides.
The development time depends on various factors, such as complexity, size of project and developer skill. I think the main difference here is developer skill, as the complexity and size of project are the same.
This is a tradeoff you have to make. An example phonegap application can be found here:
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/
1.If you build application using cordova with more page, you app will get slow and some time it will get more bugs of design. So it
is better if you use single html page with different dives for each
pages and use "display: none;" from your java script or JQuery to
show and hide you current pages.then your application will more
fast.
there a lot of plugins in cordova those are supporting for both iOS and android so you don't need a iOS developer or android
developer if you have proper html and css design like responsive web
site.
UI won't be problem if you build a responsive html pages using bootstrap
I'm fairly new to Android, but have done lots of Java/JSP development and HTML over the last 10 years. So I'm not real familiar with what Android can do. With this current project I'm working on, I'm going to have to read XML/XSLT files and display them in an Adroid application. However, there are a couple caveats:
1. The links in the page should be handled within my own app and not the default web browser (except external links)
2. The XSLT will be stored locally, with the XML retrieved online.
I don't want to waste hours trying to fit a square peg in a round hole if anyone has already done something like this and knows what to do.
Thanks.
Use a webview.
From the documentation:
A View that displays web pages. This class is the basis upon which
you can roll your own web browser or simply display some online
content within your Activity. It uses the WebKit rendering engine to
display web pages and includes methods to navigate forward and
backward through a history, zoom in and out, perform text searches and
more.
It will render your html like the browser, but you have plenty of ways to control its behavior and the presentation of it in your app.
It is very easy to get started with, a good start is the google Hello, WebView tutorial