添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
痴情的青椒  ·  HTTP请求方式中8种请求方法（简单介绍） ...·  2 天前    · 
聪明伶俐的肉夹馍  ·  python默认编码方式 - ...·  1 年前    · 
俊逸的香菇  ·  用php实现字符串大小写转函数的功能-腾讯云 ...·  1 年前    · 
开朗的伤疤  ·  Python ...·  1 年前    · 
踢足球的青椒  ·  解决＞‘ not supported ...·  1 年前    · 
link之家  ›  JET In Typescript
element typescript oj
https://www.oracle.com/webfolder/technetwork/jet/jsdocs/TypescriptOverview.html
温柔的西瓜
10 月前

Overview

This guide explains how to use JET in your Typescript project. JET's Typescript type definitions are bundled with the JET npm package. These type definitions get installed automatically when you install the JET library from npm. To get the latest recommended tsconfig.json in an existing Javascript or Typescript JET project, you can run the following command: 

ojet add typescript
To create a new typescript JET project from one of the JET starter templates, you can run the following command: 
ojet create AppName --template=(blank|basic|navbar|navdrawer) --typescript

JET Typescript type definitions include definitions for JET elements as well as non element classes, namespaces, interfaces etc. The below sections explain how each of these modules can be imported in to your project and used.

Working with JET Elements

JET Elements are exported as Typescript interfaces. These interfaces are useful in typechecking the element APIs but have no run time impact.
Import a JET element in your viewmodel, as below, 

import {ojInputText} from "ojs/ojinputtext";
Please be aware that Typescript compiler excludes 'no side effect' imports when transpiled to javascript. So for your viewmodel to load all the required component modules, please double import the component as below. 
import {ojInputText} from "ojs/ojinputtext";
import "ojs/ojinputtext";
Some of the JET element modules contain multiple components. If you need to work with them, you can import them as below 
import {ojInputText, ojInputPassword} from "ojs/ojinputtext";
import "ojs/ojinputtext";

Cast your HTML element to JET Element

To work with a component instance in your view model, you must typecast the element to the correct JET Element type. An example below:- 

let myInputText = document.getElementById('input') as ojInputText;
Please note that, some of the JET Elements are Generic types. So you will have to specify the type details while casting. You can see the generic parameter details of component under 'Generic Parameters' subsection in the component API page. For example, ojTable takes two parameters- the type of key and data of your dataprovider. The example below shows how to cast to a table whose dataprovider's key is number and data is object type. 
 let tableElement = document.getElementById('table') as ojTable<number, object>;

Using Element APIs

To get a property value, 

let myValue = myInputText.value;
To set a property, you will use the below simple format in most cases, 
myInputText.value = "Hello There";
But some of the JET element properties have different getter and setter types. Example expanded property of Accordion . In such cases if you want to set the property to a type defined only in SetterType, you should use the 'set' method as below. (Please note that this method can be used to set any property even if it does not have a different Setter Type) 
//Note that the expanded always returns Array<{id?: string, index?: number}>.
//But you are allowed to set an array of number or string as expanded.
//The following code will fail.
//myAccordion.expanded' = [1,2,3];
//But you can set expanded to a number array using set method,
myAccordion.set('expanded', [1,2,3]);
To reset a property value to its default, use "unset" method as below. 
myAccordion.unset('expanded');
Invoking a component method looks like 
myInputText.refresh();
Attaching an event listener to the component 

//Create your listener function
myListener = (evt: ojInputText.ojAnimateStart) => {
}
//You can attach this to your component as below,
myInputText.addEventListener("ojAnimateStart", this.myListener);
In JET application you will often bind a variable to your component in the html and initialize or update it in your view model. The below example shows how to make such variables type safe. 

//HTML code,
<oj-navigation-list data="[[navDataSource]]"
   on-selection-changed="[[selectionChange]]">
</oj-navigation-list>

//Your view model
import {ojNavigationList} from 'ojs/ojnavigationlist';
import "ojs/ojnavigationlist";

class HeaderViewModel {
  navDataSource: ojNavigationList<string, object>['data'];
  selectionChange: (event: ojNavigationList.selectionChanged<string, string>) => any;

  constructor() {
    let self = this;
    //data source will now be typechecked to ensure it is of type DataProvider<string, object>
    self.navDataSource = new ArrayDataProvider(HeaderViewModel.navData, { keyAttributes: 'id'});
    //selection change callback handler's event parameter will now be typed to let you access properties
    //like event.detail.value, event.detail.previousValue etc.
    self.selectionChange = (event) => {
      let newVal = event.detail.value;
      if (newVal !== self.router.stateId()) {
        self.router.go(newVal);
      }
    }
  }
}

Working with non element classes

JET non element classes, namespaces and interfaces are grouped in to vaious modules. Every module either returns a single class or multiple classes in an umbrella object. To use a module correctly, it is important to know what is returned by it. You can find details about how to import a class/interface from a module in to your typescript project in the 'Typescript Import Format' section of the class/interface doc.
Here is an example of a module which returns a class and how to use it, 

import ArrayDataProvider = require('ojs/ojarraydataprovider');
let dataprovider = new ArrayDataProvider([{value: 'R', label: 'Red'},{value: 'B', label: 'Blue'}], {keyAttributes: 'value'});
myTableElment.data = dataprovider
An example of a namespace which returns an object with all static methods, 
import * as Logger from "ojlogger";
Logger.log("The button is clicked");
In the below example, we are using validation-base module to create a validator. This module returns an umbrella object with multiple classes in it. Please note how the import syntax has changed 
import {Validation, LengthValidatorFactory} from "ojs/ojvalidation-base";
let factory = Validation.validatorFactory('length') as LengthValidatorFactory;
let validator = factory.createValidator({max: 10});
myTextComponent.validators = [validator];
Documentation generated by JSDoc 3.4.3 on Fri Oct 13 2023 07:35:00 GMT+0000 (Coordinated Universal Time)
 
推荐文章
痴情的青椒  ·  HTTP请求方式中8种请求方法（简单介绍） - 韦邦杠 - 博客园
2 天前
聪明伶俐的肉夹馍  ·  python默认编码方式 - 不会玩python - 博客园
1 年前
俊逸的香菇  ·  用php实现字符串大小写转函数的功能-腾讯云开发者社区-腾讯云
1 年前
开朗的伤疤  ·  Python 学习之正则表达式-腾讯云开发者社区-腾讯云
1 年前
踢足球的青椒  ·  解决＞‘ not supported between instances of ‘list‘ and ‘int‘_>' not supported between instances of 'list' and '_alongwaywith的博客-CSDN博客
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
link之家 - 链接快照平台
© 2024 ~ 沪ICP备11025650号