javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 21:01:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #209 from NativeScript/background-image-css

Browse Source 
Background image css property implemented
This commit is contained in:
Vladimir Enchev
2015-03-20 14:49:56 +02:00
parent ff0d37612b 45e16146dd
commit e1206de036
6 changed files with 115 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CrossPlatformModules.csproj
View File

@ -543,6 +543,7 @@
<Content Include="apps\gallery-app\layouts\dock-layout.xml" />
<Content Include="apps\template-master-detail\details-view.xml" />
<Content Include="apps\template-master-detail\main-page.minWH600.xml" />
<Content Include="apps\TelerikNEXT\images\background.jpg" />
<Content Include="apps\template-settings\app.css" />
<Content Include="apps\tests\app\binding_tests.xml" />
<Content Include="apps\tests\ui\label\label-tests-wrong.css" />
@ -1517,7 +1518,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>

BIN
apps/TelerikNEXT/images/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

40
apps/TelerikNEXT/main-page.xml
View File

@ -23,29 +23,31 @@
</tsb:SideBar.slideContent>
<tsb:SideBar.mainContent>
<GridLayout rows="auto, auto, auto, *">
<GridLayout rows="auto, auto, *">
<SegmentedBar selectedIndex="{{ selectedIndex }}" style="background-color: transparent;color: white;" selectedBackgroundColor="#fac950">
<SegmentedBar.items>
<SegmentedBarItem title="MAY 3" />
<SegmentedBarItem title="MAY 4" />
<SegmentedBarItem title="MAY 5" />
</SegmentedBar.items>
</SegmentedBar>
<StackLayout style="background-image: url('~/app/images/background.jpg')">
<SegmentedBar selectedIndex="{{ selectedIndex }}" style="background-color: transparent;color: white;" selectedBackgroundColor="#fac950">
<SegmentedBar.items>
<SegmentedBarItem title="MAY 3" />
<SegmentedBarItem title="MAY 4" />
<SegmentedBarItem title="MAY 5" />
</SegmentedBar.items>
</SegmentedBar>
<Label row="1" style="horizontal-align: center;margin: 15;">
<Label.formattedText>
<FormattedString fontSize="18" foregroundColor="#fac950">
<FormattedString.spans>
<Span text="WORKSHOPS" fontAttributes="Bold" />
</FormattedString.spans>
</FormattedString>
</Label.formattedText>
</Label>
<Label style="horizontal-align: center;margin: 15;">
<Label.formattedText>
<FormattedString fontSize="18" foregroundColor="#fac950">
<FormattedString.spans>
<Span text="WORKSHOPS" fontAttributes="Bold" />
</FormattedString.spans>
</FormattedString>
</Label.formattedText>
</Label>
</StackLayout>
<SearchBar text="{{ search }}" hint="Search" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />
<SearchBar text="{{ search }}" hint="Search" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="1" />
<ListView items="{{ sessions }}" row="3" separatorColor="#fac950">
<ListView items="{{ sessions }}" row="2" separatorColor="#fac950">
<ListView.itemTemplate>
<GridLayout columns="auto, *">

38
ui/styling/style.ts
View File

@ -9,6 +9,7 @@ import stylers = require("ui/styling/stylers");
import styleProperty = require("ui/styling/style-property");
import converters = require("ui/styling/converters");
import enums = require("ui/enums");
import imageSource = require("image-source");
// key is the property id and value is Dictionary<string, StylePropertyChangedHandler>;
var _registeredHandlers = {};
@ -34,6 +35,13 @@ export class Style extends observable.DependencyObservable implements styling.St
this._setValue(backgroundColorProperty, value, observable.ValueSource.Local);
}
get backgroundImage(): string {
return this._getValue(backgroundImageProperty);
}
set backgroundImage(value: string) {
this._setValue(backgroundImageProperty, value, observable.ValueSource.Local);
}
get fontSize(): number {
return this._getValue(fontSizeProperty);
}
@ -279,9 +287,9 @@ export class Style extends observable.DependencyObservable implements styling.St
}
}
export function registerHandler(property: dependencyObservable.Property,
handler: styling.stylers.StylePropertyChangedHandler,
className?: string) {
export function registerHandler(property: dependencyObservable.Property,
handler: styling.stylers.StylePropertyChangedHandler,
className?: string) {
var realClassName = className ? className : "default";
if (_registeredHandlers.hasOwnProperty(property.id + "")) {
_registeredHandlers[property.id][realClassName] = handler;
@ -332,6 +340,26 @@ export var colorProperty = new styleProperty.Property("color", "color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, undefined, undefined, color.Color.equals),
converters.colorConverter);
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var url = (<string>data.newValue).match(pattern)[2];
if (imageSource.isFileOrResourcePath(url)) {
style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local);
} else if (types.isString(url)) {
imageSource.fromUrl(url).then(r=> {
style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
});
}
}
export var backgroundImageSourceProperty = new styleProperty.Property("backgroundImageSource", "background-image-source",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, undefined));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, color.Color.equals),
converters.colorConverter);
@ -373,7 +401,7 @@ export var minHeightProperty = new styleProperty.Property("minHeight", "min-heig
converters.numberConverter);
function parseThickness(value: any): { top: number; right: number; bottom: number; left: number } {
var result = { top: 0, right: 0, bottom: 0, left: 0};
var result = { top: 0, right: 0, bottom: 0, left: 0 };
if (types.isString(value)) {
var arr = value.split(/[ ,]+/);
var top = parseInt(arr[0]);
@ -406,7 +434,7 @@ function onPaddingChanged(data: observable.PropertyChangeData) {
style.paddingTop = thickness.top;
style.paddingRight = thickness.right;
style.paddingBottom= thickness.bottom;
style.paddingBottom = thickness.bottom;
style.paddingLeft = thickness.left;
}

31
ui/styling/stylers.android.ts
View File

@ -35,6 +35,32 @@ export class DefaultStyler implements definition.stylers.Styler {
return drawable;
}
//Background image methods
private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
var nativeView = <android.view.View>view.android;
var bmp = <android.graphics.Bitmap>newValue;
var d = new android.graphics.drawable.BitmapDrawable(bmp);
d.setTileModeXY(android.graphics.Shader.TileMode.REPEAT, android.graphics.Shader.TileMode.REPEAT);
d.setDither(true);
nativeView.setBackgroundDrawable(d);
}
private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
if (types.isDefined(nativeValue)) {
(<android.view.View>view.android).setBackgroundDrawable(nativeValue)
}
}
private static getNativeBackgroundImageSourceValue(view: view.View): any {
var drawable = view.android.getBackground();
if (drawable instanceof android.graphics.drawable.BitmapDrawable) {
return drawable;
}
return undefined;
}
//Visibility methods
private static setVisibilityProperty(view: view.View, newValue: any) {
var androidValue = (newValue === enums.Visibility.visible) ? android.view.View.VISIBLE : android.view.View.GONE;
@ -78,6 +104,11 @@ export class DefaultStyler implements definition.stylers.Styler {
DefaultStyler.resetBackgroundProperty,
DefaultStyler.getNativeBackgroundValue));
style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundImageSourceProperty,
DefaultStyler.resetBackgroundImageSourceProperty,
DefaultStyler.getNativeBackgroundImageSourceValue));
style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setVisibilityProperty,
DefaultStyler.resetVisibilityProperty));

28
ui/styling/stylers.ios.ts
View File

@ -32,6 +32,29 @@ export class DefaultStyler implements definition.stylers.Styler {
return undefined;
}
//Background image methods
private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
nativeView.backgroundColor = UIColor.alloc().initWithPatternImage(newValue);
}
}
private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
nativeView.backgroundColor = nativeValue;
}
}
private static getNativeBackgroundImageSourceValue(view: view.View): any {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
return nativeView.backgroundColor;
}
return undefined;
}
//Visibility methods
private static setVisibilityProperty(view: view.View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
@ -68,6 +91,11 @@ export class DefaultStyler implements definition.stylers.Styler {
DefaultStyler.resetBackgroundProperty,
DefaultStyler.getNativeBackgroundValue));
style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundImageSourceProperty,
DefaultStyler.resetBackgroundImageSourceProperty,
DefaultStyler.getNativeBackgroundImageSourceValue));
style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setVisibilityProperty,
DefaultStyler.resetVisibilityProperty));