vase 是Fanx语言的跨平台GUI库,支持开发移动端App、Html5应用、和桌面程序。
![4b74d786c4ca3bcc85ebaaea3dd29a36.png](https://i-blog.csdnimg.cn/blog_migrate/569fc0033160ffee36ebbf0d5b6fcf54.jpeg)
这是一个自绘的UI库,所有的控件都是自己画出来的。在各平台上有完全一致的体验。
在桌面上使用Swing/Java2D绘制,在Android上使用系统自带的Skia绘图库,在网页上使用Html5的Canvas绘制。大概像这样:
![95e51c6378a70daf62dc52b79b1165dc.png](https://i-blog.csdnimg.cn/blog_migrate/8a72da63d33c9eade270bfe09297644b.jpeg)
示例
我们的Fanx代码像这样:
@Js
class WinTest
{
static Void main() {
root := Frame {
VBox
{
padding = Insets(40)
spacing = 15f
Button { id = "button"; text = "Hello Button" },
ComboBox {
it.items = ["comboBox1","comboBox2","comboBox3","comboBox4"]
selectedIndex = 0
},
Label { id = "label"; text = "Label"; },
Switch { text = "switch"; },
ToggleButton { text = "checkBox"; },
RadioButton { text = "radio1"; },
RadioButton { text = "radio2"; },
EditText { hint = "hint" },
},
}
Button btn := root.findById("button")
btn.onAction.add
{
msg := Toolkit.cur.density.toStr + "," + root.width
MessageBox { it.label.text = msg }.show(root)
}
root.show
}
}
在Android上运行
在 Android上,编译为jar包,使用java直接调用。例如:
import fan.vaseAndroid.AndroidEnv;
import fan.vaseDemo.WinTest;
import fanjardist.Main;
public class MainActivity extends AppCompatActivity {
static {
Log.d("fvdemo", "init");
Main.boot();
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
Log.d("fvdemo", "onCreate");
AndroidEnv.init(this);
WinTest.make().main();
}
}
编译成jar并打包为apk文件安装在手机上:
fan build::JarDistMain vaseDemo vaseDemo::WinTest.main
cp vaseDemo.jar android/app/libs/
cd android
./gradlew installDebug
在iOS上运行
在iOS上本来计划是编译器C语言,然后编译成本地应用。虽然编译成C的工作完成了,但需要的各种库需要封装成Fanx,业余时间有限。所以我退化成使用编译为javascript通过cordova来运行在iOS上。
在页面加载完成后调用下面的代码启动主界面:
function main() {
// find main
var qname = 'vaseDemo::WinTest.main';
var dot = qname.indexOf('.');
var type = qname;
if (dot < 0) qname += '.main';
else type = qname.substring(0, dot)
var main = fan.std.Slot.findMethod(qname);
// invoke main
if (main.isStatic()) main.call();
else main.callOn(fan.std.Type.find(type).make());
}
编译为javascript并运行demo
fan compilerJs::Dump vaseDemo > cordovaDemo/www/js/fanx.js
cordova run ios
完
这里是完整的demo代码:https://github.com/fanx-dev/vase/tree/master/demo
后续会有更多的文章介绍开发框架,请关注《Fanx编程语言》专栏。
为什么使用Fanx语言开发GUI应用,请参见:什么语言最适合做 GUI?。