Forums/AppMakr Knowledge Base/Features

ADVANCED FEATURE: HTML Tab/PhoneGap

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. 

 

Screen_shot_2010-08-14_at_10.50.50_AM.png

Simulator

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.

PhoneGap

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/

Creating an HTML Tab

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.

 

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.

PLEASE NOTE:
Within the zip file, there must be a file called "index.html".  Without it you will receive an error. Also, be sure your zip does not contain another zip within the folder. Click here for further details.

Camera code is included separately in the PhonegapCamera.zip.

 

Known Issues

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.

Improve interaction of web tab using JQTouch!

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.

 

****************************************************************

Advanced user? Check out these great tools!

These tools let programmers make really great html based applications that can also be loaded into AppMakr HTML5 tab.

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

User photo
Marc Bretzfelder

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>

December 14, 2011 03:56 pm
User photo
Stef McBurney

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

October 15, 2011 05:19 pm
User photo
Bruce Beaver

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.

August 29, 2011 02:55 pm
User photo
Billy Padilla

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

August 17, 2011 01:08 pm
User photo
Twilight-Alagaesia

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.

August 11, 2011 09:04 pm
User photo
Arjun Raj

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!

August 03, 2011 08:43 am
User photo
EVAN LUTHRA
AppMakr Testers

cant upload zip files . 
please help ! 

April 23, 2011 08:19 pm
User photo
Aksel

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. 

April 21, 2011 03:38 pm
User photo
Andrea Sesta

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???

March 24, 2011 07:33 pm
User photo
Andrea Sesta

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!! 

March 23, 2011 05:30 pm
User photo
Matthew Brammer

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?

March 07, 2011 03:02 pm
User photo
Michael Moffatt
AppMakr Testers

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.

January 14, 2011 01:38 pm
User photo
Dan Patey

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

January 12, 2011 03:04 pm
User photo
Diana de Avila

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!

December 04, 2010 07:54 pm
User photo
Dan Patey

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

November 29, 2010 07:14 pm
User photo
Brandon Schmittling

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

November 28, 2010 04:18 pm
User photo
Adam Warner

@ 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...

November 11, 2010 11:49 am
User photo
Josh Awtry

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.

November 11, 2010 11:42 am
User photo
Adam Warner

@ 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!

October 28, 2010 01:22 pm
User photo
Diana de Avila

@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).

October 28, 2010 01:06 pm
User photo
Adam Warner

@ 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:)

October 28, 2010 01:04 pm
User photo
Diana de Avila

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


October 28, 2010 12:51 pm
User photo
Leiser

@ 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.

October 28, 2010 12:38 pm
User photo
Diana de Avila

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???

October 28, 2010 11:56 am
User photo
Diana de Avila

@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.

Sep-16 2010 14:36."
My Zip file DOES contain the index.html file and I have put a bug report and have also put a separate thread on the issue with a iSHOWU movie, but here is a screenshot of the error saying that the ZIP doesn't contain the index.html file.
What's the fix here ... certain meta data or what?  I am using Dreamweaver and am accustomed to building sites, I just can't figure out what the problem is here.
Thanks,
Diana
October 28, 2010 11:47 am
User photo
JADonnelly
AppMakr Testers

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



October 24, 2010 08:04 pm
User photo
Adam Warner

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?

October 21, 2010 09:17 am
User photo
Steven Morrison
AppMakr Testers

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.

October 20, 2010 02:34 am
User photo
Eric

oops I copied the script twice in my last post! I meant only once.

October 19, 2010 11:03 pm
User photo
Eric

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">
     <!--
     // -->
 </script>

 <script language="javascript" type="text/javascript">    

<!--     window.location="http://mobile.pgatour.com/s/1676/ArchiveLeaderboard?trnPermNum=004";     // --> </script>

Again thanks for the help!

E

 

October 19, 2010 10:47 pm
User photo
Jason

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!

October 19, 2010 04:00 pm
User photo
Eric

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.

October 18, 2010 11:32 pm
User photo
Steven Morrison
AppMakr Testers

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.

October 18, 2010 08:57 pm
User photo
Jason

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?

October 18, 2010 08:48 am
User photo
Eric

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?

October 17, 2010 06:59 pm
User photo
Leiser

@ 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.

October 12, 2010 11:14 am
User photo
Cartabianca Publishing
AppMakr Testers

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:

  • target="_blank"
  • rel="external"
  • "browser://" instead of "http://"

@ Jason & Leiser, can you please ask your developers if there is a way to send a link to Safari within an AppMakr app?

October 07, 2010 12:26 am
User photo
Leiser

@ 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)

September 28, 2010 04:34 pm
User photo
Richard Wing
AppMakr Testers

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

September 27, 2010 05:34 pm
User photo
Alexander Phillips

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.

September 27, 2010 02:34 pm
User photo
Fred Beltjens

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

September 26, 2010 09:57 pm
User photo
Alexander Phillips

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.

September 26, 2010 10:38 am
User photo
Fred Beltjens

 

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!

September 19, 2010 11:16 pm
User photo
ipoli

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.send();
xmlDoc=xmlhttp.responseXML; 
var x=xmlDoc.getElementsByTagName("item");......................

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?

 

September 18, 2010 05:38 am
User photo
TWO
AppMakr Testers

@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.

September 16, 2010 03:56 pm
User photo
Alexander Phillips

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>

September 16, 2010 01:27 pm
User photo
Cartabianca Publishing
AppMakr Testers

@ 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...

September 16, 2010 12:11 pm
User photo
Jason

@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.

September 16, 2010 11:36 am
User photo
Richard Aldridge
AppMakr Testers

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.

September 15, 2010 07:07 pm
User photo
AppMakr Support
AppMakr Help

@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:

  • User clicks HTML Tab 
  • User see your view in html
  • user clicks search
  • search calls function to call json (if its results from a web service call. note: this is very simple using JQT demo'd in the link above)
  • results are loaded into page and display (not a separate page)
  • User presses JQT based button that handles the back navigation (as is demo'd on JQT site link above)

 

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.

September 15, 2010 02:41 pm
User photo
Richard Aldridge
AppMakr Testers

Thanks, but not sure I understand.

September 15, 2010 12:04 pm
User photo
AppMakr Support
AppMakr Help

@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.

September 15, 2010 11:10 am
User photo
Repute

@Richard Aldridge I'm having the same problem ...

September 15, 2010 01:18 am
User photo
Richard Aldridge
AppMakr Testers

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.

September 14, 2010 01:33 pm
User photo
Richard Aldridge
AppMakr Testers

Seems to be building successfully now.  Thanks

September 14, 2010 10:37 am
User photo
Leiser

@ Richard -- Ahh, I misunderstood.  Creating a ticket for this issue and escalating to our engineers.

 

(UF#880)

September 13, 2010 02:19 pm
User photo
Richard Aldridge
AppMakr Testers

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.

September 13, 2010 01:55 pm
User photo
Leiser

@ 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

September 13, 2010 01:32 pm
User photo
Richard Aldridge
AppMakr Testers

Anyone else getting "Build Error"?  I've tried 5 times with the same results.  I've never had a build problem until today.

September 12, 2010 01:34 pm
User photo
Repute

Great thanks for the update! Only thing is that the TABS section in the app builer are not loaded in IE8 ...

September 12, 2010 08:49 am
User photo
Richard Aldridge
AppMakr Testers

Just tried to build a test app and got a "build error".  Tried a second time with same results.

September 12, 2010 08:41 am
User photo
Geek Farm Team

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?

September 12, 2010 08:39 am
User photo
Matt Ansbro

@Leiser:  Great News!!!! We'll start testing our builds and report back.  Thanks for the update and hard work!

September 12, 2010 08:32 am
User photo
Leiser

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.

September 12, 2010 08:08 am
User photo
Richard Aldridge
AppMakr Testers

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.

September 10, 2010 11:01 am
User photo
Cartabianca Publishing
AppMakr Testers

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...

September 10, 2010 12:19 am
User photo
Richard Aldridge
AppMakr Testers

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

September 09, 2010 08:25 pm
User photo
AppMakr Support
AppMakr Help

@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.

September 09, 2010 08:19 pm
User photo
AppMakr Support
AppMakr Help

@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

September 09, 2010 08:17 pm
User photo
Richard Aldridge
AppMakr Testers

What about the Safari pop out issue?

September 09, 2010 07:57 pm
User photo
Richard Aldridge
AppMakr Testers

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.

September 09, 2010 07:55 pm
User photo
AppMakr Support
AppMakr Help

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!!

September 09, 2010 07:51 pm
User photo
Geek Farm Team

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.

September 09, 2010 05:03 pm
User photo
Richard Aldridge
AppMakr Testers

That also threw me for a moment.

September 08, 2010 09:10 am
User photo
Green Map System

sorry, i now see that the posts are in the reverse chronological order.

September 08, 2010 09:09 am
User photo
Green Map System

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.

September 08, 2010 09:06 am
User photo
Adam

By the way, Heres my file! 

September 07, 2010 07:01 pm
User photo
Adam

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!

September 07, 2010 07:01 pm
User photo
Richard Aldridge
AppMakr Testers

Any update on this?

September 07, 2010 08:18 am
User photo
Geek Farm Team

RE: <meta content="yes" name="apple-mobile-web-app-capable" />

Tried adding all these meta tags and the issue still exists on the iPad.

September 02, 2010 12:37 pm
User photo
Alberto Pantaleoni

(ups it did it again.. (not my fault..) I'm sorry)

September 02, 2010 10:48 am
User photo
Alberto Pantaleoni

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" />

<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.

 

September 02, 2010 10:46 am
User photo
Alberto Pantaleoni

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" />

<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.

 

 



September 02, 2010 10:45 am
User photo
Richard Aldridge
AppMakr Testers

I'm also seeing this on the iPad.  And the app becomes unusable.

September 02, 2010 10:11 am
User photo
Geek Farm Team

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?

September 02, 2010 09:50 am
User photo
Green Map System

Any ETA on these fixes - Safari pop out and resources modified? My client is getting testy.

September 01, 2010 09:31 am
User photo
Alberto Pantaleoni

ok, it works, and it rocks. but the app freezes every time I try to go to another tab (rss/atom). no clues..

August 30, 2010 10:45 am
User photo
Green Map System

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.

August 29, 2010 09:17 am
User photo
Repute

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 ...

August 27, 2010 10:44 am
User photo
Leiser

@ all - this is a known issue that is currently being addressed by our dev team. Will post an update when possible.

August 27, 2010 10:42 am
User photo
Repute

Support?

August 27, 2010 06:31 am
User photo
Green Map System

same as the two above ^

We are using iframes to provide some very cool functionality but, again, targeting an iframe forces open safari.

August 26, 2010 10:32 am
User photo
Richard Aldridge
AppMakr Testers

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?

August 26, 2010 09:14 am
User photo
Repute

How can I use iframes to show a webpage in the app now it's openening safari when I start the app ...

August 26, 2010 04:17 am
User photo
Josh Awtry

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.

August 25, 2010 09:26 am
User photo
Green Map System

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.

August 25, 2010 07:57 am
User photo
Neurons Ington
What's the status with different iOS? Does this work on 3.1.x and what about mentioned 4.0.2 fix?
August 24, 2010 09:23 am
User photo
Green Map System

Do I understand correctly that the tab contents can not access any external urls?

August 24, 2010 09:02 am
User photo
Jason

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.

August 23, 2010 11:39 am
User photo
Cartabianca Publishing
AppMakr Testers

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.

August 22, 2010 07:22 am
Topic is closed for comments