r语言 slot_Fanx语言开发Android和iOS应用

vase 是Fanx语言的跨平台GUI库，支持开发移动端App、Html5应用、和桌面程序。

这是一个自绘的UI库，所有的控件都是自己画出来的。在各平台上有完全一致的体验。

在桌面上使用Swing/Java2D绘制，在Android上使用系统自带的Skia绘图库，在网页上使用Html5的Canvas绘制。大概像这样:

示例

我们的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？。