bada千字文应用程序开发教程

最新推荐文章于 2024-08-10 16:52:53 发布
置顶 最新推荐文章于 2024-08-10 16:52:53 发布
阅读量863 收藏
点赞数
分类专栏： bada 文章标签： 程序开发 bada listview button ui 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/badaeva/article/details/7405497
版权

千字文bada应用程序开发教程

 

概述：

“千字文”是一个电子书应用程序，将中国传统的《千字文》做到了bada平台上，方便广大的bada手机用户随时随地阅读学习。

 

“千字文”应用程序能显示汉字，拼音和汉字+拼音三种形式的内容，还配有相应的译文显示和朗读功能。

这篇教程就是给大家演示这个程序是如何开发出来的，主要包括应用程序中的设计模式、界面部分、播放功能部分和事件处理模块的实现。

 

1，”千字文”中的设计模式

Provider模式

在这个程序中可以通过点击”内容切换”按钮来分别显示汉字，拼音和汉字+拼音三种形式的内容。利用bada平台提供的接口很容易就能够采用Provider模式来实现这个功能。Provider模式被用于提供不同的数据模式，这样可以将不同的

Osp::Ui::Controls::ListView中通过SetItemProvider(constIListViewItemProvider &provider)函数来为ListView设置显示内容的Provider。这样可以将UI显示和数据部分分开，我们可以利用IListViewItemProvider来实现Provider模式。分别用3个类QianZiWenHanZiContentProvier,QianZiWenPinYinContentProvider和QianZiWenAllContentProvider来分别提供汉字，拼音和汉字+拼音三种内容，每个类都是继承实现了IListViewItemProvider接口类的。这样每次只需要通过调用SetItemProvider(constIListViewItemProvider &provider)来设置不同的Provider然后刷新ListView就可以了。后续如果还有其它形式的内容需要添加的话，只需要继承实现IListViewItemProvider就可以了。

拿提供汉字的Provider举例，其它的Provider和它类似。

classQianZiWenHanZiContentProvider:

    public Osp::Ui::Controls::IListViewItemProvider

{

public:

    QianZiWenHanZiContentProvider();

    virtual~QianZiWenHanZiContentProvider();

 

public:

    virtualintGetItemCount(void);

    virtual Osp::Ui::Controls::ListItemBase*CreateItem(int index,int itemWidth);

    virtualboolDeleteItem(int index, Osp::Ui::Controls::ListItemBase* pItem,int itemWidth);

};

在监听到”切换内容”事件时替换Provider并刷新界面就可以了。

void

QianZiWenDisplayForm::ChangeContentType()

{

    if(__contentStyle ==CONTENT_STYLE_HANZHI)

    {

       delete__pContentProvider;

       __pContentProvider = NULL;

 

       __pContentProvider =new QianZiWenPinYinContentProvider();

       __pListPanel->SetContentProvider(__pContentProvider);

       __pListPanel->UpdateDisplayPanel();

 

       __contentStyle =CONTENT_STYLE_PINYIN;

    }

    elseif(__contentStyle ==CONTENT_STYLE_PINYIN)

    {

       delete__pContentProvider;

       __pContentProvider = NULL;

 

       __pContentProvider =new QianZiWenAllContentProvider();

       __pListPanel->SetContentProvider(__pContentProvider);

       __pListPanel->UpdateDisplayPanel();

 

       __contentStyle =CONTENT_STYLE_ALL;

    }

    elseif(__contentStyle ==CONTENT_STYLE_ALL)

    {

       delete__pContentProvider;

       __pContentProvider = NULL;

 

       __pContentProvider =new QianZiWenHanZiContentProvider();

       __pListPanel->SetContentProvider(__pContentProvider);

       __pListPanel->UpdateDisplayPanel();

 

       __contentStyle =CONTENT_STYLE_HANZHI;

    }

}

 

2，”千字文”中的界面实现

(1)     Footer

创建Footer,

void

QianZiWenDisplayForm::CreateFooter()

{

    //Creat the footer items

    Footer* pFooter =GetFooter();

    pFooter->SetStyle(FOOTER_STYLE_BUTTON_TEXT);

 

    FooterItem switchItem;

    switchItem.Construct(ID_BUTTON_SWITCH);

    switchItem.SetText(L"切换内容");

    pFooter->InsertItemAt(INDEX_BUTTON_SWITCH,switchItem);

 

    FooterItem playItem;

    playItem.Construct(ID_BUTTON_PLAY);

    playItem.SetText(L"播放");

    pFooter->InsertItemAt(INDEX_BUTTON_PLAYER,playItem);

 

    FooterItem helpItem;

    helpItem.Construct(ID_BUTTON_HELP);

    helpItem.SetText(L"帮助");

    pFooter->InsertItemAt(INDEX_BUTTON_HELP,helpItem);

 

    pFooter->AddActionEventListener(*this);

}

其中用于控制播放器的”播放”和”暂停”按钮需要进行状态的改变，由播放转变成暂停，再由暂停转变成播放。这时需要进行改变和更新。

void

QianZiWenDisplayForm::ChangeToPause()

{

    //Change the footer item

    Footer* pFooter =GetFooter();

 

    FooterItem pauseItem;

    pauseItem.Construct(ID_BUTTON_PAUSE);

    pauseItem.SetText(L"暂停");

    pFooter->SetItemAt(INDEX_BUTTON_PLAYER,pauseItem);

 

    pFooter->RequestRedraw();

}

 

void

QianZiWenDisplayForm::ChangeToPlay()

{

    //Change the item

    Footer* pFooter =GetFooter();

    FooterItem playItem;

    playItem.Construct(ID_BUTTON_PLAY);

    playItem.SetText(L"播放");

    pFooter->SetItemAt(INDEX_BUTTON_PLAYER,playItem);

 

    pFooter->RequestRedraw();

}

(2)Panel和ListView

“千字文”程序中没有直接将ListView添加到Form当中，而是根据Form的客户区域创建了一个Panel并添加到Form当中，然后在Panel中创建ListView并将Panel设置为其容器类控件。

创建Panel

classQianZiWenDisplayPanel :

    public Osp::Ui::Controls::Panel

{

public:

    QianZiWenDisplayPanel(Osp::Ui::Controls::IListViewItemEventListener* pListener,Osp::Ui::ITouchEventListener* pTouchListener);

    virtual~QianZiWenDisplayPanel();

 

public:

    virtualresultOnInitializing(void);

    virtualresultOnTerminating(void);

    virtualresultOnDraw();

 

public:

    voidSetContentProvider(Osp::Ui::Controls::IListViewItemProvider* pProvider);

    voidUpdateDisplayPanel();

    intGetItemIndexFromPosition(const Osp::Graphics::Point& position);

 

private:

    //Own

    Osp::Graphics::Bitmap*__pBgBmp;

    Osp::Ui::Controls::ListView*__pContentList;

 

    //Not Own

    Osp::Ui::Controls::IListViewItemProvider*__pContentProvider;

 

    //Not Own

    Osp::Ui::Controls::IListViewItemEventListener*__pListListener;

 

    //Not Own

    Osp::Ui::ITouchEventListener*__pTouchListener;

};

 

在Panel中创建ListView

resultQianZiWenDisplayPanel::OnInitializing(void)

{

    result r = E_SUCCESS;

 

    SetBackgroundColor(Color::COLOR_WHITE);

 

    //Get the background bitmap

    AppResource* pAppRes =Application::GetInstance()->GetAppResource();

    __pBgBmp = pAppRes->GetBitmapN(L"bg.png");

 

    //Create the List

    __pContentList =newListView();

    Rectangle rec =GetBounds();

    __pContentList->Construct(rec,true,false);

    __pContentList->SetItemProvider(*__pContentProvider);

    __pContentList->AddListViewItemEventListener(*__pListListener);

    __pContentList->AddTouchEventListener(*__pTouchListener);

 

    AddControl(*__pContentList);

 

    return r;

}

 

3，”千字文”中的播放功能

“千字文”中一个重要的功能就是当长按某一项时，播放器就从这一项开始播放。这个功能的实现是利用了Osp::Media::Player的SeekTo (long msTime)函数，调用SeekTo()函数跳转到对应的播放点开始播放就可以了。所以实现这个功能最麻烦的地方就是要在音频文件中通过手工的方式找到每项的播放时间，记住转换为毫秒。

这就是每项的句子对应的起始时间点：

//The starting positon of each sentence in the audio file

//Change the positon value(hh:mm:ss) to milliseconds

 

constint StartPosition[ListItemCount] =

{

       3000,//1

       8000,

       13000,

       18000,

         ……

};

看一下代码实现：

void

QianZiWenDisplayForm::OnListViewItemLongPressed(Osp::Ui::Controls::ListView &listView,int index,int elementId,bool& invokeListViewItemCallback)

{

    int position = StartPosition[index];

    __pAudioPlayer->SeekTo(position);

}

 

由于SeetkTo是一个异步调用的过程，所以需要在相应的完成回调函数中调用Player进行播放。

void

QianZiWenDisplayForm::OnPlayerSeekCompleted(result r )

{

    AppLog("OnPlayerSeekCompleted");

    if(r == E_SUCCESS)

    {

       AppLog("OnPlayerSeekCompleted Success");

       if(__pAudioPlayer->GetState() == PLAYER_STATE_PAUSED)

       {

           __pAudioPlayer->Play();

 

           //Change the item

           ChangeToPause();

       }

    }

}

 

4，”千字文”中的事件处理

程序中用QianZiWenDisplayForm类继承实现了所有的接口了，包括有Osp::Ui::IActionEventListener,Osp::Ui::Controls::IListViewItemEventListener,Osp::Media::IPlayerEventListener,Osp::Ui::ITouchEventListener,这样做的好处就是可以将事件处理和UI的现实部分进行分离，单独拿出一个类来进行事件处理，比起将事件处理分散在各个类分别进行处理更易于管理。也符合MVC中的View和Controller分离的原则。所以QianZiWenDisplayForm扮演了一个Controller的角色。

 

详细的技术点大家可以参考源代码。

可以去这里将word文档下下来：http://download.csdn.net/detail/badaeva/4182008

 

badaeva
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
千字文bada应用程序
03-29
这个应用程序将整篇千字文古文分为125行，每行2句，非常符合用户的阅读习惯。 每行古文都配有对应的注释，可以通过双击某行来显示和隐藏译文。 文章同时提供了汉字，拼音和汉字+拼音三种阅读模式。满足用户的需求。 ...
bada千字文应用程序简介
badaeva的专栏
03-29 412
千字文应用程序简介： 这个应用程序将整篇千字文古文分为125行，每行2句，非常符合用户的阅读习惯。 每行古文都配有对应的注释，可以通过双击某行来显示和隐藏译文。 文章同时提供了汉字，拼音和汉字+拼音三种阅读模式。满足用户的需求。 还为文章提供了录音，用户可以通过双击某行来从这行开始进行播放。同时可以通过下面的“播放”和“暂停”按钮对播放过程进行控制。     各位bada爱好者可
主流html5桌面应用开发,主流HTML5开发工具推荐
weixin_35698059的博客
06-02 1017
HTML5开发工具推荐HTML5被看做是web开发者创建流行web应用的利器，增加了对视频和Canvas 2D的支持。HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来，如Adobe的Flash和微软的Silverlight，HTML5为实现这些插件的功能提供了一种标准化的方式。HTML5自诞生以来，作为新一代的Web标准，越来越受开发人员及设计师的欢迎。其强大的兼容性，一次开发，到处使用...
bada打地鼠应用程序简介
badaeva的专栏
06-04 419
bada打地鼠应用程序简介 打地鼠是一款深受用户喜爱的小游戏。 玩家需要在规定的时间内点击屏幕上冒出来的地鼠。击中的次数越多则得分越高。 游戏会将玩家的最高得分纪录进行保存。     大家可以去这里下载源码：http://download.csdn.net/detail/badaeva/4351409 不明白的地方可以发邮件给我：chenkuanyi@qq.com
Apache Cordova Bada 项目教程
gitblog_00770的博客
08-07 230
Apache Cordova Bada 项目教程 cordova-bada[DEPRECATED] Apache Cordova bada项目地址:https://gitcode.com/gh_mirrors/co/cordova-bada 项目介绍 Apache Cordova Bada 是一个已弃用的开源项目，旨在为三星 Bada 操作系统提供移动应用开发框架。尽管该项目已被弃用，但它仍然可...
Apache Cordova bada wac 项目教程
gitblog_01155的博客
08-07 335
Apache Cordova bada wac 项目教程 cordova-bada-wac[DEPRECATED] Apache Cordova bada wac项目地址:https://gitcode.com/gh_mirrors/co/cordova-bada-wac 项目介绍 Apache Cordova bada wac 是一个已废弃的项目，用于在 bada 操作系统上开发移动应用。尽管...
Apache Cordova bada WAC 开发指南
gitblog_00330的博客
08-07 302
Apache Cordova bada WAC 开发指南 cordova-bada-wac[DEPRECATED] Apache Cordova bada wac项目地址:https://gitcode.com/gh_mirrors/co/cordova-bada-wac 目录结构及介绍 Apache Cordova bada WAC 的项目目录结构如下： ├── application.xml...
Bada学习-应用模块
iteye_3522的博客
10-28 137
应用模块                             bada应用模型主要处理应用的生命周期以及系统事件,包括:   1.bada的多任务处理   2.应用的生命周期   bada平台支持一下应用类型   1.基础应用 它们存储在ROM中,不能使用应用管理器删除.例如包好奇,联系人,照相机,音乐播放器等.   2.bada应用 是指那些可安装可移除的应用.在...
bada应用程序转换到Tizen的应用程序迁移工具安装
weixin_30892037的博客
04-30 64
) bada应用程序想要转换到Tizen，必须安装迁移工具。 Tizen的bada迁移工具附加SDK可以将bada应用程序转换到Tizen的应用O​​SP-可以选择兼容模式。 要安装迁移工具： 1。运行Tizen的安装管理器（位于/ Tizen的SDK安装管理器文件夹中）， 2。选择安装或更新Tizen的SDK，并单击“下一步”。 ...
[Tizen开发]Bada应用程序转换到Tizen应用程序-迁移工具安装方法
weixin_30730151的博客
06-04 189
Bada应用程序想要转换到Tizen，必须安装迁移工具。 Tizen的Bada迁移工具附加SDK可以将Bada应用程序转换到Tizen的应用OSP-可以选择兼容模式。 要安装迁移工具： 1. 运行Tizen的安装管理器（位于/ Tizen的SDK安装管理器文件夹中）; 2. 选择安装或更新Tizen的SDK，并单击“下一步”; 3. 点击额外的库和添加; 4. 输入值的名称和库...
三星bada平台基础入门教程
07-23
教程名称：三星bada平台基础入门教程课程目录：【】bada guild for developer, which using enlightenment e17. software render【】bada文档和相关代码【】bada（三星八达）API【】Introduction-to-Bada-Toc【】...
Android应用开发-智能手机OS.pptx
12-09
【Android应用开发】 在智能手机操作系统领域，Android应用开发占据着重要的地位。Android是由Google公司主导的开源项目，它基于Linux内核，为各种设备提供了一个开放且灵活的操作平台，尤其是智能手机和平板电脑。...
【Material-UI】Checkbox组件：受控模式详解
lph159的博客
08-08 755
在React中，表单组件（如inputselecttextarea等）可以分为受控组件和非受控组件。受控组件的值由React的状态（state）管理，表单控件的值会通过状态的变化而更新。受控组件的优势在于它们的行为完全受React组件逻辑控制，使得开发者可以更精细地管理用户输入和表单状态。在Material-UI中，Checkbox组件同样可以被配置为受控组件，这使得开发者能够通过React状态来精确控制复选框的选中与未选中状态。
【Rust光年纪】构建高效终端用户界面：Rust库全面解析
记录我的学习历程
08-09 709
本文将重点介绍六个在Rust语言中常用的终端操作库和用户界面构建库，分别是`termion`、`cursive`、`Crossterm`、`tui`、`pancurses`和`console`，通过对它们的核心功能、使用场景、安装与配置方法以及API概览的详细介绍，帮助读者快速了解并选取适合自己项目需求的库进行开发工作。
Knife4j的介绍与使用
最新发布
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
08-10 459
通过集成Knife4j，开发人员可以轻松地在Spring Boot应用程序中生成详细的API文档。它提供了友好的界面和丰富的功能，如文档搜索、在线测试和数据模拟等。开发人员可以通过简单的配置和注解来定制API文档的生成规则。
【Vue3】图片未加载成功前占位
菜就多练
08-08 306
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值