samurai-native enables you to build native apps using web technologies (HTML/CSS) based on its own Web-Core. Support iOS now, Android later.
Road map | 中文介绍 | QQ群 79054681
- Testcase: Web-Core compatibility test.
- UICatalog: UIKit components usage.
- Movie app: A demo app using
api.rottentomatoes.com - Dribbble app: A demo app using
api.dribbble.com
You can use the native components such as UICollectionView and UICollectionViewCell on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using <UICollectionView/> and <UICollectionViewCell/> directly.
<html> <body> <UICollectionView class="list" is-vertical> <UICollectionViewCell is-static is-row> ... </UICollectionViewCell> </UICollectionView> </body> </html>You can use the standard HTML tags such as div and img on iOS. This gives you ability to define your user interface using a hybrid way.
<html> <body> <UICollectionViewCell is-static is-row> <div class="profile-wrapper"> <div class="profile-attribution"> <div class="profile-segment no-wrap"> <div class="segment-wrapper"> <span class="segment-count">10,875</span> <span class="segment-suffix">Followers</span> </div> </div> <div class="profile-segment no-wrap"> <div class="segment-wrapper"> <span class="segment-count">199</span> <span class="segment-suffix">Followers</span> </div> </div> </div> </div> </UICollectionViewCell> </body> </html>We brought the css layout model from the web to samurai-native, css layout makes it simple to build the most common UI layouts, such as stacked and nested boxes with margin and padding. samurai-native also supports common web styles, such as font-weight and border-radius, and you can extend your style in SamuraiHtmlRenderStyle class.
<html> <head> <link rel="stylesheet" type="text/css" href="../css/normalize.css"/> <link rel="stylesheet" type="text/css" href="../css/main.css"/> </head> </html><html> <body> <p style="color: red;"> Hello, world! </p> </body> </html><html> <body> <div class="tab-bar"> <div class="tab">Popular</div> <div class="tab">Debuts</div> <div class="tab">Everyone</div> </div> <style> .tab-bar { display: block; width: 100%; height: 34px; background-color: #e5508c; /* box-shadow: 0px 0.5px 0.5px black; */ z-index: 2; } .tab { float: left; display: block; width: 33.33%; height: 34px; font-size: 14px; line-height: 34px; color: #fff 0.75; text-align: center; font-weight: normal; } ... </style> </body> </html>@implementation MyViewController - (void)viewDidLoad { [self loadTemplate:@"/www/html/dribbble-index.html"]; //[self loadTemplate:@"http://localhost:8000/html/dribbble-index.html"]; } - (void)dealloc { [self unloadTemplate]; } - (void)onTemplateLoading {} - (void)onTemplateLoaded {} - (void)onTemplateFailed {} - (void)onTemplateCancelled {} @endsamurai-native provide a high level event system called Signal, you can interact (gesture) with HTML page through signal system.
<div onclick="signal('hello')"> Click here </div> <div onswipe-left="signal('next')" onswipe-right="signal('prev')"> Swipe left or right </div>@implementation MyViewController handleSignal( hello ) { [self something]; } handleSignal( prev ) { [self something]; } handleSignal( next ) { [self something]; } @endsamurai-native provide a efficient way to binding native objects to HTML page in single way through DOM's name property.
<html> <body> ... <div name="author"> <img name="avatar"/> <div> <div name="title"/> <div>by <span name="name"/></div> </div> </div> ... </body> </html>@implementation MyViewController ... - (void)reloadData { self[@"author"] = @{ @"avatar" : "xxx.jpg", @"title" : @"Hello", @"name" : @"World" }; } @end samurai-native is designed to be easily extended with custom native components, that means you can reuse anything you've already built, and can import and use your favorite native components.
@implementation UILabel(Html) - (void)html_applyDom:(SamuraiHtmlDomNode *)dom { [super html_applyDom:dom]; self.text = [dom computeInnerText]; } - (void)html_applyStyle:(SamuraiHtmlRenderStyle *)style { [super html_applyStyle:style]; self.font = [style computeFont:self.font]; self.textColor = [style computeColor:self.textColor]; self.textAlignment = [style computeTextAlignment:self.textAlignment]; self.baselineAdjustment = [style computeBaselineAdjustment:self.baselineAdjustment]; self.lineBreakMode = [style computeLineBreakMode:self.lineBreakMode]; self.numberOfLines = 0; ... } @endAdd lines below into your main() function, samurai-native will applies HTML/CSS changes to iPhoneSimulator without rebuild and run the app.
[[SamuraiWatcher sharedInstance] watch:@(__FILE__)];- clone
https://github.com/hackers-painters/samurai.git - open
samurai-examples/dribbble/demo.xcodeproj - build and run
samurai-native is licensed under the MIT License.
- Gavin.Kwoe: Major developer
- QFish: Major developer
- ZTDesign: Major designer
- gumbo: An HTML5 parsing library in pure C99
- katana: An CSS3 parsing library in pure C99
- fishhook: A library that enables dynamically rebinding symbols in Mach-O binaries running on iOS.
- AFNetworking: A delightful iOS and OS X networking framework