Is there already support for XML Documentation inside TypeScript? It seems there isn't, but maybe I am overlooking something.
I'd like something like this:
export class Point {
/// <summary>This is a Point class.</summary>
constructor (public x: number, public y: number) {
/// <summary>Creates a new Point object</summary>
/// <param name="x"></param>
/// <param name="y"></param>
}
}
There is no mention of this in the language specification, so there is currently no support for this feature.
The only comment syntax in use is to create a dependency on a source file:
/// <reference path="..."/>
You can suggest features such as this on the project page - so it could be added to the language in the future if the idea gains traction.
Apparently JSDoc is now supported, at least in Visual Studio Code, as I'm currently using it there and it shows in the intellisense popups.
For what it's worth, samples from Microsoft do include this style of comment. From the Parallax sample:
constructor(scrollableContent: HTMLElement, perspective: number) {
/// <param name="scrollableContent">The container that will be parallaxed.</param>
/// <param name="perspective">The ratio of how much back content should be
/// scrolled relative to forward content. For example, if this value is
/// 0.5, and there are 2 surfaces, the front-most surface would be scrolled
/// normally, and the surface behind it would be scrolled half as much.</param>
this.perspective = perspective;
this.surface = [];
this.content = scrollableContent;
$(scrollableContent).scroll((event: JQueryEventObject) => {
this.onContainerScroll(event);
});
}
Related
I'm trying to test my UWP application for submitting it to the store with Microsoft App Certification Kit. The only problem I have is:
in the onlaunched method implementation of the app, ensure you handle the launchactivatedeventargs.prelaunch option to be prelaunch event aware
I've never changed it, I'm using the original project from Visual Studio
sealed partial class App : Application
{
/// <summary>
/// Initializes the singleton application object. This is the first line of authored code
/// executed, and as such is the logical equivalent of main() or WinMain().
/// </summary>
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
/// <summary>
/// Invoked when the application is launched normally by the end user. Other entry points
/// will be used such as when the application is launched to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
protected override async void OnLaunched(LaunchActivatedEventArgs e) {
#if DEBUG
if (System.Diagnostics.Debugger.IsAttached) {
this.DebugSettings.EnableFrameRateCounter = true;
}
#endif
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null) {
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
rootFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) {
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
if (!e.PrelaunchActivated) {
if (rootFrame.Content == null) {
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootFrame.Navigate(typeof(FormView), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
/// <summary>
/// Invoked when Navigation to a certain page fails
/// </summary>
/// <param name="sender">The Frame which failed navigation</param>
/// <param name="e">Details about the navigation failure</param>
void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}
/// <summary>
/// Invoked when application execution is being suspended. Application state is saved
/// without knowing whether the application will be terminated or resumed with the contents
/// of memory still intact.
/// </summary>
/// <param name="sender">The source of the suspend request.</param>
/// <param name="e">Details about the suspend request.</param>
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
//TODO: Save application state and stop any background activity
deferral.Complete();
}
}
I googled a bit but everyone's speaking about a Template10 for UWP such al from this link
App Certification fails because of PreLaunch Test
Any suggestions? Thank you!
Yes, this is a way to pass WACK. Sometimes the package can also passed the store certification even though it failed WACK before.
When you test your project under project property in the Build section, and then you checked “Compile with .NET tool chain”, it mean that you run your project in “Release” mode.by default your app utilizes the .NET Native toolchain. Since the package is compiled to native binaries, the package does not need to contain the .NET framework libraries. In addition, the package is dependent on the latest installed .NET Native runtime as opposed to the CoreCLR package. The .NET Native runtime on the device will always be compatible with your application package.
Local native compilation via the “Release” configuration will enable testing your application in an environment that is similar to what your customers will experience. It is important to test this on a regular basis as you proceed with development.
Because store will test the package that you submitting in .NET Native mode, you will passed the certification by checking “Compile with .NET tool chain”.
In addition, here is an article about .NET Native, you could refer to it.
I think I found the solution but maybe it's just a lucky coincidence.
If under Project Property in the Build section, I checked "Compile with.NET Native tool chain" and now the result is Passed
Do you think it's the right answer?
I have recently been learning an implementing my own shaders in libgdx.
So far I did this with a custom shader provider, which chooses between a few shaders based on the userdata value of the object;
public class MyShaderProvider extends DefaultShaderProvider {
public final DefaultShader.Config config;
final static String logstag = "ME.MyShaderProvider";
//known shaders
static public enum shadertypes {
prettynoise,
invert,
standardlibgdx,
noise,
distancefield,
conceptbeam
}
public MyShaderProvider (final DefaultShader.Config config) {
this.config = (config == null) ? new DefaultShader.Config() : config;
}
public MyShaderProvider (final String vertexShader, final String fragmentShader) {
this(new DefaultShader.Config(vertexShader, fragmentShader));
}
public MyShaderProvider (final FileHandle vertexShader, final FileHandle fragmentShader) {
this(vertexShader.readString(), fragmentShader.readString());
}
public MyShaderProvider () {
this(null);
}
public void testListShader(Renderable instance){
for (Shader shader : shaders) {
Gdx.app.log(logstag, "shader="+shader.getClass().getName());
Gdx.app.log(logstag, "can render="+shader.canRender(instance));
}
}
#Override
protected Shader createShader (final Renderable renderable) {
//pick shader based on renderables userdata?
shadertypes shaderenum = (shadertypes) renderable.userData;
if (shaderenum==null){
return super.createShader(renderable);
}
Gdx.app.log(logstag, "shaderenum="+shaderenum.toString());
switch (shaderenum) {
case prettynoise:
{
return new PrettyNoiseShader();
}
case invert:
{
String vert = Gdx.files.internal("shaders/invert.vertex.glsl").readString();
String frag = Gdx.files.internal("shaders/invert.fragment.glsl").readString();
return new DefaultShader(renderable, new DefaultShader.Config(vert, frag));
}
case noise:
{
return new NoiseShader();
}
case conceptbeam:
{
Gdx.app.log(logstag, "creating concept gun beam ");
return new ConceptBeamShader();
}
case distancefield:
{
return new DistanceFieldShader();
}
default:
return super.createShader(renderable);
}
//return new DefaultShader(renderable, new DefaultShader.Config());
}
}
This seemed to work.
I have an object with a noise shader applied, animated fine.
I have an object with a inverted textured shader, again looking fine.
I have a whole bunch of other objects being rendered with the normal default shader.
It seems the provider as I have set it up is correctly rendering different objects with different shaders based on userData.
However,I recently found a new object I created with a new shader type (ConceptBeamShader) is only being rendered with the Default shader.
The objects user data is set the same as the others;
newlazer.userData = MyShaderProvider.shadertypes.conceptbeam;
However, at no point does the conceptbeamshader get created or used.
In fact createShader() doesn't seem to run for it at all...implying that an existing shader in the shaders array is good enough.
Using the testListShader() function above I see "DefaultShader" is in the "shader" list, which canRender anything, and thus it never gets to creating that new shader I want that object to use :-/
I assume the other shaders only got picked before because those objects were created before DefaultShader got added to that internal shader list.
Surely as soon as a DefaultShader is used, it gets stored in that provider list and will "gobble up" any other shaders. The getShader function in the class MyShaderProvider extends is;
public Shader getShader (Renderable renderable) {
Shader suggestedShader = renderable.shader;
if (suggestedShader != null && suggestedShader.canRender(renderable)) return suggestedShader;
for (Shader shader : shaders) {
if (shader.canRender(renderable)) return shader;
}
final Shader shader = createShader(renderable);
shader.init();
shaders.add(shader);
return shader;
}
As you can see the shaders are looped over and the first one which returns true for "canRender" is used.
So...umm...how exactly are you supposed to say "render this ModelInstance with this shader" ?
None of the tutorials I have read online seemed to cover this - in fact the one on the official site seems to recommend exactly what I am doing so theres clearly something I am missing.
Thanks,
edit
The place it was instanced was asked for. Not sure how this helps but here;
public static MyShaderProvider myshaderprovider = new MyShaderProvider();
Its then assigned to the modelbatch at the games setup
modelBatch = new ModelBatch(myshaderprovider);
As mentioned, my other shaders are working and visible on the objects I assigned the matching userdata too, so I am 99.9% sure the provider is being called and is, at least in some cases, picking the right shader for the right object.
My hunch where its going wrong is as soon as "DefaultShader" gets added to the internal shader list.
There are several ways to specify the Shader to use for a ModelInstance. One of which is to specify the Shader when calling the render method on the ModelBatch:
modelBatch.render(modelInstance, shader);
This will hint the ModelBatch to use this shader, which it will almost always do, unless the specified Shader isn't suitable to render. Whether a Shader is suitable (and should be used) to render the ModelInstance is determined by the call to Shader#canRender(Renderable).
Note the difference between the Renderable and ModelInstance. This is because a single ModelInstance can consist of multiple parts (nodes), each which might need another Shader. For example when you have car model, then it might consist of the opaque chassis and transparent windows. This will require a different shader for the windows and the chassis.
Therefore specifying a Shader for an entire ModelInstance isn't always very useful. Instead you might need to have more control over which Shader is used for each specific part of the model (each render call). For this you can implement the ShaderProvider interface. Which allows you to use whichever Shader you like for each Renderable. Ofcourse you should make sure that the Shader#canRender(Renderable) method of the Shader you use returns true for the specified Renderable.
It can be useful to extend the DefaultShaderProvider so you can fall back on the DefaultShader when you don't need a custom shader. In that case you must make sure that there's an unambiguous and consistent distinction between when the default shader should be used and when a custom shader should be used. That is, the DefaultShader#canRender method should not return true when a custom shader should be used and your customshader#canRender method should not return true when the DefaultShader should be used. (on itself this isn't specific to custom or default shader, you always need to know which shader to use)
You are trying to use ModelInstance#userData to distinct between a custom and default shader. There are two issues with this:
The userData is the same for every Renderable of the ModelInstance. So practically you over complicating your design at no gain. You might as well use modelBatch.render(modelInstance, shader).
The DefaultShader is and can't be aware of any user specific data. It simply looks at the information it is aware of (the material, mesh, environment, etc.) and return true in canRender if it should be used to render based on that info.
To solve the second point, the libGDX 3D API comes with attributes (used for both environment and material). By design these allow you to compare a Shader and Renderable with just two numbers, which are bitwise masks of the attributes. Therefore the preferred, easiest and fastest method is to use a custom attribute. This not only let's you unambiguously identify which shader to use, but also let you specify the required information to use the shader (there's a reason you want to use a different shader).
An example of how to do that can be found here and here.
I currently store embedded images in a flex library project (swc) like so:
public class BitmapAssets
{
[Embed(source="/assets/icon_160.png")]
public static const icon_160:Class;
[Embed(source="/assets/icon_240.png")]
public static const icon_240:Class;
[Embed(source="/assets/icon_240.png")]
public static const icon_240:Class;
}
And then i reference the images in other projects. For example:
<s:Button>
<s:icon>
<s:MultiDPIBitmapSource source160dpi="{BitmapAssets.icon160}"
source240dpi="{BitmapAssets.icon240}"
source320dpi="{BitmapAssets.icon320}" />
</s:icon>
</s:Button>
What i would like to do is embed the MultiDPIBitmapSource in the library project; then i could reduce the code to this:
<s:Button icon="{MultiDPIBitmapAssets.icon}" />
However, i can't figure out how to embed a MultiDPIBitmapSource object with source160/240/320 values filled.
Any solutions gratefully received ;)
Edit:
As an alternative to 'true' embedding, i'm wondering whether mxml compiling could provide an answer. For instance, if i have an mxml declaration:
<fx:declarations>
<s:MultiDPIBitmapSource id="icon"
source160dpi="{BitmapAssets.icon160}"
source240dpi="{BitmapAssets.icon240}"
source320dpi="{BitmapAssets.icon320}" />
</fx:declarations>
Then the mxml compiler will turn it into:
var icon:MultiDPIBitmapSource = new MultiDPIBitmapSource();
icon.source160dpi = BitmapAssets.icon160;
icon.source240dpi = BitmapAssets.icon240;
icon.source320dpi = BitmapAssets.icon320;
And i can then reference it as i'd like:
<s:Button icon="{MultiDPIBitmapAssets.icon}" />
Technically, its not embedded. But for practical purposes, it is (at least in my mind). The question is, where do i put the declarations tag? Can i define a non-visual class in mxml?
MultiDPIBitmapSource is an object created at runtime, not at compile-time. You won't be able to embed an instance of it in the app.
However, you could create a static reference to an object. It would require a bit more code, but it would be less code to write every time you need to use it.
public class Assets {
private static var _asset:MultiDPIBitmapSource;
public static function get asset():MultiDPIBitmapSource {
if ( !_assets ) {
_assets = new MultiDPIBitmapSource();
_assets.source160 = "url";
_assets.source240 = "url";
_assets.source320 = "url";
_assets.source480 = "url";
}
return _assets;
}
}
And then to use it:
<s:Button icon="{Assets.asset}"/>
So it basically treats the source as a mini-Singleton. I'm personally not a fan of this method. The only gain you get is slightly less code in each class, but you lose flexibility and it goes against general OOP practices. But it should work.
I'm looking to create a Live Tile which is similar to the Iconic tile but allows me to use a custom Count value (i.e. non-integer string).
The closest I've come is that I must create the contents using a bitmap and then use that image as the tile. Unfortunately I don't know how this is commonly done.
I'm looking to create tiles similar to the one that's described in this question (though this question is orthogonal to my issue): Custom live tile rendering issue on Windows Phone (7/8)
In short,
Is WriteableBitmap the best way of creating Live Tile layouts?
Is there a mechanism by which I can convert XAML into the Live Tile?
An example of the layout I'd like to achieve is somewhat displayed in the Skype Live Tile seen here.
As far as I can tell, creating a custom bitmap is the way to go. I found this answer along with this article to be very helpful when I was doing my live tiles.
If you don't mind purchasing third-party controls you can check out Telerik's LiveTileHelper control (if you're a member of Nokia's developer program you already have access to this).
For my first app I opted to roll my own solution based on the first two links. I have a base class that handles the work of taking a FrameworkElement (each derived class is responsible for generating the FrameworkElement that contains the information to render) and creating the corresponding WritableBitmap instance which I then save as a .PNG using the ToolStack C# PNG Writer Library.
As an example, here's my code to generate the control that represents a small pinned secondary tile in one of my apps:
/// <summary>
/// Returns the fully populated and initialized control that displays
/// the information that should be included in the tile image.
/// </summary>
/// <remarks>
/// We manually create the control in code instead of using a user control
/// to avoid having to use the XAML parser when we do this work in our
/// background agent.
/// </remarks>
/// <returns>
/// The fully populated and initialized control that displays
/// the information that should be included in the tile image.
/// </returns>
protected override FrameworkElement GetPopulatedTileImageControl()
{
var layoutRoot = new Grid()
{
Background = new System.Windows.Media.SolidColorBrush( System.Windows.Media.Color.FromArgb( 0, 0, 0, 0 ) ),
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Height = TileSize.Height,
Width = TileSize.Width,
Margin = new Thickness( 0, 12, 0, 0 )
};
var stopName = new TextBlock()
{
Text = Stop.Description,
TextTrimming = TextTrimming.WordEllipsis,
TextWrapping = TextWrapping.Wrap,
Margin = new Thickness( 7, 0, 7, 12 ),
MaxHeight = 135,
Width = TileSize.Width - 14,
VerticalAlignment = VerticalAlignment.Bottom,
HorizontalAlignment = HorizontalAlignment.Stretch,
FontFamily = (System.Windows.Media.FontFamily) Application.Current.Resources[ "PhoneFontFamilySemiBold" ],
FontSize = (double) Application.Current.Resources[ "PhoneFontSizeMediumLarge" ],
Style = (Style) Application.Current.Resources[ "PhoneTextNormalStyle" ]
};
Grid.SetColumn( stopName, 0 );
Grid.SetRow( stopName, 0 );
layoutRoot.Children.Add( stopName );
return layoutRoot;
}
This is a super-simple control with just a TextBlock, but you can easily expand on this. Note that I don't use a UserControl here as I also run this code in a background agent where you have significant memory constraints.
Once I have a control I generate a WritableBitmap like this:
/// <summary>
/// Renders the tile image to a <see cref="WritableBitmap"/> instance.
/// </summary>
/// <returns>
/// A <see cref="WritableBitmap"/> instance that contains the rendered
/// tile image.
/// </returns>
private WriteableBitmap RenderTileImage()
{
var tileControl = GetPopulatedTileImageControl();
var controlSize = new Size( TileSize.Width, TileSize.Height );
var tileImage = new WriteableBitmap( (int) TileSize.Width, (int) TileSize.Height );
// The control we're rendering must never be smaller than the tile
// we're generating.
tileControl.MinHeight = TileSize.Height;
tileControl.MinWidth = TileSize.Width;
// Force layout to take place.
tileControl.UpdateLayout();
tileControl.Measure( TileSize );
tileControl.Arrange( new Rect( new Point( 0, 0 ), TileSize ) );
tileControl.UpdateLayout();
tileImage.Render( tileControl, null );
tileImage.Invalidate();
tileControl = null;
GC.Collect( 2, GCCollectionMode.Forced, true );
// Adjust the rendered bitmap to handle the alpha channel better.
CompensateForRender( tileImage );
return tileImage;
}
Again, I'm making explicit calls to GC.Collect to help keep my memory consumption under control when running this code as part of my background agent. The CompensateForRender method is based on the code in the linked article.
Hope this helps.
As currently developing an mobile application with Flex Mobile, got to the point of finalising things and make some fine visual layout adjustments. As my Application is built in sections using TabbedViewNavigatorApplication i wanted to add and fine tune icons that appear in the TabbedViewNavigator #tabBar tabs. Well, that was one of those tasks that seems to take minutes, ending in searching Adobe api docs and googling around for hours, eventually to find the solution in days. Said so i want to post my solution, hoping that someone will need it and use it in their own specific situations.
The first thing to mention here is that Adobe per default, has an extensive help library for skinning spark components, but eventually and on the end - those examples often only scratch the surface of what is needed in specific situation and / or implementation.
At first i want to say that I avoid using mxml skins and always do my spark skinning job in AS3 classes using ClassReference. Seems to me that this approach is much more flexible, elegant and cleaner than over-spamming things in mxml. Although sometimes more harder to implement.
So your typical minimal TabbedViewNavigator Application looks like this:
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="onApplicationComplete(event)">
<fx:Style source="MyStyles.css" />
<fx:Script>
<![CDATA[
import spark.components.ViewNavigator;
private function onApplicationComplete(e:Event):void {
for each(var vn : ViewNavigator in this.navigators){
/// do something with your VN's ...
vn.icon = "./assets/myFaboulousIcon.png";
}
}
]]>
</fx:Script>
<s:ViewNavigator label="one" width="100%" height="100%" firstView="views.oneView"/>
<s:ViewNavigator label="two" width="100%" height="100%" firstView="views.twoView"/>
<s:ViewNavigator label="three" width="100%" height="100%" firstView="views.threeView"/>
</s:TabbedViewNavigatorApplication>
In this typical configuration you can access the ViewNavigator icon property and set it either in your mxml or from AS3 (eg. in the for loop above) eventually adding a switch statement to select different icons for each tab ... But that is where your story ends. ViewNavigator icon property is used when certain ViewNavigator is represented by a visual component. Which means that in your #tabBar the ViewNavigator is represented visually as a part of navigators stack, and is logical - in this situation it uses the icon specified.
Now let's suppose now you want to change the alpha or colorise your icons programatically, meaning you always use one set of icons but in different situations - you give them different visual properties, and one of those situations can be - their visual appeal in the application #tabBar.
The icon property is a path to the icon image file, and as a type is an generic Object. So you can't change alpha or do anything else with it. Neither icon property will give you any reference to the display object containing the icon itself or anything else you want for your juicy AS3 jonglery pokery ...
For such task we must do some nice spark skinning (in AS3) ;) So read the answer bellow
The first step is to add your css file from example above MyStyles.css (i always do skin class references from within css, found it easy to manage and change if needed) ...
/* MyStyle.css example */
.
.
s|TabbedViewNavigator #tabBar {
skinClass: ClassReference("com.myapp.skins.TabBarSkin");
}
.
.
You must now define your custom TabBarSkin class that can look something like this:
/* TabBarSkin Class */
package com.myapp.skins
{
import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
import spark.components.ButtonBarButton;
public class TabBarSkin extends TabbedViewNavigatorTabBarSkin
{
public function TabBarSkin() {
super();
}
override protected function createChildren():void
{
if (!firstButton) {
firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
firstButton.skinClass = TabBarFirstTabSkin;
}
if (!lastButton) {
lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
lastButton.skinClass = TabBarLastTabSkin;
}
if (!middleButton) {
middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
middleButton.skinClass = TabBarLastTabSkin;
}
super.createChildren();
}
}
}
Not getting so much in details, you must know that this custom class TabBarSkin inherits from TabbedViewNavigatorTabBarSkin which has 3 skin classes for each of the significant tab positions / first / mid / last / in your #tabBar. In the most simple situation we must implement (extend) two of them / first / and / last -> as the / mid / position also uses the / last / skin, and in this case we don't need it separately implemented.
/* TabBarFirstTabSkin Class */
package com.myapp.skins
{
import spark.components.Group;
import spark.skins.mobile.TabbedViewNavigatorTabBarFirstTabSkin;
public class TabBarFirstTabSkin extends TabbedViewNavigatorTabBarFirstTabSkin
{
private var __iconGroup : Group = null;
public function TabBarFirstTabSkin() {
super();
}
override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
super.layoutContents(unscaledWidth, unscaledHeight);
if(!__iconGroup) {
__iconGroup = getIconDisplay() as Group;
}
}
}
}
Same as for the / last / one:
/* TabBarLastTabSkin Class */
package com.myapp.skins
{
import spark.components.Group;
import spark.skins.mobile.TabbedViewNavigatorTabBarLastTabSkin;
public class TabBarLastTabSkin extends TabbedViewNavigatorTabBarLastTabSkin
{
private var __iconGroup : Group = null;
public function TabBarLastTabSkin() {
super();
}
override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
super.layoutContents(unscaledWidth, unscaledHeight);
if(!__iconGroup) {
__iconGroup = getIconDisplay() as Group;
}
}
}
}
Finally, the __iconGroup member will now have reference to the Group visual component containing your icon! -> and which you defined in your ViewNavigator instance through mxml / or in AS3 code. Now we can go dirty ;) and do things like this for example:
.
.
.
var colorTransform : ColorTransform = new ColorTransform();
colorTransform.color = 0xFF3300;
colorTransform.alphaMultiplier = 0.85;
__iconGroup.transform.colorTransform = colorTransform;
.
.
.
Which will colorise your icon in red and give alpha 0.85. etc ... This is really the basics you can do with spark #tabBar skinning in Flex Mobile. Hope will help someone. Cheers.