I have a HTML5 App and want to deploy it with Phonegap to iOS devices. The app is designed for smartphones. To make use of the iPad Screen I designed a new layout.
My idea:
Two seperate index.html files as the starting point for the app.
index.html for Smartphones
index-ipad.html for tablets
How can I make Xcode or Phonegap to load the appropriate html page when starting the app ?
Cheers
Johe
I would use one HTML file with CSS3 media queries doing the different layouts
I would start in Java. Depending on screen size it would call either the index.html or index-ipad.html. But if you're using Phonegap with proper CSS you should be able to use one index.html for both. Phonegap and CSS would do the work.
While I agree with user899641's suggestion that the device abstraction should be happening at the PG/CSS level, it's fairly trivial to modify the native PG library to do what you ask. In the case of iOS, PhoneGapDelegate.m contains a function called startPage which, as written, returns the static string index.html. You can modify this function to apply additional logic and return a different start page accordingly.
Related
Say I build a super mobile friendly web application that I want in the Play Store for Android users to be able to download.
Could I use Xamarin to:
Wrap the entire mobile app as a single WebView
Register for mobile push notifications
Essentially shortlining an MVP of an android app by using an existing web app? If so, is there any well-known process or documentation that demonstrates this?
Probably the best approach for you would be using Xamarin Forms with one or more pages containing only web views.
I don't love Xamarin Forms because usually for me Xamarin Android+iOS gives a better result in similar time, but your app would be so simple that doesn't make sense to do it with Xamarin Android.
Make sure that your web app will show only what makes sense to be shown in your app, otherwise you risk to see double header/footer, useless buttons... but if the website is yours adding a few parameters to change a bit the UI won't be a problem I guess.
Have a look at this example:
https://github.com/xamarin/xamarin-forms-samples/tree/master/WorkingWithWebview
Another approach is the use of Razor to build your pages in html directly inside your app, but if I understood well it's not what you need:
https://developer.xamarin.com/guides/cross-platform/advanced/razor_html_templates/
Although it is technically possible to do this as the previous answer has suggested. I would recommended firstly reviewing, the relevant stores guidelines on submissions. Apple for example will not allow a submission to their store of any application that simply mirrors the functionality of a website. I suspect Google's would likely be the same.
However that said, to answer your question, Xamarin.Forms would be appropriate for a simple application like the one you are suggesting. Or if you prefer to build to a specific OS, then in iOS with Xamarin you would use the Safari View Controller that was added in it's xcode 8.1 release. Android uses something similar as does windows.
EDIT:
You can use the Web View control in Xamarins Andorid native PCL project to encapsulate your mobile friendly website within an application here is the documentation:
Xamarin Android Developer link to Android Web View
As for push notifications, yes this is perfectly possible using Xamarin.Android. and varies on implementation depending on what you want to use as the back end to handle them, I.E. Azure's notification hub etc.
I have only written PC programs using C#, .NET, and WinForms, and am new to app development.
I have written a program that uses HTML files (as a type of "form"), that will then be passed to an app, which can then be used to read/record data. I.e.
On the PC, a user creates a HTML "form"
This is loaded onto a mobile device (phone or tablet)
The user can then open the app, and access each individual (or individual copies) a HTML form to read/record data.
This is then transferred back to the PC, and stored.
Now, I'm not too concerned with the transfer between the PC/device, or the storage of the data, or any of that at this point. What I am concerned about is the ability to open/view these HTML files within a single app.
As the program has already been written using .NET and WinForms, it needs to be converted to be used on a mobile device, and I have chosen Xamarin for this purpose. However I only have limited knowledge of this package, so I am not sure if I can achieve this within a single app (i.e. without having to pass it to a separate app to view the HTML files).
So: is there an environment in Xamarin that I can use to view HTML files within my app?
Xamarin.Forms has a WebView class that you can use to display HTML content, so viewing the content is rarely an issue.
Interacting with the HTML content can sometimes be a bit tricky because of the links not conforming to what the app expects. But you can often solve these issues using the WebView.Navigating event handler that will allow you to catch and change the navigation behavior.
Xamarin.Forms's WebView relies on the native UIWebView (iOS) and WebView (Android) and Xamarin.Forms allows you to override the native Renderers. Overriding the native renderer will give you access to the native WebView with full flexibility.
You also have the possibility to completely ignore Xamarin.Forms's WebView and write your own view using native views.
It would probably be smart to test your WinForms app on iOS using Safari and on Android using Chrome as they are using the same rendering engines that will be used in respectively UIWebView (iOS) and WebView (Android)
I have set up Cordova/phonegap to work in Xcode and written a simple app in HTML and CSS and tested it on the Simulator and it works. It's just a single view app. I am trying to figure out how to turn that into a multiple view app, so that there are several views/screens that link to each other.
Do I need to write several HTML documents and link them together in XCode, or is it written in one HTML document using JavaScript?
With PhoneGap, think of it as operating a tiny web server on your device. So, you build it out like you would any other web site - with links to other pages that sit in that folder/directory or even on other servers - and it will allow that navigation. So, once you get it set up and deployed via Xcode, all you need to do is modify the html/css/js.
i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.
How to make an ordinary joomla site into a compatible mobile template when viewed from mobile
A lot of the templating comes from working out what width of screen you're using (look for CSS Media queries), then it comes down to what mobiles (or screen widths) you want to support.
Try Mobile Joomla component (mobilejoomla.com)