- 浏览: 3518590 次
- 性别:
- 来自: 大连
博客专栏
-
使用Titanium Mo...
浏览量:37585
-
Cordova 3.x入门...
浏览量:604664
-
常用Java开源Libra...
浏览量:678533
-
搭建 CentOS 6 服...
浏览量:87575
-
Spring Boot 入...
浏览量:400063
-
基于Spring Secu...
浏览量:69133
-
MQTT入门
浏览量:90649
文章分类
最新评论
-
afateg:
阿里云的图是怎么画出来的?用什么工具?
各云服务平台的架构图 -
cbn_1992:
博主,采用jdbctoken也就是数据库形式之后,反复点击获取 ...
Spring Security OAuth2 Provider 之 数据库存储 -
ipodao:
写的很是清楚了,我找到一份中文协议:https://mcxia ...
MQTT入门(6)- 主题Topics -
Cavani_cc:
还行
MQTT入门(6)- 主题Topics -
fexiong:
博主,能否提供完整源码用于学习?邮箱:2199611997@q ...
TensorFlow 之 构建人物识别系统
使用Titanium Mobile开发iPhone/Android应用(03)- Twitter客户端之页面调整
- 博客分类:
- Titanium
美化Twitter客户端
上回中,我们坐了一个把自己的Tweeter表示出来的页面,这只仅仅是把Tweet的正文并排放在页面上而已,这回我们要把从Twitter取的情报中的Tweeter时间,用户名,用户头像信息也表示出来。这篇中我们要说或如何将页面美化。
那么我们就尽早进入修改代码,修改前回做好的updateTimeLine函数。首先,在做成的页面功能的基础上,确认各个技能。
启动Titanium的开发环境就能看到以下页面。
还不是特别的好,初步表示出了Twitter的TimeLine。那么页面机能部分我们一点点的说明一下。
Window和View
在Titanium中,把盖住整个页面的对象叫:“window”,可以考虑成Javascript的DOM中的Window,也可以作为iOS SDK的UIWindow考虑。在window上还可以放置多个view,而且在view上还可以在重叠放置view,上回我们说的Ti.UI.TableView和Ti.UI.TableViewRow也都是view的一种。这个view跟iOS SDK中的UIView基本相同。
关于view的布局,跟使用CSS调整HTML布局很相似,也能设定Titanium的view的布局。
可以通过width和hight来指定view的大小,通过top, buttom, right, left来指定view的位置,以及font的指定,文件颜色的设置等都可以同样设置。
布局基准
使用CSS对HTML进行布局调整,能够选择使用static, relative等来指定position的基准。同样,Titanium中基准位置,view的放置方法也有2中可以选择。
(1)什么也没有设置的时候
默认的处理是,把父view作为Ti.UI.TableViewRow的坐标基准, 明确指定的话,需要设置为:layout: 'absolute'。设置top的属性值,可以指定计算TableViewRow从上部往下的像素数,right, left, bottom分别是右端,左端,下部的像素数。
vertical
layout参数中设成vertical的话,并不是绝对位置的意思,而是设定了往TableViewRow中追加view的基准。
刚才的代码我们试着变一下:
变成这样的代码后,大眼一看是没什么变化的。但是在设定vertical之间追加指定了view的top基准。top中也可以设置成负数,使用vertical可以做很细微的页面的调整。不要考虑计算各个view的绝对位置就能够布局页面,指定vertical就能够很方便的修改页面布局了。
(2)设置成auto
当height中设置成 'auto' 的时候,他也能自动调整高度把表示内容全部显示出来。上面的例子中height参数的值全部设置成'auto'(但是ImageView的height除外)之后,将会看到一下页面:
这种也是很方便的布局调整方法。
显示图像
使用ImageView来表示Twitter的用户头像部分。ImageView是很方便的一个View,只需要指定url后就能显示出来图像。不是是表示http开始的网络图像,Project内部保存的图像也能显示。下边的代码就是显示Project中图像的例子。
分割代码
直到这里我们编写的所有代码就集中在一个文件中,这样文件就变得很长。很长大代码集中在一个文件中,不只是看起来不好,调试也变的很困难,我们需要分割文件。
Titanium中有好几种分割文件的方法,这里我们说一下指定文件做成window并且打开的方法。以window为单位能够把代码分割开来,也能很简单的按照机能把代码分割。
截止到编写的app.js我们分割成以下两个文件。
app.js的内容还原到最初的例子代码,画表格的机能移到新作的table_view.js当中。需要主要看的一点是,app.js的createWindow的参数中,url的指定方法。使用这个方法可以在新的window中打开指定的JavaScript文件。
还有一个需要注意的是,在新作的table_view.js文件中,
这段代码是追加到最开始的。分割前的代码中,我们可以看到是把view追加到了全局变量为win1的window中。然后分割后的代码就不在使用这个变量了。在使用createWindow指定的文件的代码中,打开window的父文件中的变量是不能使用的。具体来说就是,在table_view.js中是不能访问app.js中定义的变量的。
在那里,需要改变成,使用currentWindow参数来获取当前window,然后追加view。
其他文件当中的变量不能使用的话,也就是说scope发生了改变。分离每个window当中的变量是很方便的结构。那么从一个window到一个window数据的传递就需要费点儿事了。这个基本上没有什么大的问题,从此以后开发过程中,做成新的window的时候要积极地分割成多个文件。
总结
这回我们说了一下Window和View的关系以及布局的调整方法。而且在后半部分还说了一下开发过程中把文件分割成多个文件的方法。下一回我们将说一下使用OAuth来调用API,朝着做一个像样的Twitter客户端方向编写代码。
上回中,我们坐了一个把自己的Tweeter表示出来的页面,这只仅仅是把Tweet的正文并排放在页面上而已,这回我们要把从Twitter取的情报中的Tweeter时间,用户名,用户头像信息也表示出来。这篇中我们要说或如何将页面美化。
那么我们就尽早进入修改代码,修改前回做好的updateTimeLine函数。首先,在做成的页面功能的基础上,确认各个技能。
function updateTimeline (timeline) { var currentData = []; for (var i=0;i<timeline.length;i++) { var tweet = timeline[i]; //变更开始 var row = Ti.UI.createTableViewRow( { height: 150, layout: 'absolute' } ); var imageView = Ti.UI.createImageView( { image: tweet.user.profile_image_url, width: 48, height: 48, top: 5, left: 5 } ); row.add(imageView); var nameLabel = Ti.UI.createLabel( { width: 120, height: 12, left: 58, top: 5, fontSize: 6, fontWeight: 'bold', color: '#2b4771' } ); nameLabel.text = tweet.user.screen_name; row.add(nameLabel); var commentLabel = Ti.UI.createLabel( { width: 257, left: 58, top: 18, height: 100, fontSize: 8 } ); commentLabel.text = tweet.text; row.add(commentLabel); var dateLabel = Ti.UI.createLabel( { width: 200, height: 12, left: 58, bottom: 8, fontSize: 6 } ); dateLabel.text = tweet.created_at; row.add(dateLabel); //变更结束 currentData.push(row); } tableView.setData(currentData); }
启动Titanium的开发环境就能看到以下页面。
还不是特别的好,初步表示出了Twitter的TimeLine。那么页面机能部分我们一点点的说明一下。
Window和View
在Titanium中,把盖住整个页面的对象叫:“window”,可以考虑成Javascript的DOM中的Window,也可以作为iOS SDK的UIWindow考虑。在window上还可以放置多个view,而且在view上还可以在重叠放置view,上回我们说的Ti.UI.TableView和Ti.UI.TableViewRow也都是view的一种。这个view跟iOS SDK中的UIView基本相同。
关于view的布局,跟使用CSS调整HTML布局很相似,也能设定Titanium的view的布局。
var nameLabel = Ti.UI.createLabel( { width: 120, height: 12, left: 58, top: 5, fontSize: 6, fontWeight: 'bold', color: '#2b4771' } );
可以通过width和hight来指定view的大小,通过top, buttom, right, left来指定view的位置,以及font的指定,文件颜色的设置等都可以同样设置。
布局基准
使用CSS对HTML进行布局调整,能够选择使用static, relative等来指定position的基准。同样,Titanium中基准位置,view的放置方法也有2中可以选择。
(1)什么也没有设置的时候
默认的处理是,把父view作为Ti.UI.TableViewRow的坐标基准, 明确指定的话,需要设置为:layout: 'absolute'。设置top的属性值,可以指定计算TableViewRow从上部往下的像素数,right, left, bottom分别是右端,左端,下部的像素数。
vertical
layout参数中设成vertical的话,并不是绝对位置的意思,而是设定了往TableViewRow中追加view的基准。
刚才的代码我们试着变一下:
function updateTimeline (timeline) { var currentData = []; for (var i=0;i<timeline.length;i++) { var tweet = timeline[i]; //再次这里开始 var row = Ti.UI.createTableViewRow( { height: 150, layout: 'vertical' } ); var imageView = Ti.UI.createImageView( { image: tweet.user.profile_image_url, width: 48, height: 48, top: 5, left: 5 } ); row.add(imageView); var nameLabel = Ti.UI.createLabel( { width: 120, height: 12, left: 58, top: -48, fontSize: 6, fontWeight: 'bold', color: '#2b4771' } ); nameLabel.text = tweet.user.screen_name; row.add(nameLabel); var commentLabel = Ti.UI.createLabel( { width: 257, left: 58, top: 1, height: 100, fontSize: 8 } ); commentLabel.text = tweet.text; row.add(commentLabel); var dateLabel = Ti.UI.createLabel( { width: 200, height: 12, left: 58, top: 5, fontSize: 6 } ); dateLabel.text = tweet.created_at; row.add(dateLabel); //修改结束 currentData.push(row); } tableView.setData(currentData); }
变成这样的代码后,大眼一看是没什么变化的。但是在设定vertical之间追加指定了view的top基准。top中也可以设置成负数,使用vertical可以做很细微的页面的调整。不要考虑计算各个view的绝对位置就能够布局页面,指定vertical就能够很方便的修改页面布局了。
(2)设置成auto
当height中设置成 'auto' 的时候,他也能自动调整高度把表示内容全部显示出来。上面的例子中height参数的值全部设置成'auto'(但是ImageView的height除外)之后,将会看到一下页面:
这种也是很方便的布局调整方法。
显示图像
使用ImageView来表示Twitter的用户头像部分。ImageView是很方便的一个View,只需要指定url后就能显示出来图像。不是是表示http开始的网络图像,Project内部保存的图像也能显示。下边的代码就是显示Project中图像的例子。
var imageView = Ti.UI.createImageView( { image: 'iphone/appicon.png', //文件名是相对于Project的Resorces文件夹 width: 48, height: 48, top: 5, left: 5 } ); row.add(imageView);
分割代码
直到这里我们编写的所有代码就集中在一个文件中,这样文件就变得很长。很长大代码集中在一个文件中,不只是看起来不好,调试也变的很困难,我们需要分割文件。
Titanium中有好几种分割文件的方法,这里我们说一下指定文件做成window并且打开的方法。以window为单位能够把代码分割开来,也能很简单的按照机能把代码分割。
截止到编写的app.js我们分割成以下两个文件。
app.js Titanium.UI.setBackgroundColor('#000'); var tabGroup = Titanium.UI.createTabGroup({}); var win1 = Titanium.UI.createWindow({ url: 'table_view.js', title:'Tab 1', backgroundColor:'#fff' }); var tab1 = Titanium.UI.createTab({ window:win1 }); win1.hideTabBar(); tabGroup.addTab(tab1); tabGroup.open(); table_view.js var win = Ti.UI.currentWindow; var data = []; var tableView = Ti.UI.createTableView({ data:data }); function updateTimeline (timeline) { var currentData = []; for (var i=0;i<timeline.length;i++) { var tweet = timeline[i]; var row = Ti.UI.createTableViewRow( { height: 150, layout: 'vertical' } ); var imageView = Ti.UI.createImageView( { image: 'iphone/appicon.png', width: 48, height: 48, top: 5, left: 5 } ); row.add(imageView); var nameLabel = Ti.UI.createLabel( { width: 120, height: 12, left: 58, top: -48, fontSize: 6, fontWeight: 'bold', color: '#2b4771' } ); nameLabel.text = tweet.user.screen_name; row.add(nameLabel); var commentLabel = Ti.UI.createLabel( { width: 257, left: 58, top: 1, height: 100, fontSize: 8 } ); commentLabel.text = tweet.text; row.add(commentLabel); var dateLabel = Ti.UI.createLabel( { width: 200, height: 12, left: 58, top: 5, fontSize: 6 } ); dateLabel.text = tweet.created_at; row.add(dateLabel); currentData.push(row); } tableView.setData(currentData); } var xhr = Ti.Network.createHTTPClient(); var user = 'hatenatech'; var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + user; xhr.open('GET', url); xhr.onload = function() { var timeline = JSON.parse(this.responseText); updateTimeline(timeline); }; xhr.send(); win.add(tableView);
app.js的内容还原到最初的例子代码,画表格的机能移到新作的table_view.js当中。需要主要看的一点是,app.js的createWindow的参数中,url的指定方法。使用这个方法可以在新的window中打开指定的JavaScript文件。
var win1 = Titanium.UI.createWindow({ url: 'table_view.js', //注意这里! title:'Tab 1', backgroundColor:'#fff' });
还有一个需要注意的是,在新作的table_view.js文件中,
var win1 = Ti.UI.currentWindow;
这段代码是追加到最开始的。分割前的代码中,我们可以看到是把view追加到了全局变量为win1的window中。然后分割后的代码就不在使用这个变量了。在使用createWindow指定的文件的代码中,打开window的父文件中的变量是不能使用的。具体来说就是,在table_view.js中是不能访问app.js中定义的变量的。
在那里,需要改变成,使用currentWindow参数来获取当前window,然后追加view。
其他文件当中的变量不能使用的话,也就是说scope发生了改变。分离每个window当中的变量是很方便的结构。那么从一个window到一个window数据的传递就需要费点儿事了。这个基本上没有什么大的问题,从此以后开发过程中,做成新的window的时候要积极地分割成多个文件。
总结
这回我们说了一下Window和View的关系以及布局的调整方法。而且在后半部分还说了一下开发过程中把文件分割成多个文件的方法。下一回我们将说一下使用OAuth来调用API,朝着做一个像样的Twitter客户端方向编写代码。
发表评论
-
VisualUI for Titanium Studio
2014-01-13 09:02 1493VisualUI for Titanium Studio is ... -
Google Auth (OAuth 2.0) for Titanium
2013-03-19 11:49 2012Google OAuth 2.0 for Titanium i ... -
Appcelerator Titanium: Up and Running
2013-03-19 08:40 46Appcelerator Titanium: Up and R ... -
Titanium SDK/Studio 3.0.0 Beta版发布
2012-11-07 09:36 463Titanium SDK/Studio 3.0.0 Beta版 ... -
Titanium SDK 3.0.0 Developer Preview
2012-10-29 16:15 303Titanium SDK 3.0.0 Developer Pr ... -
Appcelerator Partners With Largest Chinese Software Developer Network
2012-10-29 12:01 225(Marketwire - Oct 19, 2012) -Ap ... -
Titanium 3.0 预定10月份发布
2012-09-27 09:12 733Appcelerator CEO Jeff Haynie和 C ... -
Titanium SDK 2.1.3 RC is released – Support for iOS 6
2012-09-21 13:51 241---以下官方原文--- We understand the ... -
国内Ti开发者Winson的CBMVC框架
2012-08-06 15:55 1206目前关注Titanium的开发 ... -
Titanium的MVC框架"Alloy"的介绍
2012-07-18 14:37 4213Alloy(合金)是Appcelerator公司为Titani ... -
TCAD免费考试延长至7月末
2012-07-17 16:09 327Appcelerator延长这次TCAD免费考试的时间到7月末 ... -
TCAD认证考试
2012-07-13 11:31 2501Appcelerator从7/7开始免费开放TCAD(Tita ... -
【转】Appcelerator Cloud Push Notification in iPhone
2012-07-12 08:49 2714Push Notification in iOS Using ... -
【转】Appcelerator Cloud Push Notification in Android
2012-07-12 08:38 2441What is Push Notification? Push ... -
Appcelerator Titanium: Patterns and Best Practices
2012-07-10 10:58 373Appcelerator Titanium: Patterns ... -
Appceleator Cloud Services使用指南(3) - API Reference V1 (chm版本)
2012-05-28 15:22 1807Appceleator Cloud Services API ... -
Appceleator Cloud Services使用指南(2) - 创建第一个应用
2012-05-24 21:57 1690一步一步的创建一个最简单的,使用了ACS服务的应用。 1、新 ... -
Appceleator Cloud Services使用指南(1) - ACS介绍
2012-05-24 10:19 3210Appceleator Cloud Services( ... -
Titanium Mobile基础教程视频
2012-05-23 10:38 639dotinstall.com提供的一套在线Titanium M ... -
Jeff Haynie在GMIC2012表示应用开发者应注意本土化问题
2012-05-22 16:56 3355月10日-11日,2012全球移 ...
相关推荐
sublimetext-tita, Tita Titanium Mobile/Alloy sublime text 2插件 这个插件不再主动地维护 ***因为我不再使用 st2/st3 。 有人对 fork 感兴趣并维护它?替代插件:...
钛备份 Titanium Backup,备份你的程序及程序数据,并支持定时备份等功能。 功能很强大,有此软件,不管你的格机还是重刷ROM,在重装软件时都是无痛的,非实适用经常捣鼓手机有机友! 免费版功能: * 无时间限制 *...
Android-titanium_mobile.zip,带有javascript的本地ios、android和windows应用程序,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性优势。
[Packt Publishing] Appcelerator Titanium 移动应用开发教程 (英文版) [Packt Publishing] Creating Mobile Apps with Appcelerator Titanium (E-Book) ☆ 图书概要:☆ Develop fully-featured mobile ...
UX SDK是一套与产品无关的UI对象,可使用快速跟踪Android应用程序的开发。 另外,请查看的新开放源代码版本。 一体化 通过Maven声明依赖项: < groupId>com.dji</ groupId> < artifactId>dji-uxsdk</ ...
贾米钛 这将JavaScript BDD框架带到了Titamium Mobile。 入门 制作目录并获取Jasmine Titanium cd Resources mkdir spec lib vendor cd vendor git clone ... Titanium Mobile 1.7.2或更高
Titanium官方移动终端开发API文档
有关此工具的用途的更多信息,请查看:Android编译器指纹技术,使用APKiD检测盗版和恶意Android应用APKiD:适用于Android应用的PEiD安装pip install --upgrade wheel pip wheel --wheel-dir = / tmp / yara-python -...
Ti.PayPal是一个开源项目,旨在支持Appcelerator的Titanium Mobile中的PayPal iOS-SDK2.x。 该模块当前支持以下API: 简单付款 未来付款 商家配置 注意:这是Ti.PayPal的iOS版本。 您可能需要检查以获取Android...
等等的相关连结,希望能对开发Android应用程式有帮助。如有不完善的地方,欢迎加以补充! !另外如果分类有不妥的地方,或标示部清楚的地方,也欢迎提出! !Android版本分布Android Developers - Dashboards程式码...
NULL 博文链接:https://rensanning.iteye.com/blog/1315014
TiInspector, 通过 Chrome DevTools调试 Titanium Mobile 应用程序 #Ti 检查器Ti检查器允许在 Chrome DevTools web界面中调试 Appcelerator Titanium 应用程序。工具通过将命令和消息转换为 Chrome 调试协议和 ...
TiJSPDF, Titanium Mobile 应用程序的JSPDF插件 TiJSPDFTiJSPDF是用于使用JSPDF库生成pdf并在 Titanium Mobile 应用程序中操作它们的Titanium Mobile 应用程序的一种 JSPDF插件插件。这个插件独立于 Titanium 维护,...
瓦马拉茹反射CMPUT 301作业1回购... -使用处理程序创建较短的Toast -BaseActivity的想法: ://www.mysamplecode.com/2013/04/android-common-menu-options.html -返回主屏幕的菜单项: ://stackoverflow.com/questions
什么是Titanium Mobile跨平台开发技术? 用Titanium Mobile的优势和劣势? 总是从Hello world开始 准备工作? 通过模板建立默认的应用 模板程序彻底研究 Hello World完成了! Titanium Studio工作环境 本章小结 第二...
Ti.GoogleMaps是一个开源项目,旨在支持Appcelerator的Titanium Mobile中的Google Maps iOS-SDK。 该模块当前支持以下API: 地图检视 注解 瓷砖覆盖 多边形叠加 折线叠加 圆形叠加 自动补全对话框 聚类 ...
一切Apache Flink 蒂莫西·斯潘@PaaSDev 侧翼 Apache Flink + Apache Kafka + Apache NiFi 必须跟随人 Flink SQL https://docs.cloudera.com/csa/1.3.0/ssb-overview/topics/csa-ssb-key-features.html https://...
NULL 博文链接:https://topmanopensource.iteye.com/blog/1455044
Titanium-WebClient Titanium Web服务客户端
Google-Cloud-Messaging--Titanium-, 在 Titanium 中,Google云消息传递 Google-Cloud-Messaging--Titanium -注册带有GCM和处理发送到设备的通知的Titanium MODULE 。Android平台使用c2dm进行推送,但是因为c2dm停止...