Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Raman Sharma: Building Metro Style Apps with C++ and JavaScript

Download

Right click “Save as…”

Creating a Metro style app with Javascript doesn't mean Javascript is the only language you can use. There are several reasons to leverage compiled code as well, which will be covered in this session. Learn how your Metro style app with HTML5 can directly access native code. We'll show you how to access your C++ Windows Runtime components from JavaScript. After this talk, you'll understand how to combine native and script code in order to build the most compelling Metro style apps.

Tags:

Follow the Discussion

  • This is good but can I use C++ 3D with HTML?

  • Eric AguiarHeavens​Revenge Know Thyself

    I love the WinRT stuff, should be able to embed a DirectX game right inside an HTML element and boom.  I hope the DX guys make a similar surface API to get an equivalent for WebGL for GPU computation tasks/graphics embedded in web pages.

  • Yeah, it could be very nice. But it is possible with WinRT to create 3D app engine in C++ and do all game interface in HTML/JS?

  • Interesting... Can I create such winrt wrappers for native libraries for which I don't have source code?  

  • johannesjohannes

    Although downloaded twice, I cannot play the High Quality MP4 file!?

  • CharlesCharles Welcome Change

    @johannes: What application are using to play the file?

    C

  • badpresbadpres

    Really bad presentation style for such a revolutionary step in native/JS/.NET integration.
    This presentation has to be renamed as '100 Things That Constitute a Bad Presentation Style'.

  • Did this presentation happen at the conference?  At least I didn't see it.  I think this is something they recorded later. I saw at least two talks at the conference that sorta showed the JScript/Native integration.  This guy at least goes into some details.  Having said that, an interview style would have been better for this kind of a topic.

  • @kindaDev: If you are referring to being able to to render 3D content using C++ on a HTML5 surface, then that is something not supported right now.  Do you have some example of a scenario in which you would want to do that instead of creating the overall application in C++?

  • @tommy_2k:It is possible to create Windows Runtime wrappers on libraries without source code if the underlying binaries of the libraries fulfill all the requirements of the SDK for Metro style apps.  For more details on this topic, please watch this talk from Ale:

    http://channel9.msdn.com/events/BUILD/BUILD2011/TOOL-789C

  • @badpres: Sorry you didn't like it.  It was hard talking alone to a camera with no visual feedback whatsoever Smiley.  What specifically would you like to see improved?

  • @slinger: That's correct.  This talk was recorded here in Redmond and not in the //BUILD conference.  What would you like to see more of?  Samples, Examples, Tutorials?

  • Very good video - I would like to some WRL examples (creating/consuming WinRT with ISO C++ instead of C++/CX).  Some initial examples here:

    http://www.interact-sw.co.uk/iangblog/2011/09/25/native-winrt-inheritance

  • @Ted.w: Thanks Ted.  Sure, we would be publishing some WRL examples too.  Please stay tuned to Channel 9 and VCBlog for more details.  Also, great job with that write-up.

  • GlenGlen

    @Ted.w: Hi ted, what value do you get from using the WRL wrappers? As best I can see, using WRL will just makes *a lot* of *not very portable* code out of a arguably a little *non ISO* code. It's all MS specific anyway so making it ISO isn't much of a value in my initial opinions on C++/CX. What I am suggesting is that for the purposes of being "portable" (if that was your goal and it may not be), porting a little non ISO code may be a lot easier to port than a lot of ISO code that is still MS specific.

    I totally respect your desire to stay portable and ISO if that's your motive, but I just wonder if using WRL instead of C++/CX will actually make your code *less* portable practice but just creating more junk wrapper code to port.

    Anyway, just a point of view and you totally may have a good other reasons for your question.

    @other people: Please step in and challenge the views here both ways, it's the best way to get at our collective understanding here.

    There's a lot of good and bad angles on C++/CX and I want to see them to see if we can form a consensus. Please be kind though.

  • GlenGlen

    @Raman, I can't watch this video for some reason. It's probably the computer I'm temporarily using. Since I can't watch the video, please forgive any confusion I may have about the title and your comments here to other people.

    But can you clarify for me. You said to kindadev:

    "If you are referring to being able to to render 3D content using C++ on a HTML5 surface, then that is something not supported right now. Do you have some example of a scenario in which you would want to do that instead of creating the overall application in C++?"

    Some people (possibly kindadev) would like to author C++/CX components and use them to both create new UI style controls as well as set properties on existing HTML controls.

    Can you explicitly state out of these goals which ones are possible and not possible and any other obvious limitations that you know. Thanks.

  • DaveDave

    @badpres I think you're being a bit harsh...I've endured far worse presentations than this. He did a good job of explaining what he was doing

  • @Glen:Let me explain what I meant.  You can create HTML controls that are backed by C++/CX components for data-binding.  You can also create HTML/JS apps in which almost all the important processing happens in your engine written using C++/CX.  What you cannot do however is the following: creating an HTML app with a special DOM element whose rendering is entirely controlled by C++ using DirectX calls.  Does that make sense?

  • GlenGlen

    @raman, sorry I'm still not 100% sure what you mean.

    I think you are saying C++/CX objects can be invoked through JS, but that C++/CX can't be actually used to create a new type of DOM element even by deriving from an existing one. Is that right?

    So basically, the browser can't be extended by adding new UI controls in the way companies like Telerik do and as is often done for classic windows line of business apps. Also, browser based games cannot be authored this way either. Is that right?

    My other question, is C++/CX "safe" in the browser in ways that say ActiveX is not and wher Chrome Native Client apps might be?

  • @Glen:You can create whatever HTML control you want to.  Just that C++ cannot be used to draw to the screen for such controls, since there is no interface that lets native code do that for HTML/JS apps.

    About your second question: All Metro style apps run in their own sandbox and are thus safe to the extent that is afforded by the sandbox.  This sandbox prevents unauthorized access to system resources.  This means your C++/CX code can execute whatever calls it is allowed to by the Metro style SDK.  If your app package (containing all your app contents like HTML, JS, C++/CX DLLs etc.) passes App-Store validation, then it is safe to run on any machine.  In this sense these apps are more secure than ActiveX controls since there never was any validation that ActiveX is doing the right thing.

    For Metro style apps on the other hand, we have three levels of validations: at build time, at package upload time and at runtime.

  • GlenGlen

    I conclude from what you have said these facts:

    1. Can you create NEW C++/CX UI Controls?: No, because they can't owner draw, just compose at best.
    2. Can you write a game in the browser?: No, again because it can't draw anything.
    3. MS "validates" C++/CX aka Metro apps through the app store, but developers will have to pay for that and it's listing now or eventually. So it appears, MS is now making its revenue from developers supporting the platform via - an app tax if you will; as well as customers purchasing the platform directly.

    4. So basically, without the ability to draw, the browser is a non extensible platform and using C++/CX this way nets you an app tax and saves your hoster some processing cycles, maybe.

    5. So, if you don't want this, don't use it but you can't get a metro app onto the platform any other way.

    6. If you want to avoid the app tax compose your controls on your own cloud platform framework (say Linux) and deliver your composted controls that way since that is all you can create locally anyway.

    That's the way it looks to me from the information I've got from you.

    Sorry in advance if I have got any of this wrong. I may well have.

    I'll let others chime in on this on the advantages / disadvantages of this model.

  • @Glen:Some of those statements make sense, some don't and some are unrelated.  Please feel free to write to me at rasharm_msft@hotmail.com and we can discuss these firther (maybe setup a conf-call).  Maybe you can then post your understanding here Smiley

  • GlenGlen

    @Raman, thanks kindly for the offer but I'd prefer and think it will suffice just to see you answer my questions here.

    The questions could not be simpler and are numbered so you don't miss them and its better you have your words actual words posted here than risk me quoting you incorrectly.

  • PFYBPFYB

    I'd like to hear answers to Glen's questions as well.

  • And me too. 

  • @Glen:OK let me try to answer some of those questions to the best of my knowledge.  I work on the team that provides developer tools for building applications.  As such, I will stick to answering questions about that area.  For questions about platform capabilities and competitive offerings, I would urge you to post your questions on Ch9 videos related to those topics.  There are several from the //BUILD conference.

    Now before I answer your questions, let me just ensure that you understand a few things: you can use several tools to build applications for Windows 8.  XAML with C#, XAML with C++, DirectX with C++ and HTML/JavaScript are some of those.  Using compiled languages like C# and C++ you could always tap into the OS.  Now you can do it using JavaScript also.  But do understand that when you are creating application with HTML/JavaScript, you are NOT extending the browser.  The application you write is a standalone application that runs directly on the OS.

    Also, the purpose of this video was very specific.  If you understand and like the concept of building Metro style app (not browser plug-ins) using HTML and JavaScript, then you can use C++/CX for computation intensive jobs that you app may want to perform.

    Now to your questions (those I can answer):

    > Can you create NEW C++/CX UI Controls?

    For apps written using HTML/JS you cannot, but for apps using XAML for the UI, you can.

    > Can you write a game in the browser?

    Once again, the browser doesn't come into the pictire in the traditional sense.  If your question is whether you can create apps that are games using HTML/JS, yes you can.

    Thank you

    Raman Sharma, Visual C++

  • @Glen:As Raman said the custom control model for Metro style applications using HTML5/JS is based around JS. This applies to developers using C++, C# & VB.

    Jeff Fisher details the control model for Metro style apps in his talk at BUILD - http://channel9.msdn.com/events/BUILD/BUILD2011/APP-846T

    The second set of questions you posed are around publishing to the store and for now those policies haven't been decided. When they're worked out the details will be published on the Building Windows 8 Blog - http://blogs.msdn.com/b/b8/

    Tony Goodhew

    Microsoft Corp

  • JasperJasper

    I can not play High Quality MP4 video. I'm using VLC or even Media Player - its stuck after first couple of minutes :( :(

  • CharlesCharles Welcome Change

    @Jasper: I'll look into a solution if I can reproduce the problem. Downloading...
    C

  • CharlesCharles Welcome Change

    @Charles: Confirmed. Will re-encode.

    C

  • I'm personally against the whole HTML5/Javascript/CSS3. I would much prefer Silverlight over this. It's a shame since silverlight is so much better. HTML5 is just overhyped.

  • @ZeroInfinite: And the best part is that Windows 8 lets you create apps with both HTML and XAML.  You can pick whichever suits your taste and requirements best.

  • Btw, the project that I used in this video can now be downloaded here:

    http://video.ch9.ms/handsonlabs/build2011/707.zip

    Thanks
    Raman

  • daniaeldaniael

    interesting, this gentleman calls by native code, the c++ managed wrapper, which in fact is using a technology he has no clue about (pinvoke and com with legendary hresults, etc). is this how it works now? managers (obviously almost clueless) present somebody else's work via the clipboard... just my 2 cents. can somebody do something about that? how can somebody represent microsoft by calling c++ managed code by native code? hello?!?

  • daniaeldaniael

    also, for you information, i know it may be too technical for microsoft product managers...

    by definition, hybrid apps are NOT combining javascript and c++. visual c++ can link native and managed obj(s). that IS what a hybrid app is all about.

    just for your technical information... noticed that you are clueless about the complex technology you got to manage. no hard feelings

  • daniaeldaniael

    basically, this demo could have been explained as following:

    1. since metro apps are managed apps, obviously they can consume assemblies made by any other managed code family language (e.g. managed c++). just like in life, not all managed languages are born equal!

    2. what is so special, unique and wonderful about the microsoft visual c++ compiler toolset? under the the visual c++ umbrella you get 2 distinct c++ compilers, native and manged. their backends general compatible obj(s) so the linker can create assemblies containing native obj(s) or even native applications containing managed subsystems. and this is exactly what this demo is all about! the referenced assembly contained the mission critical flip geometrical transformation implemented in NATIVE C++

    of course, the microsoft marketing machine would not accept simple things like "fast is good, slow is bad" (talking about native vs managed c++) or that not all their languages are born equal or that c++ toolset is STILL the best language Microsoft (and apple and unix and linux) are using, because it gives you several programming paradigms (structured, oop, generic) so, enough abstraction while being per-formant and scalable. what microsoft added to this is the managed c++ extensions and the wonderful ability of the linker to link managed and native obj(s) into what's called HYBRID APPS.

    of course, like any lost art, the managers have different opinions... once upon a time, when c++ used to be a first class citizen in microsoft and when product managers still had a technical clue about the products they managed, so once upon a time, there was compiler backed project, modular and plugin based, called phoenix. phoenix supposed to allow you create native and managed obj(s) from ANY language (e.g. c#, vb, etc). of course, the upper management found this unacceptable and killed it (because the message to you, the many, supposed to be simple ".net is the best, is safe and fast enough for all your needs"

    what can i say more... who has ears to HEAR ME NOW (for i will not say it again) - this is for Microsoft Sake!!!

  • @reply to comment:

    • The components you create using C++/CX as shown in this video are fully native components.  There is no managed aspect to them.
    • The fact that underlying technology is COM (not pInvoke btw) is irrelevant.  The whole point is that the developer doesn't need to care about that.  He can write regular C++ language and libraries constructs (with some new additions off course) and he gets language interop for free
    • What's wrong with calling an app that uses both JavaScript and C++, a hybrid app?  Who said that the word "hybrid" is reserved for native+managed interop?
  • Here is the project btw:

    http://code.msdn.microsoft.com/Hybrid-JavaScript-and-C-e6dc77fa

    Thanks
    Raman

  • yr dengyr deng

    Hi Raman,
    I like this video very much, it's helpful to let me know how to build "JS + WinRT dll".
    One thing I'm wondering is if this concept is compatible to "C# + WinRT dll" or not?
    Because here I create a C# project and try to add reference of WinRT dll, it tells me "failed to add reference".

    Thanks.
    YR

  • Yes, the concept is similar.  You can use the same C++ WinRT component in a C# app as well.

    What you are observing is possibly a temporary bug in the Developer Preview.  But if you can send me your app, I can certainly take a look.

    sharma dot raman at microsoft

  • yr dengyr deng

    Hi Raman,
    Thanks for your response.
    Because I don't have your email, I put my app on skydrive.

    https://skydrive.live.com/#!/?cid=65de7800e1b1250d&sc=documents&uc=1&nl=1&id=65DE7800E1B1250D%21256

    The file name is DemoCs.zip created by Visual Studio 11 Preview.

    Regards,
    YR

  • @yr deng:You should try the following:

    1. Clean the Imaging project.
    2. In the DemoCs project, add a reference to platform.winmd.  Browse to "Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin\platform.winmd" and add a reference
    3. Now add a reference to Imaging project.
    4. Try rebuild

    This worked for me using your project.

  • @Raman_Sharma:

    It's working for me now.
    Another question is how to stop at breakpoint in C++?
    I set a breakpoint in C++, and start debugging, then I found it can not stop at C++ breakpoint.
    And I also can not find "Debugging" option in DemoCs project settings, it's not the same as JS project settings.

    Thanks.

    Regards,
    YR 

  • @yr_deng: That too seems like a bug in the developer preview.  This has been fixed already in the internal builds and will be available in the next public release.

  • @Raman_Sharma:
    Got it.
    Thanks. 

  • @Raman_Sharma:
    I try to set debug "native only" on the sample in your video. (JS + WinRT C++)
    The breakpoint can stop at C++, however I try to use "Immediate Window" or "Watch" to see some variable value, it's failed.
    For example, I set breakpoint in WinRTComponent::FlipImage() function, and try to see variables inFile/outFile/hr in "Watch", but it always told me variables are undefined.
    Do I need some more settings to fix it?

    Regards,
    YR 

  • @yr_deng:Once again, this was a developer preview.  There were some bugs and incomplete features related to debugging of C++/CX code.  Those issues have now been fixed.

  • @Raman_Sharma:
    Thanks, I got it. (I just think maybe I set wrong setting on my project.)

    Regards,
    YR 

  • guzeliyaguzeliya

    net

  • guzeliyaguzeliya

    proshu pomagite podklucit java Scrip

  • @guzeliya:I am not sure I understand the comment.

  • @Raman_Sharma: I did hear about that. I'm glad they're supporting XAML! Smiley Thanks.

  • Updated the MSDN code sample to be used with VS11 beta:

    http://code.msdn.microsoft.com/Hybrid-JavaScript-and-C-e6dc77fa

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.