Page 47 - MSDN Magazine, February 2018

scale = 0.5 the difference in widget sizes when moving from 640 to 1280 pixels will be not twice but 1.5 times because the formula to calculate the new size is:
newSize=size+size*scale*(1280/640-1)=size*(1+scale)=size*1.5.
But if scale = 2, the widget will be 3 times larger according to the calculation. A special case of scale = 0 also satisfies the formula here: No scale adjustment will be performed—the widget will have exactly the same size regardless of the device size. This scale parameter can also be applied per widget—it can be specified as an optional param- eter in the GetLocation function. I’ll show how to do this in a bit.
Next, I define a voice variable. Note that CSCS is a Python-like scripting language—the type of the variable is inferred from the context, so the voice variable will be represented as a C# string behind the scenes.
Then I define a button. A widget definition in CSCS always takes two statements: The first specifies the location of the widget and the second is the actual definition of the widget. Behind the scenes, a UIButton widget is used for iOS and a Button is used for Android.
The general syntax for creating a location on the screen is:
GetLocation(ReferenceX, PlacementX, ReferenceY, PlacementY, AdjustmentX = 0, AdjustmentY = 0,
ScaleOption = false, Scale = 0.0, Parent = null);
Here’s the meaning of the arguments:
• ReferenceX: The name of another widget for horizontal
placement. It can be the string “ROOT,” meaning the parent
widget or the main screen.
• PlacementX: A horizontal point relative to the widget
indicated in ReferenceX. Possible values are listed at the end
of these arguments.
• ReferenceY: The name of another widget for vertical place-
ment. It can be the string “ROOT,” meaning the parent widget
or the main screen.
• PlacementY: A vertical point relative to the widget indi-
cated in ReferenceY. Possible values are listed at the end
these arguments.
• AdjustmenX: An additional horizontal movement of the
widget in pixels. It can also be negative; the positive direc-
tion goes from left to right.
• AdjustmenY: An additional vertical movement of the wid-
get in pixels. It can also be negative; the positive direction
goes from top to bottom.
• ScaleOption: Indicates whether to apply a particular scaling
option to the widget. If this option is false or not provided, the adjustment specified in the AutoScale function will be done. If the option is provided, the adjustment parameters and the size of the widget will be modified according to the Scale parameter.
• Scale: The measure to be used for adjusting the size of the widget. The functionality is the same as in the AutoScale function. As a matter of fact, the same code will be executed.
• Parent: The parent of the widget. If not specified, the widget will be added to the Main Layout on Android or to the Root View Controller on iOS (specifically to Window.RootViewController.View).
Possible values for the placement arguments are very similar to the Android RelativeLayout.LayoutParams class. They can be any of: msdnmagazine.com
“CENTER,” “LEFT,” “RIGHT,” “TOP,” “BOTTOM,” “ALIGN_LEFT,” “ALIGN_RIGHT,” “ALIGN_TOP,” “ALIGN_BOTTOM,” “ALIGN_ PARENT_TOP,” “ALIGN_PARENT_BOTTOM.”
These parameters are used for both horizontal and vertical place- ment on iOS and on Android. No XML or XAML knowledge is needed. And there’s no iOS Storyboard to deal with.
Once the location is created, you place a widget in it. Here’s the general syntax for doing so:
AddWidget(location, widgetName, initParameter, width, height);
AddButton is a particular case of such a function, where the ini- tialization argument is the text shown on the button. Other examples of widget functions are AddLabel, AddView, AddCombobox and there are many more, as you’ll see.
The AddAction function assigns an action to a button when the user clicks on it. It generally has the following syntax:
AddAction(widgetName, callbackFunction);
A callback function in CSCS always has two parameters, a sender and a context argument, a concept borrowed from C#.
A widget definition in CSCS always takes two statements: the first specifies the location of the widget and the second is the actual definition of the widget.
Inside of the talk_click function, first I call the ShowToast func- tion, which calls a native Toast implementation on Android and a custom Toast-like implementation on iOS. The iOS implemen- tation just constructs a small frame with a message and destroys it after a timeout.
Finally, I call to the voice recognition function:
VoiceRecognition("voice_recog", voice = "en-US");
The first parameter is the name of the callback function to call when the voice recognition is complete. The second parameter is the voice. It’s optional and, by default, it’s U.S. English. The voices are
Figure 1 A “Hello, World!” in CSCS for Mobile Apps
AutoScale(); voice = "en-US";
locButtonTalk = GetLocation("ROOT", "CENTER", "ROOT", "BOTTOM", 0, 0); AddButton(locButtonTalk, "buttonTalk", "Click me", 200, 80); AddAction(buttonTalk, "talk_click");
function talk_click(sender, arg) { ShowToast("Please say your name..."); VoiceRecognition("voice_recog", voice);
}
function voice_recog(errorStatus, recognized) { if (errorStatus != "") {
AlertDialog("CSCS", "Error: " + errorStatus); } else {
ShowToast("Word recognized: " + recognized);
Speak("Hello, " + recognized, voice); }
}
February 2018 43