Merge pull request #4 from eclipsesource/migrate-to-tabris-3.x

Migrate to tabris 3.x
eclipsesource · May 29, 2020 · df02fd3 · df02fd3
2 parents 6a213a3 + 7d8ba2c
commit df02fd3
Show file tree

Hide file tree

Showing 31 changed files with 447 additions and 492 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ registry=https://npm.tabrisjs.com/
 | 3.6.0-beta1             | 3.6.0 nightly | 3.6.0   | 2.6.2                  |
 | 3.6.0                   | 3.6.0         | 3.6.0   | 2.7.0                  |
 | 3.6.19                  | 3.6.0         | 3.6.0   | 2.8.1                  |
+| 3.12.0                  | 3.12.0        | 3.12.0  | 3.5.0                  |
 
 7. Build the app for the platform of your choice.
 8. Download and install the app and connect to your Tabris/RAP server.
diff --git a/cordova/config.xml b/cordova/config.xml
@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <widget
   id="com.eclipsesource.tabris.remote"
-  version="3.6.3"
+  version="3.12.0"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android-versionCode="$BUILD_NUMBER"
   ios-CFBundleVersion="$BUILD_NUMBER">
@@ -17,9 +17,8 @@
 
   <plugin name="cordova-plugin-network-information" spec="~2.0.1" />
   <plugin name="cordova-plugin-geolocation" spec="~4.0.1" />
-  <plugin name="tabris-plugin-camera" spec="https://github.com/eclipsesource/tabris-plugin-camera.git" />
-  <plugin name="cordova.plugins.diagnostic" spec="~3.3.2" />
-  <plugin name="tabris-plugin-barcode-scanner" spec="https://github.com/eclipsesource/tabris-plugin-barcode-scanner.git#8de9218216e67e47777da42ae3ba804a0d3c6e17" />
+  <plugin name="tabris-plugin-camera" spec="https://github.com/eclipsesource/tabris-plugin-camera.git#tabris-3.x" />
+  <plugin name="tabris-plugin-barcode-scanner" spec="https://github.com/eclipsesource/tabris-plugin-barcode-scanner.git" />
   <plugin name="cordova-plugin-ios-non-exempt-encryption" spec="~1.0.0" />
 
   <edit-config file="*-Info.plist" target="NSCameraUsageDescription" mode="overwrite">
@@ -81,13 +80,19 @@
   </platform>
 
   <platform name="android">
+
+	<config-file target="app/src/main/AndroidManifest.xml" parent="/manifest">
+	  <uses-permission android:name="android.permission.CAMERA"/>
+	  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	</config-file>
 
     <edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
       <application android:usesCleartextTraffic="true" />
     </edit-config>
     <preference name="Theme" value="@style/Theme.Tabris.App" />
     <resource-file src="resources/android/values/tabris_app_theme.xml"
-                   target="res/values/tabris_app_theme.xml" />
+                   target="app/src/main/res/values/tabris_app_theme.xml" />
 
     <icon src="resources/android/drawable-mdpi/ic_launcher.png" density="mdpi" />
     <icon src="resources/android/drawable-hdpi/ic_launcher.png" density="hdpi" />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tabris-remote-app",
-  "version": "3.6.3",
+  "version": "3.12.0",
   "main": "dist/index.js",
   "private": true,
   "scripts": {
@@ -13,17 +13,17 @@
     "serve": "tabris serve dist/index.js"
   },
   "dependencies": {
-    "tabris-js-remote": "^3.6.0",
-    "tabris": "nightly-2.x",
-    "tabris-decorators": "^2.8.0"
+    "tabris-js-remote": "^3.12.0",
+    "tabris": "^3.5.0",
+    "tabris-decorators": "^3.5.0"
   },
   "devDependencies": {
     "@types/node": "^8.0.44",
     "npm-run-all": "^4.1.1",
     "ts-loader": "^3.2.0",
     "ts-node": "^3.3.0",
-    "tslint": "~5.11.0",
-    "typescript": "^2.6.1",
+    "tslint": "^5.14.0",
+    "typescript": "3.3.x",
     "webpack": "^3.10.0",
     "webpack-merge": "^4.1.1"
   }

diff --git a/src/AppLauncher.ts b/src/AppLauncher.ts
@@ -1,4 +1,4 @@
-import { AlertDialog, ui } from 'tabris';
+import { AlertDialog, contentView } from 'tabris';
 import { shared, inject } from 'tabris-decorators';
 import { BasicLauncher } from 'tabris-js-remote';
 import { Texts } from './res/Texts';
@@ -60,7 +60,7 @@ interface LaunchConfig {
     let config = this.createLaunchConfig(url);
     try {
       new BasicLauncher().start(config);
-      ui.contentView.children().dispose();
+      contentView.children().dispose();
     } catch (ex) {
       this.showDialog(this.texts.error, ex.message);
     }

diff --git a/src/UILauncher.tsx b/src/UILauncher.tsx
@@ -1,38 +1,48 @@
-import { ui } from 'tabris';
+import { contentView, statusBar, navigationBar } from 'tabris';
 import { resolve } from 'tabris-decorators';
 import { Colors } from './res/Colors';
 import { isIos } from './helper';
 import ExampleGalleryTab from './tab/ExampleGalleryTab';
 import OnboardingView from './onboarding/OnboardingView';
-import AppTabFolder from './widget/AppTabFolder';
+import AppTabFolder from './tab/AppTabFolder';
 import AboutTab from './tab/AboutTab';
 import UrlView from './widget/UrlView';
-import AppTab from './widget/AppTab';
+import AppTab from './tab/AppTab';
 import settings from './settings';
 
 export default class UILauncher {
 
   constructor() {
-    ui.contentView.background = resolve(Colors).background;
+    this.initUi();
     if (settings.onboardingComplete) {
       this.showApp();
     } else {
       this.showOnboarding();
     }
   }
 
+  private initUi() {
+    const background = resolve(Colors).background;
+    navigationBar.set({
+      background: background,
+      theme: 'light'
+    });
+    contentView.background = background;
+  }
+
   private showOnboarding() {
-    ui.statusBar.set({
+    statusBar.set({
       theme: 'light',
+      displayMode: 'float',
       background: resolve(Colors).background
     });
     this.createOnboardingUi();
   }
 
   private createOnboardingUi() {
-    ui.contentView.append(
+    contentView.append(
       <OnboardingView
-        left={0} top={0} right={0} bottom={0}
+        stretch
         onComplete={event => {
           event.target.dispose();
           settings.onboardingComplete = true;
@@ -42,32 +52,29 @@ export default class UILauncher {
   }
 
   private showApp() {
-    ui.statusBar.set({
+    statusBar.set({
       background: isIos() ? '#00a4ff' : 'rgba(0,0,0,0.22)',
-      theme: 'dark'
+      theme: 'dark',
+      displayMode: isIos() ? 'default' : 'float'
     });
     this.createAppUi();
-    const tabFolder = ui.contentView.find(AppTabFolder).first();
-    tabFolder.scrollReceiver = ui.contentView.find(UrlView).first();
+    const tabFolder = $(AppTabFolder).only();
+    tabFolder.scrollReceiver = $(UrlView).only();
     const selection = tabFolder.find('#' + settings.selectedTabId).first(AppTab);
     if (selection) {
       tabFolder.selection = selection;
     }
   }
 
   private createAppUi() {
-    ui.contentView.append(
-      <widgetCollection>
-        <AppTabFolder
-          left={0} top={0} right={0} bottom={0}>
-          <ExampleGalleryTab
-            id='exampleGalleryTab' />
-          <AboutTab
-            id='aboutTab' />
+    contentView.append(
+      <$>
+        <AppTabFolder stretch>
+          <ExampleGalleryTab id='exampleGalleryTab' />
+          <AboutTab id='aboutTab' />
         </AppTabFolder>
-        <UrlView
-          left={0} top={0} right={0} bottom={0} />
-      </widgetCollection>
+        <UrlView stretch />
+      </$>
     );
   }
 

diff --git a/src/app.ts b/src/app.ts
@@ -1,12 +1,14 @@
-import { ActivityIndicator, ui } from 'tabris';
+import { ActivityIndicator, contentView, devTools } from 'tabris';
 import { BasicLauncher } from 'tabris-js-remote';
 import { autostart, url, id, version, debug } from './launchConfig';
 import UILauncher from './UILauncher';
 
+devTools.hideUi();
+
 if (autostart) {
   let activityIndicator = new ActivityIndicator({
     centerX: 0, centerY: 0
-  }).appendTo(ui.contentView);
+  }).appendTo(contentView);
   let launcher = new BasicLauncher();
   launcher.start({ url, id, version, debug });
   launcher.rap.connection.once('received', () => activityIndicator.dispose());

diff --git a/src/helper.tsx b/src/helper.tsx
@@ -1,8 +1,8 @@
-import { device, ui } from 'tabris';
+import { device, statusBar } from 'tabris';
 import dimen from './res/dimen';
 
 export const isAndroid = () => device.platform === 'Android';
 export const isIos = () => device.platform === 'iOS';
 
-export const statusBarOffset = () => isIos() ? 0 : ui.statusBar.height;
+export const statusBarOffset = () => isIos() ? 0 : statusBar.height;
 export const contentTopOffset = () => statusBarOffset() + dimen.urlBarHeight + dimen.urlBarTop;
diff --git a/src/onboarding/DevConsoleTab.tsx b/src/onboarding/DevConsoleTab.tsx
@@ -1,5 +1,5 @@
-import { Properties, Tab } from 'tabris';
-import { ComponentJSX, inject } from 'tabris-decorators';
+import { Properties, Tab, Composite, ImageView, TextView } from 'tabris';
+import { inject } from 'tabris-decorators';
 import { Colors } from '../res/Colors';
 import { Images } from '../res/Images';
 import { Fonts } from '../res/Fonts';
@@ -9,8 +9,6 @@ import dimen from '../res/dimen';
 
 export default class DevConsoleTab extends OnboardingTab {
 
-  public jsxProperties: ComponentJSX<this>;
-
   constructor(
     properties: Properties<Tab>,
     @inject protected readonly colors: Colors,
@@ -23,25 +21,25 @@ export default class DevConsoleTab extends OnboardingTab {
 
   private createUi() {
     this.append(
-      <composite
-        left={0} centerY={0} right={0}>
-        <imageView
-          top={0} centerX={0} width={256} height={256}
+      <Composite
+        stretchX centerY>
+        <ImageView
+          top centerX width={256} height={256}
           cornerRadius={128}
           image={this.images.devConsoleTabImage}
           background={`linear-gradient(25deg, ${this.colors.primaryDark} 10%, ${this.colors.primaryLight})`} />
-        <textView
+        <TextView
           left={dimen.l} top={dimen.pxxl} right={dimen.l}
-          alignment='center'
+          alignment='centerX'
           font={this.fonts.h5}
           text={this.texts.devConsoleTabMessage} />
-        <textView
+        <TextView
           left={dimen.l} top={dimen.pm} right={dimen.l}
-          alignment='center'
+          alignment='centerX'
           font={this.fonts.subtitle1}
           textColor={this.colors.onBackgroundMedium}
           text={this.texts.devConsoleTabSubMessage} />
-      </composite>
+      </Composite>
     );
   }
 

diff --git a/src/onboarding/NavigationBar.tsx b/src/onboarding/NavigationBar.tsx
@@ -1,5 +1,5 @@
-import { Composite, ImageView, Properties, TextView } from 'tabris';
-import { ComponentJSX, Listeners, getById, component, inject } from 'tabris-decorators';
+import { Composite, Listeners, ImageView, Properties, TextView } from 'tabris';
+import { getById, component, inject } from 'tabris-decorators';
 import { Colors } from '../res/Colors';
 import { Images } from '../res/Images';
 import { Fonts } from '../res/Fonts';
@@ -9,7 +9,6 @@ import dimen from '../res/dimen';
 
 @component export default class NavigationBar extends Composite {
 
-  public jsxProperties: ComponentJSX<this>;
   public onSkipButton: Listeners<{ target: object }> = new Listeners(this, 'skipButton');
   public onNextButton: Listeners<{ target: object }> = new Listeners(this, 'nextButton');
   @getById private skipView: Composite;
@@ -25,41 +24,41 @@ import dimen from '../res/dimen';
     @inject protected readonly texts: Texts) {
     super();
     this.createUi();
-    this.set(properties);
+    this.set<NavigationBar>(properties);
   }
 
   private createUi() {
     this.append(
-      <widgetCollection>
-        <composite
+      <$>
+        <Composite
           id='skipView'
-          left={0} top={0} bottom={0}
-          highlightOnTouch={true}
+          left stretchY
+          highlightOnTouch
           onTap={() => this.onSkipButton.trigger()}>
-          <textView
-            left={dimen.xl} right={dimen.xl} centerY={0}
+          <TextView
+            left={dimen.xl} right={dimen.xl} centerY
             text={this.texts.skip}
             font={this.fonts.subtitle1} />
-        </composite>
-        <composite
-          top={0} right={0} bottom={0}
-          highlightOnTouch={true}
+        </Composite>
+        <Composite
+          stretchY right
+          highlightOnTouch
           onTap={() => this.onNextButton.trigger()}>
-          <textView
+          <TextView
             id='nextTextView'
-            left={dimen.xl} right={dimen.nxs} centerY={0}
+            left={dimen.xl} right={dimen.nxs} centerY
             text={this.texts.next}
             font={this.fonts.subtitle1} />
-          <imageView
+          <ImageView
             id='nextImageView'
             right={dimen.xl} centerY={isAndroid() ? 1 : 0}
             tintColor={this.colors.actionIcon}
             image={this.images.next} />
-        </composite>
-        <composite
+        </Composite>
+        <Composite
           id='progressIndicator'
-          centerY={0} centerX={-dimen.xxs} />
-      </widgetCollection>);
+          centerY centerX={-dimen.xxs} />
+      </$>);
   }
 
   set entries(entries: number) {
@@ -79,13 +78,14 @@ import dimen from '../res/dimen';
       text: lastPage ? this.texts.done : this.texts.next,
       right: lastPage ? dimen.xl : dimen.nxs
     });
-    this.nextImageView.visible = !lastPage;
-    this.skipView.visible = !lastPage;
-    this.progressIndicator
-      .children(ImageView)
-      .forEach((indicator: ImageView, i: number) => {
-        indicator.tintColor = i === index ? this.colors.actionIcon : this.colors.actionIconMedium;
-      });
+    this.nextImageView.set({
+      visible: !lastPage,
+      excludeFromLayout: lastPage
+    });
+    this.skipView.excludeFromLayout = lastPage;
+    this.progressIndicator.children(ImageView).forEach((indicator: ImageView, i: number) => {
+      indicator.tintColor = i === index ? this.colors.actionIcon : this.colors.actionIconMedium;
+    });
   }
 
 }