Mobile-Web-App

Thursday, March 8, 2012

HTML/Javascript: Retrieve file info from input of file type

The example show how to implement file choose dialog, using input with type of file. Once the onchange event trigged, the event listener function fileSelected() will be called with parameter of file object. The code below show how to retrieve the info from the file object in fileSelected().

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML file</title>

<script>
function fileSelected(filelist){
 var fileinfo =
  "<p>File name: " + filelist.files[0].name + "</p>" +
  "<p>File size: " + filelist.files[0].size + "</p>" +
  "<p>File type: " + filelist.files[0].type + "</p>";  
  
  document.getElementById("result").innerHTML = fileinfo;
}
</script> 
 
</head>
<body>


<p>
<input id="fileinput" type="file" name="filechooser" size="10" accept="audio/*" onchange="fileSelected(this)"></input>
</p>
<p id="result"></p>

</body>
</html>

HTML file chooser with accept type

It's a example of HTML file choose with "accept", to accept audio files only.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML file chooser with filter</title>

</head>
<body>

<input type="file" name="filechooser" size="10" accept="audio/*"></input>

</body>
</html>

Next:
- HTML/Javascript: Retrieve file info from input of file type

HTML file chooser

To implement file chooser in HTML, using <input>, with type="file".

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML file</title>
</head>
<body>

<input type="file" name="filechooser" size="10"></input>

</body>
</html>

Next:
- HTML file chooser with accept type
- HTML/Javascript: input to load multiple file

jQuery UI: sortable list

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI sortable</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script type="text/javascript">
$(function() {
  $( "#sortable" ).sortable();
 });

</script>
</head>
<body onload="onloaded();">
<h1>Mobile-Web-App: jQuery UI sortable</h1>
 
<ol id="sortable">
 <li>Sunday</li>
 <li>Monday</li>
 <li>Tuesday</li>
 <li>Wednesday</li>
 <li>Thursday</li>
 <li>Friday</li>
 <li>Saturday</li>
 <li><img src="http://goo.gl/BlQEX"></img></li>
</ol>

</body>
</html>

Wednesday, March 7, 2012

jQuery Mobile: Up and Running

Would you like to build one mobile web application that works on iPad and Kindle Fire as well as iPhone and Android smartphones? This introductory guide to jQuery Mobile shows you how. Through a series of hands-on exercises, you’ll learn the best ways to use this framework’s many interface components to build customizable, multiplatform apps. You don’t need any programming skills or previous experience with jQuery to get started.

By the time you finish this book, you’ll know how to create responsive, Ajax-based interfaces that work on a variety of smartphones and tablets, using jQuery Mobile and semantic HTML5 code.

Understand how jQuery Mobile works with HTML5, CSS3, and JavaScript
Work with UI components to format content and create forms, lists, navbars, and buttons
Create dynamic content with JavaScript, Ajax, and the jQuery core framework
Customize your entire user interface with themes and CSS3
Enable users to install your app from the browser and work with it offline
Distribute through app stores by packaging your creation as a native app

About the Author

Maximiliano Firtman, @firt, is a developer focused on mobile and HTML5 development. He is a trainer in mobile technologies and founder of ITMaster Professional Training. He is the author of many books, including Programming the Mobile Web (O'Reilly). He has spoken at international conferences such as OSCON, Velocity, Breaking Development, GOTO Europe, Campus Party, QCon, and Adobe en Vivo.

He has been an Adobe Community Professional since 2011 and a Nokia Developer Champion since 2006, and he has developed many mobile-related projects, such as MobileHTML5.org, MobileTinyURL.com, and iWebInspector.com. He maintains a mobile web development blog at MobileXweb.com.

He is an expert in native and HTML5 web development, including iOS, Android, PhoneGap, and jQuery technologies.

Sencha Touch 2 - a high-performance HTML5 mobile application framework

HTML5 has become the most important advance in application development in the last decade. Sencha Touch 2, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch 2 is the only framework that enables developers to build fast and impressive apps that work on iOS, Android, BlackBerry, Kindle Fire, and more.

Web Site: http://www.sencha.com/

Sencha Touch 2 Launch from Sencha on Vimeo.

Sencha Touch 2, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch 2 is the only framework that enables developers to build fast and impressive app that work on iOS, Android, BlackBerry, Kindle Fire, and more.

Learn more at http://sencha.com/touch

Tuesday, March 6, 2012

jQuery Mobile 1.1.0 RC1 released

The first jQuery Mobile 1.1.0 RC1 released. This release has been a real labor of love, with hundreds of commits and tons of improvements, big and small, to make jQuery Mobile feel faster, smoother and more polished across the board.

Try it now! http://jquerymobile.com/demos/1.1.0-rc.1/