DMXzone Visual App Designer for Framework 7 Manual Support

Visual App Designer General Features

• Fully Visual App Design in Dreamweaver - Get ready to design your apps fully visually in Dreamweaver with the DMXzone Visual App Designer for Framework7. Now you can directly see your logical app structure and its components in the dedicated floater and just add desired components and assign actions!

• Visual App Structure at your disposal - Work with a high level view of your app where the whole picture is clearly visible and you are not buried under nested structuring details.

• Context sensitive components editing - You don't need to learn any complex app structures! The Visual App Designer does that for you – it will let you do add the UI components that are only allowed in that context! So the right structure is always guaranteed for you!

• Visually reorder components with Drag & Drop - So you want to change the order of your components and adjust the layout? It is all done by simple drag & drop actions! Again you can only drag components to places where they are allowed to be! The drag status is clearly indicated with icons.

• Multi pages fast responsive apps - Organize your app in clear pages that can be either inline in one page as a Single Page App and or be separated in child files that are loaded dynamically through Ajax for the best performance. In any way, the user will experience a fluid native app that does not have any loading delays but is mighty fast!

• Smart visual components with dynamic properties - Every UI component comes with its own dynamic properties. You can easily chance them in the dedicated property inspector. The property inspector shows only the valid properties for the selected component in the current context. So you will see only the properties you need.

• Rich UI property inspectors - The property inspectors offer amazing controls and allow you to enter values as easy as possible, packing rich UI controls like amazing color, theme and icon pickers.

• Integrated inspectors for nested elements - The dynamic property inspectors not only give you access to the base properties, some of them even offer direct access to nested components properties like icons and other media elements. So you have a great overview of the current component and its children.

• Visual action based programing design - Every component has its own actions and those can be easily selected from the property inspector. Wherever you want a navigation action, open or close panels or popups it is all there a single click away – no coding whatsoever!

• Behaviors integration for calling custom actions - If the built-in actions are not enough – you can just assign any behavior action to any of the components!
• Integrated properties for HTML5 Data Bindings integration - The UI components offer great integration with HTML5 Data Bindings – you can bind dynamic data or make repeating regions and elements directly from the dedicated property inspectors!

• DMXzone Database Connector for dynamic data query and population - Want to populate you app with data from your own remote database? It is all possible with the DMXzone Database Connector. Just define a remote connection to a dedicated data API site in Dreamweaver and you are ready to go! 

• DMXzone Database Updater for performing actions as database updates - If you want to perform any data manipulation on your remote database, it is all possible with the DMXzone Database Updater – actions are directly performed and triggered by the UI Components.

• Great integration with DMXzone Cordova Builder- Once you're ready with your app design in DMXzone Visual App Builder, define, generate and build your mobile app with a few clicks in DMXzone Cordova Builder for any popular platform.

Framework 7 Features

• Ultra easy to use. Not harder than website - To create apps using Framework7 is as easy as website creation. Try to start and you will be surprised how easy it is.

• Awesome UI components to choose from - Framework7 comes with a bunch of ready to use UI elements like buttons, popup, popover, list views, media lists, cards, preloader (activity indicator), form elements, etc.
  

• In Dreamweaver
  

 

• In browser 
  

 

• Full support for swipe back - One of Framework7' killing feature is supporting of iOS well known swipe back gesture from left border of screen when you want to get to the previous page. It simply works, and works perfectly as you expect it to do. Just swipe from left (or drag with mouse) area of the page to see smooth transition to the previous page. It is not just A-B transition. It really follows your finger with parallax animation while touch!

• Native scrolling - It can sound even curious but one of the most important Framework7 feature is that it uses only native scrolling. Moreover - it multiplies its advantages! So you can still have this awesome scrolling with momentum and resistance bounce without any scrolling issues!

• High-performance animation - It is all about performance and Framework7 uses only high performance hardware accelerated css animations and transitions to achieve the best result.
• Awesome pages animation - One of the main target of Framework7 is to have native look and feeling of iOS application. And Framework7 is the only framework that solves it and offers 1:1 page animation with smooth parallax effect, changing opacity and shadow when loading new page.

• XHR + Caching + History + Preloading - This is an unbeatable combination to make your app routing as perfect as possible. Framework7 is ready to route your app pages using XHR (optional) with its own internal methods and internal HTML configurable caching that allow to load pages faster and save a lot of time and traffic for your users! It loads page via Ajax only ones per specified caching period (10 minutes by default), other times it just gets it from memory. It allows to make further requests immediately!
  
• 10 stunning iOS color themes to style your apps - The extension features 10 color themes to choose from for your apps. The applied color theme affects the interactive elements such as links, buttons, form elements, icons.

 

 

• 2 beautiful layout themes - There are two available layout themes to choose from - white and dark.

 

• Design for iOS but also run on other platforms - Although the Framework7 design is based on iOS you can build also native apps for other platforms like Android, Blackberry and Windows Phone! Your native app will just looks like an iOS app everywhere!
  

Components in Visual App Designer 

• Navbar - Add awesome navigation to your app. You can fix it on the top of the screen with page title and additional navigation elements. It features 3 main parts: left (designed for "back link"), center (for page title) and right (same as left).
  

• Dynamic navbar - Add additional navbar for each page with different navbar elements such as text and links. The layout remains the same as the navbar but you can choose between fade or slide transition effects.
  

 

• Sub navbar - Sub Navbar is useful when you need to put any additional elements into the navbar, like buttons. It also remains visible when navbar hidden. Sub navbar supports sliding transitions when used with dynamic navbar.
  

• Toolbar - The toolbar is fixed area at the bottom of the screen, where you can add navigation elements, icons, badges and more. All elements are equally spaced along the toolbar with equal space between them.
  

 

• Tab bar - Tab bar is a particular case of toolbar, but it contains icons or icons with labels, instead of plain links.

 

• Side panels - You can choose between a right or left side panel for your app. Within the panel you can add any page component.
  

• Content block - This is the place for your content, which can be text, images, buttons and links.
  

• Popup - The popup window pops up over the app's main content. You can use it for example when a user is filling out a form and needs to confirm the input info with a confirm button, text agreement and other.
  

• Popover - Popover component is used to manage the presentation of content in a popover. You can use popovers to present information temporarily in an awesome tooltip-like area. The popover remains visible until the user taps outside of the popover window or you explicitly dismiss it.

• List view - List views are versatile and powerful user interface components frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups. You can use list view to let your users navigate through hierarchically structured data, present an indexed list of items, display detail information and controls in visually distinct groupings or present a selectable list of options.

• Media list view - Media list view is extended case of list view where you can add additional elements such as images. It's useful for comment threads or articles lists.

• Cards - Cards, along with list view, is a one more great way to contain and organize your information. They are typically an entry point to more complex and detailed information. Along with the inner area you can add header and footer.
  

• Buttons - You can add normal or big buttons, active or whole buttons row. From the properties you can choose to fill the button with color and the text color.

• Forms - The included form elements allow you to create flexible and beautiful form layouts within your app.

Version 1.5.0

• Full support for Google Android Material Design! So you can make apps that look very fancy in the new Material Design!
• You can choose if you want to use iOS, Material or Hybrid design for your app. When you choose Hybrid, then runtime the design will be determined depending on your device, so if you are on the iPhone you will get iOS design and if you are on Android you will get Material Design
• Updated Kitchen Sink Templates for Cordova two be two separate for iOS and for Material
• Many other improvements under the hood
• Added support for Framework7 "fixed" and "static" layouts next to the default "through" layout