2. Agenda
• About
• Custom Builds
• Integration with Android
• Basic App Shell
• Tableviews
• UIButtons
• Paging Control
• Selection Lists
• Expander
3. About
• Created by Robert Biggs.
• First He created the light weight ChocolateChip JavaScript library for
mobile Web app development.
• Sun had Java, Apple had Cocoa
• Chocolate is pure pleasure. And this framework is really a pleasure to work
with and it's really. small ChocolateChip—it's tiny, but delicious.
• Second ChocolateChip-UI( ChUI (pronounced 'Chewy'))
• jQuery and all the extra code that was for supporting browsers that He
didn't need to support because He was targeting modern mobile devices
with Webkit browsers
• ChocolateChip-UI consists of two core files: ChUI.css and ChUI.js
• He created his own markup language. It consists of basic tags and
attributes
• He reproduces those in HTML5, CSS3 and JavaScript. The result was WAML
(Web App Markup Language).
4. Custom Builds
• ChocolateChip-UI now includes a build script, build.py, that allows you to
create customized projects
• You can define a path, a project name, an OS to support, a JavaScript library
• Open the config.py file in the source folder to see what your configuration
options are
• Download link https://github.com/rbiggs/chocolatechip-ui
• Create first app >
1. edit Config.py
• 'path': 'c:/androidprojects/cpsc473/',
• 'name': 'cpsc473',
• 'os': 'android',
2. Run python build.py
5. Integration with Android
Create Android Project
Copy the app folder to Android project assets
folder
6. Integration with Android
The Android platform provides tools for developing web based applications. One of
these tools is the WebViewwidget in the Android.webkit package. The WebView
widget displays web pages and allows the user to interact with web content. This
article describes the features of WebView
widget.(http://developer.samsung.com/android/technical-docs/WebView-in-
Android)
activity_main.xml
<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
MainActivity.Java
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = wv.getSettings();
wv.loadUrl("file:///android_asset/index2.html");
}
8. Tableviews
• Tableview are the main artifice by which you output data in your app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,
user-scalable=no">
<title>cpsc473</title>
<link rel="stylesheet" href="chui/chui.android.css">
<script type="text/javascript" src="libs/jquery-1.8.3.js"></script>
<script type="text/javascript" src="chui/iscroll.js"></script>
<script type="text/javascript" src="chui/chui.android.js"></script>
<body>
<app>
<view id="main" ui-navigation-status="current">
<navbar>
<h1>cpsc473</h1>
</navbar>
<subview ui-associations="withNavBar">
<scrollpanel>
<tableview>
<tablecell href="#Assignment_1" ui-implements="detail-disclosure">
<img src="icon.png">
<celltitle>Assignment 1</celltitle>
</tablecell>
<tablecell href="#Assignment_2" ui-implements="detail-disclosure">
<img src="icon.png">
<celltitle>Assignment 2</celltitle>
</tablecell>
</tableview>
</scrollpanel>
</subview>
</view>
</app>
</body>
</html>
9. UIButtons
ChocolateChip-UI provides a number of different types of uibuttons
Example:
<app>
<view id="main" ui-navigation-status="current">
<navbar>
<!--UIButton Placement in Navbars and Toolbars -->
<uibutton ui-implements="next" ui-bar-align="right">
<label>Next</label>
</uibutton>
<h1>cpsc473</h1>
</navbar>
<subview ui-associations="withNavBar">
<scrollpanel>
<!-- Navigation UIButtons: Back-->
<uibutton ui-implements="back">
<label>Back</label>
</uibutton>
<!--UIButton with Icon and Label-->
<uibutton ui-icon-align="right" ui-bar-align="right">
<icon style="background-image: url(icons/android.png);"></icon>
<label>Android</label>
</uibutton>
<!-- Action UIButton-->
<uibutton ui-kind="action" >
<label>Save</label>
</uibutton>
</scrollpanel>
</subview>
</view>
</app>
10. Paging Control
ChocolateChip-UI offers the pager control as a way to provide horizontal swipe
navigation through a set of panels.
<subview ui-associations="withNavBar">
<scrollpanel>
<stack ui-implements="paging">
<panel>
<stack>
<panel>
<h4>Spring 2013 Syllabus</h4>
<p>Prerequisites: CPSC 332 - File Structures and Database
Systems.</p>
</panel>
<panel>
<h4>Instructor</h4>
<ul>
<li>Kenytt D. Avery, M.S.</li>
<li>Office: CS-542</li>
<li>Office Hours: Wednesday, 6-7pm, most
evenings after class, and by appointment</li>
</u>
</panel>
</stack>
</panel>
</stack>
</scrollpanel>
</subview>
11. Selection Lists
Selection lists provide a way for present users with a group of possible selections
only one of which can be selected at any given time. This is functionally equivalent
to the groups of radio buttons in forms found on many Web sites
<tableview ui-kind=grouped id="activityChoices" ui-
implements="selection-list">
<tableheader>
What is the best Python web app framework?
</tableheader>
<tablecell ui-value="0">
<celltitle>Google App Engine</celltitle>
</tablecell>
<tablecell ui-value="1">
<celltitle>Django</celltitle>
</tablecell>
<tablecell ui-value="2">
<celltitle>Bottle</celltitle>
</tablecell>
</tableview>
12. Expander
ChocolateChip provides the expander as a way to allow collapsing and expanding a
vertical section of an app.
<script>
$(function() {
var opts = {
status: "collapsed",
title: "Show",
altTitle: "Hide"
};
$("expander").UIExpander(opts);
});
</script>
Homework Assignments
<expander>
<panel>
<tableview ui-kind="grouped">
<tablecell>
<celltitle>Assignment 1</celltitle>
</tablecell>
<tablecell>
<celltitle>Assignment 2</celltitle>
</tablecell>
<tablecell>
<celltitle>Assignment 3</celltitle>
</tablecell>
</tableview>
</panel>
</expander>
