reyalpsirc/LiveXaml

语言: C#

git: https://github.com/reyalpsirc/LiveXaml

这个项目的想法是允许您通过编辑XAML的指令轻松地在XAML上使用XAML.Forms进行设计...
The idea of this project is to allow you to easily make designs in XAML on Xamarin.Forms by editing your XAML’s direc…
README.md (中文)

LiveXaml

这个项目的想法是允许您通过直接在首选IDE(例如Xamarin Studio)上编辑XAML,轻松地在XAML上使用XAML进行设计,并立即在模拟器和/或设备上预览这些更改,而无需构建你的Xamarin.Foms项目再次重演!

使这项工作的主要思想是使用DynamicForms上已经提供的内容以及在计算机端运行的WebSocket服务器,每次保存特定的XAML文件时都会通知iOS / Android LiveXaml应用程序。 为此,为了支持Windows和Mac OS X,我将JAVA与库Java-WebSocket一起使用。

要求

  • Xamarin Studio或Visual Studio
  • Java Runtime Environment 7+
  • Eclipse for Java(可选)

笔记

  • 该项目只能实时预览XAML页面。如果您需要更改XAML端无法完成的代码,那么您需要对项目进行正常的重建。
  • 建议您通过LiveXaml应用程序启动项目。这样,如果您构建自定义视图,您也可以在Xaml端使用它们(但您需要首先构建/重建代码,直到这些自定义视图在其代码实现上运行良好)。
  • 在设备上运行时,请始终确保您的设备已连接到计算机的同一网络。

视频说明

LiveXaml Tutorial

如何建立

如果您只想使用该项目,可以转到下载部分并下载最新的ZIP文件。 解压缩ZIP后,您将找到2个文件夹。一个是Serverand包含一个可运行的JAR文件,您需要在终端/命令行上运行该文件。另一个是App并包含Xamarin模板项目,您必须在模拟器/设备上运行该项目才能开始预览您当前正在编辑的XAML文件。 无论如何,如果你想/需要修改项目的东西,这里是构建它的步骤:

服务器

  1. 下载/克隆计算机上的存储库。
  2. 如果您还没有Eclipse,请下载并安装Eclipse for Java。
  3. 打开Eclipse并转到“文件” - >“导入” - >“常规” - >“现有项目进入工作区”
  4. 右键单击导入的项目并选择“导出” - >“Java” - >“Runnable JAR文件”并选择“下一步”
  5. 在“导出目标”下选择要导出项目的文件夹,然后单击“完成”。

应用

  1. 只需在Xamarin Studio或Visual Studio上打开LiveXaml App项目,然后将其运行到模拟器或设备。

怎么跑

  1. 打开命令行/终端并编写ipconfig(Windows)或ifconfig(Mac)并记下您的IP地址。
  2. 现在将cd path /写入/ LiveXaml.jar /文件夹
  3. 运行以下命令:LiveXaml.jar /path/to/MyPage.xaml
  4. 如果您在运行该命令时遇到问题,请在Xaml页面的路径后指定一个端口。 例如:LiveXaml.jar /path/to/MyPage.xaml 10030
  5. 在Xamarin Studio或Visual Studio上打开LiveXaml App项目(或您在LiveXaml App项目上构建的项目,如Notes部分所述),并将其运行到模拟器/设备。
  6. 在模拟器/设备上输入您之前记录的Ip和端口,然后按“连接”
  7. 现在只需编辑您在步骤3中的LiveXaml.jar命令中输入的Xaml文件,您将注意到每次保存文件时,模拟器/设备都将使用新内容更新屏幕,而无需重建任何内容。

疑难解答

如果您在将设备/模拟器连接到LiveXaml服务器时遇到问题,请检查您的防火墙设置。

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

LiveXaml

The idea of this project is to allow you to easily make designs in XAML on Xamarin.Forms by editing your XAML’s directly on your preferred IDE (Xamarin Studio for example) and immediately preview those changes on simulators and/or devices, without needing to build your Xamarin.Foms project all over again!

The main idea to make this work was to use what is already provided on DynamicForms together with an WebSocket server running on the computer side, that would notify the iOS/Android LiveXaml App each time that a specific XAML file is saved.
For that and, in order to support both Windows and Mac OS X, I used JAVA together with the library Java-WebSocket.

Requirements

  • Xamarin Studio or Visual Studio
  • Java Runtime Environment 7+
  • Eclipse for Java (optional)

Notes

  • This project can only make live preview of XAML pages. If you need to change something on code that can’t be done on the XAML side, then you will need to make the normal rebuild of your project.
  • It is recommended that you start your project over the LiveXaml App. This way, if you build custom views, you will be able to use them also on the Xaml side (but you will need first to build/rebuild the code until those custom views work well on their code implementation).
  • When running on device, always ensure that your device is connected to the same network of your computer.

Video instructions

LiveXaml Tutorial

How to build

If you just want to use the project, you can go to the downloads section and download the latest ZIP file available.
After extracting the ZIP, you will find 2 folders. One is the Serverand contains a runnable JAR file that you will need to run on Terminal/Command Line. The other is App and contains the Xamarin template project that you will have to run on simulator/device in order to start previewing the XAML file that you're currently editing.
Anyway, if you want/need to modify something on the project, here are the steps to build it:

Server

  1. Download/clone the repository on your computer.
  2. Download and install Eclipse for Java if you don’t have it yet.
  3. Open Eclipse and go to “File” -> “Import” -> “General” -> “Existing projects into workspace”
  4. Right click on the imported project and select “Export” -> “Java” -> “Runnable JAR file” and select “Next”
  5. Select a folder to where you want to export the project under “Export destination” and click Finish.

App

  1. Just open the LiveXaml App project on Xamarin Studio or Visual Studio and run it to a simulator or device.

How to run

  1. Open the command line/terminal and write ipconfig (Windows) or ifconfig (Mac) and take note of your ip address.
  2. Now write cd path/to/LiveXaml.jar/folder
  3. Run the following command: LiveXaml.jar /path/to/MyPage.xaml
  4. If you have issues running that command, please specify a port after the path to the Xaml page.
    • Ex: LiveXaml.jar /path/to/MyPage.xaml 10030
  5. Open the LiveXaml App project (or your own project built over LiveXaml App project, which is recomended as said on the Notes section) on Xamarin Studio or Visual Studio and run it to the simulator/device.
  6. Input the Ip and the port that you took note before on the simulator/device and press “Connect”
  7. Now simply edit the Xaml file that you input on the LiveXaml.jar command in step 3. and you will notice that each time that you save the file, the simulator/device will update the screen with the new contents without needing to rebuild anything.

Troubleshoot

If you have trouble connecting your device/simulator to the LiveXaml Server, please check your Firewall settings.