`

Make an TWaver HTML5 iPhone App

阅读更多

构建iOS App有很多技术方式可以选择,本文介绍基于UIWebView的Cocoa Touch组件嵌入HTML页面的方式实现的一个iPhone App例子。文中将穿插iOS的基本内容,TWaver HTML5的基础应用,以及Objective C与Javascript相互调用的技术点。





首先通过XCode构建个Empty Application即可



创建一个UIViewController子类我命名为MainViewController,然后再xib可视化拖拽出如下界面,其中包含一个UISwitch开关,一个UISlider拉条,一个UITextField输入框,以及一个最重要的UIWebView组件。

该例子中UISwitch用于自动布局的开关,UISlider作为network拓朴图的缩放控制,UITextField作为图元label的编辑更新,UIWebView用于加载TWaver HTML5的拓扑组件




 

接下来将twaver.js和demo.html的页面内容drag添加进入项目,形成如下目录结构的工程。这里细心的同学以及发现这行代码<meta name = “viewport” content = “user-scalable=no, width = 500″></meta>,这个例子我希望让拓扑自己控制缩放,所以关闭了浏览器的scalable功能并设定了宽度,更多的viewport知识可以参考这里



 


 
这时需要我们做个设置,XCode默认将js作为Source而不是Resource处理,所以会导致找不到js资源的问题,可以在XCode的Build Phases里面将twaver.js从Compile Sources干掉,在Copy Bundle Resources里面加入twaver.js



 

以下代码在界面呈现时通过UIWebView的loadRequest函数加载指向demo.html的NSURLRequest,注意其中对textfield的添加的个空函数是为了回车能取消编辑,最后的becomeFirstResponder是为了能接收到Shake手势,该例子中通过选中图元摇晃手机可以弹出编辑告警界面。

 

-(void)viewDidAppear:(BOOL)animated
{
[self.webView setDelegate:self];
[self.webView setScalesPageToFit: YES];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"demo" withExtension:@"html"];
NSURLRequest *req = [[NSURLRequest alloc]initWithURL:url];
[self.webView loadRequest:req];

[self.textField addTarget:nil action:@selector(dummy:)
forControlEvents:UIControlEventEditingDidEndOnExit];

[self becomeFirstResponder];
}
 

以下是Switch开关控制html页面内javascript代码,Objective C调用Javascript比较容易,直接调用stringByEvaluatingJavaScriptFromString运行即可

 

- (IBAction)handleSwitchChange:(id)sender {
    if(self.switcher.on){
        [self.webView stringByEvaluatingJavaScriptFromString: @"window.springLayouter.start();"];
    }else{
        [self.webView stringByEvaluatingJavaScriptFromString: @"window.springLayouter.stop();"];
    }
}

 如果javascript函数有返回值,则即是stringByEvaluatingJavaScriptFromString函数的返回值,以下代码就是通过这种方式来获取network当前的zoom值,以及当前选中图元的名字信息

 

-(void) updateSlider{
    NSString* zoom = [self.webView stringByEvaluatingJavaScriptFromString: @"window.network.getZoom();"];
    self.slider.value = [zoom floatValue];
}
-(void) updateTextField{
    NSString* name = [self.webView stringByEvaluatingJavaScriptFromString: @"window.getCurrentName();"];
    self.textField.text = name;
}
 

Javascript没有直接调用Objective C的函数,我们只能通过改变页面location的方式,在UIWebView的UIWebViewDelegate中拦截shouldStartLoadWithRequest函数回调来实现Javascript主动调用Objective C代码。实际还不是那么完美,建议读下这篇文章,我现在才有的也是文章建议的再建立一个iFrame方式去改变location避免一些副作用,以下是相关的代码,逻辑很简单我就不解释了。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString* url = [[request URL] absoluteString];
    if([url hasPrefix:@"call:" ]){
        NSArray *array = [url componentsSeparatedByString:@":"];
        NSString *method = [array objectAtIndex:1];
        [self performSelector:NSSelectorFromString(method)];
        return NO;
    }
    return YES;
}
 

var iframe = document.createElement("IFRAME");

network.addPropertyChangeListener(function(e){
    if(e.property === 'zoom'){
        iframe.setAttribute("src", "call:updateSlider");
        document.body.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
    }
});                 

box.getSelectionModel().addSelectionChangeListener(function(e){
    iframe.setAttribute("src", "call:updateTextField");
    document.body.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
});
 

 

最后为了让跟随我四年多的已无法升级到iOS5的itouch继续发挥余热,还得做如下一些设置才能用于调试测试,首先Summary里面的Deployment Target需要设置到4.*的版本,plist文件中删除Required device capabilities这行设置,最后在Architectures内改成armv7和armv6

 



 

 

最后是两个比较重要的obc和js代码文件供大家参考TWaver HTML5 Demo

 

最后将程序Archive归档发布到了App Store等着Apple的“审判”,如果顺利的话过几天大家就可以在App Store上通过查找到“TWaver”关键字,下载玩玩这篇文章的App,最后当然是free的App了。

 



 

 

 

  • 大小: 69 KB
  • 大小: 90.2 KB
  • 大小: 79.8 KB
  • 大小: 141.1 KB
  • 大小: 95.1 KB
  • 大小: 57.3 KB
  • 大小: 131.5 KB
  • 大小: 75.9 KB
  • 大小: 69 KB
0
1
分享到:
评论

相关推荐

    TWaver HTML5 开发指南代码

    《TWaver HTML5 开发指南代码》是一份专为开发者准备的参考资料,它主要聚焦于如何利用TWaver库在HTML5环境下构建拓扑工具和机房展示应用。TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    标题中的"twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_"似乎是指一个基于HTML5的Twaver版本5.9.0的应用程序接口(API)文档。Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织...

    Twaver-html5.zip

    Twaver学习案例的例子

    TWaver HTML5 Developer Guide

    TWaver HTML5 Developer Guide是关于TWaver HTML5组件套件的官方开发文档,由Serva Software发布。TWaver HTML5是一套基于HTML5的图形组件库,它提供了一整套用于构建网络拓扑图、树形结构、表格和图表等功能丰富的...

    TWaver for HTML5

    TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...

    TWaver的3d图形组件库,小demo

    描述中提到的“TWaver HTML5 3D 制作的demo提供一个3d图形展示的基本代码”意味着这个压缩包内包含了一个使用TWaver库构建的3D图形演示程序,其中包含了实现基本3D效果的源代码。开发者可以通过学习和分析这个demo,...

    twaver.js使用示例

    5. **报警系统模拟**:“alarm”可能是一个具体的应用场景,展示如何使用twaver.js来设计和实现报警系统的图形界面,包括节点的状态变化、事件响应等。 6. **交互操作**:学习如何利用twaver.js库实现图形元素的交互...

    TWaver“一站式”UI组件提供包括网络拓扑图、地图、设备面板图、流程图、各种Chart图表、树图、表格等各种通用组件

    TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的...

    flex Twaver组件使用

    TWaver组件家族包括TWaver Java、TWaver Web、TWaver Flex、TWaver .NET、TWaver HTML5和TWaver GIS,覆盖了多种开发环境。本文主要讨论的是在Flex环境下的TWaver组件——TWaver Flex。 在配置TWaver Flex的开发...

    twaver拓扑

    【标题】"twaver拓扑" 是一个基于HTML5技术的图形化工具,主要用于创建和展示复杂的网络拓扑结构。这个工具提供了丰富的图形类型,能够适应多种应用场景,如IT网络架构、工业控制系统、流程图等。它允许用户通过图形...

    Twaver_chinese_document

    TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...

    Twaver Web SVG 开发说明文档

    ### Twaver Web SVG 开发说明文档 #### 一、前言 Twaver Web SVG 开发说明文档是一份针对电信网管 WEB 模式开发的重要参考资料。该文档详细介绍了 Twaver Web SVG 的架构、开发流程以及常见问题解决方案等内容,...

    TWaver文档

    - TWaver支持多种技术和平台,包括**Java**、**Flex**、**.NET**、**HTML5**和**Android**等。 - 这种跨平台的支持意味着TWaver可以被集成到不同的应用场景中,无论是桌面应用、Web应用还是移动应用,都能找到合适的...

    twaver-java-4.1

    5. `javadoc`:这个目录下是TWaver库的Java文档,详细解释了每个类、接口和方法的功能和用法,对开发者理解和使用TWaver的API非常有帮助。 6. `src`:源代码目录,可能包含了示例代码或者TWaver的部分源码,供...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    Twaver 3.7性能测试报告

    即使是在极端情况下(如连接比例达到5:1),Twaver Java仍能保持较高的响应速度和稳定性,证明其在网络通信方面具有出色的技术优势。 #### 结论 通过对Twaver Java在不同节点和连接情况下的性能测试,我们可以得出...

    twaver web实例源码

    【标题】"Twaver Web实例源码"是一个关于使用Twaver与ExtJS结合的Web应用程序开发的学习资源。Twaver是一款强大的图形化建模和可视化工具,常用于数据可视化、网络拓扑图、流程图等场景。ExtJS则是一个流行的...

    twaver-java-3.7

    **标题:“twaver-java-3.7”** **描述:“twaver-java-3.7 文档”** **标签:“twaver java 3.7”** 本文将深入探讨Twaver Java 3.7版本的相关知识,这是一个强大的数据可视化库,特别适用于Java开发人员。...

    twaver-flex-3.6.5 官方demo

    【标题】"twaver-flex-3.6.5 官方demo" 提供的是一个基于Flex技术的Twaver图形库的演示版本。Twaver是一款强大的数据可视化和建模工具,广泛应用于网络、系统和业务流程的图形化表示。在3.6.5这个版本中,官方提供了...

Global site tag (gtag.js) - Google Analytics