The following project is on a rather POC stage. Its main target is to allow NativeScript developers to leverage the power of iOS storyboards for building the UI. What the parsexml.js script is doing is parsing the storyboards xml files to JS objects and then to NativeScript xml and corresponding js files.
####So far the script translates only Button and Label elements and uses their absolute position instead of constraints.
Here is how you can use the example .storyboard file to play with the parser script:
1.Create a new NS project:
tns create nativescript-storyboard
2.Generate the .xcodeproj:
cd nativescript-storyboard
tns platform add ios
3.Open the generated XCode project from platforms/ios
4.Drag Main.storyboard, TNSButton.h, TNSButton.m, TNSPage.h and TNSPage.m into the XCode project and leave Copy items if needed selected.
#####Make sure the files are added to the app target
You will notice that both viewcontrollers' root views are subclasses of TNSPage. This allow us to set a property called View Name which is used by the parser script for setting the names of the generated files (main-page.xml, main-page.js).
If you select any of the buttons there is a field called Action. This will create a function with the same name in the generated js file.
You can move the buttons and labels around the view as well as change their titles, title and background colors as well as play with the segues.
5.Copy parsexml.js file in your NS project root folder.
6.Make sure you have xml2js and xmlbuilder npm modules installed.
7.From the General tab of the XCode project set Deployment target to 9.0 or higher
8.Open parsexml.js and make sure the storyboardPath variable is properly set. It should be pointing to the storyboard to be parsed.Then run parsexml.js
node parsexml.js
9.The xml and js files should be generated in the app folder. You will find out they are named just as the View Name fields we populated and the main-page.js contains functions named just as our buttons Action fields.
10.Run tns run ios:
11.Run tns run android
##The segues have taken effect as well!
