AppMakr Support
posted this on August 10, 2010 08:53 am
Prerequisites:
An understanding of HTML and relative path referencing and basic understanding of file structures is important to be able to use this feature effectively. The simplest form of this feature implemented can consist of a single HTML file but chances are you will want to use JavaScript, CSS, and other files such as images to make the best use of this feature.

Currently the simulator is unable to simulate features of your html tab that may make use of native hardware functionality on the phone such as geolocation or the accelerometer. You must test these features on your device to ensure they work properly.
The HTML tab comes equipped with PhoneGap. PhoneGap allows you to interact with the native functionality of the device through a JavaScript API. This is not Necessary to use but available in case you do.
More about phone gap and documentation: http://www.phonegap.com/docs/ http://phonegap.pbworks.com/
To create an HTML tab, start by adding a folder to your desktop and call it MyHTMLTab. Create any HTML files and structure within that folder but be sure to only use relative addresses when referencing images, scripts. The only other requirement is that your html structure contains a file called index.html directly inside your folder. Also, make sure that those images and scripts all reside within that folder. Click here for further details.
You can test your web page in any browser by opening your index.html file in the browser. (If you are using PhoneGap feature you can download their simulator to test your scripts here).
Once you are done, zip the folder and upload it using the HTML tab. You can then test in on your Device using the "Publish" tab in AppMakr.
You can download an example zip attached. This zip consists of a few images, CSS and Javascript snippets as well as use of the PhoneGap API, specifically the "Accelerometer" feature.
There are a few known problems with HTML/PhoneGap release for users running apps on iPhone OS 3.1.3 or earlier regarding "contacts" and "beep" functionality.
Rotation issues, a fix will be coming out in the next release.
JQTouch: A js/CSS library that easily implements an iPhone UI, transitions, and interactions based on the Jquery API (http://www.jquery.com). It also helps handle iphone browser events such as opening external links etc. Check out the demo on your phone at http://www.jqtouch.com/
Released October 16th, 2010 - The alpha release of the jQuery Mobile project. jQuery Mobile is a user interface framework, built on top of jQuery, designed to simplify the process of building applications that target mobile devices. It consists of a number of components, layouts, and theming tools to greatly simplify the process of building a mobile application. There are two guiding principles of the jQuery Mobile project that differentiates it from most other offerings: It’s completely built on the principle of progressive enhancement and is designed to be functional in all HTML-capable mobile browsers. Check it out here.
GWT (Google Web Tool kit) - http://code.google.com/webtoolkit/
SmokeScreen - http://smokescreen.us/ - It converts flash into HTML 5 so you can use it in your app!! Super cool. Users can now use HTML5 tab to post to their app!
Sencha - http://www.sencha.com/
Comments latest first
I wanted to style the rss file coming from feedburner, so I used BuzzBoost and then created an html file residing on my server that contains the BuzzBoost and css to style it. The page is here: http://www.si.edu/podcasts/nmailive/NMAILiveVideoPodcastSDBuzzBoostCSS.htm I created an index.html that simply metarefreshes to that page and created an html tab pointing to the URL above. I just get the plain, unstyled RSS feed in the html tab. Does the html tab respect CSS? Do do I have to use a specific CSS format?
Here's how I formatted the page:
<HEAD>
<style type="text/css">
<!--
/*Something in .feedTitle and feedTitle a is making the feed title disappear*/
.feedTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bolder;
text-decoration: none;
}
.feedTitle a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bolder;
text-decoration: none;
}
div {
display: block;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-right: 15px;
padding-right: 15px;
}
.headline a {
text-decoration: none;
color: #D32A08;
font-size: 12px;
margin-top: 10px;
font-weight: bold;
list-style-type: none;
list-style-image: none;
display: block;
}
/*Messing with each podcast link .enclosure*/
.enclosure a {
text-decoration: none;
color: #000000;
font-size: 10px;
margin-top: 4px;
font-weight: bold;
list-style-type: none;
list-style-image: none;
display: block;
}
/*Messing with each date .date*/
.date {
text-decoration: none;
color: #000000;
font-size: 9px;
margin-top: 4px;
list-style-type: none;
list-style-image: none;
display: block;
}
body {
background-color: #FFCC33;
}
div.feedburnerFeedBlock ul {
list-style-type: none
}
div.feedburnerFeedBlock ul ul {
list-style-type: disc;
}
div.feedburnerFeedBlock ul ol {
list-style-type: decimal;
}
.blogger-post-footer {
page-break-after: always;
}
#creditfooter {
display: none;
}
code {
font-family: "Courier New", Courier, monospace;
color: #000000;
text-align: left;
font-size: small;
background-color: #FFFF99;
display: block;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #000066;
border-bottom-color: #000066;
border-left-color: #0066FF;
}
.date {
color: #0066FF;
}
-->
</style>
</head>
<script src="http://feeds.feedburner.com/SmithsonianNationalMuseumOfTheAmericanI..."
type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a
href="http://feeds.feedburner.com/SmithsonianNationalMuseumOfTheAmericanI..."></a><br/>Powered by
FeedBurner</p> </noscript>
Hi all,
Basic question.... but where is the 'attached example zip' that I can try out?
"Example HTML Zip
You can download an example zip attached. This zip consists of a few images, CSS and Javascript snippets as well as use of the PhoneGap API, specifically the "Accelerometer" feature."
Thanks
I noticed that there are a couple of things included in that free phonegap sample download that are not used (or at least I couldn't tell how they were used). Specifically, has anyone used that sample to utilize "map.js"? I'm wanting to jump out of the app and go to the native Maps app and thought maybe someone here has done that.
How can i link from a html button to an app tab?
Example.. i want to build a menu for the first screen of the app.
And i want this menu to link to the diferent tabs of the app
Thanks
When I added a html content and you click on a link to open a webpage, there is no going back to the info I put on the html, even if I close and open de application the last page of the webpage keep appearing instead of being able to get back to the original html I uploaded with the links.
Hello! I am Arjun Raj and I simply love AppMakr and the fact that its free. I created 3 apps for Android and iOS, works briliiantly.
Then I hit a wall.
While this HTML/PhoneGap tab is God sent, in my Samsung Galaxy S I9000 running Android 2.3.3 , the tab behaved as if it was the only tab in the app. I had two other tabs with validated rss feeds coming in. But this tab or actually which ever HTML tab I place as the default (first in display order), dominates the app and the context-menu button on the phone or the soft context menu included in the app does not work.
I am attaching the html file I used for your reference. Please help me with this.
Also looking for a commercial licence for support if you have any such thing.
Thank you, You are pure awesome but do get awesomer and awesomer!
cant upload zip files .
please help !
Hello: I noticed the header(which I added via the customize section) as well as admob ads do not display when an HTML tab is selected. They display fine in any other kind of tab RSS Feed etc. Its just in the HTML / Phonegap tab that I can't see the header added in the dashboard under the customize section as well as the admob ads.
I think this is the same / similar issue posted by Eric on Oct-20 2010 I tried to follow the thread but I could not find a solution.
Any help would be greatly appreciated.
I'm getting mad trying to understand why the photo library is working on the xcode simulator but not on the phone when I upload the app with Phonegap!! It seems that the
navigator.camera.getPicture(getPicture_Success, null, options);
is not triggered at all!!
Can you guys help me, please???
Hi guys!
Is there any workaround for the Phonegap rotation lock issue?
I've read you're planning bug fixing it in the next release ... do you know approximately when it's gonna be?
thanx!!
I'm attempting to add a Home page that will link to the "Tabs" that I've created in App maker.... I tried to use the RSS link feeds that I used in the RSS feed tabs, but that doesn't work correctly. How do I make the button connect to the Tabs?
I'm attempting to launch my links in the Tab itself but it doesn't work. Any one have ideas? I've tried plain simple HTML <a href="http://www.w3schools.com/">Visit W3Schools</a> but nothing I try works. Would love help on this.
I use Komodo Edit or Dashcode depending on how I feel that day :)
Komodo edit is free and available at http://www.activestate.com/komodo-edit
Dashcode is free but OS X only and comes with XCode.
--Dan
Can I ask what development tool you guys use to develop in PhoneGap? Do you actually use XCode or something else like Dreamweaver? Any suggestions for a good dev environment? Thanks!
Because the phone is not running a PHP server it is not possible to run PHP statements locally. It's possible to link to execute PHP statements and display PHP results as long as you are linking to server that is running PHP.
Hope this helps!
--Dan
This feature, though helpful, wasn't what I think a lot of us were expecting. When first introduced, the HTML tab was described as any external URL that could be pulled in (a feature which would enable much great functionality). It would enable browser-like functionality to take place in tabs (and the use of server languages like PHP).
Is there any feature that allows you to execute PHP or show PHP results in a browser-like tab? The workaround is creating an XML tab, each linking to a PHP page that executes. But that's kind of an awkward workaround, wouldn't you say?
-Brandon
@ Josh,
Glad to see that someone else can confirm the same behavior (every other example seems to work but not camera). You may have missed this thread, but I have a request for the AppMakr devs to have a look:
http://help.appmakr.com/entries/317354-phone-gap-html-camera-exampl...
I'd second Adam Warner's request — Has anybody been able to get any of the PhoneGap camera functionality to work? I've tried using the files he pointed to, and was able to display the HTML, but no camera access would happen.
@ Diana, when AppMakr gets a more robust forum format going editing comments will be a breeze I'm sure. It will also help us not to scroll for miles to add a comment;)
Good luck with your app!!! be sure to let us know when you get approved!
@Adam, yeah ... I wish I could edit some of my comments. This is my first app ... learning as I go. Thanks for your help and everyone's help. Baby steps (LOL).
@ Diana, no, that is stated correctly as "test" app. The simulator doesn't work with HTML/Phone Gap. You'll have to go through the process of making an "Ad Hoc" app, download to your device, and test the HTML/Phone Gap there.
Hope that helps:)
Wow, that worked!!! Thank you Leiser. I am getting this message though: At this time we cannot display html tab content in the simulator. Please test this feature by creating a test app.
I guess it means a 1 tab app. Will try that out :) Thanks a lot. I just didn't get why the compressed file wasn't working (compressing the folder). The archive worked.
Thanks!
Diana
@ Diana - Have you tried selecting the items (including index.html) in your folder and zipping those, rather than zipping the actual folder? This post goes into a little further detail, let me know if you find it helpful.
I tried even a BASIC zip file with just an index.html and a css file and zipped it and tried to upload. Same error. I just want to test some basic HTML functionality and CSS before I start building more.
Is anyone else having upload problems???
@Jason - "You're missing an index file at the root of the zip file. Our system now has in place a block if a zip file is uploaded with the missing index file.
Hi,
I've been trying for weeks to make an external link open that will open itunes on the iphone. All links are working when I test it on my computer. Any suggestions?
I've been using itms://itunes.apple.com/us/album/fly-me-to-moon-the-great-american/id393977678
to launch itunes, otherwise http:// works to open browser. I need itunes store to open on iphone.
thanks,
jad
Hi All,
I have downloaded and have been experimenting with the PhoneGap code above. First off, thanks so much for providing this! While looking through these files and also at the functionality it provides (by having an Ad Hoc app installed on my phone), I discovered that there was an example for most everything EXCEPT for the PhoneGap Camera functions. http://docs.phonegap.com/phonegap_camera_camera.md.html#Camera
Looking through these example files provided by AppMakr above, I can see that all the functions have both an .html file and a .js file associated with them. In other words, there is a contacts.html and a contacts.js, a geolocation.html and a geolocation.js, a media.html and a media.js, etc.
However, there is only a camera.js file. There is no corresponding camera.html file. Is this an oversight? Do you have an example camera.html file that could be included?
I am looking for the ability to "take photo" or "choose from library". Specifically, I am looking to integrate these two functions within a custom form to have my users be able to fill out a form and then either attach a photo along with it, or upload a photo from their library or camera.
As an aside, I did copy/paste the code from the "Full Example" section of this page: http://docs.phonegap.com/phonegap_camera_camera.md.html#Camera into a file named camera.html, then inserted a link to this page just like the others...but it doesn't work. I do see buttons to "Capture Photo", "Capture Editable Photo", "From Photo Library", and "From Photo Album" but when I click on these nothing happens. That's as far as my current knowledge can take me.
Does anyone have a working example of using the Camera function within an HTML/Phone Gap tab?
Re: Network Detection - let me rephrase. Can you tell us what version of PhoneGap AppMakr is using as none of the functions I posted earlier return any results.
Thanks.
oops I copied the script twice in my last post! I meant only once.
Jason,
The main header bar in the 326 image is what I am referring to. This bar disappears when I use the html tab (img 327). Is the main header supposed to disappear?
here's my redirect code:
<script language="javascript" type="text/javascript">
<!-- window.location="http://mobile.pgatour.com/s/1676/ArchiveLeaderboard?trnPermNum=004"; // --> </script>
Again thanks for the help!
E
Hello Eric,
There is some confusion in to which header bar you are referring to, would you please provide your html redirect code? Thank You!
Jason,
Thanks for responding. I included 2 images. 326 shows my regular custom header bar. In 327, this is my "html" tab. Notice the header bar is gone. Is there something I can do to have that header bar back? My html is just a redirect I did in javascript.
Hello,
Having a hell of a time getting network connection error messages to work under phonegap and appmakr, and Apple generally won't accept an app that doesn't have network error messages built in. The javascript alert dialogs do work, but are very ugly and always show "index.html" in the dialog.
Tried many of the examples from this group including the first five from this search:
http://groups.google.com/group/phonegap/search?group=phonegap&q...
No luck. Am I missing something?
Here's an example of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="notification.js"></script>
<script type="text/javascript" charset="utf-8" src="network.js"></script>
<script type="text/javascript" charset="utf-8" src="bonjour.js"></script>
<script type="text/javascript" charset="utf-8" src="accelerometer.js"></script>
<script type="text/javascript" charset="utf-8" src="acceleration.js"></script>
<script type="text/javascript" charset="utf-8" src="camera.js"></script>
<script type="text/javascript" charset="utf-8" src="compass.js"></script>
<script type="text/javascript" charset="utf-8" src="contact.js"></script>
<script type="text/javascript" charset="utf-8" src="debugconsole.js"></script>
<script type="text/javascript" charset="utf-8" src="device.js"></script>
<script type="text/javascript" charset="utf-8" src="geolocation.js"></script>
<script type="text/javascript" charset="utf-8" src="map.js"></script>
<script type="text/javascript" charset="utf-8" src="orientation.js"></script>
<script type="text/javascript" charset="utf-8" src="position.js"></script>
<script type="text/javascript" charset="utf-8" src="sms.js"></script>
<script type="text/javascript" charset="utf-8" src="telephony.js"></script>
<script type="text/javascript" charset="utf-8" src="uicontrols.js"></script>
<script type="text/javascript" charset="utf-8" src="file.js"></script>
<script type="text/javascript" charset="utf-8" src="media.js"></script>
<script type="text/javascript" charset="utf-8">
function onWinLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady() {
debug.log("Device Ready");
navigator.network.isReachable("google.com", reachableCallback);
}
function reachableCallback(reachability) {
ConType = reachability.internetConnectionStatus;
// NetworkStatus.NOT_REACHABLE = 0;
// NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK = 1;
// NetworkStatus.REACHABLE_VIA_WIFI_NETWORK = 2;
if (ConType==0) {
navigator.notification.alert("You need a working internet connection
to use this application.","Error");
}
if (ConType==1) {
navigator.notification.alert("Data Network Working.","Error");
}
if (ConType==2) {
navigator.notification.alert("Wifi Network Working.","Error");
}
debug.log("ConType: "+ConType);
}
</script>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="refresh" content="300" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<body onload="onWinLoad()">
(body stuff here)
</body>
</html>
Any help you can provide is greatly appreciated.
Hello Eric,
Would you please provide a screen shot of the header bar missing from the HTML feed, and the feed url in question? Thanks! Also, can you explain more what you would like refreshed? Are you referring to adding more content, and refreshing to show the new content?
Does anyone know how to keep the header bar in view when a user clicks on the html tab?
Also how does a user refresh the html tab?
@ Cartabianca Publishing - This appears to be a bug with our code, please submit a bug report form so that our dev team can investigate this issue further. As I know this is a defect that is effecting many, I will be sure escalate accordingly.
Me too I've got to find a way to open an external link through Safari application - and not within the app's own PhoneGap tab. Please note that the following methods does not work on AppMakr:
@ Jason & Leiser, can you please ask your developers if there is a way to send a link to Safari within an AppMakr app?
@ Alexander - Have you tried using "browser://" instead of "http://"
so for example: <a href="browser://www.appmakr.com/">
@ ALL - Many of our clients who are looking to create very complex apps have had much success using our AppMakr approved third party vendors. (@ Alexander - For instance, perhaps you'd be interested in reaching out to one of our vendors who has experience making apps for political candidates)
Im sorry can someone clarify if I understand this correctly... Does this new feature allow us to call to content on the web or does it have us load static webpages and images to be store within the app itself? Does each page need to be in its own zip with the images that will show on that page? Can we link from one page to the next (through a menu on the pages) or does that need to be in the app menu.
I want to make a ebook and trying to sort through all this for the best way to make it happen.
Is there anyone that has made a ebook or would mind calling me for a few minutes to help walk me through to get a better understanding. I am not technically challanged so I am not a complete newbie to the net. I know html etc. I just would like to ask some questions to any of you that have been at this awhile as far as the mobile app creation. I can keep the call short. Or I can call you on my dime.
Thanks for your time and consideration.
Richard Wing
623-505-6302
Sadly that suggestion did not work, so I am still looking for a solution. Thanks for trying though. It is an app for a political candidate for Congress.
AP -
try rel="external" in your <a href> tag.
What framework did you use for your HTML? The rel="external" works with jQtouch and possibly phonegap and maybe others... I am still finding out myself. Be sure to let me know how it works out.
What kind of app are you working on?
po
fb
Safari link pop out.
Hey guys, I know recent changes made it so that links opened internally which is great, but I have one that I need to open externally in safari. I tried the HTML target="_blank" to no avail, is it possible to do this? This is the last thing I need to publish my app so any help ASAP would be greatly appreciate I'm trying to submit my app this week. Thanks.
FYI - if you are on a PC uploading a HTML zip file make sure there are no DESTOP.ini files (sometimes hidden) as well as THUMBS.db (maybe but I think this one also) - I was having a hair pulling moment myself recently until I figured out what it 'liked' and did not in the zip file.
So on a PC when you are ready to zip move/copy all your html, js, css, images into a clean directory, check your links and then zip that directory - upload and away you go!
I am really liking the possibilities with the feeds combined with custom html w/js.
Does anyone know how to link from the HTML to a Feed link on the TAB bar? Or is it possible?
Thanks and good App's to ya!
I am using the google map api capabilities in my html tab loading the <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> and then the google map
Is this allowed?
also, i am using html code to get data from my website's database into my app after i have converted it into xml format.
This is an example:
.................
xmlhttp.open("GET","http://www.ipolistonkosmo.gr/mobile/getinfo.php?selectedvenue=" + venue + "&gener=" + gener, false);
xmlhttp.open("GET","http://www.ipolistonkosmo.gr/mobile/getinfo.php?selectedvenue=" + venue + "&gener=" + gener, false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("item");
.....................................
is this allowed?
@Cartabianca Publishing
When you are zipping up your file make sure you zip the files inside the folder you have them in (select the files and archive or however you do that). If you try and zip or archive the folder the system wont see anything but a single folder. Basically zip your stuff up and then unzip. If you see 1 folder only - then you failed -- if you see all your files then you are good to go.
Otherwise it works great for me now.
Can someone help me out, I created my html layout in Photoshop, not ideal I know but for something so small I figured itd be easier. I have a folder called htmltab2 with all my files in it. It has a bunch of files and images folder. It has an index.html file but for some reason when I zip the folder (htmltab2) and upload it, it says that it does not accept files without an index.html file even though I have one, any help would be greatly appreciated. Here is the code of the index.html file:
<html>
<head>
<title>Untitled-5</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<title>PhoneGap</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-4) -->
<table id="Table_01" width="320" height="481" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="home_01.png" width="320" height="197" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="6">
<img src="home_02.png" width="64" height="212" alt=""></td>
<td>
<a href="biography.html" target="_self">
<img src="biography.png" width="191" height="45" border="0" alt=""></a></td>
<td colspan="2" rowspan="6">
<img src="home_04.png" width="65" height="212" alt=""></td>
</tr>
<tr>
<td>
<img src="home_05.png" width="191" height="16" alt=""></td>
</tr>
<tr>
<td>
<a href="issues.html" target="_self">
<img src="Issues.png" width="191" height="45" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="home_07.png" width="191" height="16" alt=""></td>
</tr>
<tr>
<td>
<a href="reforms.html" target="_self">
<img src="Reforms.png" width="191" height="45" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="home_09.png" width="191" height="45" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="home_10.png" width="28" height="71" alt=""></td>
<td colspan="3">
<img src="Days.png" width="265" height="67" alt=""></td>
<td rowspan="2">
<img src="home_12.png" width="27" height="71" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="home_13.png" width="265" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="36" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="191" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="38" height="1" alt=""></td>
<td>
<img src="spacer.gif" width="27" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
@ Jason
>> You're missing an index file at the root of the zip file.
No, I'm not. I simply tried to upload the "html_tab_w_phonegap_sample.zip" file and it didn't work. So, I created a zip file containing *only* a single file called "index.html". And it didn't work either.
Fortunately, the new revision 936 fixed that problem on my iPhone 4 (iOS 4.1). But it still does have bugs on the iPad. Now at least I can copy the app on that device, but when I launch it, it shows a full HTML screen with no top and bottom bars. The only way to make those bars appear - along with the navigation buttons - is to tap on the areas where they should be.
You are on the right path, but it seems more work is needed...
@Cartabianca Publishing
You're missing an index file at the root of the zip file. Our system now has in place a block if a zip file is uploaded with the missing index file.
Thanks for all the information. I'll take a look.
BTW - the app is working on iOS 4.2 beta on the iPad. But as I and others stated here, it doesn't work on iPad 3.2.2, but just loads the HTML page and hangs.
@Richard
Please check out this page in your iphone browser to get an understand of what JQTouch does and to frame what I am describing to you.
http://www.jqtouch.com/preview/demos/main/#home
We need to take a step back from your goal and restructure the way you are thinking about the process I believe. The principle is that instead of loading a new page with search results you should be loading the search results into elements on your current page using element tags and AJAX/JSON etc.
If you check out JQTouch, which is a library for html, css, and JS commands that make this extremely easy, or the example link above, you will see what I mean.
In those examples all the pages your user navigates to, responds to, populates based on requests, or loads external pages for are actually on done with a single html base page. I encourage you to download their examples, demos, css and scripts to get a feel and play with them in Safari/Chrom/WebKit based browsers.
http://jqtouch.googlecode.com/files/jqtouch-1.0-beta-2-r109.zip
Example Use Case:
Take a look at the Bank Of America app which uses the same principles outlined. Most people dont realize they are a full HTML system and I beleive is based on JQT. Also these apps (http://www.phonegap.com/community) are all made with the HTML based system. You will notice sites such as http://wf.com/ (the wells fargo mobile apps backend website) has the navigation built in the HTML, and doesn't rely on native buttons.
Hope this helps! Remember, based on the "Prerequisites" section we preface these posts with, the HTML tab is a more advanced feature and requires an understanding of HTML, Javascript, and CSS. The more advanced you want to get with the HTML, i.e. navigation, interaction, data loading, the more knowledge of those skills you will need. It might be a good idea to get some help from someone familiar with Mobile Web Dev, JQuery or JQtouch.
If you want to dive into it further yourself try to take advantage of forums and tutorials online around these subjects. Some useful search terms in addition to the libraries and languages listed above are "AJAX" and "JSON". Also, feel free to search terms used in this comment that are unfamiliar.
Thanks, but not sure I understand.
@Richard & @Matthijs
Have you looked at http://www.jqtouch.com/ mentioned in the post? It handles iphone navigation very well.
One of the general concepts of JQT is there is no "true" navigation to "separate pages" as much as there is a single page with many <div> elements each of whom is a container for new and old content. The JQTouch system comes buit in with all the needed transitions, loaders and navigating types for each of those container elements/"pages". If JQTouch isn't for you then I suggest building your HTML tab in this way anyways as it is fairly common/standard.
@Richard Aldridge I'm having the same problem ...
I've tested my app with the HTML tab but have found one issue. Is there any way to go back to the original HTML page for the tab if you've navigated from this? For example, we have an HTML tab that is our search interface for our web site. When I enter a search term is displays the search results in a mobile friendly format, but there's then no way to go back to the search interface. I was hoping for some kind of button that would allow me to go back a level or if I press the button for the HTML tab, it would take me back.
Seems to be building successfully now. Thanks
@ Richard -- Ahh, I misunderstood. Creating a ticket for this issue and escalating to our engineers.
(UF#880)
Thanks Leiser, but not sure what I'm providing you here and how that affects my builds failing in appmakr. Since I can't get the app on my device.
@ Richard -- Please take a screenshot of your app Version, Build, and Revision numbers and attach here. This can be found by going to the Settings in your device and selecting your app name.
@ Matthijs -- Try using a different browser, like Firefox
Anyone else getting "Build Error"? I've tried 5 times with the same results. I've never had a build problem until today.
Great thanks for the update! Only thing is that the TABS section in the app builer are not loaded in IE8 ...
Just tried to build a test app and got a "build error". Tried a second time with same results.
Great on all the fixes.
However, regarding "We just currently don't "support" it meaning, that we are only focused on fixing iPad bugs if it is critical for the app to get accepted into the AppStore."
I am confused. The thread seems to indicate that with HTML tabs the application will not load or run on an iPad at all. There is also an indication that Apple requires iPhone apps to run on iPads.
As I understand it then, at this time HTML tabs cannot be used as they will cause the application to fail approval. Either way they break the basic functionality of the entire application on iPads.
So is this considered a critical bug or not?
@Leiser: Great News!!!! We'll start testing our builds and report back. Thanks for the update and hard work!
All -- Our latest release has been pushed; this includes the Safari pop-out bug (see list of bug fixes here).
In regards to iPad, our app builds do in fact work on the iPad and are compatible with both 1x/2x modes. We just currently don't "support" it meaning, that we are only focused on fixing iPad bugs if it is critical for the app to get accepted into the AppStore.
Well said Cartabianca. At this point, I need the app to run on the iPad and I also need any URLs coming off a static HTML tab to use my app's internal browser - not jump out to Safari. If these can be solved, I can publish my new app that has lots of nice new features.
AppMakr Support said:
> Currently iPad is not actively supported for any of our features. At this time iPad is a use at your own risk
Well, I suggest to divert your resources from Android development to make sure your applications are fully compatible with iPads. That is because Apple just made a clear statement in their "App Store Review Guidelines". At point 2.10 you can find the following sentence:
"iPhone apps must also run on iPad without modification, at iPhone resolution, and at 2X iPhone 3GS resolution"
So it looks that if an app doesn't work on iPad, very likely it will be rejected.
I know you are working hard and trying to hire new developers, but again it is essential for us all to get a fully functional product before adding new features or create a new Android version.
Please read thoroughly that important Apple document. Registered Apple developers can read it from here:
https://developer.apple.com/appstore/resources/approval/guidelines
Whille all the others may review it from here:
http://stadium.weblogsinc.com/engadget/files/app-store-guidelines.p...
Not sure I understand your response to my Safari issue. What I'm asking is when will the HTML tab use the Appmakr internal browser instead of opening up the external one. This is the issue that most have reported in this thread.
Thanks
@Richard:
the HTML tab can implement most libraries. Might I suggest checking out http://www.jqtouch.com/. They have a great CSS, JS, iPhone web API that does some great work at loading external web sites, transitions, interactions etc for the iPhone. There is a demo you can view on your desktop or an interactive one you can checkout in your mobile browser to get a feel for what is possible.
@Richard:
I get your point about the HTML 5 causing problems in iPad. When it comes to software, as apposed to hosting website, every device and OS has it's differences, and although they both should work equally these differences although small could cause the problems you are finding. We would love to stamp out iPad tested and serviced versions, but at this time we are focusing on the iPhone 4/3, iPod, and will soon be releasing Android. We are eager and ready to hire more talented developers! (the double edge sword of having a winning product). We all are salivating at the chance to pump out iPad specific products, so in very similar ways we are eager to get on iPad as well.
We ARE hiring so if you know great iPhone iPad people I would be happy to change that position :) Plus we are now offering a referral bonus. Check out our hiring page @ http://www.appmakr.com/hiring
What about the Safari pop out issue?
Does that mean this issue won't be resolved? iPhone apps should run on the iPad. And your apps have been running fine up until the HTML tab was introduced.
Note: Currently iPad is not actively supported for any of our features. At this time iPad is a use at your own risk system as we work on improving iPhone 4 applications, maintain iPhone 3 (which make up almost 40% or more of iphones), and iPods. We are also churning out Android this fall. (These are our current limitations due to resources for our build-for-free system, so thank you all for your patience, help, feedback and support!!! :) Also, we are hiring. If you can help we would love to have you!!
Any update on the iPad issue? I just rebuilt my app and still have the same situation. When launched on an iPad (iOS 3.2.2) only the HTML tab is shown and the app is unusable.
That also threw me for a moment.
sorry, i now see that the posts are in the reverse chronological order.
i safari pop out is still a big issue and i don't see any use for this feature until that is remedied. Peculiar how all posts referencing that, including the support team member's acknowledgment, seem to be missing from this thread.
By the way, Heres my file!
Ok, So, I have an HTML file, That links to 9 images, 2 of which linking to a website, I have a folder name "MyHTMLTab" with the images and Index.HTML, I .Zipped the file.
I uploaded it to App Makr, And It said it was not a valid HTML file, I tried building, and I got "Build Error".
I did what it said, What do I do now??? I really need this!
Any update on this?
RE: <meta content="yes" name="apple-mobile-web-app-capable" />
Tried adding all these meta tags and the issue still exists on the iPad.
(ups it did it again.. (not my fault..) I'm sorry)
I'm sorry, I don't know why it posted double time:
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
or just try with the first one only.
dumb question: is there the following code before your_page.html </head> closure tag?
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
If not, just try it, and report please.
You can also try inserting only the first meta content line.
Hope this helps.
I'm also seeing this on the iPad. And the app becomes unusable.
I have found that a simple HTML tab (using it as an "About") works fine on my iPhone but when ad-hoc distributed to an iPad it does not. Specifically the app loads, asks for Push notifications, shows and then zooms in on the splash screen and then just shows the first half on my HTML file. There is no tab bar or any other tabs to click on. No header, buttons or anything. I can't even scroll down the one (HTML) page I do see.
Anyone else seen this?
Any ETA on these fixes - Safari pop out and resources modified? My client is getting testy.
ok, it works, and it rocks. but the app freezes every time I try to go to another tab (rss/atom). no clues..
Yes, glad to hear you're working on it. Hope to see a solution to both the safari popout and modified resources errors next week. I have been checking here daily.
Thanks hope it's availeble soon. I love the HTML tab support but without iframe or external website support, for me it's kinda useless ...
@ all - this is a known issue that is currently being addressed by our dev team. Will post an update when possible.
Support?
same as the two above ^
We are using iframes to provide some very cool functionality but, again, targeting an iframe forces open safari.
We're using this provide a search interface for our web site search engine. It works well, but takes the user out to Safari to display the results. As Matthijs pointed out, how can we open the app browser instead?
How can I use iframes to show a webpage in the app now it's openening safari when I start the app ...
Just FYI, I got the same error "The application was not installed on the iPod because its resources have been modified" when I tried to install the sample ZIP files on an iPhone 3.1.2.
How come external links launch safari? I'd much prefer it just loaded within the html tab or at least in the in-app browser.
Do I understand correctly that the tab contents can not access any external urls?
Hello Everyone,
I created a bug report for this this morning. The issue is with IOS 4.0.2, or devices running on an OS with earlier versions work fine. I'll update this forum when the fix goes out.
So it seems this new feature works only on iPhones at the moment. I just hope the developers may add compatibility with iPad and iPod soon.