ChocolateChip-UI
Upcoming SlideShare
Loading in...5
×
 

ChocolateChip-UI

on

  • 1,709 views

Mobile Web App Development Framework

Mobile Web App Development Framework

Statistics

Views

Total Views
1,709
Views on SlideShare
1,694
Embed Views
15

Actions

Likes
1
Downloads
6
Comments
0

2 Embeds 15

http://localhost 13
http://192.168.1.254 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ChocolateChip-UI ChocolateChip-UI Presentation Transcript

  • http://www.chocolatechip-ui.com/ CPSC- 473Lightning 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 its really. small ChocolateChip—its tiny, but delicious.• Second ChocolateChip-UI( ChUI (pronounced Chewy))• jQuery and all the extra code that was for supporting browsers that He didnt 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 ProjectCopy the app folder to Android project assetsfolder
  • Integration with AndroidThe Android platform provides tools for developing web based applications. One ofthese tools is the WebViewwidget in the Android.webkit package. The WebViewwidget displays web pages and allows the user to interact with web content. Thisarticle describes the features of WebViewwidget.(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@Overrideprotected 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> <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>
  • UIButtonsChocolateChip-UI provides a number of different types of uibuttonsExample: <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>
  • Paging ControlChocolateChip-UI offers the pager control as a way to provide horizontal swipenavigation 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>
  • Selection ListsSelection lists provide a way for present users with a group of possible selectionsonly one of which can be selected at any given time. This is functionally equivalentto 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>
  • ExpanderChocolateChip provides the expander as a way to allow collapsing and expanding avertical 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>
  • THANK YOU