Skip to content

Commit e955c79

Browse files
sitefinitystevesitefinitysteve
committed
Update Demo, fixed some prop notification stuff
1 parent 612ad3f commit e955c79

File tree

9 files changed

+162
-94
lines changed

9 files changed

+162
-94
lines changed

‎checkbox.android.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Color } from "color";
33
import { isAndroid, device } from "platform";
44
import { Property, PropertyChangeData } from "ui/core/dependency-observable";
55
import { PropertyMetadata } from "ui/core/proxy";
6-
//import style = require("ui/styling/style");
6+
import style = require("ui/styling/style");
77

88
declare var android: any;
99

@@ -105,7 +105,7 @@ function onTextPropertyChanged(data: PropertyChangeData) {
105105
(<PropertyMetadata>CheckBox.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
106106

107107

108-
/*
108+
109109
export class CheckBoxStyler implements style.Styler {
110110
private static setColorProperty(view: any, newValue: any) {
111111
var cb = <android.widget.CheckBox>view._nativeView;
@@ -129,4 +129,4 @@ export class CheckBoxStyler implements style.Styler {
129129
}
130130
}
131131

132-
CheckBoxStyler.registerHandlers();*/
132+
CheckBoxStyler.registerHandlers();

‎checkbox.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ declare module "nativescript-checkbox" {
2020
*/
2121
android: any /* android.widget.CheckBox */;
2222

23+
/**
24+
* Gets the ios Label with the checkbox as a subview
25+
*/
26+
ios: any /* Label */;
27+
2328
/**
2429
* Gets or sets if a switch is checked or not.
2530
*/

‎checkbox.ios.ts

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import {Label} from "ui/label";
88
import {StackLayout} from "ui/layouts/stack-layout";
99
import {Style, properties as styleProps} from 'ui/styling';
1010

11-
declare var CGRectMake: any;
11+
declare var CGRectMake: any, CGPointMake: any;
12+
13+
export class CheckBox extends Label {
14+
public static checkedProperty = new Property("checked", "CheckBox", new PropertyMetadata(true));
1215

13-
export class CheckBox extends ContentView{
14-
private _initalizing: boolean = true;
1516
private _iosCheckbox: BEMCheckBox;
16-
private _iosLabel: UILabel;
1717
private _delegate: BEMCheckBoxDelegateImpl;
1818
private _checked: boolean;
1919
private _lineWidth: number;
@@ -29,43 +29,27 @@ export class CheckBox extends ContentView{
2929

3030
constructor() {
3131
super();
32-
32+
debugger;
3333
// just create with any width/height as XML view width/height is undefined at this point
3434
// we modify width/height later below in onLoaded
35-
this._iosCheckbox = <BEMCheckBox>BEMCheckBox.alloc().initWithFrame(CGRectMake(0, 0, 25, 25));
36-
this._iosLabel = UILabel.alloc().initWithFrame(CGRectMake(30,0, 300, 30));
35+
this._onCheckColor = "#ffffff";
36+
this._onFillColor = "#0075ff";
37+
this._onTintColor = "#0075ff";
38+
this._onAnimationType = 2;
39+
this._offAnimationType = 2;
40+
41+
this._iosCheckbox = <BEMCheckBox>BEMCheckBox.alloc().initWithFrame(CGRectMake(0, 0, 21, 21));
3742
this._delegate = BEMCheckBoxDelegateImpl.initWithOwner(new WeakRef(this));
3843
}
3944

40-
public static checkedProperty = new Property(
41-
"checked",
42-
"CheckBox",
43-
new PropertyMetadata(false)
44-
);
45-
46-
public static textProperty = new Property(
47-
"text",
48-
"CheckBox",
49-
new PropertyMetadata(false)
50-
);
51-
52-
get _nativeView(): any {
53-
return this._iosCheckbox;
54-
}
5545
get checked(): boolean {
5646
return this._getValue(CheckBox.checkedProperty);
5747
}
5848
set checked(value: boolean) {
5949
this._setValue(CheckBox.checkedProperty, value);
6050
}
6151

62-
get text(): string {
63-
return this._getValue(CheckBox.textProperty);
64-
}
65-
set text(value: string) {
66-
this._setValue(CheckBox.textProperty, value);
67-
}
68-
52+
/* NATIVE PROPERTIES */
6953
set checkedAnimated(value: boolean) {
7054
if (this._iosCheckbox)
7155
this._iosCheckbox.setOnAnimated(value, true);
@@ -144,22 +128,31 @@ export class CheckBox extends ContentView{
144128
else
145129
this._offAnimationType = value;
146130
}
147-
131+
148132
public reload(value: boolean) {
149133
this._iosCheckbox.reload();
150134
}
135+
/* END NATIVE PROPERTIES */
136+
151137

152138
public onLoaded() {
139+
super.onLoaded();
140+
153141
this._iosCheckbox.delegate = this._delegate;
154-
// Only here is where the view xml width/height is defined
155-
this._iosCheckbox.frame.size.width = this.width;
156-
this._iosCheckbox.frame.size.height = this.height;
157-
158-
this._iosLabel.text = this.text;
159-
this._iosCheckbox.addSubview(this._iosLabel);
142+
this._iosCheckbox.frame = CGRectMake(0,0,21,21);
143+
this.ios.addSubview(this._iosCheckbox);
144+
this.style.paddingLeft = 30;
145+
146+
//Allow label click to change the textbox
147+
/*
148+
this.addEventListener("tap", args =>{
149+
this.toggle();
150+
});
151+
*/
152+
this.ios.addSubview(this._iosCheckbox);
160153

161154
this._iosCheckbox.on = this.checked;
162-
155+
163156
if (typeof this._lineWidth !== 'undefined') {
164157
this.lineWidth = this._lineWidth;
165158
}
@@ -190,10 +183,14 @@ export class CheckBox extends ContentView{
190183
if (typeof this._offAnimationType !== 'undefined') {
191184
this.offAnimationType = this._offAnimationType;
192185
}
193-
194-
this._initalizing = false;
195186
}
196187

188+
public onUnloaded() {
189+
this._iosCheckbox.delegate = null;
190+
super.onUnloaded();
191+
}
192+
193+
197194
public toggle(){
198195
this.checked = !this.checked;
199196
}
@@ -214,29 +211,26 @@ export class CheckBox extends ContentView{
214211
return BEMAnimationType.Fade;
215212
}
216213
}
217-
}
218214

219-
function onCheckedPropertyChanged(data: PropertyChangeData) {
220-
if(!this._initalizing){
221-
if(this._ios){
222-
this._ios.on = data.newValue;
215+
public _onCheckedPropertyChanged(data: PropertyChangeData) {
216+
console.log("_onCheckedPropertyChanged");
217+
debugger;
218+
if(this._iosCheckbox){
219+
this._iosCheckbox.setOnAnimated(data.newValue, true);
223220
}
224-
}
221+
}
225222
}
226223

227-
// register the setNativeValue callbacks
228-
(<PropertyMetadata>CheckBox.checkedProperty.metadata).onSetNativeValue = onCheckedPropertyChanged;
229-
230-
231-
function onTextPropertyChanged(data: PropertyChangeData) {
232-
if(!this._initalizing){
233-
if(this._iosLabel)
234-
this._iosLabel.text = this.text;
235-
}
224+
function onCheckedPropertyChanged(data: PropertyChangeData) {
225+
console.log("onCheckedPropertyChanged");
226+
debugger;
227+
var checkbox = <CheckBox>data.object;
228+
checkbox._onCheckedPropertyChanged(data);
236229
}
237230

231+
238232
// register the setNativeValue callbacks
239-
(<PropertyMetadata>CheckBox.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
233+
(<PropertyMetadata>CheckBox.checkedProperty.metadata).onSetNativeValue = onCheckedPropertyChanged;
240234

241235

242236
class BEMCheckBoxDelegateImpl extends NSObject implements BEMCheckBoxDelegate {
@@ -247,15 +241,19 @@ class BEMCheckBoxDelegateImpl extends NSObject implements BEMCheckBoxDelegate {
247241
public static initWithOwner(owner: WeakRef<CheckBox>): BEMCheckBoxDelegateImpl {
248242
let delegate = <BEMCheckBoxDelegateImpl>BEMCheckBoxDelegateImpl.new();
249243
delegate._owner = owner;
250-
251244
return delegate;
252245
}
253246

254247
public animationDidStopForCheckBox(checkBox: BEMCheckBox): void {
255-
//TODO: Maybe trigger event
248+
//TODO: Maybe trigger event later?
256249
}
257250

258251
public didTapCheckBox(checkBox: BEMCheckBox): void {
259-
this._owner.get().checked = checkBox.on;
252+
debugger;
253+
console.log("delegate check");
254+
let owner = this._owner.get();
255+
if (owner) {
256+
owner._onPropertyChangedFromNative(CheckBox.checkedProperty, checkBox.on);
257+
}
260258
}
261259
}

‎demo/app/App_Resources/iOS/Info.plist

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@
2222
<string>1.0</string>
2323
<key>LSRequiresIPhoneOS</key>
2424
<true/>
25-
<key>UILaunchStoryboardName</key>
26-
<string>LaunchScreen</string>
2725
<key>UIRequiredDeviceCapabilities</key>
2826
<array>
2927
<string>armv7</string>

‎demo/app/app.css

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,33 @@
1-
.title {
2-
font-size: 16;
3-
horizontal-align: center;
4-
margin: 20;
1+
Page {
2+
background-color: #282e48;
3+
color: #FFF;
4+
5+
}
6+
7+
#wrapper{
8+
padding: 10;
9+
width: 100%;
10+
}
11+
12+
.title {
13+
font-size: 12;
14+
horizontal-align: left;
15+
color: #83889e;
16+
margin-bottom: 10;
517
}
618

719
Label {
820
vertical-align: center
921
}
1022

11-
button {
12-
horizontal-align: center;
23+
.button {
24+
vertical-align: center;
25+
horizontal-align: right;
26+
background-color: #5fbce6;
27+
color: #FFF;
28+
border-radius: 4;
29+
font-size: 10;
30+
margin:0 20;
1331
}
1432

1533
.message {
@@ -18,12 +36,27 @@ button {
1836
horizontal-align: center;
1937
}
2038

39+
CheckBox{
40+
vertical-align: center;
41+
}
42+
2143
ActionBar {
22-
background-color: #f44336;
44+
background-color: #363b58;
2345
color: #fff;
2446
}
2547

48+
.demosection{
49+
margin-bottom: 50;
50+
horizontal-align: left;
51+
}
52+
2653
.listitem{
27-
padding: 10;
54+
vertical-align: center;
2855
horizontal-align: left;
56+
margin-bottom: 10;
57+
width: 100%;
58+
}
59+
60+
.title{
61+
2962
}

‎demo/app/main-page.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ import { isAndroid, device } from "platform";
44
import { Color } from "color";
55
import { android } from "application";
66
import { HelloWorldModel } from './main-view-model';
7+
import { DataItem } from './main-view-model';
8+
import { CheckBox } from 'nativescript-checkbox';
9+
10+
let model: HelloWorldModel;
11+
let page: Page;
712

813
// Event handler for Page "loaded" event attached in main-page.xml
914
export function pageLoaded(args: EventData) {
1015
// Get the event sender
11-
var page = <Page>args.object;
12-
let model = new HelloWorldModel();
16+
page = <Page>args.object;
17+
model = new HelloWorldModel();
1318
page.bindingContext = model;
1419

1520
//Not related to checkboxes
@@ -18,3 +23,10 @@ export function pageLoaded(args: EventData) {
1823
window.setStatusBarColor(new Color("#d32f2f").android);
1924
}
2025
}
26+
27+
export function onToggleTest(args){
28+
debugger;
29+
console.log("toggle tap")
30+
let toggleTest = <CheckBox>page.getViewById("toggleTest");
31+
toggleTest.toggle();
32+
}

‎demo/app/main-page.xml

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,28 @@
33
xmlns:CheckBox="nativescript-checkbox" loaded="pageLoaded">
44
<ActionBar title="Native Checkbox" />
55

6-
<GridLayout rows="*" columns="*">
7-
<Repeater row="0" items="{{ data }}">
8-
<Repeater.itemTemplate>
9-
<StackLayout class="listitem">
10-
<CheckBox:CheckBox text="{{ text }}" checked="{{ checked }}" width="25" height="25" />
11-
</StackLayout>
12-
</Repeater.itemTemplate>
13-
</Repeater>
14-
</GridLayout>
6+
<ScrollView>
7+
<StackLayout id="wrapper">
8+
<Label text="Functions" class="title" />
9+
<StackLayout class="listitem">
10+
<GridLayout columns="*, auto" class="demosection">
11+
<CheckBox:CheckBox id="toggleTest" col="0" text="toggle()" checked="false" />
12+
<Button col="1" text="GO" tap="onToggleTest" class="button" />
13+
</GridLayout>
14+
</StackLayout>
15+
16+
<Label text="Bound to Repeater" class="title" />
17+
<StackLayout class="demosection">
18+
<Repeater items="{{ data }}">
19+
<Repeater.itemTemplate>
20+
<StackLayout class="listitem" >
21+
<CheckBox:CheckBox text="{{ text }}" checked="{{ checked }}" />
22+
</StackLayout>
23+
</Repeater.itemTemplate>
24+
</Repeater>
25+
</StackLayout>
26+
</StackLayout>
27+
28+
</ScrollView>
29+
1530
</Page>

0 commit comments

Comments
 (0)