Working with HTML,CSS and Jquery Or Javascript in WP7 - html

I am presently started working with mobile development and would like to know which is the best way to work with Html,css and jquery/Javascript for WP7.
As I have seen couple of things on the web as Phone Gap,Jquery mobile and Appcelerator Titanium
1.I have some of the problems actually this is not a problem but as PhoneGap gives a starter template with C# solution.
But I'm working on VB.Net.I'm unable to work with the C# solution as If I convert to VB.Net the entire starter template it is not working.
2.Just now I had a look at Jquery mobile there is no specific documentation mentioned how to use it with emulator in WP7.
Can anyone show me the links where I can start with the basics of Jquery mobile with WP7 emulator.
3.Do you think there is any other best way so that I Can work with jquery, html and css in WP7.

It sounds like PhoneGap is your best option here. Right now, it's the best way to deploy an HTML-based application on Windows Phone. The main thing that PhoneGap gives you is a bridge to the phone's hardware (things like volume buttons, vibration, etc.). It also gives you an easy way to wrap up your application into a package that can be installed like a real native app.
By themselves, other frameworks like jQuery Mobile, Sencha Touch and Kendo UI don't provide hardware access or the ability to deploy the app natively. They are purely UI frameworks, meaning they provide the interface widgets you'll use to build your app but little else. Generally, with these frameworks, you need to host the app somewhere like a website and access it through the browser.
Assuming you're running a Windows machine, you could host the app locally for development using Internet Information Services (IIS). Here's a guide to setting up a site. Then you could open the emulator and go to http://localhost to interact with your app. That would work, but it would be clunky.
The ideal scenario is to use both jQuery Mobile (or another UI framework) and PhoneGap to create a nice-looking, natively installable app.
What I'd recommend is trying to get PhoneGap set up in a VB project. From what I've seen, this shouldn't be too difficult. There are probably some details to work out, but mainly it looks like you need to copy the www and GapLib folders over. Then right click on References and browse to the GapLib .dll. You'll also need to get the MainPage.xaml and MainPage.vb files set up, but they probably just host a web browser control, so this should be straightforward.
Migrating the pieces into a new project should work a lot better than trying to convert an existing project.
If you post specific issues that you run into during the setup, I'm sure you could get them answered quickly.

Related

Xamarin: how to create views / UI of an app dynamically from a Json

Have you already developed a Xamarin app whose views are generated from a Json recovered when launching the application?
I met a client with this kind of need:
they are developing a web app to prototype the screens by adding and positioning some controls (TextBox, Label, ...)
this generates a Json that must be interpreted by the Xamarin app: this will build the different views dynamically
in a first version, the user's data would be stored locally (through a file or SQLite) and synchronized "manually" when the device is connected to a computer
the app will work on Android only in a first time, and then on WPF
The client has not yet decided between Xamarin.Forms or Xamarin native, but it's probably more interesting to do it through Xamarin.Forms, even if iOS is not required: this should make porting on WPF easier.
Have worked on similar cases? Have you some recommendations? Are there plugins or patterns that could be used to simplify this development?
I've found this one, but it doesn't seem to be the same use.
There is also this article on iOS, but there is not the same thing on Android.
This would in theory be possible using a massive code behind builder for a page but should NOT be done for a production app. Mobile apps have very specific requirements that need to be thought of before attempting.
Xamarin is great for simplifying code reuse, and if you use Xamarin Forms you can reuse the UI components for Enterprise apps.(the less fancy and pixel perfect the layouts need to be the better. )
Your client would be better served by making it a mobile compatible web page instead from the details you have shared.

Mobile Apps latest technologies research

I am currently on a research understanding the whole buzz around some technologies that claim that they deploy themselves as cross-platform apps once you write your code in HTML5/CSS3/AngularJS/Whatever client side techonology.
I understand those technologies provide you with a bridge to the native-side of the OS you are running on, but I still lack some real important information regarding them.
Do all those PhoneGap/Ionic/Cordova just wrap your client-side code into an application? Is it the same as using the web-browser to get to a URL but with only some native-like additions(Camera/File etc..).
Do those technologies just connect to your website that is online using DNS? Or is the "Website" you are building does not sit on a server but only on the local OS? Can they run that application offline?
Besides the native additions you get with those kind of technologies, why bother developing with them when you can on the other hand develop a responsive website that can also work on desktop?
Can you connect to a server-side using Ionic/Phonegap? Let's say I have an MS-SQL Table I want to communicate with- is that possible?
I really have a hard time understanding what all those technologies are any good. Still, it is growing in popularity. Thanks for any light on that matter.
Do all those PhoneGap/Ionic/Cordova just wrap your client-side code
into an application? Is it the same as using the web-browser to get to
a URL but with only some native-like additions(Camera/File etc..).
They wrap your html, css and javascript code and provide a javascript API to use native features
Do those technologies just connect to your website that is online
using DNS? Or is the "Website" you are building does not sit on a
server but only on the local OS? Can they run that application
offline?
You should have all the html, css and javascript inside of your app, if you do it this way the app will work offline.
You can have it online too, but it won't work offline and have some problems.
Besides the native additions you get with those kind of technologies,
why bother developing with them when you can on the other hand develop
a responsive website that can also work on desktop?
If you don't need any of the native features phonegap provides, then do a responsive website, the idea of phonegap is fill the gap between the browser and the native apps, some day the browser will have access to all the native features and phonegap will die.
BTW, now phonegap have a desktop platform, so you can make it work as native app for phone and still work in the browser
Can you connect to a server-side using Ionic/Phonegap? Let's say I
have an MS-SQL Table I want to communicate with- is that possible?
Sure, you can make XHR calls to the server to get a XML, JSON, etc with the onlyne SQL database, you can do a POST too, and upload files.

Confusion regarding PhoneGap/Cordova

I have a webapp developed (game), based on HTML5 + CreateJS, but since Android lacks of standards, I've run into unsolvable issues for my webapp. That's why im recurring to PhoneGap.
Yet my confusion lies in the fact that I need to make this game into a phonegap app that runs on Android/iOS, using for each platform native specific stuff.
So, should I build 2 apps (one for each platform), all over again, or use the one I have and try to deploy it into different devices using phonegap?
The truth is I don't know how to approach this problem... can anyone help?
Best Regards.
Yes, you can use Cordova (PhoneGap) to create a cross platform mobile app. Basically, Cordova (PhoneGap is Adobe's version of Cordova) is an open source project that provides JavaScript API's for accessing native device functionality (like the Accelerometer or Camera.) Cordova also lets you package your app in the native application shell, so you put your app on the app store. Please see my other answer here about Cordova and hybrid apps: Beginning with Apache Cordova
If the game runs completely in HTML5, I think it would be easiest to just use that one codebase and integrate it with Cordova and then deploy to the various platforms - why rewrite the app twice if you don't need to?
However, if you are using native device functionality, you may need to develop your own Cordova/Phonegap plugins for use. This way, you can call regular Android/iOS code (Java or Objective-C code) that you write from your web app code with JavaScript. This might be more work, especially if you have never written in these languages.
Personally, since you already have a working HTML5 app, I'd just try to get it working with Cordova and see how it performs. If you really need some native specific stuff, then I'd try creating that "stuff" as a plugin. Rebuilding the app twice, once for Android and once for iOS seems like a pretty big waste of time to me.
The answer here is either yes or no.
Yes if you want to use some specific feature of the native code. For instance, iOS's default objects is beautiful itself, you can easily drag and drop it to build your application. However, it takes lots of time to rebuild for another platform. Specially, if you intend to create app/game for multiple platforms, it would be a nightmare.
HTML5 is much faster for you to approach several platforms. However, you can't get the best result on all platforms and all devices. I mean, it is really difficult to bring the max performance of the app on all devices. For this solution, I suggest HTML5 with some libraries such as LimeJS, Crafty, Impact, etc. or some tools such as Construct 2, etc. I used to use HTML5 with all those libraries but found out that Construct 2 is much better.
Instead of using phonegap, I recommend cocoonjs. Specially if your targets are iOS and Android platforms.
Hope that help.
Yeah, even the simplest game such as bubble buster would be difficult to make cross platform with different version of android webview and you need cross platform? I would suggest looking into something like Unity3D.

MVC4 mobile Web app into app store

I have developed an web app using MVC4- mobile and HTML5. Every things is working fine when we enter URL from any phone. But i am wondering how to convert my web app into hybrid app so that i could upload in istore or GooglePlay.
Please help me with the procedure or steps i need to follow and is there any tool other than phoneGap that i could use.
Thanks in advance.
There are few options but I will mention only two of them.
Most commonly used is a Phonegap/Cordova app wrapper framework (Also my main choice). Cordova is a new name for a Phonegap framework. It will give you an access to common mobile phone functionalities (Android, iPhone, Blackberry and WP7+). It is rather easy to use and there are a lot of vorking tutorials available, you can even find them in youtube.
Here's an phonegap link: http://cordova.apache.org/. There you will find tutorials how to install/configure it on all available platforms. This is a older link: enter link description here, it still has usable informations.
If in doubt always search for phonegap examples instead of cordova. For some reason Phonegap is still a mostly used name.
Here's an Phonegap + jQuery Mobile example: http://therockncoder.blogspot.com/2012/07/jquery-mobile-phonegap-and-camera.html, there you will find a github link for Android and iOS implementation.
Through the PhoneGap javascript APIs, the "web app" has access to the mobile phone functions such as Geolocation, Accelerometer Camera, Contacts, Database, File system, etc. Basically any function that the mobile phone SDK provides can be "bridged" to the javascript world. On the other hand, a normal web app that runs on the mobile web browser does not have access to most of these functions (security being the primary reason). Therefore, a PhoneGap app is more of a mobile app than a web app. You can certainly use PhoneGap to wrap a web app that does not use any PhoneGap APIs at all, but that is not what PhoneGap was created for.
Now some disadvantages. With PhoneGap for each platform you have to maintain a different project. The burden for that increases when there is a need to use multiple PhoneGap plugins because you need to search and update different files on each platform.
Mosync is also an excellent solution. This framework has a few things better handled then Phonegap. Like:
With MoSync you’ll have only one project to maintain for all the platforms. For iOS you will still need to use Xcode because MoSync outputs a project for it but, other than just building it, there is no need to dig deeper in Apple’s IDE.
The entire provided functionality for JavaScript is placed in the same file for all of the operating systems. There are no files for plugins because it has none (at least that I know of), but the same extensibility is achieved in ways described in the next section.
If there is some functionality that MoSync doesn’t provide on the JavaScript side, there are no plugins that you can use, but there is another way. MoSync provides a lot of features from the C++ side and if they aren’t accessible from JavaScript by default they can be easily made available. I’m sure that in the future the MoSync team will add more features to the JavaScript library.
With MoSync you are not restricted to only JavaScript frameworks to replicate native UI, you can truly create native UI elements that are more responsive using only JavaScript.
Rhomobile on the other hand is much less used thus a lot less supported.
I heard few good things about this framework but never had time to learn/use it.
RhoMobile applications are OS-agnostic, able to support enterprise-
and consumer-class operating systems including Windows® Embedded
Handheld, Windows® CE, Windows® Phone 7 Series, Apple® iOS, Android®
and BlackBerry®. You have complete control over how applications
behave on different devices. With RhoMobile Suite, you are finally
free from OS design constraints, able to create business applications
that are every bit as elegant looking and intuitive as their consumer
counterparts (This was copied from their main site).

How to share (e.g "open source") my PhoneGap based application?

I have a PhoneGap based application, written in html upon the Sencha Touch platform, and directed at for iPhone and Android devices.
I want to share my projects, and make it open source.
The thing is, I am using many different components in my application, which are already an open source project by themselves (Sencha Touch via the GPLv3 license, PhoneGap, various Phonegap plugins). I don't want to re-package these resources because I want to be able to easily update these components in my application, when they update.
One way to do it would be to include only my original code (html) and have instructions (Text file) that explains which version of which framework (PhoneGap, Sencah Touch, Plugins) to use with the code. That would be painful for anybody wanting to run the application.
Any ideas on how to share in a friendlier manner?
I'd recommend open sourcing the full working app (if the licensing allows.) That way, other adopters and contributors are much more likely to start with something that works.
They then have the option to update the components if they like. You could provide instructions about how to do that.
For you, it shouldn't be extra work to update the components. There are just more files to include when you push to the open source repository.
Here is a PhoneGap, jQuery Mobile, Android project I open sourced recently.