SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS

Transcription

1 SEEM4570 System Design and Implementation Lecture 1 Cordova + HTML + CSS

2 Apache Cordova Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript E.g. you write ios apps using Objective-C, Android apps using XML+Java and Windows apps using C#. With Cordova, you use HTML+CSS+JS to write apps for all platforms! It is an open source software Gabriel Fung 2

3 History of Cordova In 2009, Nitobi Software produced PhoneGap In 2011, Adobe purchased Nitobi. In the same year, the code was contributed to an Apache project called Apache Callback, then rename as Apache DeviceReady, and finally rename as Apache Cordova. One of the major differences between PhoneGap and Cordova is the way to generate an App Gabriel Fung 3

4 Native Apps, Web Apps, Hybrid Apps Apps written by Cordova are hybrid apps. There are three kinds of apps: native apps, web apps and hybrid apps. Native apps: They are apps developed for one particular device (e.g. Android) and is installed directly onto the device itself. Users of native apps usually download them via app stores. You may run the apps without Internet connection (e.g. the Camera app). Web apps: They are essentially web sites but look and feel like native apps. They are typically built using HTML5, CSS and JavaScript. They require a browser and Internet connectivity to run (i.e. you must online). You do not need to install anything (e.g. app.ft.com) 2017 Gabriel Fung 4

5 Native Apps, Web Apps, Hybrid Apps (cont d) Hybrid apps: They are partly native apps, partly web apps. Like native apps, they live in an app store and can take advantage of the many device features available (e.g. local storage, phone books, camera, geolocation, ). Like web apps, they rely on HTML5+CSS+JS for layout rendering Gabriel Fung 5

6 Framework based on Cordova Many frameworks based on Cordova: PhoneGap Ionic Onsen UI Framework Gabriel Fung 6

7 Other Frameworks Some other popular frameworks: Appcelerator Pros: Create native app using JavaScript. Quite well organized APIs. Cons: Very long compile time. Not as intuitive as it claims (from my experience). Cocos2d-x Pros: Free. Support C++, Lua or JavaScript. Excellent for 2D game programming. Cons: Not well organized APIs. Steep learning curve. Unity Pros: Excellent for game programming (including 3D games). Very well organized APIs. Cons: Support C# (I am sure most of you don t know C#), UnityScript (a variation of JavaScript) or Boo. Steep learning curve Gabriel Fung 7

8 Frameworks I have used My major app development experience: App1: a photo exhibition app (Cordova) App2: a 2D game just for fun (Appcelerator) App3: a psychology related app (Cordova) App4: a 2D game for learning Germany (Cordova) App5: an app for KEF roadshow (Native Android) App6: an air quality survey app (Cordova) App7: Revamp App4 (Cocos2d-x) App8: An ITF project (Ionic) App9: Revamp App3 (Ionic) 2017 Gabriel Fung 8

9 Cordova Installation Please refer to tutorial 1. Note: you need to install a number of tools to write apps, such as Corodva, Android SDK (for deploying to Android), Xcode (for deploying to ios), Depends on your network speed and your computer processing power, you may need to spend 10+ hours to download an install all tools Gabriel Fung 9

10 HTML HTML stands for Hypertext Markup Language It describe the structure of a document By denoting certain text as links, headings, paragraphs, etc. Markup Language is different from Programming Language Programming Language (e.g. C) tells the computer what to do. printf("some information"); Markup Language (e.g. HTML) tells the computer what is the meaning of a piece of data by using tag <p>some information</p> 2017 Gabriel Fung 10

11 HTML5 To write apps using Cordova, we use HTML5. There are thousands of books, websites, YouTubes, etc. talking about how to write HTML5 We will not discuss every single element in detail in this course We will focus on the concept of writing a HTML document especially for Apache Cordova 2017 Gabriel Fung 11

12 HTML Basic <!DOCTYPE html>declare a HTML 5 Document <html> Document begin <head></head> Header information, such as encoding <body></body> Information to display to the user </html> Document end An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>content Here</tagname> A tag can has attribute: <tagname attribute= xx >Content Here</tagname> 2017 Gabriel Fung 12

13 HTML Basic (cont d) Although tags and attributes are case insensitive, always use lower case only for convention. Although <body>, <BODY> and <Body> are all valid, use <body> only. Always quote attribute values Write: <a href= XXXX">XXXX</a> Do not write: <a href=xxxx>xxxx</a> 2017 Gabriel Fung 13

14 HTML Basic (cont d) HTML treats next line character as space character. The output of them are the same: <body> This is the first sentence. This is the second sentence. </body> <body> This is the first sentence. This is the second sentence. </body> 2017 Gabriel Fung 14

15 HTML Basic (cont d) Like all programming languages, you can have comment in your work. For HTML, the comment tags like this: <!-- Write your comments here --> 2017 Gabriel Fung 15

16 Empty Element HTML elements with no content are called empty elements. E.g. <br> is an empty element (<br> means line break). Empty elements can be "closed" in the opening tag like this: <br />. Closing or not is not mandatary in HTML5. <body> This is the first sentence.<br /> This is the second sentence.<br /> </body> <body> This is the first sentence.<br> This is the second sentence.<br> </body> 2017 Gabriel Fung 16

17 HTML CSS Styles Setting the style of an HTML element, can be done with CSS and the style attribute. CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed. CSS can be added to HTML elements in 3 ways: inline, internal, and external. We will first discuss inline which is easier to understand and easier for you to try, then discuss other two ways. To use CSS inline: <tagname style="property:value;"> The property is a CSS property. The value is a CSS value Gabriel Fung 17

18 HTML Color Style The background-color property defines the background color for an element. <body style="background-color:#4b53a4;"> #4B53A4 is the color code. You can refer to for the color code. You may use rgba as well, such as: - <body style="background-color:rgba(255, 255, 0, 0.5);"> where the last component is the opacity (0 1). The color property defines the text color for an element: <body style="background-color:#4b53a4; color:#641e18"> 2017 Gabriel Fung 18

19 HTML Text Style The font-family property defines the font face: <body style="font-family:verdana;"> The font-size property defines the text size: <body style="font-size:50px;"> I recommend using px for the dimension. The text-align property defines the horizontal text alignment: <body style= text-align:center;"> There are many other properties to style the fonts, such as font-weight, text-decoration, etc Gabriel Fung 19

20 Internal CSS To use internal style sheet, add <style> element in <head>. It changes all elements with the same name in the whole page. <head> <style> body { background-color: #aaaaaa; color: #444444; } </style> </head> 2017 Gabriel Fung 20

21 External CSS To use an external style sheet, add a link in <head>. An external style sheet define the style for many pages. With an external style sheet, you can change the look of an entire app, by changing one file: <head> <link rel="stylesheet" href="styles.css"> </head> And here is style.css: body{ background-color: #aaaaaa; color: #444444; } 2017 Gabriel Fung 21

22 Some Useful Elements Link <a> <a href=" Image <img> <img src=" Span <span> Usually is to define the style of a piece of text. <body>this is a <span style= color:red >red</span> word.</body> 2017 Gabriel Fung 22

23 Some Useful Elements (cont d) Table <table> Define a table. A table is divided into rows (<tr> table row), and each row is divided into cells (<td> table data). <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> You will learn more about <table> in the tutorial Gabriel Fung 23

24 Some Useful Elements (cont d) Layer<div> Define a new layer. It is useful especially you want to layer elements. <body> <div style= position:absolute; top:0px; left:0px; width:90px; height:90px; background-color:# ></div> <div style= position:absolute; top:20px; left:20px; width:90px; height:90px; background-color:# ></div> <div style= position:absolute; top:40px; left:40px; width:90px; height:90px; background-color:#aaaaaa ></div> </body> 2017 Gabriel Fung 24

25 Some Useful Styles Let s use <div style=... >DEMO</div> as example: Width and height: width:200px; height:200px Border: border:solid; width:200px; height:200px; border:solid dotted dashed double; width:200px; height:200px Margin: margin:10px; border:solid; margin:10px 20px 30px 40px; border:solid; Padding padding:10px; border:solid; padding:10px 20px 30px 40px; border:solid; 2017 Gabriel Fung 25

26 Some Useful Styles (cont d) Display: You can use it to show or hide an element, as well as change its default display style. <div style= display:none; border:solid >DEMO</div> <div style= display:block; border:solid >DEMO</div> <div style= display:inline; border:solid >DEMO</div> You will learn many more styles in the tutorials Gabriel Fung 26