JavaScript for ASP.NET programmers (webcast) upload
Win rt webcast part 2
1. Studio for WinRT XAML
Russ Fustino
@RussCamTV
Senior Developer Evangelist
russf@componentone.com
Greg Lutz
@ComponentOne
Product Manager
Greg.Lutz@componentone.com
2. • Skill Set
• New Devices – Surface Pro – wow!
• $$$ - The Windows Store on every device with
a full commerce platform and 700 million
potential customers with world wide
distribution.
Why you should be excited about
publishing Windows 8 Store App?
3. • Overview
• Descriptions, features & getting started for:
– PDF Viewer
– Date Time Editors
– Input
– Layout
– FlexGrid
• Resources
What you will learn today
4. • Single XAML Code Base (for Windows Phone,
WPF, Silverlight, and Windows 8 WinRT)
• Multi-target: Write once, reuse code
• Leaders in XAML market with Silverlight and WPF,
now have the largest WinRT control suite
• Reduce development time
• Fills the gaps of the standard toolbox with rich
data visualization and powerful line of business
controls
• ClearStyle Technology
• WinRT controls have Touch Support and Modern-
UI style
C1 WinRT XAML Overview
9. • 2 controls for masked and numeric input
• Standard Format Strings
– Phone numbers
– Zip codes
– Credit card numbers
• Include Prompts & Literals
• Numeric Range
• Watermark Support
Input
11. • Touch Support
• Flexible Data Binding
• Group, Sort and Filter
• Unbound
• Cell Editing
• Custom Cells
• Cell Merging
• Column and Row Headers
• Column and Row Freezing
• Autosize Rows and Columns
• Save to Stream
FlexGrid
12. • Complete API parity among all platforms
• Complete control set
– Data visualization and line of business
• Feature by feature, most advanced charts!
• Unique and successful reporting story - PdfViewer
• Only from ComponentOne:
– ClearStyle technology
– Legendary FlexGrid
• Download Free Trial of Studio for WinRT XAML
Today! (no time bomb)
Summary – The ComponentOne Edge
13. • WinRT XAML Part 3 – April 4
– Gauges
– ListBox
– Zip
– TreeView
Upcoming webcast!
http://our.componentone.com/author/rfustino/ (see Feb 25 entry)
14. • Webcast Part 1 recap blog:
– Code samples
– PowerPoint
– Recorded Video
WebCast Part 1 recap:
http://our.componentone.com/author/rfustino/ (see March 11 entry)
16. • See app built with it … Search in Store on
“Excel Viewer”.
• http://www.componentone.com/SuperProducts/SpreadWinRT/
Check out Spread WinRT control!
17. • Menu - Allows you to add the classic "File" menu
system to your Windows Store applications.
• PDF – This class library enables you to create
dynamic reports or directly output your UI to PDF
documents from your apps.
• TabControl - Need to organize your content? The
new TabControl allows you to utilize available space
by organizing content as tabs.
• RichTextBox - gives you rich, HTML text editing at
your fingertips. Use this control to display Web
content or as a rich text editor.
Four new controls being released next week:
18. • Promo code: (watch webcast
part 3 - April 4)
• http://our.componentone.com/2013/02/25/russ-technical-gets-technical-
windows-8-winrt-xaml-webcast-series-starts-this-week-register-now/
• (enter in promo code in shopping cart)
• Webcast special!
• Wow!!!!!!
• Normally $895
• Good thru April 12
Webinar Promo Code
$395 - %60 percent off!
19. • Resources:
– www.componentone.com/winrt
– www.componentone.com/russcam
– http://our.componentone.com/author/rfustino/
(sample code on WinRT blog series parts 7-11)
– http://our.componentone.com/author/c1_gregl/
(pdf print and more!)
– Follow @RussCamTV on Twitter
– Facebook.com/ComponentOne
– Facebook.com/RussellCamTV
– Sample Suggestions? Email russf@componentone.com
– http://Russcam.componentone.com (subscribe!)
(daily news from 400 influentials)
Thanks! Homework assignment…
Editor's Notes
One single XAML codebase outputs controls in 4 different platforms.
Our Studios reduce development time – don’t reinvent the wheel – focus on your business logic and leave the UI controls to us. Our XAML controls match the standard controls style and use the same implicit styling techniques defined by Microsoft. This makes them consistent with your design work flow.
Our innovative (and unique) ClearStyle technology allows developers to easily change control brushes without overriding control templates. This is supported in all 4 platforms. Save yourself a ton of XAML Coding!
PDF Viewer
Date Time Editors
Input
Layout
FlexGrid
Add document viewing capabilities to your Windows Store apps. ComponentOne PdfViewer™ for Windows Phone can display simple PDF documents within your applications without requiring any external application. Load arbitrary PDF documents with support for page zooming and (coming soon) text searching
Features
Load and View PDF Files
Load and view PDF files in your Windows Store apps using the C1PdfViewer control. This XAML control has no external dependency on the desktop or anything from Adobe to view or save files. Content is parsed and rendered as native WinRT XAML elements.
Multi-touch Gesture Support
Users can drag the pages to scroll, as well as, pinch or double tap to zoom the document. Zooming can better legibility for reading content on a small screen.
Horizontal Orientation
The C1PdfViewer control supports both Vertical and Horizontal orientation. Just set the Orientation property.
PDF Specification Support
C1PdfViewer supports a subset of the PDF 1.5 specification. There are a few important limitations including encryption, special fonts, and rare image formats. Documents that use non-supported content will still render, but the formatting may be incorrect. It is recommended to use C1PdfViewer in a controlled environment where the features used by your PDF files can be tested before being used. The full list of limitations can be found in the documentation.
Get Pages from PDF
After loading a PDF, you can obtain a list of its pages as FrameworkElements to customize how the user views each page. This enables a lot more flexibility in working with existing PDF documents. Just call the GetPages method.
Find Text
Users can perform text searches within the document. As matches are found they are brought into view, and users can navigate through search results in a quick and intuitive manner.
Fills the gap – no DateTimePickers in standard toolbox for XAML
Display, edit and validate DateTime information. You Get six fundamental editors that include both classic and Windows 8-inspired designs.
DateTime Editors
The C1DateSelector, C1TimeSelector and C1DateTimeSelector controls provide a series of drop-downs to collect DateTime input. These controls are inspired by the Windows Store apps. The C1DatePicker control provides a drop-down calendar in classic tradition. The C1TimeEditor control enables time input like a numeric up/down control. The C1DateTimePicker control combines C1DatePicker and C1TimeEditor into one colossal control.
Validate Input with Masking
The C1DatePicker and C1DateTimePicker controls support custom date formats and masked input. The edit mask tells the user the desired format and prevents end-users from entering invalid characters into the field.
Allow Null Values
C1DateTimePicker and C1TimeEditor allow null values, by default. You can disable this by setting the AllowNull property to false.
Controls Included
C1DateSelector
C1TimeSelector
C1DateTimeSelector
C1DatePicker
C1TimeEditor
C1DateTimePicker
Input controls allow you to provide smarter input for phone numbers, zip codes, percentages and more. You get two controls for masked and numeric input. Quickly gather valid input while displaying formatted text automatically. The C1MaskedTextBox control provides a text box with a mask that prevents users from entering invalid characters.
Features
Standard Format Strings
The C1MaskedTextBox and C1NumericBox controls support the standard formatting strings defined by Microsoft and uses the same syntax as the classic Windows Forms controls. The Format property enables you to use the familiar .NET format strings to display numbers in several formats with support for decimal places. Supported formats include fixed-point (F), number (N), general (G), currency (C), exponential (E), hexadecimal (X), and percent (P).
Include Prompts and Literals
Choose whether or not to show prompt characters and literals in the C1MaskedTextBox control by simply setting one property. The prompt character indicates to the user that text can be entered (such as _ or *). Literals are non-mask characters that will appear as themselves within the mask (such as / or -).
Numeric Range
With the C1NumericBox control you can restrict input to a specific numeric range by setting the Minimum and Maximum properties.
Watermark Support
Using the Watermark property you can provide contextual clues of what value users should enter. The watermark is displayed in the control while no text has been entered.
Control the flow and positioning of the content in your Windows Store apps with ComponentOne Layout Panels™ for WinRT XAML. Wrap content vertically or horizontally using C1WrapPanel. Dock content along the edges of the panel with C1DockPanel. Display content neatly in a grid using C1UniformGrid.
Features
Create Flowing Layouts
Create flow type layouts that wrap content vertically or horizontally using the C1WrapPanel control. This can be very useful for handling flow of items when the user rotates your app into portrait orientation.
Create Docked Layouts
Dock content along the top, left, right and bottom edges of the screen with the C1DockPanel control. Child elements are positioned in the dock panel in the order that they are declared in XAML.
Create Uniform Grid Layouts
Neatly display child elements in columns and rows with the C1UniformGrid control. By setting the ColumnSpan property you can span columns. Or, span rows by setting the RowSpan property. This resembles the built-in Microsoft Grid. Using C1UniformGrid you can also show or hide an entire column or row
Display tabular data across columns and down rows with this simple, yet powerful grid control. ComponentOne FlexGrid® for WinRT XAML delivers a familiar, traditional datagrid re-designed for modern, touch-based enterprise applications. This control is still considered Beta.
Touch Support
In the future there are no scroll bars. Designed to provide a UX more fitting for the mobile world, FlexGrid for WinRT XAML allows users to drag the grid to scroll across columns and down rows. It uses inertial-based scrolling so it feels more natural on Windows 8.
Flexible Data Binding
Easily bind the C1FlexGrid control to anything that implements IEnumerable or bind directly to a list of objects. FlexGrid and its columns can be bound to directly in XAML following best MVVM practices.
Group, Sort and Filter
The C1FlexGrid control recognizes the IC1CollectionView interface and exposes extended functionality such as grouping, sorting, filtering, and adding new items. FlexGrid uses the C1CollectionView automatically when you set it's ItemsSource property to an object that is not an ICollectionView already. The C1CollectionView class is included in the C1.Xaml assembly. It implements the IC1CollectionView interface which includes sorting, filtering, and grouping. Grouped rows can expand and collapse by tapping.
Unbound
In addition to data binding support, C1FlexGrid also works great in unbound mode. Simply add rows and columns to the grid using familiar syntax from the WinForms version of the control. When unbound, the C1FlexGrid control stores data internally.
Cell Editing
C1FlexGrid supports cell editing like a traditional desktop grid control. Cells obtain focus and display a default TextBox cell editor or custom editor if provided.
Custom Cells
C1FlexGrid makes it easier to define custom cells by providing a more simpler interface, ICellFactory. Custom cells are useful if you want to display anything other than text in a grid cell, or if you need to apply conditional formatting.
Cell Merging
C1FlexGrid enables cell merging at the grid level. Just set the AllowMerging property on specific rows and columns to enable this feature where you need it. Cell merging will merge adjacent cells that have the same content, while positioning the text so that it is always most readable to the user.
Column and Row Headers
FlexGrid supports multiple fixed rows for column headers and multiple fixed columns for row headers. This concept allows you to create "bands" or multi-cell headers useful for organizing columns into groups. Cell merging is used to achieve this functionality.
Column and Row Freezing
Freeze any number of rows and columns by simply setting the Rows.Frozen or Columns.Frozen properties. Frozen panes never scroll out of view.
Autosize Rows and Columns
The C1FlexGrid control has AutoSizeRow and AutoSizeColumn methods that take into account the data currently visible. This can be done quickly and accurately.
Save to Stream
Output and persist data with ease using the Save method. Formats include plain text, html and CSV.
Some competitors only focus on data visualization or split their products by dv and lob. Others may have similar API between SL and WPF but not all XAML platforms. Some competitors are missing major components whereas we are most consistent and lack major holes in offering. Unique features like ClearStyle and Maps powered by Esri are unique to component one. ClearStyle saves development time. Only ComponentOne offers the legendary FlexGrid control from Active X days for fast, lgihtweight grid performance and flexibility.
