Mobile App Frameworks

HTML5 and CSS3 have made very significant in roads in the world of mobile web applications. If Google would have its way–everything would live in a browser pulling data from the cloud. For simpler applications, there is a very real option to utilize web frameworks geared for mobile devices.

Some of the better known Mobile App Frameworks include: Sencha Touch, Lungo, and M Project.

An interesting area is to have mobile web applications wrapped inside of native apps. This provides the best of all worlds–a packaged app that can live on multiple platforms that can leverage the many web frameworks out there. It is even possible to have some elements driven by native code and smaller windows into HTML5 content.

For Android, you can create a single webview in the manifest xml and load the url using a single activity.

Create a new project and modify res\layout:
[code lang=”xml”]

[/code]

Then edit the main activity and modify the onCreate method:
[code lang=”java”]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Remove Title Bar
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
// Set Content
setContentView(R.layout.activity_fullscreen);
// Setup Web View
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(“file:///android_asset/test.html”);
}
[/code]

Add html content to assets directory or launch full urls.

For iOS, the process can easily be done by creating a full screen webview in storyboard.

Create a webView Controller:
[code lang=”objective-c”]
@interface webViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIWebView *customWebView;
@end

@implementation webViewController
@synthesize customWebView = _customWebView;
– (void)viewDidLoad
{
[super viewDidLoad];
// Load URLs
[self loadURLs];
}

#pragma mark –
#pragma mark URL
-(void) loadURLs {
// Load URL
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@”test” ofType:@”html”]];
[_customWebView loadRequest:[NSURLRequest requestWithURL:url]];

// Set Delegate
_customWebView.delegate = self;
_customWebView.scalesPageToFit = YES;

// Turn ON Scrolling
if ([_customWebView respondsToSelector:@selector(scrollView)]) {
_customWebView.scrollView.scrollEnabled = YES;
} else {
for (id subview in _customWebView.subviews)
if ([[subview class] isSubclassOfClass: [UIScrollView class]])
((UIScrollView *)subview).scrollEnabled = YES;
}
}

-(void) loadLocalURL:(UIWebView *)webView url:(NSString *)url {
NSString *resourcePath = [[[[NSBundle mainBundle] resourcePath] stringByReplacingOccurrencesOfString:@”/” withString:@”//”] stringByReplacingOccurrencesOfString:@” ” withString:@”%20″];

[webView loadHTMLString:url baseURL:[NSURL URLWithString:[NSString stringWithFormat:@”file:/%@//”, resourcePath]]];
}
@end
[/code]

Many of the mobile app frameworks provide tools that essentially package up nice mobile UIs. With this in mind, it should be possible to make a web application live completely natively, loading only local assets and be served by the smart-phone’s webviews. A project could pull in likes of jQuery Mobile or Kendo UI in order to created unified web projects in a common javascript and html-based core and simply distribute to any platform as needed.

Comments are closed.

Search

Websites

  • slide
  • slide
  • slide
  • slide