SAPUI5 (16) - 数据类型

sapui5数据类型概述

sapui5的数据类型包括简单类型和OData类型。先来了解简单类型。简单数据类型最主要有三大作用:

  • 数据校验(validation):如果数据约束(constraints)被违反,触发validationValue功能。
  • 数据显示格式设置(formatter):数据从model传递到view的时候,通过格式化来显示数据。比如字符串大写,数字加上千位符等。
  • 数据转换(parse):当数据从UI到model的时候,执行数据转换。

基本数据类型包括:

  • sap.ui.model.type.Integer
  • sap.ui.model.type.Float
  • sap.ui.model.type.String
  • sap.ui.model.type.Boolean
  • sap.ui.model.type.Date
  • sap.ui.model.type.Time
  • sap.ui.model.type.DateTime

sap.ui.model.type.Integer

Integer代表整数,构造函数有两个参数,第一个参数是格式化选项,第二个参数是约束:

new sap.ui.model.type.Integer(oFormatOptions?, oConstraints?)

示例:

var oIntType = new sap.ui.model.type.Integer();

或者初始化的时候指定格式设置选项:

var oIntType = new sap.ui.model.type.Integer({
    minIntegerDigits: 1, // minimal number of non-fraction digits
    maxIntegerDigits: 99, // maximal number of non-fraction digits
    minFractionDigits: 0, // minimal number of fraction digits
    maxFractionDigits: 0, // maximal number of fraction digits
    groupingEnabled: false, // enable grouping (show the grouping separators)
    groupingSeparator: ",", // the used grouping separator
    decimalSeparator: "." // the used decimal separator
});

Integer类型支持minimummaximum约束。先看一个例子:

var oData = {
    product: {
        id: "1",
        product_name: "泸州老窖 国窖 1573 52度",
        price: "4199"
    }
};

var oModel = new sap.ui.model.json.JSONModel(oData);
sap.ui.getCore().setModel(oModel);  

var oIntType = new sap.ui.model.type.Integer({
    groupingEnabled: true
});         

var oInput = new sap.m.Input({
    value: {
        path: "/product/price",
        type: oIntType
    }
});

oInput.placeAt("content");

因为定义了数据类型为Integer,并且groupingEnabled设为true,所以页面中数据显示为4,199

现在我们将sap.m.Input控件绑定到model的product/id,看看minIntegerDigits格式选项的作用。

var oIntType = new sap.ui.model.type.Integer({  
    minIntegerDigits: 5,
    maxIntegerDigits: 8
});         

var oInput = new sap.m.Input({
    value: {
        path: "/product/id",
        type: oIntType
    }
});

显示为00001

sap.ui.model.type.Float

Float表示浮点数。初始化的属性与约束与Integer类似。可以使用decimalSeparator定义小数位的分隔符。

sap.ui.model.type.String

String用于表示字符串,初始化语法示例:

var oStrType = new sap.ui.model.type.String(null, {maxLength: 5});

String支持以下校验约束:

  • maxLength (expects an integer number)
  • minLength (expects an integer number)
  • startsWith (expects a string)
  • startsWithIgnoreCase (expects a string)
  • endsWith (expects a string)
  • endsWithIgnoreCase (expects a string)
  • contains (expects a string)
  • equals (expects a string)
  • search (expects a regular expression)

sap.ui.model.type.Date

Date的显示存在比较大的文化和语言差异。ui5支持原数据为JavaScript和原数据为String的日期数据进行格式输出。以下示例演示了格式设置的方法:

// application data 
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
    dateValue: new Date(2006,0,12,22,19,35), // 2006.1.12
    dateString: "2006/1/12"
});
sap.ui.getCore().setModel(oModel);      

// 显示日期
new sap.ui.layout.VerticalLayout({
    content: [
        //不设置格式选项,系统自动确定
        new sap.m.Text({
            text:{path:"/dateValue",
                type: new sap.ui.model.type.Date()}
        }),
        
        // 使用pattern, 输出为yy-MM-dd
        new sap.m.Text({
            text:{path:"/dateValue",
                type: new sap.ui.model.type.Date({
                    pattern: "yy-MM-dd"
                })}
        }),
        
        // 加上星期
        new sap.m.Text({
            text:{path:"/dateValue",
                type: new sap.ui.model.type.Date({
                    pattern: "EEEE, yyyy MMM d"
                })}
        }),
        
        // 原数据是字符串
        // 用style控制显示的格式,可以为short,medium(defalut),long和full
        new sap.m.Text({
            text:{path:"/dateString",
                type: new sap.ui.model.type.Date({
                    source: {pattern: "yyyy/MM/dd"}, style: "full"
                })}
        }),
        
        // 原数据是字符串,用pattern控制显示
        new sap.m.Text({
            text:{path:"/dateString",
                type: new sap.ui.model.type.Date({
                    source: {pattern: "yyyy/MM/dd"}, pattern: "yyyy-MM-dd"
                })}
        }),
        
        // 原数据是字符串,格式依据locale设定
        new sap.m.Text({
            text:{path:"/dateString",
                type: new sap.ui.model.type.Date({
                    source: {}, pattern: "yyyy-MM-dd"
                })}
        }),
        
    ] // content array
}).placeAt("content");  

json数据中,dateValue是JavaScript的Date类型,dateString是String类型。程序的输出效果:

sap.ui.model.type.Time

sap.ui.model.type.Time表示时间(没有日期)。和Date类似,Time也支持原数据为Time类型或者字符串类型,通过style或者pattern设置输出的显示格式。

        // application data 
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            timeValue: new Date(2006,0,12,22,19,35), // 2006.1.12
            timeString: "22:19:35"
        });
        sap.ui.getCore().setModel(oModel);      
        
        // 显示时间
        new sap.ui.layout.VerticalLayout({
            content: [
                //不设置格式选项,系统自动确定
                new sap.m.Text({
                    text:{path:"/timeValue",
                        type: new sap.ui.model.type.Time()}
                }),
                
                // 使用pattern, 输出为hh:mm:ss
                new sap.m.Text({
                    text:{path:"/timeValue",
                        type: new sap.ui.model.type.Time({
                            pattern: "hh:mm:ss"
                        })}
                }),             

                
                // 数据源是字符串
                // 用style控制显示的格式,可以为short,medium(defalut),long和full
                new sap.m.Text({
                    text:{path:"/timeString",
                        type: new sap.ui.model.type.Time({
                            source: {pattern: "hh:mm:ss"}, style: "short"
                        })}
                }),
                
                // 数据源是字符串,用pattern控制显示
                new sap.m.Text({
                    text:{path:"/timeString",
                        type: new sap.ui.model.type.Time({
                            source: {pattern: "hh:mm:ss"}, pattern: "hh 时 mm 分 ss 秒"
                        })}
                }),
                
                // 数据源是字符串,输入格式依据locale
                new sap.m.Text({
                    text:{path:"/timeString",
                        type: new sap.ui.model.type.Time({
                            source: {}, pattern: "hh:mm a"
                        })}
                }),
                
            ] // content array
        }).placeAt("content");      

输出页面:

sap.ui.model.type.DateTime

DateTime同时包括Date和Time。使用的方法与Date类似。

        // application data 
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            dateValue: new Date(2006,0,12,22,19,35), // 2006.1.12
            dateTimeString: "2006/1/12 12:19:35"
        });
        sap.ui.getCore().setModel(oModel);      
        
        // 显示DateTime
        new sap.ui.layout.VerticalLayout({
            content: [
                //pattern,源数据为javascript Date
                new sap.m.Text({
                    text:{
                        path:"/dateValue",
                        type: new sap.ui.model.type.DateTime({
                            pattern: "yyyy/MM/dd, HH:mm:ss.SSS"
                        })
                    }
                }),
                
                // 原数据为字符串, 自定义输出格式
                new sap.m.Text({
                    text:{path:"/dateTimeString",
                        type: new sap.ui.model.type.DateTime({
                            source: {pattern: "yyyy/MM/dd HH:mm:ss"}, 
                            pattern: "'Year:' yyyy 'Month:' MMMM 'Day:' dd ',' ss 'Sec.' mm 'Min.' HH 'Hours'"
                        })
                   }
                }),
                
                // 数据源是字符串
                // 用style控制显示的格式,可以为short,medium(defalut),long和full
                new sap.m.Text({
                    text:{path:"/dateTimeString",
                        type: new sap.ui.model.type.DateTime({
                            source: {pattern: "yyyy/MM/dd hh:mm:ss"}, style: "medium"
                        })}
                }),                 

            ] // content array
        }).placeAt("content");  

页面输出:

参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容