HTML5开发BB10应用学习笔记

3012727 / BBUI

学习分享

0 stars 0 forks source link

HTML5开发BB10应用学习笔记 #1

Open 3012727 opened 10 years ago

3012727 commented 10 years ago

HTML5开发BB10应用学习笔记 BBUI基本样式（SDK1.0）

注：！为使文档正常显示添加

以下是作为自已学习的笔记，仅仅用作交流和参考。

软件简单结构图

加载效果渐出 <!div data-bb-type="screen" data-bb-effect="fade" > 从左滑入 ……data-bb-effect="slide-left" …… 从右滑入 ……slide-right…… 向上滑入 ……slide-up…… 向下滑入 ……slide-down……

标题一般标题 <!div data-bb-type="title" data-bb-caption="标题" >

带返回的标题 <!div data-bb-type="title" data-bb-caption="标题" data-bb-back-caption="Back" >

内容列表形排列 <!div data-bb-type="image-list" > <!div data-bb-type="item" data-bb-img="zr.png" data-bb-title="自然" onclick="bb.pushScreen('4.html', '4');">nature

<!div data-bb-type="item" data-bb-img="gy.png" data-bb-title="怪异" onclick="bb.pushScreen('7.html', '7');">weird ……

图列形 <！div data-bb-type="grid-layout" data-bb-style="square"> <！div data-bb-type="row"> <！div data-bb-type="item" data-bb-img="01.png" data-bb-title="德州扑克" onclick="javascript:location.href='http://html5.boyaa.com/texas/pf/bypass'">
<！div data-bb-type="item" data-bb-img="02.png" data-bb-title="斗地主" onclick="javascript:location.href='http://html5.boyaa.com/ddz/pf/bypass'">
<！div data-bb-type="item" data-bb-img="03.png" data-bb-title="四川麻将" onclick="javascript:location.href='http://html5.boyaa.com/mahjong/pf/bypass'"> 一行（row）的数量可以根据需要添加

线条与文字 <！div data-bb-type="round-panel"> <！div data-bb-type="panel-header">请输入信息（不必全填）

按钮 <！div data-bb-type="button" onclick="getQRCode()" >生成二维码

底部 <！div data-bb-type="action-bar">

带返回的底部 <！div data-bb-type="action-bar" data-bb-back-caption="Back">

带主菜单的底部 <！div data-bb-type="action-bar"> <！div onclick="bb.pushScreen('1.html', '1');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">工作犬 <！div onclick="bb.pushScreen('2.html', '2');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">牧羊犬 <！div onclick="bb.pushScreen('3.html', '3');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">玩赏犬 <！div onclick="bb.pushScreen('4.html', '4');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">梗类犬 <！div onclick="bb.pushScreen('5.html', '5');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">狩猎犬 <！div onclick="bb.pushScreen('6.html', '6');" data-bb-type="action" data-bb-style="tab" data-bb-selected="false" data-bb-overflow="true" data-bb-img="images/1.png">猎枪犬

带按钮的底部 <！div data-bb-type="action-bar"> <！div onclick="app.getCurrentWeather();" id="btnCurWeather" data-bb-type="action" data-bb-selected="true" data-bb-style="button" data-bb-img="images/icons/today.png" data-bb-selected="true">Today <！div onclick="app.getTomorrowsWeather();" id="btnTmwWeather" data-bb-type="action" data-bb-style="button" data-bb-img="images/icons/tomorrow.png">Tomorrow <！div onclick="app.get7DaysWeather();" id="btn7DaysWeather" data-bb-type="action" data-bb-style="button" data-bb-img="images/icons/sevendays.png">Next 7 days

带次级目录的底部 <！div data-bb-type="action-bar"> <！div onclick="addCity.getLocation();" id="btngetLocation" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="images/icons/location.png">Use current location <！div onclick="showScreen.addCity();" id="btnaddCity" data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="images/icons/add.png">Add a city

加载一般样式 <！div data-bb-type="activity-indicator" id="indicator" data-bb-size="medium" style="margin:0 auto">

美化样式

<！div data-bb-type="activity-indicator" id="indicator" data-bb-size="medium" style="margin:0 auto">

3012727 commented 10 years ago

下滑菜单

<!div data-bb-type="menu"> <!div onclick="bb.pushScreen();" data-bb-type="menu-item" data-bb-img="images/icons/about.png" data-bb-pin="left">About

<!div data-bb-type="menu-item" data-bb-img="images/icons/ic_browser.png" onclick="rateit()">Rate

<!div data-bb-type="menu-item" data-bb-img="images/icons/youjian.png" onclick="email()">E-mail <!div data-bb-type="menu-item" data-bb-img="images/icons/ic_all.png" onclick="more()">More App <!div data-bb-type="menu-item" data-bb-img="images/icons/ic_all.png" onclick="bbutils.loadShareCard()">share

评分 function rateit(){ blackberry.invoke.invoke({ target: "sys.appworld", action: "bb.action.OPEN", uri: "appworld://content/" + id }, null, null); } 邮箱 function email() { blackberry.invoke.card.invokeEmailComposer({ subject: "musicapp", body: "hello", to: ["tk74508@126.com"],

}, 
function(success) {
}, 
function (cancel) {
},
function (error) {
} 
);

}

调用浏览器打开网址 function weibo() { blackberry.invoke.invoke({ target: "sys.browser", uri: "http://xxxxxx" }, null, null); }

更多应用 function more() { blackberry.invoke.invoke({ target: "sys.appworld", action: "bb.action.OPEN", uri: "http://appworld.blackberry.com/webstore/vendor/开发者id" }, null, null); } 分享 var bbutils = {

loadShareCard : function() { // Load the share card

request = {
  action : 'bb.action.SHARE',
  target_type : ["APPLICATION", "VIEWER", "CARD"], 可选
  mime : "text/plain",
  data : "xxxxx（分享的内容，因为与数字）xxx"
}

blackberry.invoke.card.invokeTargetPicker(request, "share",

// success
// success
    function() {},

    // error
    function(e) {
        console.log(e);
    });

} }

消息窗样式一 function showToast1() { var message = 'This is a simple Toast'; blackberry.ui.toast.show(message);
}

样式二 function showToast2() { var message = 'This is my toast!', buttonText = 'Click Me', toastId,

   onButtonSelected = function () {
      alert('Button was clicked for toast: ' + toastId);
   },
   onToastDismissed = function () {
      alert('Toast disappeared: ' + toastId);
   };
   options = {
     buttonText : buttonText,
     buttonCallback : onButtonSelected,
     dismissCallback : onToastDismissed
   };

toastId = blackberry.ui.toast.show(message, options);
}

长按选项卡 var myItem = { actionId: 'MyCustomAction', label: 'Make it rain!', icon:'../images/rain.png' }, contexts = [blackberry.ui.contextmenu.CONTEXT_IMAGE]; blackberry.ui.contextmenu.addItem(contexts, myItem, function() { showToast('You made it rain!'); });

文件分享

文档 function shareDoc() { var type = 'doc'; var details = { mode: blackberry.invoke.card.FILEPICKER_MODEPICKER, filter: [".pdf", ".txt", ".doc", "_.log"] }; invokeFilePicker(details, type); }

音乐 function shareMusic() { var type = 'music'; var details = { mode: blackberry.invoke.card.FILEPICKER_MODEPICKER, filter: [".wav", "_.mp3"] }; invokeFilePicker(details, type); }

视频 function shareVideo() { var type = 'video'; var details = { mode: blackberry.invoke.card.FILEPICKER_MODEPICKER, filter: [".mp4", "_.m4v"] }; invokeFilePicker(details, type); }

function invokeFilePicker(details, type) { blackberry.invoke.card.invokeFilePicker(details, function(path) {

    // image
    if(type === 'image') {
        var title = "Share Image";
        var request = {
            action: 'bb.action.SHARE',
            uri: 'file://' + path,
            target_type: ["CARD"]
        };
        loadShareCard(title, request);

    // document
    } else if(type === 'doc') {
        var title = "Share Document";
        var request = {
            action: 'bb.action.SHARE',
            uri: 'file://' + path,
            target_type: ["APPLICATION", "VIEWER"]
        };
        loadShareCard(title, request);

    // music
    } else if(type === 'music') {
        var title = "Share Music";
        var request = {
            action: 'bb.action.SHARE',
            uri: 'file://' + path,
            target_type: ["APPLICATION", "VIEWER", "CARD"]
        };
        loadShareCard(title, request);

    // video
    } else if(type === 'video') {
        var title = "Share Video";
        var request = {
            action: 'bb.action.SHARE',
            uri: 'file://' + path,
            target_type: ["APPLICATION", "VIEWER", "CARD"]
        };
        loadShareCard(title, request);
    }
},

// cancelled filepicker
function(reason) {
    alert("cancelled " + reason);

// filepicker error
}, function(error) {
    if(error) {
        alert("invoke error " + error);
    } else {
        console.log("invoke success ");
    }
});

}

// load the share card function loadShareCard(title, request) { blackberry.invoke.card.invokeTargetPicker(request, title, // success function() {},

// error
function(e) {
    console.log(e);
});

}