Skip to content

Commit 70105d7

Browse files
PeterStaevPeterStaev
committed
readme/travis adjustments
1 parent 6da1162 commit 70105d7

File tree

2 files changed

+44
-274
lines changed

2 files changed

+44
-274
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ matrix:
117117
provider: npm
118118
email: "[email protected]"
119119
api_key:
120-
secure: "bE88gjzCp5WVM6krHGLOXykFUZXtV8dWFQt4Q80GGX/ZbpZ572tDTBMeNCiZHKt801diulXy1dqZ8b709tWID1lyTfIJfGeO0mRZ2/tt7BIeIzFZpcbd8EXWDozqnxnX7wfgXHex8Zt0apjUI89ahfVb2RezwlLCafDpfeL6Y3fF4bZPei+im07yE83HCTTJ60APFB6Ok2nrtqh79PX1FNeiYev6Bg44OlGrYVFskGNEmwB2RawbCyRDeuTEXbpmBbRErxN0xokRUxGoDEQoSM0QlWm+DQbYzJm5maeU0bs4kHmGtU1WVyilCmcXElZtjDZ6nP1CyiE855MGI+yVqrwoyrVfIl2rpk/BfbWuW1wk8ysvSFUK2tv+q14iIeh3wLrMhmf3RV4EeLL5zAQU3XAH+vy7XJWbSeOa+UFBVaCb6aP3rY3X1x9NZfJb4Otkxo1Yv7wuqvQ/62zxsyMKcRK5krq0K0ykxVY52NtBTBqIDWD2gXjTY9onL7FRWwrqkCSUsC4S0vAEMdiNwa7K9YHF0mn72vjNY/7xTYbj9SIzwaQL1rXVy17qTvGdXq9BMB5s79qhfyypx6ETP83oEBZltPnTsSyVyt13DfWXp4xyINQiAAjhMUfnuQCg8kIwJAouLyIQvIB2h1QArxC9PEbAg0ImlCP6/lGuzjRrWjQ="
120+
secure: "LfeD7xO159FRQe9BafQgWcQW5kMLYWiY3bMSiiUXEK9ea7eGUNJkNdjGBKshgFYrV54pl6p8dFAsX8equkVR4u7yiQH6asPcTDJFUm2eMys2eOwagllSvESsjjZ0EKYLnsBl8IbMpNL6+hfZP8vzbQB7+xKyKBswBWy8EbQYNG9XG78x/SChFPPHO6584a0/Fa7wQrNyIUOtq2Nn4XaQVG8PkOz3c4lIDCFKKhZuHoxQvzoCGOzyxJteq20e4LZrtDsv2A1khf0jm+YWym6aL/YgaegrnqMc33jLV4OlT74FN6k3rYwde4P2FczR0hQAXjVfIAOJA7REOBBWS703T4JWsCXIAyL+ODtR0wQvzy52mkzRDnPWqpKZjYkFLHQjmove9fdqyo9U+3GUw+5sooznoExH9zZfbfuWzdIrsF0nQhzCL6o5wmmGXGofqHOxPl/s3MQ5KiAtMQEXPETUvOI8MQcPnpCDEV0vAvUrMnrBGaRkKqEG32H0Y/jl9Dt7pVig7tqv/nKztf/lEgPs8k4AgJG9jM/AsxT43xN4UF+J8/zdRWsXaDMnQ4c/QYPllTw8xll2YoebZEvIMMJJAeGJmEoWl69ciZJVDV8TReETCavMzTOnJ7HoGFCJPEFWvWBrTBSimtNwnx0iPX+rfdNHRduMCdKV02nu4KAw/Oo="
121121
skip_cleanup: true
122122
on:
123123
branch: release

‎README.md‎

Lines changed: 43 additions & 273 deletions
Original file line numberDiff line numberDiff line change
@@ -1,302 +1,72 @@
1-
# NativeScript DropDown widget
2-
[![Build Status](https://travis-ci.org/PeterStaev/NativeScript-Drop-Down.svg?branch=master)](https://travis-ci.org/PeterStaev/NativeScript-Drop-Down)
3-
[![npm downloads](https://img.shields.io/npm/dm/nativescript-drop-down.svg)](https://www.npmjs.com/package/nativescript-drop-down)
4-
[![npm downloads](https://img.shields.io/npm/dt/nativescript-drop-down.svg)](https://www.npmjs.com/package/nativescript-drop-down)
5-
[![npm](https://img.shields.io/npm/v/nativescript-drop-down.svg)](https://www.npmjs.com/package/nativescript-drop-down)
1+
# NativeScript Telerik Reporting
2+
[![Build Status](https://travis-ci.org/PeterStaev/nativescript-telerik-reporting.svg?branch=master)](https://travis-ci.org/PeterStaev/nativescript-telerik-reporting)
3+
[![npm downloads](https://img.shields.io/npm/dm/nativescript-telerik-reporting.svg)](https://www.npmjs.com/package/nativescript-telerik-reporting)
4+
[![npm downloads](https://img.shields.io/npm/dt/nativescript-telerik-reporting.svg)](https://www.npmjs.com/package/nativescript-telerik-reporting)
5+
[![npm](https://img.shields.io/npm/v/nativescript-telerik-reporting.svg)](https://www.npmjs.com/package/nativescript-telerik-reporting)
66

7-
A NativeScript DropDown widget. The DropDown displays items from which the user can select one. For iOS it wraps up a [UILabel](https://developer.apple.com/reference/uikit/uilabel) with an `inputView` set to an [UIPickerView](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIPickerView_Class/index.html) which displays the items. For Android it wraps up the [Spinner](http://developer.android.com/reference/android/widget/Spinner.html) widget.
7+
A NativeScript plugin for easy access to [Telerik Rporting REST API](https://docs.telerik.com/reporting/telerik-reporting-rest-api).
88

9-
## Screenshot
10-
![Screenshot of iOS and Android](https://raw.githubusercontent.com/PeterStaev/NativeScript-Drop-Down/master/docs/screenshot.png)
119

1210
## Installation
1311
Run the following command from the root of your project:
1412

15-
`tns plugin add nativescript-drop-down`
13+
`tns plugin add nativescript-telerik-reporting`
1614

17-
This command automatically installs the necessary files, as well as stores nativescript-drop-down as a dependency in your project's package.json file.
15+
This command automatically installs the necessary files, as well as stores nativescript-telerik-reporting as a dependency in your project's package.json file.
1816

1917
## Configuration
2018
There is no additional configuration needed!
2119

2220
## API
2321

24-
### Events
25-
* **opened**
26-
Triggered when the DropDown is opened.
22+
### `ReportingClient`
23+
#### Methods
2724

28-
* **closed**
29-
Triggered when the DropDown is closed.
25+
### `ReportingInstance`
26+
#### Methods
3027

31-
* **selectedIndexChanged**
32-
Triggered when the user changes the selection in the DropDown
33-
34-
### Static Properties
35-
* **openedEvent** - *String*
36-
String value used when hooking to opened event.
37-
38-
* **closedEvent** - *String*
39-
String value used when hooking to closed event.
40-
41-
* **selectedIndexChangedEvent** - *String*
42-
String value used when hooking to selectedIndexChanged event.
43-
44-
### Instance Properties
45-
* **ios** - *[UILabel](https://developer.apple.com/reference/uikit/uilabel)*
46-
Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.
47-
48-
* **android** - *[android.widget.Spinner](http://developer.android.com/reference/android/widget/Spinner.html)*
49-
Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
50-
51-
* **items** - *Array | ItemsSource*
52-
Gets or sets the items collection of the DropDown. The items property can be set to an array or an object defining length and getItem(index) method.
53-
54-
* **selectedIndex** - *Number*
55-
Gets or sets the selected index of the DropDown.
56-
57-
* **hint** - *String*
58-
Gets or sets the hint for the DropDown.
59-
60-
* **isEnabled** - *boolean*
61-
Gets or sets whether the drop down is enabled. If you want to apply a specific style you can use the `:disabled` pseudo css selector.
62-
63-
* **accessoryViewVisible** - *boolean* (Default: true)
64-
Gets/sets whether there will be an accessory view (toolbar with Done button) under iOS. Valid only when running on iOS.
65-
66-
### Methods
67-
* **open(): void**
68-
Opens the drop down.
69-
70-
* **close(): void**
71-
Closes the drop down.
28+
### `ReportingDocument`
29+
#### Methods
7230

7331
## Usage
74-
You need to add `xmlns:dd="nativescript-drop-down"` to your page tag, and then simply use `<dd:DropDown/>` in order to add the widget to your page.
75-
76-
```xml
77-
<!-- test-page.xml -->
78-
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:dd="nativescript-drop-down">
79-
<GridLayout rows="auto, auto, *" columns="auto, *">
80-
<dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}"
81-
opened="dropDownOpened" closed="dropDownClosed"
82-
selectedIndexChanged="dropDownSelectedIndexChanged"
83-
row="0" colSpan="2" />
84-
<Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"/>
85-
<TextField text="{{ selectedIndex }}" row="1" col="1" />
86-
</GridLayout>
87-
</Page>
88-
```
89-
90-
```ts
91-
// test-page.ts
92-
import observable = require("data/observable");
93-
import observableArray = require("data/observable-array");
94-
import pages = require("ui/page");
95-
import { SelectedIndexChangedEventData } from "nativescript-drop-down";
96-
97-
var viewModel: observable.Observable;
98-
99-
export function pageLoaded(args: observable.EventData) {
100-
var page = <pages.Page>args.object;
101-
var items = new observableArray.ObservableArray();
102-
103-
viewModel = new observable.Observable();
104-
105-
for (var loop = 0; loop < 20; loop++) {
106-
items.push("Item " + loop.toString());
107-
}
108-
109-
viewModel.set("items", items);
110-
viewModel.set("selectedIndex", 15);
111-
112-
page.bindingContext = viewModel;
113-
}
114-
115-
export function dropDownOpened(args: EventData) {
116-
console.log("Drop Down opened");
117-
}
118-
119-
export function dropDownClosed(args: EventData) {
120-
console.log("Drop Down closed");
121-
}
122-
123-
export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
124-
console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
125-
}
126-
```
127-
128-
## Usage in Angular
129-
130-
##### Migration to 3.0+
131-
132-
- Remove:
133-
```typescript
134-
registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown);`
135-
```
136-
- Import `DropDownModule` in `NgModule`:
137-
```typescript
138-
import { DropDownModule } from "nativescript-drop-down/angular";
139-
//......
140-
@NgModule({
141-
//......
142-
imports: [
143-
//......
144-
DropDownModule,
145-
//......
146-
],
147-
//......
148-
})
149-
```
32+
A typical usage scenario is when you want to generate a report on your server and the download the file in an appropriate format (for example a PDF document). Below is an example how you can make this. You start by creating a client with your server's URL. Then you register your client, create an instance and a document. Finally you download the document to the mobile device.
15033

151-
##### Example Usage
15234
```ts
153-
// main.ts
154-
import { NgModule } from "@angular/core";
155-
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
156-
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
157-
import { DropDownModule } from "nativescript-drop-down/angular";
158-
import { AppComponent } from "./app.component";
159-
160-
@NgModule({
161-
declarations: [ AppComponent ],
162-
bootstrap: [ AppComponent ],
163-
imports: [
164-
NativeScriptModule,
165-
DropDownModule,
166-
],
167-
})
168-
class AppComponentModule {
169-
}
170-
171-
platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
172-
```
173-
174-
```html
175-
<!-- app.component.html -->
176-
<StackLayout>
177-
<GridLayout rows="auto, auto, *"
178-
columns="auto, *">
179-
<DropDown #dd
180-
backroundColor="red"
181-
[items]="items"
182-
[(ngModel)]="selectedIndex"
183-
(selectedIndexChanged)="onchange($event)"
184-
(opened)="onopen()"
185-
(closed)="onclose()"
186-
row="0"
187-
colSpan="2"></DropDown>
188-
<Label text="Selected Index:"
189-
row="1"
190-
col="0"
191-
fontSize="18"
192-
verticalAlignment="bottom"></Label>
193-
<TextField [text]="selectedIndex"
194-
row="1"
195-
col="1"></TextField>
196-
</GridLayout>
197-
</StackLayout>
198-
```
199-
200-
```ts
201-
// app.component.ts
202-
import { Component } from "@angular/core";
203-
import { SelectedIndexChangedEventData } from "nativescript-drop-down";
204-
205-
@Component({
206-
selector: "my-app",
207-
templateUrl:"app.component.html",
208-
})
209-
export class AppComponent {
210-
public selectedIndex = 1;
211-
public items: Array<string>;
212-
213-
constructor() {
214-
this.items = [];
215-
for (var i = 0; i < 5; i++) {
216-
this.items.push("data item " + i);
217-
}
218-
}
219-
220-
public onchange(args: SelectedIndexChangedEventData) {
221-
console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
222-
}
223-
224-
public onopen() {
225-
console.log("Drop Down opened.");
226-
}
227-
228-
public onclose() {
229-
console.log("Drop Down closed.");
230-
}
231-
}
232-
```
233-
234-
## Working with value and display members
235-
It is a common case that you want to have one thing displayed in the drop down and then get some backend value
236-
tied to the tex. For example drop down with states you might want tos how the full state name (i.e. Florida)
237-
and then when working with your backend you want to use the state code (i.e. FL). The Drop Down items property can be
238-
set to either Array of objects or a custom object that implements `getItem(index: number): any` function and `length` proerty. With versionn 3.0 of the plugin it has a built in class that helps you with this scenario:
239-
240-
```ts
241-
import { ValueList } from "nativescript-drop-down";
242-
```
243-
244-
Then you can set the `items` property of the DropDown to an instance of ValueList:
245-
```ts
246-
let dd = page.getViewById<DropDown>("dd");
247-
let itemSource = new ValueList<string>([
248-
{ value: "FL", display: "Florida" },
249-
{ value: "MI", display: "Michigan" }
250-
]);
251-
dd.items = itemSource;
252-
```
253-
254-
This enables you to do things like:
255-
1.If you want to select an item in the DropDown by its backend value (for example FL), you can do this with:
256-
```ts
257-
dd.selectedIndex = itemSource.getIndex("FL");
258-
```
259-
2.You can get the backend value of what the user selected using:
260-
```ts
261-
let selectedValue = itemSource.getValue(dd.selectedIndex);
262-
```
263-
264-
## Working with Webpack+Uglify
265-
In case you are uing webpack and also are minifying/uglifying your code, there are some specific names that should be excluded from the uglification for the widget to work properly. The DropDown widget exports those and you need to add them to the mangle exclude option of the uglifyjs plugin in the `webpack.common.js` file:
266-
```js
267-
var dropDownMangleExcludes = require("nativescript-drop-down/uglify-mangle-excludes").default;
268-
//......
269-
module.exports = function (platform, destinationApp) {
270-
//......
271-
if (process.env.npm_config_uglify) {
272-
plugins.push(new webpack.LoaderOptionsPlugin({
273-
minimize: true
274-
}));
275-
276-
//Work around an Android issue by setting compress = false
277-
var compress = platform !== "android";
278-
plugins.push(new webpack.optimize.UglifyJsPlugin({
279-
mangle: {
280-
except: nsWebpack.uglifyMangleExcludes.concat(dropDownMangleExcludes),
281-
},
282-
compress: compress,
283-
}));
284-
}
285-
//......
286-
}
35+
const req: ReportSource = {
36+
report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null",
37+
parameterValues: {
38+
OrderNumber: "SO51081",
39+
ForYear: 2003,
40+
ForMonth: 7,
41+
},
42+
};
43+
const reportingClient = new ReportingClient({ serverUrl: "https://....." });
44+
reportingClient.register()
45+
.then(() => reportingClient.createInstance(req))
46+
.then((instance) => {
47+
instance.createDocument({ format: documentFormat } as any).then((document) => {
48+
document.download().then((file) => {
49+
utils.ios.openFile(file.path);
50+
viewModel.set("isBusyIn", false);
51+
52+
document.destroy()
53+
.then(() => instance.destroy())
54+
.then(() => reportingClient.unregister);
55+
});
56+
});
57+
});
28758
```
59+
It is really important to remember to call `destroy()` for your instances and documents and to `unregister()` your client as this frees up resources on the server. Also it is a good idea to reuse clients/instances whenever possible.
28860

28961
## Demos
290-
This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:
62+
This repository plain NativeScript demo. In order to run those execute the following in your shell:
29163
```shell
292-
$ git clone https://github.com/peterstaev/nativescript-drop-down
293-
$ cd nativescript-drop-down
64+
$ git clone https://github.com/peterstaev/nativescript-telerik-reporting
65+
$ cd nativescript-telerik-reporting
29466
$ npm install
29567
$ npm run demo-ios
29668
```
297-
This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the `-android` instead of the `-ios` sufix.
298-
299-
If you want to run the Angular demo simply use the `demo-ng-` prefix instead of `demo-`.
69+
This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the `-android` instead of the `-ios` sufix.
30070

30171

30272
## Donate

0 commit comments

Comments
 (0)