Embed a Tumult Hype document in a Webview for publishing on the iOS App Store

The key is looking at the Element inspector for your webView and click on the show size inspector. This will make sure you are sized properly for the view.
For multiple layouts
Xcode 6.0 uses an auto layout feature that is analogous to Hype’s multiple layouts. I have not tried this with a Hype document yet but I would think that you could use auto layout with 2 web views one horizontal and one vertical for example.
Here is a quick video tutorial I found on auto layout.
I am going to try it as well with the multi layout in Hype.
I will keep you posted if you can get it to work please share your results. :smile:

I moved 3 posts to a new topic: Autoplaying audio in a Webview (iOS)

Brilliant tutorial Nick - really useful. What are the downsides to making an app this way ? I can’t work out how reliant it is on a web connection. When offline, is it still going to work OK ?

I’m having some minor issues getting the screen size right perfect in Hype Reflect but not filling the screen in IOS simulator - apart from that it’s looking and sounding great.

Once you make it into an Xcode app it becomes an iOS app so it is no longer an online application.
So if you want to keep it online then I would not wrap it into Xcode and just publish it on a web server.

As far as the sizing make sure you adjust your UIWebview in the inspector and set your x and y to 0 and your width and height to the correct setup you made in Hype.

@nick nice job, bravo!
a great addition for the community

I used Cordova (not phone gap) + Xcode
here a useful link

2 Likes

Thanks!
I was just talking with a friend about Gamesalad as well and I told him the reason I did this was to avoid the monthly fees on top of the Apple Developer fee as well.
I have a tutorial in the works for taking Hype documents into Mac apps as well.
Also check out this post on adding sound in the web view in Xcode.

2 Likes

Dude. You win a free internet. This is awesome.

1 Like

Hi!
Thanks for this tutorial! I have followed it is not working for me. It seems that it loads the html file (as I can see the background color) but it doesn’t load the javascript where all the project is.

Do you know what I can do?
Any tips?
thanks!

Hi there.
Am attempting to follow your tutorial. Am receiving notification that I need to add an Apple ID account that is enrolled in a Developer Program. (see screen grab)


Is that indeed the case?
Many thanks

Hi,

At some point you will probably need to do this. For example if you want to test your app on a real connected device.
It is a lot simpler than it used to be. Just click the Join Program and follow the instructions. It is all free and only takes a couple of minutes if that. You can use your current Apple ID.

1 Like

Many thanks. I’ll try it.

1 Like

Hi Nick - I am inching my way towards the App Store ! Runs perfectly on my iPhone 5 with a nice app icon - but I’ve got completely stuck trying to get a launch screen to work in Xcode 7 using launchscreen.storyboard. I don’t think this is anything to do with the fact that it’s a web app but it’s unbelievably frustrating.

Anybody managed this ? You have to have a launch screen to get your app accepted.

@alastair
What have you done with the launch screen ?.

As far as I can see you cannot use a UIWebView or WKWebView in a Launchscreen.storyboard.
You can only use basic UIKit Views

Hi Mark - I’ve put an image on the Launchscreen.storyboard - just can’t get it to display. It should be simple but hours later I still have a white launch screen - I’ve probably just missed something. Been through it loads of times and it ain’t working. I’m going to try with a different project now !

Alastair :slight_smile:

This does not sound like a Hype problem!.

Saying that check your constraints.

Add the Image to the any,any Size class.

Then change the size class to your preferred size rep. for iPhone and or iPad.

Next use the Align tool to add 1 constraint. Horizontal in container.

Now go to the Pin tool.

Uncheck Constrain to Margins.
Click on of the pin text fields black triangles. And make sure that it is on the view rather than the margin or any other object. ( This may need to be slightly different depending on your layout but this is a basic setup)

Now click the four light red bars which will turn them a darker red. Set the numbers to what you want. These are the distances from the sides.

Click the update frame and set it to all frames.

Add the constraints.

Now test.

You will need to do this for all layout class sizes you want to provide for.

Always add elements to the any,any first. Not one of the size classes or you may not see it in any other size class.

2 Likes

Thanks Mark - I’ll give it a go and let you know how I get on. You’re right, it’s not a hype problem - it’s my last hurdle to cross and seems to be giving me more grief than anything!

Were you able to get it to work?
I just saw these response threads…so sorry for the late reply.

1 Like

Hello Nick,
I am following all your steps but I am stuck in step number 5. When I type UIwebview or uiweb or web view, it says: no matches. I tried to find a solution online and I found someone that had the same problem as me and they told him it was that he had Xcode version 7 and that he had to go back to 6. I went back to 6 but it still says no matches.
I am working on an imac with OS X El capitan version 10.11.3, Hype pro version 3.5.1 and I tried xcode 6.3 and 6.4.

I would really appreciate if you could help me out, or if there is any other way to convert HTML to an app without using Xcode.

Thank you very much for your time.
Carla

Sounds like you need to include an “import WebKit” statement at the start of your view controller file (i.e. after import UIKit).

1 Like

Hello Drew,

Thanks for answering me. Do you mean like that? Like the picture I uploaded?