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?
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.
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.
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.
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.
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)
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.
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.
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 !
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.
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!