Articles Blog

Build your first Xamarin.Forms application – THR1105

Build your first Xamarin.Forms application – THR1105


GOOD MORNING, EVERYONE. HOW’S EVERYBODY DOING TODAY? WELCOME AND THANK YOU FOR JOINING US. TODAY WE WILL TALK ABOUT BUILDING YOUR VERY FIRST [ INDISCERNIBLE ] APPLICATION.>>MY NAME IS MARK SMITH AND I’M A PROGRAM MANAGER AT MICROSOFT FOR THE MICROSOFT LEARN PRODUCT AS WELL AS A VERY UNIVERSITY. >>I’M A SENIOR CLIMATE DEVELOPER AND I ALSO WORK FOR CAMERON UNIVERSITY. TODAY WE WILL TALK ABOUT CROSS- PLATFORM MOBILE APPLICATION DEVELOPMENT. >>WE THOUGHT WE WOULD INTRODUCE BEFORE WE JUMP INTO CODE IT IS MICROSOFT’S ANSWER TO MOBILE FOR.NET DEVELOPERS. WE CALL IT THE VISUAL STUDIO TOOLS AND ALLOWS YOU TO CREATE IOS AND ANDROID APPLICATION — APPLICATIONS. WE BOTH HAVE AN ANDROID AND IOS DEVICE IN THE MAGIC HERE IS IT IS CODESHARING SO WE CAN USE THE SAME BUSINESS LOGIC AND SAME UI. >>THE COOL THING IS THE WHOLE IDEA WAS CODESHARING SO I COULD BUILD MY BUSINESS LOGIC AND EXISTING LOGIC AND REUSE IT INSIDE OF MY MOBILE APPS AND LEVERAGE THE UI TECHNOLOGY OF THE PLATFORM ITSELF. FOR IOS I WOULD BUILD AN IOS SPECIFIC UI AND FOR INJURED — ANDROID I WOULD BE ABLE TO CREATE A SINGLE UI DEFINITION THAT I SHARE ACROSS THOSE DEVICES AS WELL WHICH IS NICE FOR ENTERPRISE APPLICATIONS OR APPLICATIONS THAT DISPLAY DATA INFORMS. WE CAME UP WITH ZAMARON FORMS. >>IT ALLOWS US TO SHARE OUR UI DEFINITION BUT IT’S MORE THAN JUST THAT. WE ARE TALKING ABOUT SEE SHARP.NET AND IT RUNS IN A LOT OF PLACES. ZAMARON HAS MAC SUPPORT AS WELL. >>YOU CAN BUILD IT OUT FOR MAC AND WINDOWS AND IOS. >>THEY SUPPORT NOT JUST MOBILE BUT TABLET AND PHONES AND TV. WEARABLES, WATCHES. FANTASTIC. WHAT IS EXCITING IS WE ARE GOING TO CALL — SHOW YOU ZAMARON FORMS. IS GOING TO RUN ON WINDOWS, IOS AND ANDROID. A REALLY BIG DEVICE SURFACE, SHAREABLE CODE. LET’S JUMP INTO IT HOW DO WE GET STARTED ? >>IT COMES WITH VISUAL STUDIO SO IF YOU INSTALL VISUAL STUDIO’S 2017 YOU CAN GO TO THE INSTALLER AND YOU HAVE THE MOBILE DEVELOPER WITH.NET. YOU CAN BUILD A MOBILE APP. YOU ARE USING THE SAME EXACT LANGUAGE, TOOLS AND FRAMEWORKS THAT YOU’RE USED TO BUT LEVERAGING TO BUILD A NAP BY SIMPLY SELECTING THIS WORKLOAD IT GIVES YOU THIS. [ INAUDIBLE ] >>I HOPE SO. IF WE DON’T, WE ARE IN TROUBLE. >>LET’S MAKE A ZAMARON FORMS APPLICATION. >>I CAN DO THIS IN A COUPLE PLACES. THERE’S MOBILE APP HERE WE HAVE ANDROID HERE, APPLE TV, APPLE WATCH AND OF COURSE iPHONE AND iPAD. I WILL GO CROSS-PLATFORM AND THIS IS HOW WE GET TO A ZAMARON FORMS APP . WE WILL CALL THIS APP 1 AND I CLICK OKAY. I GET THE SECOND SCREEN. >>WE HAVE THE PLATFORM SELECTION. IT SUPPORTS WINDOWS OUT OF THE BOX SO WE WILL MAKE AN APPLICATION, IT SUPPORTS THREE PLATFORMS THAT WE HAVE ANOTHER OPTION HERE WHICH IS CODESHARING STRATEGY. THIS ALLOWS US TO PICK A COUPLE STRATEGIES. WE CAN USE A .NET STANDARD LIBRARY WHICH IS A NEW WAY OF SHARING BUSINESS LOGIC AND CODE. IT IS .NET STANDARD. IT IS SHAREABLE WITH A LOT OF OTHER PLATFORMS AS WELL . >>ANYTHING THAT SUPPORTS .NET .>>LET’S HIT OKAY. THIS WILL CREATE A BRAND-NEW SOLUTION FOR US. >>WE PLANT — PICKED A BLANK TEMPLATE BECAUSE IT IS THE SIMPLEST THAT YOU CAN BUILD AN WE HAVE A MASTER DETAIL VIEW IF YOU HAVE A LIST OF ITEMS AND THEN YOU WANT TO TAP ON ONE TO SEE A DETAILED SCREEN. THERE’S ALSO A TABBED PARADIGM THAT GIVES YOU TABS EITHER ON THE BOTTOM OR TOP DEPENDING ON THE PLATFORM AND LETS YOU SWITCH BETWEEN DIFFERENT SCREENS OF DIFFERENT INFORMATION. THAT WAS QUICK. >>THERE YOU GO. [ INAUDIBLE ] AND WE HAVE MORE THAN ONE PROJECT AND IF WE COLLAPSE THESE, I SEE WE HAVE FOR PROJECTS HERE. — FOUR PROJECTS HERE. FROM THE BOTTOM, THAT IS NAMED AFTER THE APP AND THEN IT HAS THE WINDOWS PROJECT. AND THEN WE HAVE APP 1 .IOS AND THEN THE ANDROID PROJECT. THE TOP IS INTERESTING BECAUSE IT IS NAMED AFTER OUR SOLUTION. THIS IS THE .NET STANDARD PROJECT. THIS PROJECT IS REFERENCED FROM ALL THREE OF THE PLATFORM SPECIFIC PROJECTS AND WHAT THAT MEANS IS THE CODE WE PLACE IN THIS PROJECT CAN GET COMPILED INTO A LIBRARY AND THEN WE CAN CONSUME THAT FROM OUR IOS APPLICATION, ANDROID AND [ INAUDIBLE ] APPLICATION. >>IT’S IMPORTANT TO RECOGNIZE WE HAVE THESE THREE PLATFORM SPECIFIC PROJECTS BECAUSE ZAMARON IS NOT A BLACK BOX WHERE IT’S GOING TO BUILD ONE SINGLE BINARY THAT RUNS ON ALL THE PLATFORMS THROUGH SOME KIND OF EMULATOR. IT BUILDS REAL NATIVE APPS. THE IOS PROJECT IS A REAL IPA MODULE THAT YOU WOULD INSTALL. THE ANDROID PROJECT WILL BUILD IN A PK FILED AND IT’S A NATIVE APP THAT IS CAPABLE OF LEVERAGING ANYTHING ON THAT PLATFORM. THIS IS NOT SOME FLASH TYPE TECHNOLOGY WHERE IT’S GOING TO EMULATE SOMETHING OR RUN SOMETHING ON EVERY SINGLE SYSTEM. YOU ARE BUILDING A REAL, NATIVE APP THAT LOOKS JUST LIKE ANY OTHER NATIVE APP THAT YOU PUT ON THE STORE. >>BUT WITH C SHARP, .NET AND CODESHARING. LET’S LOOK AT THE .NET STANDARD. LET’S RIGHT CLICK AND SHOW THE NEW GET PACKAGES. >>OKAY. >>ON THE PROJECT, WE CAN DO THAT HERE. STANDARD .NET SOLUTION AND WE SEE TSPS FOR FORMS. WE BRING IT AS A NEW GET PACKAGE. STANDARD 29 AND THE NEW GET PACKAGE ADDED TO EACH OF OUR PROJECTS. THIS IS HOW WE CAN LEVERAGE ZAMARON FORMS . LET’S HEAD OVER TO THE MAIN PAGE. >>OKAY. >>WE WILL PUT BOTH OUR BUSINESS LOGIC AND OUR UI DEFINITION IN THE .NET STANDARD PROJECT . OUT-OF-THE-BOX WE GET A UI DEFINITION FOR A SINGLE PAGE OR SCREEN OF UI AND THAT IS DEFINED IN MAIN PAGE. WHO HERE IS A [ INAUDIBLE ]. WHO HERE HAS USED XML?>>IT IS ESSENTIALLY A UR MARKUP LANGUAGE. IT IS REPRESENTING AND ANY — ANY TIME YOU SEE A PROPERTY SETTING OR ATTRIBUTE ON THAT ELEMENT IT IS SETTING A PROPERTY. THESE ARE JUST OBJECTS. WE WILL CREATE A STACK LAYOUT THAT ORGANIZES THINGS TOP TO BOTTOM OR LEFT OR RIGHT AND INSIDE THAT WE PUT A LABEL THAT HAS THE WORD WELCOME TO ZAMARON FORMS. IT CREATES A NICE UI THAT WILL RUN ON MY ANDROID DEVICE OR WHATEVER I DECIDE TO PLAY. NOTICE UP HERE I HAVE MY RUN BUTTON AND I CAN PULL THIS DOWN AND I HAVE SEVERAL DEVICE CHOICES. I HAVE SEVERAL EMULATORS INSTALLED IN MY PHONE PLUGGED INTO THE MACHINE AND YOU CAN SEE AT THE TOP IT SAYS SAMSUNG ANDROID 8. THAT IS THIS DEVICE. I CAN DEPLOY TO THIS DEVICE AND RUN THE APP. I WILL LEAVE IT ON THE EMULATOR TO START BUT I WILL RUN IT LIKE — WHILE HE EXPLAINS WHAT’S GOING TO HAPPEN HERE. >>MARCUS BOTH COMPILING AND RUNNING IT BUT MORE IMPORTANTLY HE IS COMPILING THE ANDROID APPLICATION. IT’S A TRUE NATIVE APPLICATION. IT’S NOT A SINGLE BINARY THAT RUNS ON ALL PLATFORMS. IT’S A NATIVE ANDROID APP. HE WILL DEPLOY TO HIS PHONE. >>TO THE EMULATOR FIRST. >>MY APOLOGIES. AND THEN WE WILL RUN THE APPLICATION AND YOU’LL SEE THE UI COME UP THAT IS REPRESENTED BY OUR XML HERE. WE WILL GIVE IT A MOMENT BUT YOU WILL SEE WELCOME TO ZAMARON FORM’S. >>THIS FILE HAS A CODE BEHIND FILE THAT GOES WITH IT. IT’S JUST A SHEET DOES C SHARP FILE. I CAN PUT BUSINESS LOGIC [ INAUDIBLE ]. >>WHAT IS KEY THERE IT IS JUST C SHARP AND FOR .NET DEVELOPERS THIS IS STANDARD. ARE WE ON 7.0 SUPPORT? >>YES. 7.3, THE LATEST VERSION. >>THEY ARE GOING TO BE COMFORTABLE USING THE EXACT SAME PATTERNS FOR OTHER TYPES OF APPLICATIONS AND IT MEANS YOUR DEVELOPERS CAN START MAKING MOBILE APPLICATIONS. INTERESTINGLY ENOUGH I KNOW YOU GUYS PROBABLY CAN’T SEE IT BUT DOWN HERE IN THE OUTPUT WINDOW YOU CAN SEE THINGS LIKE IT IS SIGNING A JAR FILE. DOES ANYONE KNOW WHAT THAT IS? IT REALLY IS ESSENTIALLY LINKING TO THE SAME SDK LIBRARIES IN THE SAME THINGS YOU WOULD USE IF YOU ARE USING ANDROID STUDIO OR ANY OTHER TOOL TO BUILD AN ANDROID APP. NOW IT IS STARTING THE ANDROID APPLICATION. IT IS BUILT AND NOW PUTTING IT ON THE SIMULATOR. >>THE SIMULATOR IS COMING FROM — THIS IS PART OF THE ANDROID TOOL. YOU ARE LEVERAGING THE ANDROID TOOLS ALONG WITH VISUAL STUDIO. YOU’RE GETTING THE FULL ANDROID API SURFACE AND ALL THE WONDERFUL TOOLS THAT SHIP WITH ANDROID FOR GOOGLE. SAME THING FOR IOS. YOU GET 100 API COVERAGE. YOU CAN DEPLOY FROM VISUAL STUDIO ON WINDOWS TO AN EMULATOR RUNNING ON A MAC AND VISUALIZE IT ON YOUR PC AND DO YOUR OWN DEBUG AND TEST APPLICATIONS ON A PC FOR YOUR IOS ELEMENT. >>IT SAYS — >>WE COULD SHOW OFF SOME CROSS- PLATFORM. >>THAT’S TRUE. [ INAUDIBLE COMMENT ] UNFORTUNATELY, I DIDN’T PLUG IN MY LAPTOP SO IT IS RUNNING ON BATTERY AND IT CUTS THE CPU SIDE DOWN. THERE IT GOES. >>NOTICE I’M IN THE DEBUGGER NOW. YOU CAN SEE WE HAVE THE WELCOME TO ZAMARON FORMS. >>LET’S SEE IF WE CAN ADD A LITTLE MORE TO OUR UI HERE. LET’S GO TO THE XML OR ZAMIL DEFINITION. MARK MENTIONED WE HAVE UI WITH A STACK LAYOUT. IT PUTS THE UI IN A STACK AND BY DEFAULT IT GOES TOP TO BOTTOM. WE PUT THINGS WITHIN OUR STACK LOW DEFINITION AND THEY WILL GO IN ORDER. HE WILL ADD AN — A LABEL. WE WILL HAVE A LITTLE BIT OF UI PULL IN SOME DATA FROM THE USER. WE WILL ASK FOR THEIR NAME. AND THEN WE WILL ADD SOME INTERACTIVITY. MAYBE A BUTTON? AND THEN WE WILL HAVE ANOTHER PIECE OF UI, [ INAUDIBLE ]. >>I WILL GIVE THOSE NAME. >>WE WILL HAVE A LABEL, ENTRY FIELD AND A BUTTON. MARK WILL WIRE UP AN EVENT BUTTON SO WHEN YOU CLICK THE BUTTON IT WILL GET TRIGGERED AND WE WILL DO A LITTLE BIT OF WORK. IN THIS CASE WE WILL READ AND THE DATA FROM THE USER AND DISPLAY A MESSAGE AND HE IS USING AN ALERT. THIS IS INTERESTING. IT’S AN INTRODUCTORY DEMO BUT IT IS REALLY POWERFUL. THINK ABOUT WHAT WE ARE DOING. WE ARE WORKING IN A .NET STANDARD 2.0 LIBRARY. BUT HE IS DOING UI WORK IN THAT SURE CODE IN THIS IS GOING TO POP UP A LITTLE MODAL DIALOG AND THAT IS DIFFERENT ON EVERY PLATFORM. IOS AND ANDROID — ALL DO IT DIFFERENT BUT ZAMARON FORMS HAS ABSTRACTED SOME OF THAT SO IT GIVES US THIS SIMPLE API CALL. IT’S GOING TO WORK CORRECTLY ON THE EXECUTING PLATFORM . SEE HOW MARK’S CODING SKILLS ARE. FANTASTIC. ENTER YOUR NAME. LET’S PUSH THE BUTTON. THIS IS AN ANDROID DIALOGUE. THIS IS SPECIFIC AND UNIQUE TO ANDROID. IT LOOKS LIKE AN ANDROID APPLICATION BECAUSE WE ARE LEVERAGING NATIVE CONTROLS. THE UI DEFINITION IS SHARED BUT WHEN IT’S COMPILED AND EXECUTED IT IS MAPPING TO NATIVE CONTROLS. I’M GOING TO SWITCH TO THE APP TO SEE WHAT IT LOOKS LIKE. WE WILL BUILD THIS VERSION. IT’S A DIFFERENT APP BUT IT SHARES ALL THAT LOGIC. THE LOGIC WE JUST ADDED, ALL OF THAT IS SHARED. THE SAME BINARY LIBRARY WE BUILT FOR ANDROID. WE WILL NOW USE IT IN THIS TREND NINE AT. — UWP APP.>>WE ARE RUNNING ON A PC, ON MARK’S LAPTOP. THIS IS A WINDOW STYLE DIALOGUE. IT IS NOW UWP . XBOX AND WINDOWS IOT. >>IN THIS CASE IT’S IMPORTANT — WE ARE GOING TO ENTER DATA, STORE IT AND DISPLAY IT AND USE SOME EDITING FEATURES. WE WILL GO QUICKLY BUTTS WHAT EX — WHAT IS EXCITING IS WE HAVE FULL INSTRUCTIONS ON HOW TO BUILD THIS APPLICATION START TO FINISH ONLINE ON GITHUB. IF YOU ARE INTERESTED IN TRYING THIS OUT WE ARE NOT GOING TO WALK YOU THROUGH — GOING TO WALK YOU THROUGH A REAL-WORLD DEMO. >>IT IS STEP-BY-STEP. YOU CAN BUILD THIS APPLICATION. LOOK HERE AT THE SOLUTION EXPLORER AND THIS WILL ALL LOOK FAMILIAR. WE HAVE A REAL NAME FOR OUR APPLICATION. I SEE THE IOS PROJECT AND OUR .NET STANDARD LIBRARY. WE JUST DEFINED MORE UI AND WE ADDED SOME BACKING LOGIC. THIS IS STANDARD C SHARP AND A LITTLE CLASS THAT REPRESENTS OUR NOTE OR ENTRY SO EVERY TIME WE SAVE A NOTE IT’S A MODEL OBJECT. IF YOU ARE A CODER, IF YOU ARE , THE DEVELOPERS, WILL BE RIGHT AT HOME WITH THIS. >>NOTICE HERE WE ARE USING THIS FILE ENTRY STORE TO STORE THIS LOCALLY. THIS IS ALL JUST.NET STANDARD — .NET STANDARD. WE ARE USING STANDARD FILE STREAM STUFF, BEING ABLE TO STORE A FILE BUT IT DOES THE RIGHT THING ON ANDROID, UWP — WE COULD RUN THIS ON A MAC . WE COULD RUN IT ON A WATCH I SUPPOSE. >>I’M GOING TO POINT OUT THIS IS REALLY EXCITING BECAUSE THIS IS NEW WITH .NET STANDARD. IT’S ANOTHER CASE WHERE YOU WOULD HAVE TO THINK ABOUT HOW TO DO THIS ON EACH PLATFORM. THE FILE SYSTEM IN IOS IS DIFFERENT THAN THE FILE SYSTEM AND ANDROID. .NET STANDARD IS TAKING CARE OF THIS. WE CAN PUT ALL OF OUR FILE API CODES AND THEY SHARED LIBRARY . >>HERE IS THE APP RUNNING ON A PHONE. I INSTALLED THE APP ONTO MY ANDROID DEVICE, CLICK RUN USING THE SAMSUNG DEVICE. YOU CAN SEE I CAN ENTER IN A NEW ENTRY. HI THERE. >>[ INAUDIBLE ] I WILL PUT THAT IN THE NOTES. I CAN NEVER SPELL HIS NAME.>>THERE’S A COOL PRESENTATION LATER TODAY ON ZAMARON ESSENTIALS WHICH TALKS ABOUT HOW TO USE CROSS-PLATFORM FEATURES WITHOUT HAVING TO WRITE A LOT OF CODE. I WILL GIVE IT AWAY BUT I RECOMMEND YOU GO SEE IT. >>NOW IT IS STORED ON THE DEVICE AND I CAN CLOSE THE DEVICE AND COME BACK IN THE NOTE IS STILL THERE. I CAN STORE IT IN THE CLOUD IF I WANTED TO AND WE CAN SHARE THESE NOTES WITH SOMEONE ELSE. IT’S A SIMPLE APP AND EASY TO PUT TOGETHER. >>BUT VERY POWERFUL. DATA PERSISTENCE, GREAT STANDARD TO — CONTROLS, MULTIPLE SCREENS IN A GREAT WAY TO GET A SENSE OF HOW YOU WOULD GO ABOUT CREATING A MORE COMPLICATED CROSS-PLATFORM BUSINESS APPLICATION. >>YOU CAN GO TO THE LINK RIGHT HERE AND SEE THOSE INSTRUCTIONS. DOWNLOAD THE APP YOURSELF AND GIVE IT A SHOT ON YOUR OWN DEVICES. >>FULL SOURCE CODE AND INSTRUCTIONS. BUILD YOUR OWN CROSS-PLATFORM APPLICATION. CAMERON FORMS IN 20 MINUTES OR LESS. >>WE ARE AT THE END OF OUR TIME BUT ANY QUESTIONS BEFORE WE HEAD OUT? [ INAUDIBLE COMMENT ] YES, SURE. >>THE QUESTION IS USING NATIVE FEATURES OF THE PHONE? ACCESS IS PERFECT. I CAN TELL YOU TO WATCH WHAT WE TALKED ABOUT. WATCH THE SESSION FROM JAMES BUT THE LONGER ANSWER IS A LOT OF THE COMMON FEATURES THAT ARE UNIQUE TO THE PLATFORM, THINGS LIKE CAMERA. PEOPLE HAVE WRITTEN PLUG-INS AND THEY DO THE WORK OF MAKING THE CAMERA WORK ON ANDROID, IOS AND WINDOWS AND YOU CAN USE THE PLUG-IN TO PULL THAT INTO YOUR APPLICATION VIA A NEW GET APPLICATION BUT ZAMARON ESSENTIALS HAS TAKEN THE MOST COMMON THINGS AND THEY HAVE CROSS-PLATFORM BITS THAT WILL DO THE RIGHT THING ON EACH PLATFORM FOR YOU.’S IF ANYONE — YOU. IF ANYONE HAS QUESTIONS YOU CAN COME TO OUR BOOTH. WE WILL BE THERE AND YOU CAN TALK TO US AFTER THIS SESSION BUT I THINK WE ARE OUT OF TIME. >>THANK YOU VERY MUCH EVERYONE.

Leave a Reply

Your email address will not be published. Required fields are marked *