跳到主要内容

使用Sencha创建HTML5应用程序,第二部分

这篇文章首次出现在问题236.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

在决定如何创建移动应用程序时,开发人员可以面对各种各样的技术进行选择。在上一篇教程中,我演示了可视化应用程序构建器Sencha Architect如何用于创建跨平台移动HTML5应用程序构建在JavaScript框架Sencha Touch上,只需将组件拖放到画布上即可。

一个好的应用程序框架应该支持最佳实践应用程序结构。这是Sencha用于构建Web应用程序的模型 - 视图 - 控制器(MVC)结构的帮助。 MVC使开发人员能够将应用程序的逻辑分成三个不同的区域:

  • 楷模定义数据类型和字段
  • 查看定义视觉表示
  • 控制器存储所有代码以连接您的视图和模型,以及任何其他应用程序逻辑

使用Web应用程序框架进行开发有许多优点,例如内置UI控件,应用程序模式(如MVC),事件和对象等。也许更有价值的是网络应用程序的未来性和长寿命。例如,10年前创建的网站仍然可能在今天的现代浏览器中呈现好,尽管可能有一些小问题。

与某些跨平台框架不同,您在Sencha Touch(JavaScript)中编写的语言与应用程序在运行时执行的语言完全相同。这极大地增强了开发人员对应用程序和底层框架的理解,并且如果事情不能正常工作,则有助于调试过程,因为没有中间步骤可以查看。您编写的内容正是浏览器中正在执行的操作。

In part one of this tutorial, we created a mobile HTML5 app using Sencha Architect that allowed the user to view a list of Places

在本教程的第一部分中,我们使用Sencha Architect创建了一个移动HTML5应用程序,允许用户查看Places列表

使用Sencha Touch进行开发的另一个好处是代码在运行之前不需要编译。当然,它可以在部署之前选择性地打包,这将通过缩小内容并将JS组合成一组较小的文件来优化它。

入门

在本教程中,我们将把第一部分中创建的Sencha Touch应用程序链接到ASP.NET Web API后端。 ASP.NET Web API提供了一种使用.NET框架创建RESTful应用程序的好方法,并且可以非常轻松地与我们的Sencha Touch应用程序链接。

首先,在Visual Studio Express 2012 for Web中创建一个新项目。从“新建项目”窗口中,选择Visual C#> Web在“模板”节点下选择,然后选择ASP.NET MVC 4 Web应用程序。对于项目名称,输入值地方,并保存下C:\ Sencha Architect Apps \,确保选中Create directory for solution选项。单击确定。将显示一个弹出窗口,要求您选择模板。选择Web API,然后单击“确定”。

数据库

现在我们已经创建了一个.NET Web API项目,我们可以添加一个数据库。在Solution Explorer下,右键单击应用程序数据文件夹并选择添加>新项目。选择SQL Server数据库,将名称更改为Database.mdf,然后点击

双击Database.mdf在解决方案资源管理器中建立与它的连接,然后右键单击数据库资源管理器中的数据库并选择新查询。创建一个名为的表地点通过执行以下查询:

CREATE TABLE Place(id INT IDENTITY(1,1)PRIMARY KEY,name VARCHAR(255),location VARCHAR(255),lat DECIMAL(9,6),lng DECIMAL(9,6))

然后通过执行以下查询在数据表中填充数据。此数据将替换上一个教程中的硬编码值。

INSERT INTO VALUES('Alcatraz','California',37.826641,-122.422855)INSERT INTO VALUES('Four Corners Monument','USA',36.999091,-109.045279)INSERT INTO VALUES('Golden Gate Bridge','旧金山,37.816497,-122.478175)插入地方价值('大峡谷','亚利桑那州',36.071302,-111.874237)插入地方价值('拉斯维加斯','内华达州',36.113749,-115.173512)INSERT INTO Place VALUES('Monument Valley','Arizona',36.996658,-110.097785)INSERT INTO VALUES('New York City','New York',40.726446,-74.006767)INSERT INTO VALUES('Washington','哥伦比亚特区) ',38.895225,-77.036694)INSERT INTO VALUES('品酒','Calistoga,California',38.578299,-122.577653)

ADO.NET实体数据模型

为了便于从数据库中检索数据,我们将添加一个ADO.NET实体数据模型。返回解决方案资源管理器,右键单击“项目”。选择添加>新项目并选择ADO.NET实体数据模型。选择一个名字Model.edmx然后点击

This is the view that’s shown after you’ve created your new ASP.NET MVC 4 Web Application within Visual Studio

这是在Visual Studio中创建新的ASP.NET MVC 4 Web应用程序后显示的视图

在“实体数据模型向导”中,选择从数据库生成并击中下一个。应在下拉列表中预先选择新添加的数据库。设置Web.Config实体连接设置价值DatabaseEntities。点击下一个

您现在需要选择要添加到模型的数据库对象。勾选Tables节点以包括所有表,将Model Namespace更改为DatabaseModel,然后点击。稍后将生成实体数据模型。通过挑选来构建项目构建解决方案在“生成”菜单中。

.NET Web API控制器

我们已经添加了数据库和实体数据模型,但现在我们需要一种方法将这些数据呈现给我们的前端Sencha Touch应用程序 - 我们将通过.NET Web API控制器实现这一目标。在解决方案资源管理器中,右键单击控制器文件夹并选择添加>控制器。这将启动“添加控制器”窗口。

The ADO.NET Entity Data Model provides a representation to the underlying database. Each database table is shown on the diagram as an Entity

ADO.NET实体数据模型为底层数据库提供表示。每个数据库表在图上显示为实体

指定控制器名称PlaceController,并选择具有读/写操作的API控制器,使用Entity Framewor来自模板下拉列表的k。选择地点在Model类下拉列表中,和DatabaseEntities来自Data上下文类下拉列表。点击按钮来创建这个新的控制器。

屏幕上将显示一个新的Controller类,它有许多用于添加,更新和删除Place记录的预构建方法。如果需要,可以在此处添加额外的逻辑,例如验证从客户端发送的数据,但是对于本教程,我们将按原样使用控制器。

按下启动.NET项目F5,或选择开始调试“调试”菜单中的选项。我们现在将探讨所有这些在实践中如何发挥作用。当Web浏览器启动时,我们想要发出对这个新Place Place的请求。通过在URL上附加以下内容来执行此操作:/ API /位- 所以,例如http:// localhost:55434 / api / place,其中55434是特定IIS Express实例的端口号。

您现在应该看到浏览器中显示的XML文件,其中包含数据库Place表的内容。原因是.NET Web API已根据URL路径路由请求并将其发送到Place控制器。

在浏览器中,在调用此URL时会向服务器发送GET请求,默认情况下会将其路由到GetPlacesPlace控制器内部的方法。这反过来使实体数据模型从数据库中检索所有Place记录。

这个相同的基本URL也将用于添加,更新和删除记录,这基于发送到服务器的HTTP请求的类型,并通过.NET Web API以相同的方式操作基于其的请求。键入适当命名的控制器方法:

  • POST请求到/ api / place - 创建一条新记录(PostPlace
  • PUT请求/ api / place - 更新现有记录(PutPlace
  • DELETE request / api / place - 删除现有记录(DeletePlace

The generated Place Controller uses pre-built methods to add, update and delete records. It uses the Entity Data Model to query the database

生成的场所控制器使用预先构建的方法来添加,更新和删除记录。它使用实体数据模型来查询数据库

我们无法直接在浏览器中测试不同的请求类型,因为导航到URL只会触发GET请求。因此,我们需要在我们创建的Sencha Touch项目中执行此操作在本教程的第一部分中

Sencha Touch项目

在Sencha Architect中加载PlacesTouchApp之前,将文件夹从其当前位置移动到.NET项目的文件夹中,因此它现在应该位于C:\ Sencha Architect Apps \ Places \ Places \ PlacesTouchApp \。然后从Sencha Architect中的此目录加载PlacesTouchApp。

在项目中要做的第一件事是从Places商店中删除硬编码数据。为此,请单击明确“配置”面板中“地点存储”上数据属性旁边的按钮。

接下来,选择商店Ajax代理,并将URL设置为http:// localhost:55434 / api / place。右键单击Store并选择加载数据选项。数据应该从.NET应用程序加载,并且因为它是作为Ajax请求的一部分请求的,所以请求JSON格式而不是XML。您应该看到列表中显示的所有地方。

要确保应用程序启动时Store自动加载其数据,请设置AUTOLOAD财产到真正在商店里。

REST代理

要允许通过RESTful调用服务器来管理Place记录的实例,请将REST代理从工具箱拖到Project Inspector中的Place Model。这将处理创建,读取,更新和销毁调用,并将它们传递给我们的.NET Web API项目。

相应地在Rest Proxy上设置url属性;例如。 HTTP://本地主机:55434 / API /位。

表格按钮

我们将启用现有记录的编辑和删除。为此,我们需要在PlaceDetail表单上添加两个新按钮。首先,在PlaceDetail表单中拖动一个新的Panel,就在Map on Map按钮的正下方。现在在此面板中拖放两个按钮,并将第一个按钮的文本设置为保存,另一个删除。通过在内部键入以下内容,将自定义属性添加到“保存”按钮过滤或快速值集领域:

动作:”保存”

然后单击按钮。在“删除”按钮中添加类似的自定义属性:

动作:”删除”

设置UI“保存”按钮的属性确认,和UI删除按钮的属性下降

在包含按钮的面板上,设置布局财产到横向盒,因此按钮水平放置在面板内,并设置柔性两个按钮的属性1。这指定了每个按钮宽度的纵横比。

Adding a REST Proxy to the Model and setting its url property allows the app to easily send RESTful calls to the server to create, read, update and delete records

将REST代理添加到模型并设置其url属性允许应用程序轻松地向服务器发送RESTful调用以创建,读取,更新和删除记录

最后,在同一个Panel上,设置余量财产到20 0 0 0。这指定了应用于Panel四边的边距,第一个值(20)与上边距相关。

数据验证

在保存记录之前,我们希望确保填充所有必填字段。 Sencha Touch具有内置的验证器,可以将其分配给模型,以便在保存记录时我们可以检查记录值的有效性。

将Presence Validation拖放到Place Model上。设置两者显示名称领域存在验证的属性名称。向场所模型添加额外的存在验证,这次是位置字段。

控制器动作

现在我们已准备好将保存和删除功能添加到前端应用程序。在Project Inspector中选择Place Controller,然后选择添加新Controller Action的选项。

对于新Action,将Target Type设置为Ext.Button,以及事件名称龙头。这将在Place Controller中添加一个新的Controller Action。

通过将fn(函数的简写)值设置为onSaveTap来重命名Controller Action,然后将controlQuery设置为[action = Save],它将此Action与先前创建的Save按钮相关联。双击控制器动作并填充代码:

var me = this; var form = this.getPlaceDetail(); var values = form.getValues(); var record = form.getRecord(); record.beginEdit(); record.set(values); if(record.isValid ()){record.endEdit(); record.save({success:function(){me.getMainView()。pop();}});} else {record.cancelEdit(); Ext.Msg.alert( “错误”,“记录有错误。”);}

在上面的代码中,我们将获得对Place Detail表单的引用,以及表单中的值和Record的实例。然后通过调用开始一种客户端事务BeginEdit在记录上,这将停止转发到商店的任何更改。然后将表单中的值应用于Record,我们检查以确保它有效。

如果记录中的数据有效,我们会打电话EndEdit中,并将值应用于商店,然后我们调用保存记录上的方法,这会触发对我们的.NET Web API控制器的请求。

如果数据无效(例如,空字段值),那么我们调用的CancelEdit在记录上,取消任何更改并将记录恢复到其原始状态,最后我们向用户显示验证消息。

This shows the ultimate configuration of the Place Controller within Sencha Architect. There should now be 5 Actions and 3 References within the Controller

这显示了Sencha Architect中Place控制器的最终配置。控制器内现在应该有5个动作和3个参考

添加另一个Controller Action,这次是Delete按钮。再次,将目标类型设置为Ext.ButtoN,以及事件名称龙头。设置FN价值OnDeleteTap,然后设置ControlQuery[动作=删除]。将以下代码添加到“删除控制器操作”:

var me = this; var form = this.getPlaceDetail(); var record = form.getRecord(); record.erase({success:function(){me.getMainView()。pop();}});

此代码会触发对.NET Web API控制器的DELETE请求,并且成功后会将用户返回到位置列表。

我们将添加一个最终的Controller Action,这将用于用户更改Map的中心位置。我们想要捕获新的纬度和经度坐标,并将这些值应用于“放置细节”表单中的隐藏字段。

首先,在Project Inspector中选择PlaceMap,然后设置USERALIAS财产到Placemap。然后选择Place Controller并添加一个新的Controller Action,目标类型为Ext.Map,以及一个事件名称Centerchange。设置ControlQuery这个新的控制器动作.placemap。将以下代码添加到此Controller Action:

var form = this.getPlaceDetail(); form.setValues({lat:center.lat(),lng:center.lng()});

每当用户移动地图时,上面的代码就会触发。这将使用一些Google Maps API调用从地图中心获取纬度和经度,这些值将应用于表单中的隐藏字段。

那里 - 应用程序已完成。接下来,启动基于WebKit的浏览器(例如Google Chrome)并导航到.NET项目中的Sencha Touch应用程序的URL:http:// localhost:55434 / PlacesTouchApp / app.html。您现在应该能够更新和删除记录,以及通过移动地图的中心点来更新地点的位置。

在开发期间,使用内置的IIS Express服务器时,.NET应用程序可以更轻松地运行。默认情况下,这仅允许来自本地计算机的连接,因此要从物理设备测试您的移动应用程序,您需要调整一些IIS Express设置以启用远程连接。有一个关于如何做到这一点的简短教程这里

By viewing the Network tab within Google Chrome’s Developer Tools, it’s possible to see the requests being sent off to the .NET Web API Controller

通过查看Google Chrome开发人员工具中的“网络”标签,可以看到请求被发送到.NET Web API控制器

启用远程连接后,需要在Model和Store代理上更新.NET Web API Place控制器的URL,方法是将localhost替换为IP地址或主机名。

应用包装

虽然在这些教程中我们已经制作了一个纯Web应用程序,但Sencha还提供了Sencha Mobile Packager,它提供了一种方法,可以将您的Web应用程序打包到本机shell中,立即使应用程序存储准备就绪,并允许它访问其他设备功能,例如应用内购买和搜索用户的联系人。

结论

这个由两部分组成的教程应该有助于增强使用Sencha Touch框架的好处,并使用Sencha Architect来帮助应用程序设计和开发过程。数据可以从远程数据源无缝加载并提交到远程数据源,而无需担心手动处理Ajax请求和响应 - 例如,只需在商店中指定URL,框架就可以为您完成所有神奇工作。

HTML5显然还有很长的未来,定期添加新功能,例如添加用于访问传统上仅适用于本机应用程序的设备功能的新API。例如,在iOS 6中,Apple在Safari中引入了直接上传文件和添加摄像头访问权限的功能,而无需将Web应用程序打包为本机应用程序。 iOS 6中的其他改进包括更快的JavaScript引擎和远程Web检查器,用于在Mac上使用Safari 6远程调试Web应用程序,使调试更加容易。

据Strategy Analytics称,具有HTML5功能的浏览器的移动设备的销售量在2013年将增加三倍,达到10亿台设备,而2011年将达到3.36亿台设备。有了这样的数据,使用Sencha的框架通过HTML5路线发布移动应用程序工具显然提供了一种快速实用的方法,可以轻松地定位不同的移动平台。

如何构建应用程序:在Creative Bloq上发现35个很棒的教程。



翻译字数超限