Editing your adaptive project

adaptive-views
#1

What is this toolbar?

After you’ve added one or more adaptive views, you will see the views listed in this toolbar in the order of inheritance. If you have multiple views inheriting from the Base, you’ll see multiple toolbars.

Clicking on one of the views will display that view in the wireframe pane.

What happens when I make a change?

Changes to properties like widget text, interactions, and default disabled are not adaptive. So a change to any of those properties affects the widget in all views.

Changes to a widget’s location, size, style, or interaction styles are adaptive, meaning they can be different on different views.

A widget in an adaptive view inherits its location, size, and style from its location, size, and style in the parent view.

The rules for inheritance

  1. If you make a rectangle blue in the parent view, it will be blue in the child view.

  2. If you make it blue in the child view, it will not affect the parent view.

  3. If you make it red in the child view, and then blue in the parent view, the child will stay red because you’ve already “overridden” it in that view.

How do you know what views will be affected when you make a style change?

The colors in the adaptive toolbar tell you you which views could be affected.

Blue - The view you are currently seeing and editing

Orange - Child views that could be affected by style changes to the selected view

Grey - Views that will not be affected by style changes

Green - If you check “Affect all views”, all of the views will turn green and style changes will affect all views

Example - Making a widget blue in a child view

Let’s say you have 3 views, the Base, 768 that inherits from Base, and 320 that inherits from 768. If you make a widget blue in the 768 view, it will make that widget blue in 768 and 320, but not in the Base view.

style-inheritance.gif709×390 6.7 KB

Example - Changing the text on a widget

Changes to properties like Widget Text are not adaptive and always affect all views. Using the same setup as above, if you edit the text in 768, it will change the text in the Base, 768, and 320 views.

text-inheritance.gif709×390 6.5 KB

Adding and removing widgets from views

When you add a widget to a view, it is added to all of the other views. BUT in the parent views it will be marked as “Unplaced” so you won’t see it in the view.

When you delete a widget from a view, it will “Unplace” it from the current view and the child views. BUT it will not be removed from the parent views. The widget will be fully deleted if it is Unplaced in all of the views.

What is Unplaced?

An Unplaced widget does not exist in the view, but it is not deleted from the page because it could exist in another view. This was introduced so if you had 30 extra widgets in the desktop view, you wouldn’t have to see them in your mobile view.

When a widget is unplaced it will be red in the Widget Manager.

How can I completely delete a widget?

A widget will be completely deleted from the page when it is unplaced in all views. Generally speaking, if you delete the widget on the view where it was added, that will frequently mean it is unplaced in all views and will be deleted.

How do I add an unplaced widget to a view?

Open that view. Then, right-click on the widget in the Widget Manager and select Place in View.

#2

One question-- I have two adaptive views, and typically start with mobile. But in some cases, I’ve started with the desktop version. How do I break the layout link, so that I edit the Base view to the mobile size (without also changing the desktop layout). Do I just move everything on the desktop view by like a pixel and then back, or is there a function/feature to do this?

#3

A workaround for my problem is to create a separate mobile view so that I can have a base view that is either mobile or desktop. This makes the work of recreating a whole wireframe deck to fit the adaptive views much easier.

#4

In para 4; what are ‘interaction styles’ please?

#5

I would like to see the flow for managing widgets across views be improved. In particular, I find that I often want to reset a widget in all views to be the same as the base view. Typically right now it’s easier to delete everything and start over from scratch. Perhaps being able to right-click a widget and select “Place in Views…” leading to a list of the available views would help. Also being able to “Reset Widget in all Views” would be useful there.

#6

I agree that a “reset widget in all views” would be useful. My workaround so far is to select “affect all views” and change the property I need on the base (or any other view for that matter); this will override any disconnect applied by making changes to a child view. The minor issue is that if you like the size of your Base, you have to change it by a pixel or two, and then change it back to the one you want.

#7

Probably the “MouseOver”, “MouseDown” “Selected”, and “Disabled” views.

#8

Hey plnii,

What approach do you use for modifying the same widget across views? I am assuming that this is a widget that varies drastically from one view to another, and not a chrome widget that’s consistent in look and feel.

For each view, I customize the look and feel of the widget so that the parent child relationship is preserved in case I decide to unplace the module/widget later. This is rather time consuming though.

I wonder if it would be more practical to unplace the widget in child views and just recreate the widgets. Would love to hear your thoughts on this!

light_forger

#9

light_forger,

I haven’t settled into a flow yet. A lot of my work has been to take wireframes that were either desktop or mobile and then make them single responsive screens. For that, I created a third “Base” view which contained the original (either desktop or mobile) and then modified the widgets in the mobile and desktop to change the layout. This probably isn’t a good approach going forward as it’s easy to get confused about which view I’m in. The alternative was very ugly though (having to re-create every wireframe from scratch).

I am constantly copying and pasting widgets to try out different approaches. Copy and paste is now really slow…would be nice if there was a way to copy and paste into a non-adaptive sandbox-y view for quick iterating.

#10

Plnii,

I see. Wouldn’t the explicit copying and pasting of widgets break any kind of inheritance though?

In your approach, can’t you just assigned either desktop or mobile to Base, and list the remainder as a separate view? Unless you have an explicit need to preserve the original view that is :slight_smile:

light_forger

#11

Copying an pasting does not break the inheritance exactly. It copy and pastes for all child views. This can be very annoying. For example, you laid out a heading on two lines on mobile and 1 line on the “desktop” version. Every time you copy and paste that widget it copies both styles. Helpful sometimes but not in other cases.

#12

Hi there… when you say “Like Widget Text” is there a list anywhere of properties/ elements of a widget that will or won’t change with inheritance?

For example, I have a Menu widget, which, when resized in any view, always seems to re-size, even if I do it in the child view first to override it. I want to have it at a certain width on the base view, then smaller for landscape and portrait tablet.

Other references to the size of a widget say that it does work with adaptive, but is the menu widget different?

Thanks,
Em

#13

How do I add an unplaced widget to a view?

Open that view. Then, right-click on the widget in the Widget Manager and select Place in View.

I have a problem were I would like to place widgets back in view but the option is disabled, any suggestions?


#14

I have a problem with one adaptive view project.

I have three projects. For each I developed a separate mobile and desktop .rp file (don’t ask!). I then wanted to combine them into a single .rp file with an adaptive view of desktop and mobile. So I took the desktop file and cut and pasted the mobile view into the 320 view. This has worked faultlessly for the first two projects. The third refuses to display the mobile view when the browser window is reduced to 320px and it continues to show the desktop view only.

I’ve tried creating new files and pasting both desktop and mobile views in but with the same result. The adaptive view configuration window is exactly the same on all three files but still one refuses to show the mobile version.

Any suggestions?

#15

Best thing would be to post the rp file if you are able to.

#16

What if I deleted an object on the adaptive view. It’s still on the base but how do I bring it back? Tried cut and paste on the base thinking it would bring it back but nothing. Ohh and it’s not a widget so above instructions don’t apply.

#17

If it’s not a widget, what sort of object is it that you accidentally deleted? I was going to say that if you accidentally deleted a widget in an AV but can still see it on your base view, then you should be able to place the widget in the view again by finding it in the widget manager pane, right-clicking it, and selecting “Place in View”. Depending on your widget manager settings you may not be able to see unplaced widgets though (they show up with red text). To see unplaced widgets, you’ll need to change your widget manager filter to either “Placed and Unplaced” or “Unplaced Only”.

If that doesn’t help, let us know what it was that was deleted and we’ll advise from there.

#18

It’s just a text block that I deleted. Curies how to get it back or how to recreate the link. I mean I could go to my base, copy and paste it to my other adaptive view, but there would be no link.

#19

Hmm, if you hit [Delete] or [Backspace] to delete the widget in the adaptive view and you can still see it in the base view, then the widget should just be unplaced in the adaptive view. If you switch your widget manager settings to show unplaced widgets and go to your adaptive view where the widget is missing, you should see its name written in red text in the widget manager. It would look something like this:

If you don’t see red text, try changing your widget manager filter settings to show the unplaced widgets in addition to placed widgets:

Once you see it, you should be able to place it back in the adaptive view by right-click the red widget name and choosing “Place in View” via the widget manager. When it’s restored, it should have its link restored with the base view. Hopefully that works!

#20

It all makes sense now. I was thinking of the word widget as something else. Still getting use to the terminology. To me it makes sense that these are elements, and widgets would be something else. Anyways, widget. Got it now.

Thaks.