Whether you are a beginner in the World of the Internet or a beginner who has never touched the Internet before, this article will give you a complete guide to developing HTML 5 on the Ubuntu platform. We’ll walk you through this exercise to get you comfortable with the entire HTML 5 application development process. In this exercise, we will design the simplest RSS reader possible. When our app design is complete, it will look like this:
\
If you are a hard-nosed HTM 5 hacker, you can choose whatever tools and toolkits you like to develop your HTML 5 applications. They will work well on Ubuntu phones. We will only focus on the tools and toolkits provided by the Ubuntu SDK. More information on HTML 5 development can be found on Ubuntu’s official website or in Chinese.
\
If you have not already installed your own Ubuntu SDK, please refer to the article “Ubuntu SDK Installation” to install your own SDK.
\
Note: see the article “How to Turn on Developer Mode in Ubuntu Phones” in the emulator to turn on Developer mode so you can deploy your application to the emulator. \
\
1) Create a new project
\
In this step, we will use the Ubuntu SDK to produce a project:
\
\
\
\
\
\
Follow the steps above to create a new project “HTML5-RssReader”. Let’s start by running the application on our Desktop (using the hotkey Ctrl + R) :
\
\
\
As you can see, it’s a very simple HTML 5 application. We can click the app button to open the link shown above in the browser.
\
\
2) How to debug our application
\
We know that debugging applications is very important. How do we debug our HTML 5 applications? The process of development is to develop our direct application on our own computer, and then package it and deploy it on our own phone or emulator. When we run our own HTML 5 application in the SDK, we can see:
\
\
\
In the Application Output window, we see an address:
\
http://192.168.1.106:9221
\
This is the address we use for debugging. We copy this address to our Chrome or Chromium address bar and go to:
\
When we debug, we can only run an instance of the application; otherwise, we will not see any output.
\
3) Remove unwanted code from the default project
\
\
In this section, we will remove some of the code that is not needed in the project.
\
In the WWW/directory of the project, you can see the following:
- The HTML file
- Images (in WWW /img directory)
- Javascript file (in WWW /js directory)
- CSS file (in WWW/CSS directory)
First let’s make a change to index.html:
\
1) First, let’s look at the following code:
\
<div data-role="content">
Copy the code\
2) As you can see, there is a <div> there. It defines a TAB called hello-Page. <div> contains the most direct HTML component. We delete all contained in
\
<div data-role="content">
Copy the code\
The contents of it. So the entire body content is:
\
<body>
<div data-role="mainview">
<header data-role="header">
<ul data-role="tabs">
<li data-role="tabitem" data-page="hello-page">Hello World</li>
</ul>
</header>
<div data-role="content">
</div>
</div>
<script src="js/app.js"></script>
</body>
Copy the codeRerun our application and we can see:
\
\
We can see that nothing is displayed in the application. And that’s not surprising, because we didn’t put anything in there. We also need to change the app title next.
\
\
4) Remove unnecessary code
\
In the previous section, we made major changes to index.html. In this section, we will make changes to the CSS and javascript files.
\
1) We delete everything in CSS /app.css. The content here is for the HelloWorld template. We don’t need them
\
2) In the js/app.js file, we delete the following code:
\
function addClass(elem, className) {
elem.className += ' ' + className;
};
function removeClass(elem, className) {
elem.className = elem.className.replace(className, '');
};
Copy the codeAlso, we delete lines from the following:
\
// Detect if Cordova script is uncommented or not and show the appropriate status.
Copy the codeTo the beginning of the last line:
\
};
Copy the codeAfter we have completed all the operations, the final js/app.js file will look like this:
\
/**
* Wait before the DOM has been loaded before initializing the
Ubuntu UI layer
*/
window.onload = function () {
var UI = new UbuntuUI();
UI.init();
};
Copy the codeUbuntuUI is a key architecture class for Ubuntu HTML 5 applications. We need to construct it and initialize it to produce the Ubuntu HTML 5 applications we need. We can use this object to locate Ubuntu HTML 5 objects (corresponding to Ubuntu DOM elements) and methods. So far, this is one of our most basic and minimal HTML 5 applications although there is nothing there. Running our application, we can see:
\
\
\
All the source code can be found at github.com/liu-xiao-gu…
\
\
5) Design our own apps
\
In this chapter, we will focus on designing our own application, so we will delete all references to HelloWorld.
\
\
1) Put the following lines
\
<title>An Ubuntu HTML5 application</title>
<meta name="description" content="An Ubuntu HTML5 application">
Copy the code\
To:
\
<title>RSS Mobile Reader</title>
<meta name="description" content="RSS Mobile Reader">
Copy the code2) Delete the following code:
\
<ul data-role="tabs">
<li data-role="tabitem" data-page="hello-page">Hello World</li>
</ul>
Copy the codeInstead, we’ll use Pagestack. We can refer to the website for more information about the two layouts of the application. \
We are in the following row
\
<div data-role="content">
Copy the code\
Add the following code below:
\
<div data-role="pagestack">
<div data-role="page" id="main" data-title="RSS Mobile Reader">
</div>
</div>
Copy the code\
\
3) In the js/app.js file, we added the following line of code after UbuntuUI initialization:
\
UI.pagestack.push("main");
Copy the codeHere, “Pagestack” manages all pages as a stack. Initially, there are no pages, and the push() method usually pushes the first page onto the stack and displays it when the application starts.
\
If we run our application now, we can see something like this. We can see that the page title of our app has changed. Notice also that at the bottom of the page, we see the word “back”. This is the difference from the above display.
\
6) Put our content in the app
\
In this section, we will put the content we want to display into our application. Let’s review our display design at the beginning of this article. On the first page, it’s actually a list display. It displays a list of the RSS feeds we need to display. On the next second page, we display a list of all the entries contained in the selected RSS feed. The last page shows the details of each entry.
\
Now let’s start adding our previously defined “main” page to index.html:
\
1) Add the following line to the javascript insert list in index.html:
\
<script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/list. Js." "></script>
Copy the codeThis is necessary for us to use lists. On the “main” page, we also included a list called “yourfeeds.”
\
<section data-role="list" id="yourfeeds"></section>
Copy the code2) After completing our code above, our next major code will be in the js/app.js file. We can use external libraries to help us do our job. In the js/app.js file, after pushing the “main” page, the following line appears:
\
UI.pagestack.push("main");
Copy the code\
Add the following code:
\
if (typeof localStorage["feeds"] == "undefined") {
restoreDefault();
}
//load local storage feeds
var feeds = eval(localStorage["feeds"]);
if (feeds !== null) {
var feeds_list = UI.list('#yourfeeds');
feeds_list.removeAllItems();
feeds_list.setHeader('My feeds');
for (var i = 0; i < feeds.length; i++) {
feeds_list.append(feeds[i],
null,
null,
function (target, thisfeed) { loadFeed(thisfeed); },
feeds[i]);
}
}
Copy the codeWe use localStorage to store the feeds we need. If it is not defined at first, it is “underdefined”, and we call restoreDefault() (implemented in the following section) to initialize the feeds we need. If you already have the desired feeds in localStorage, clear the “yourFeeds” list and set the header of the list to “My Feeds”. Each time an item in the list is clicked, we call loadFeed() (implemented in the code below) to download the feed.
\
\
3) Add the following code to the end of the js/app.js file:
\
function restoreDefault() { localStorage.clear(); var feeds = []; feeds.push("http://daker.me/feed.xml"); feeds.push("http://www.omgubuntu.co.uk/feed"); feeds.push("http://hespress.com/feed/index.rss"); feeds.push("http://rss.slashdot.org/Slashdot/slashdot"); feeds.push("http://www.reddit.com/.rss"); feeds.push("http://www.guokr.com/rss/"); try { localStorage.setItem("feeds", JSON.stringify(feeds)); window.location.reload(); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { console.log("Error: Local Storage limit exceeds."); } else { console.log("Error: Saving to local storage."); }}}Copy the codeHere, we define the restoreDefault() function. It first cleans up localStorage’s data and adds a JSON-formatted RSS feed to localStorage. Some exceptions are also added to the code.
\
I ran our app again, and when we clicked on each item in our list, nothing happened. This is because we didn’t implement the loadFeed function at all.
\
\
\
The original code so far can be downloaded at the following address:
\
Github.com/liu-xiao-gu… \
\
7) Download content from the Internet
\
So far, our code isn’t complicated. There are a lot of things on the Internet that we can learn and make use of. In fact, you can borrow from the Internet and use any library you want to get the job done. In today’s exercise, we’ll use jquery to do some of our work.
\
1) Open a terminal, go to js/app.js, and type the following command in it:
\
cp /usr/share/javascript/jquery/jquery.min.js .
Copy the code\
Here, jquery from Desktop is checked into our application and become part of the application.
\
2) Download jFeed RSS Feed Parser
\
We need an RSS parser. Although Google has its own API, it is not available in China for some reason. Enter the following command in Terminal:
\
git clone https://github.com/jfhovinne/jFeed.git
Copy the codeAfter downloading all the source code, we went to jFeed/build/dist and copied the file “jquery.jfeed.pack.js” to our js/app.js directory.
\
\
3) In the index. HTML file, add the following statement to <head> :
\
<! -- External javascript imports -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jfeed.pack.js"></script>
Copy the codeUnder the “main” page, add another “Results” page:
\
<div data-role="content">
<div data-role="pagestack">
<div data-role="page" id="main" data-title="RSS Mobile Reader">
<section data-role="list" id="yourfeeds"></section>
</div>
<div data-role="page" id="results" data-title="Articles >">
<section data-role="list" id="resultscontent"></section>
</div>
</div>
<div data-role="dialog" id="loading"><section><progress></progress></section></div>
</div>
Copy the codeHere, we also added a waiting “loading” dialog. Loading is displayed when data is being downloaded.
\
4) Now, let’s go a step further and make some changes in the js/app.js file. We first turned UbuntuUI into a global variable, with the following code:
\
window.onload = function () {
var UI = new UbuntuUI();
Copy the codeTo:
\
var UI = new UbuntuUI();
$(document).ready(function () {
Copy the codeWe also need to put}; at the end of the function. Modified to}); . So the entire code is:
\
$(document).ready(function () { UI.init(); UI.pagestack.push("main"); if (typeof localStorage["feeds"] == "undefined") { restoreDefault(); } //load local storage feeds var feeds = eval(localStorage["feeds"]); if (feeds ! == null) { var feeds_list = UI.list('#yourfeeds'); feeds_list.removeAllItems(); feeds_list.setHeader('My feeds'); for (var i = 0; i < feeds.length; i++) { feeds_list.append(feeds[i], null, null, function (target, thisfeed) { loadFeed(thisfeed); }, feeds[i]); }}});Copy the code\
5) Now let’s finish implementing the loadFeed method. At the end of js/app.js, we add the following code:
\
function loadFeed(url) { UI.pagestack.push("results"); UI.dialog("loading").show() console.log("url is: " + url ); $.getFeed( { url: url, success: function(feed) { UI.dialog("loading").hide(); var results_list = UI.list('#resultscontent'); results_list.removeAllItems(); results_list.setHeader(feed.title); console.log("title: " + feed.title); // walk through the feeds for( var i = 0; i < feed.items.length; i++ ) { var item = feed.items[ i ]; // console.log("title: " + item.title); // console.log("link: " + item.link); // console.log("content: " + item.description); results_list.append( item.title.replace(/"/g, "'"), null, null, function (target, result_infos) { showArticle.apply(null, result_infos); }, [ escape(item.title), escape(item.link), escape(item.description) ] ); }}}); }Copy the codeRe-running our app, we can click on each of our RSS feeds and see a list of titles for each RSS feed:
\
\
All the source code can be found at the following address:
\
Github.com/liu-xiao-gu…
\
\
8) Display the actual article
\
If a careful developer takes a closer look at our code in the last section, you’ll notice that we mentioned “showArticle”, but we still haven’t implemented it. When we click on the title of the RSS feed, nothing is displayed. Its implementation is as follows:
\
1) In index.html, add the “article” page:
\
<div data-role="content">
<div data-role="pagestack">
<div data-role="page" id="main" data-title="RSS Mobile Reader">
<section data-role="list" id="yourfeeds"></section>
</div>
<div data-role="page" id="results" data-title="Articles >">
<section data-role="list" id="resultscontent"></section>
</div>
<div data-role="page" id="article" data-title="Article >">
<section id="articleinfo"></section>
</div>
</div>
<div data-role="dialog" id="loading"><section><progress></progress></section></div>
</div>
Copy the code2) Add the following method to the end of the js/app.js file:
\
function showArticle(title, url, desc) {
UI.pagestack.push("article");
if (typeof desc == "undefined")
desc = "(No description provided)";
$("#articleinfo").html("<p>" + unescape(title) + "</p><p>" + unescape(desc) + "</p><p><a target=\"_blank\" href=\"+" "unescape(url) + "\" >" + unescape(url) + "</a></p>");
}
Copy the code\
In this way, we can get the title of the article and its content. To display the content of the article, we display the title, content, and a URL of the article. To show the content and title of the article, we use “unescaped”.
\
Re-run our application and we should see the following screen:
\
\
The source code of the whole project is at:
\
Github.com/liu-xiao-gu…
\
9) Add RSS feeds
\
Now our RSS feeds are fixed, pre-set. What if a user needs to add a new RSS feed?
\
1) In the index. HTML file, add the following code in the javascript import field:
\
<script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/toolbars. Js." "></script>
Copy the code\
2) Add the following footer to the main page:
\
<div data-role="page" id="main" data-title="RSS Mobile Reader">
<section data-role="list" id="yourfeeds"></section>
<footer id="footer1" data-role="footer" class="revealed">
<nav>
<ul>
<li>
<a href="#" id="addfeed">
<img src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / / ambiance/img/actions/add SVG." " alt="Add feed" />
<span>Add feed</span>
</a>
</li>
</ul>
</nav>
</footer>
</div>
Copy the codeWe added a toolbar to the Footer to add an RSS feed.
\
3) We add a dialog to enter the details of the RSS feed we want:
\
Add a dialog box before or after the “Loading” dialog:
\
<div data-role="dialog" id="loading"><section><progress></progress></section></div>
<div data-role="dialog" id="addfeeddialog">
<section>
<h1>Add a new feed</h1>
<p>Type the url feed you want to add</p>
<input type="url" id="rssFeed" placeholder="http://">
<menu>
<button data-role="button" id="no">Cancel</button>
<button data-role="button" class="success" id="yes">Add</button>
</menu>
</section>
Copy the codeHere we define a dialog called “AddFeedDialog”. It lets the user enter the URL of an RSS feed.
\
\
4) In the following function:
\
$(document).ready(function () {
Copy the code\
On the last line, add the following code:
\
UI.button('yes').click(function (e) {
var url = $("#rssFeed").val();
if (url !== "") {
var feeds = eval(localStorage["feeds"]);
feeds.push(url);
localStorage.setItem("feeds", JSON.stringify(feeds));
window.location.reload();
}
});
UI.button('addfeed').click(function () {
$('#addfeeddialog').show();
});
Copy the codeRe-run our app and click the “Add Feed” button
\
\
Is it a snap to add an RSS feed? All source code at:
\
Github.com/liu-xiao-gu… \
\
\
10) Your challenge
\
Now the “Cancel” of the dialog box does not work. Could you help me complete its code?
\
\
11) Beautify our app
\
In this chapter, we will beautify our application by using CSS.
\
\
In the CSS /app.css file, we add the following code:
\
#articleinfo {
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#articleinfo iframe {
max-width: 100%;
}
#articleinfo p {
margin: 7px 0;
}
#articleinfo a{
text-decoration: none;
color: #787878;
font-weight: bold;
}
Copy the codeRe-run our application and we can see that Article looks even prettier. So far, all the source code can be found at the following address:
\
Github.com/liu-xiao-gu… \
\
We can also see the article “Creating a platform-independent Theme for HTML5 Applications” to create a platform-independent Theme.
\
If you have any questions, please feel free to ask them in the comments.
\
\
\
\
\
\
\