CrossApp Intro
CrossApp, written in C++ and based on OpenGL ES 2.0 rendering, deploys MVC framework mode and is a free, open source and cross-platform mobile App development engine. CrossApp developed applications can be exported to major mobile platforms, it truly realizes the – one time coding, multiple running – cross-platform development technique.
CrossApp mainly is a 9miao.com self-developed product, and 9miao club officially formulates its basic framework and rudiment. 9miao club standing committee of contributors, voluntarily composed of elite developers from all sides, is jointly responsible for the future version’s update and maintenance works.
All Major Platforms Support
CrossApp supports major development platforms, and it could easily port applications to all platforms.
All Engine Content Open Source and Technical Support
CrossApp is a totally open source and free product, our official technical team provides freely technical supports for any CrossApp related problems that developers meet in development process.
Rich UI Controls
The encapsulation of a larger number of fully functional UI controls in CrossApp will significantly improve development efficiency. And we will continuously collect and update excellent controls that developers of community contributes.
Ancillary Editor
CrossApp provides freely related editors for developers, and 9miao technical team is in charge of the update and maintenance work.
1.Cross-Platform
CrossApp mainly supports the most mainstream mobile platform: iOS and Android for now, in the future version we will support more platforms.
Comparing to traditional iOS and Android native applications development, CrossApp has a shorter development cycle and lower cost privilege thanks to its cross-platform feature, thereby acting a relatively simple porting work after APP development could easily make it run on different platforms.
2.Integrating Some Third-party Libraries
The first edition CrossApp integrates some third-party libraries such as the common data analysis library jsoncpp, tinyxml, http etc. Meanwhile, by the translation of third-party library spidemonkey on CrossApp, it can directly use js script to write programs.
3.Based on OpenGL ES 2.0
Open GL ES 2.0 is adopted by CrossApp graphics rendering, its high rendering efficiency enables mobile device’s GPU to operate to its optimum efficiency.
1.Open Source
Open source is an idea that 9miao persistently pursues, naturally CrossApp also is an open source mobile App development engine. Developers could freely use CrossApp to produce any business projects without any misgivings whatsoever because of it’s based on the most flexible MIT open source protocols. 9miao club technical team is responsible for technical problem solution and support to any CrossApp related problems that developers meet in development process. (Please post your question at official website CrossApp zone, and we assure you that you will get our response in a short time)
We will continuously update CrossApp version: 9miao club and 9miao club standing committee of contributors (for short ‘9 contributor committee’) is jointly responsible for the future version’s update and maintenance works. We welcome all elite developers to join us to make their contribution for the further improvement of CrossApp. New version submitted by developers will be integrated into next release CrossApp version after it’s approved by 9miao official.
CrossApp osChina git: http://git.oschina.net/9miao/CrossApp
CrossApp GitHub: https://github.com/9miao/CrossApp
2.Rich UI Controls
CrossApp is designed to provide fast and efficient development solution for mobile application developers. On that basis, with the encapsulation of a large number of fully functional UI controls in CrossApp, developers can directly use these controls to produce applications. The controls basically meet most of functionality demands in development as well as save lots of time on UI controls encapsulation which further increases development efficiency. In the meantime CrossApp will integrate some excellent control resources provided by third-party developers for the further richness of its UI controls.
3.Ancillary Editor Support
Various editors’ support is crucial for fast and efficient development mode, in the first edition CrossApp we did not provide engine-related editor, but we plan to release editor in July, 2014 version update, which will help developer produce mobile app program in a faster and more convenient way.
Main techniques used in current mobile platform App development comparison (below chart)
|
Technique
Description |
Mobile Web |
Hybrid App |
Interpreted App |
Cross Compiling |
Native App |
|
Representative Products |
HTML5/JQuery Mobile |
PhoneGap |
Titanium |
CrossApp |
IOS/Android |
|
Cross-platform Performance |
High |
High |
Medium |
High |
Low |
|
Off-line Capacity |
× |
√ |
√ |
√ |
√ |
|
Threshold |
Low |
Low |
Low |
Low |
High |
|
Functionality |
Weak |
Medium |
Medium |
Strong |
Strong |
Conclusion from above chart:
1.Mobile Web
Web development technique, represented by HTML5 and JQuery, is purely browser based, so it does not have off-line capacity, let alone give full play to various platform’s functionalities and features.
2.Hybird App
Hybrid App, namely hybrid mode application, refers to app between web and native. It possesses some excellent UE of native App and cross-platform advantage of Web App, but is unable to efficiently manage memory and system resources on account of it’s still based on front end technique.
3.Interpreted App
It’s based on front end technique and also unable to efficiently manage memory and system resources.
4.Native App
Native development, represented by iOS and Android, has a higher cost in spite of it could achieve the best UE and optimizing. Comparing to cross-platform technique, Native development brings a lower actual benefit because of it barely supports cross-platform feature.
In conclusion, Native App and Cross compiling have higher overall efficiency. Developers should select suitable development solution according to actual situation and factors from all sides.
The development mode of CrossApp is various platforms sharing a full set of codes, and it realizes different platform running by adopting cross compiling method. CrossApp is MVC mode based and its object-oriented goal is to design program with low coupling and high cohesion feature, so the MVC mode provides us a great solution. Here the MVC capital letter respectively represent: model layer (Model), view layer (View) and controller layer (Controller), these three layers perform their duties and jointly maintain a complete application.
In CrossApp, Model layer refers to all kinds of data prototype, business logic and algorithm, and functionality implementation of App utterly depends on Model layer. View layer, just as the name suggests, is to display UI interface to users; Controller layer is responsible for linking up Model and View layer that have less correlation, transmits user’s operation to Model layer and displays them by controlling View layer. With CAView and rich UI controls, CrossApp could realize the View layer function, and finish Controller layer to realize the communication between Model and View through CAViewController and its child class.
CrossApp is a system which will contain numerous theme styles and each one is a set of heavily customized UI controls library that includes what mobile application development requires. CrossApp dedicates to provide an efficient, fast and low cost development mode, and CrossApp Style follows the same original purpose, it will supply hundreds of set of controls theme library with all kinds of style for developers in the future, users can directly use them in development process without modification needs. CrossApp Style’s official self-developed theme styles will continuously grow, and meanwhile it willingly adopts more theme libraries provided by external developers.
With a large amount of different style theme libraries it will have, CrossApp Style V0.1.11’s engine comes with CrossApp defaulted blue theme style. It will successively provide more theme styles over the next few weeks such as iOS style, ink painting style and pink Q style etc., and all theme styles of CrossApp Style consist of the three parts below: art design + interactive experience design + control encapsulation.
1.Art Design Resource (UI)
For all art design resource of theme style, users can find the corresponding one in CrossApp Style directory of CrossApp source codes.
2.User Experience (UE)
Generally product managers pursue best UE effect specific to every theme style, so in CrossApp Style we have strictly set standard on parameter specification of each theme’s element. (In addition, users are able to modify and customize on their own based on needs)
3.Controls encapsulation (code)
CrossApp Style did a secondary encapsulation on engine’s native UI controls and provides corresponding complete Demo template for every theme style, users can directly run them to view actual effect, use the theme styles in CrossApp Style to develop thanks to it significantly shortens the development cycle, and modify source codes’ corresponding port if they need to modify theme.
Design rendering of CrossApp theme style by default is shown below:
The actual effect of defaulted theme style in CrossApp demo is shown below (demo screenshots):
The first edition CrossApp defaulted theme style’s design is based on iPhone 5’s 640*1136 resolutions and supports self-adaption of different resolutions. Some UI’s basic design parameter is shown in below table:
CANavigationBar:
|
Width |
Height |
Top margin |
Font size |
|
640px |
88px |
41px |
34px |
CAButton:
|
Width |
Height |
Font size |
Color value of not selectable state |
Color value of selectable state |
|
120px |
58px |
34px |
#cccccc |
#3399cc |
CASwitch:
|
Width |
Height |
Switch button width |
Switch button height |
|
90px |
46px |
44px |
44px |
CAProgress:
|
Width |
Height |
Background color |
|
500px |
2px |
#cccccc |
CASlider:
|
Width |
Height |
Color value of slider frame |
Switch button height |
|
90px |
46px |
#cdf3ff |
2px |
CASegmentedControl:
|
Subitem width |
Subitem height |
Font size |
|
120px |
58px |
28px |
CAAlertView:
|
Color value of frame |
Width |
Background color value |
Font size |
Prompt message of input box |
Input box frame |
Input box width |
Input box height |
Button width |
Button height |
Button font size |
|
#33ccff |
540px |
#fafafa |
28px |
#cccccc |
#cccccc |
468px |
60px |
220px |
58px |
34px
|
CATabBar:
|
Width |
Height |
Title font size |
|
128px |
98px |
20px |