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


(Nick ) #1

All:
@malik,@gasspence,@h_classen,@lukas_trno,

Here is the link to the finished tutorial!
http://www.gressle.com/Hype32Xcode/how2xcode.html

I put in videos including a complete from A to Z video on page 7
and on Youtube

Thank you @Daniel, and @stephen for your insight and for making Hype with your team of course! :smile:

I hope this helps all of you in your quest to make something Amazing!!

Nick
P.S. play with the bubble on the TOC…I love Hype Physics! :wink:


My Hype Pro 3 document now an App!
Xcode & Phonegap Tips
HTML Hype 3 project be incorporated in an iOS application?
Possible to disable landscape/portrait mode per Layout
Fun with Hype and Xcode
Tips and Tricks of the Month
Feature Request: Xcode / Android / Phonegap
A Book About Hype (3.5+Pro) 📘
eBook or app advice?
My Hype Pro 3 document now an App!
Sound Effects over IOS Music app
Tips and Tricks of the Month
Displaying a Tumult Hype document in a Kiosk or as an app
Presentation on ipad
(René) #2

That’s a really easy tutorial! I use Cordova to put exported hype documents in the App Store, but I’ll try this one too!


(Olof Pock) #3

Hi Nick,
thank you very much for this tutorial. It was very helpful.
One question, do you have an idea how to detect the landscape orientation when there is one in my hype layout?
Your example works fine, but in landscape orientation of the simulator the second landscape optimized layout of my hype project won’t come up and the first layout is not filling the whole space.
Do I have to go with two webViews in Xcode or what procedure is then necessary to get the second breakpoint of my hype file?


Hype for science "ebooks"
(Nick ) #4

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:


#5

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


Autoplaying audio in a Webview (iOS)
#6

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.


Autoplaying audio in a Webview (iOS)
(Nick ) #7

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.


(Freelancer) #8

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

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


(Nick ) #9

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.


#10

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


(Emma) #11

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!


(moshe_caine) #12

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


(Mark Hunte) #13

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.


(moshe_caine) #14

Many thanks. I’ll try it.


#15

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.


(Mark Hunte) #16

@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


#17

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:


(Mark Hunte) #18

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.


#19

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!


(Nick ) #20

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