ChocolateChip UI Framework Documentation

http://www.chocolatechip-ui.com/

CPSC- 473
Lightning Talks, Round 1
March 20, 2013
George Ishak

Agenda
• About
• Custom Builds
• Integration with Android
• Basic App Shell
• Tableviews
• UIButtons
• Paging Control
• Selection Lists
• Expander

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).

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

Integration with Android
Create Android Project

Copy the app folder to Android project assets
folder

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");

}

Basic App Shell
<!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>
Content will be here
</scrollpanel>
</subview>
</view>
</app>

</body>
</html>

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>
<navbar>
<h1>cpsc473</h1>
</navbar>
<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">
</tablecell>
</tableview>

</scrollpanel>
</subview>
</view>
</app>
</body>
</html>

UIButtons
ChocolateChip-UI provides a number of different types of uibuttons
Example:
<app>
<navbar>

<uibutton ui-implements="next" ui-bar-align="right">
<label>Next</label>
</uibutton>

<h1>cpsc473</h1>
</navbar>
<scrollpanel>

<uibutton ui-implements="back">
<label>Back</label>
</uibutton>


<uibutton ui-icon-align="right" ui-bar-align="right">
<icon style="background-image: url(icons/android.png);"></icon>
<label>Android</label>
</uibutton>


<uibutton ui-kind="action" >
<label>Save</label>
</uibutton>

</scrollpanel>
</subview>
</view>
</app>

Paging Control
ChocolateChip-UI offers the pager control as a way to provide horizontal swipe
navigation through a set of panels.
<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>

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>

<celltitle>Django</celltitle>
</tablecell>

<celltitle>Bottle</celltitle>
</tablecell>

</tableview>

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>
</tablecell>

<tablecell>
</tablecell>

<tablecell>
</tablecell>

</tableview>
</panel>
</expander>

ChocolateChip UI Framework Documentation

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a ChocolateChip UI Framework Documentation

Similar a ChocolateChip UI Framework Documentation (20)

Último

Último (20)

ChocolateChip UI Framework Documentation