Creating a grid layout

Hi All,
I am completely new to ADF UI part. I am looking for creating a grid layout of static/dynamic image content. just like the one that is there in suppose 'ebay search'.
can somebody please tell me about how to go about this.
Regards,
ND

For this you can use an af:table and put an af:image in a column.
Check out this blog http://jobinesh.blogspot.com/2010/06/decorate-ui-with-view-row-attributes.html for a start.
Timo

Similar Messages

Total Crash (CC) on attempting to Create a Fluid Grid Layout!

I hope someone can recreate this, because I'm climbing up the walls right now. Where to start? I'm trying to create a single fluid-grid page. I'm too tired to repeat the steps concisely, but after being prompted to save my CSS, I do. That's when the errors begin.
First one:
2) Then, when opening the files, it's just blank. No grids, no layout code, just a plain HTML file. So, then,I figure I should save everything, to "generate" the boilerplate CSS, and the JQuery min page, which should probably appear by default, but I go to save anyway. That's when it crashes. So, I open again. Try to open the first file I created: crash.
3) So, I figured maybe my installation was botched. I uninstall and reinstall. Same crashes. So, I figured maybe there might be corrupt files in my web folder (really just trying anything at this point.) So, I create a brand-new site. Same exact scenario.
Now, I understand no one has really had an opportunity to experiment, so this is probably a silly exercise, but maybe someone can recreate this?
I'm too tired to explain anymore but I was really, really hoping that I could use this option to lay out a working comp for a client. Job starts Wednesday. It's not possible to learn Responsive Design in a week, as someone suggested, so I'm really at a loss... I simple don't know what to do!

Hi jonfreed77,
People facing similar issue, posted following resolution in another thread recently.
Please give it a try and confirm if they work for you.
8. pcepp,
20 Jun, 2013 8:24 AM in reply to pcepp
Report
I found a solution that worked for me.
I removed all the fonts that Adobe CC installed out of my Library:Fonts folder and just left in the Apple Basic fonts like Arial, Courier etc... Launched Dreamweaver CC and the CSS designer panel works. I have no idea exactly which font it is, or creating the conflict. All I know is that it works great now.
|
9. dogdog63,
20 Jun, 2013 10:11 AM in reply to dogdog63
Report
very strange - I installed Illustrator CC and then I had no more problems with Dreamweaver! No more crashes when close or create files and no more problems with the CSS designer. Error messages during create fluid grid layouts are also gone ...
Michel:
I think I figured it out on the Mac. Be sure that Verdana is activated in Font Book. What tipped me off to this was a warning I was receiving when trying to open After Effects. It was saying that the program needed Verdana for the user interface to work. I thought that maybe Dreamweaver needed Verdana too. Sure enough! Hope this helps you guys.

Dreamweaver CC has "internal error... while resizing a view" when asked to creat a fluid grid layout

Excited for expanded fluid grid layout features it had, I got Dreamweaver Creative Cloud SPECIFICALLY for that feature.
Sign up, download, install went smoothly. Open Dreamweaver CC, create new fluid grid layout, hit OK, name and desigante location of .css file and get the following error.
"An internal error occurred while resizing a view. (Cview::ResizeFrameBy)" OK
I click OK and nothing happens. App freezes. No css, no files. No nothing.
Have tried restarting, re-installing, different names and destinations for .css file. I'm running Mac 10.8.2
Literally, this is the first thing I've done w/ an ACC app and I am displeased and frustrated. Getting customer service either via forum or offshore phone call less than ideal.
(apologies for spelling error in subj. can't edit it)

Can you try the steps mentioned on the thread: http://forums.adobe.com/message/5420680
Verified Fix :
For all the Dreamweaver crashes on opening Fluid Grid pages , Closing Documents or opening files
Please make sure the default system fonts are all enabled - especially Verdana
On MAC -
Open Font BOOK from Applications
Activate VERDANA FAmily of Fonts
-Harshit yadav

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

Creating a grid-like layout

Previously, I posted a problem with trying to wrap tables within tables, referencing this code.

<tableLayout>
<contents>
    <rowLayout>
      <contents>
        <bc4j:viewObjectScope name="CustomArrayDataGraphsView">
          <bc4j:rowStamp>
            <cellFormat>
              <contents>
                <tableLayout>
                  <contents>
                    <rowLayout>
                      <contents>
                        <link
                              styleClass="OraHeaderSub"
                              targetFrame="display">
                          <boundAttribute
                                          name="text">
                            <bc4j:attrValue name="AnalysisParam"/>
                          </boundAttribute>
                          <boundAttribute
                                          name="destination">
                            <bc4j:ordProperty name="url"/>
                          </boundAttribute>
                          <boundAttribute
                                          name="shortDesc">
                            <bc4j:attrValue name="Description"/>
                          </boundAttribute>
                        </link>
                      </contents>
                    </rowLayout>
                    <rowLayout>
                      <contents>
                        <bc4j:attrScope name="Graph">
                          <contents>
                            <html:object
                                         width="300"
                                         height="200">
                              <boundAttribute
                                              name="data">
                                <bc4j:ordProperty name="url"/>
                              </boundAttribute>
                              <boundAttribute
                                              name="type">
                                <bc4j:ordProperty name="contentType"/>
                              </boundAttribute>
                              <rawText>
                                <boundAttribute
                                                name="text">
                                  <bc4j:attrValue name="Description"/>
                                </boundAttribute>
                              </rawText>
                            </html:object>
                          </contents>
                        </bc4j:attrScope>
                      </contents>
                    </rowLayout>
                  </contents>
                </tableLayout>
              </contents>
            </cellFormat>
          </bc4j:rowStamp>
        </bc4j:viewObjectScope>
      </contents>
    </rowLayout>
</contents>
</tableLayout>
The above code renders a single row of elements which are tables themselves. Using the <cellFormat> inside the <viewObjectScope> avoids the "new line" rendering of the internal tables of title/images. However, the internal tables do not wrap.
This is an unfortunate side-effect of html tables. So, I need to basically make a sizeable grid (similarly to a GridLayout for all you AWT/Swing folks out there) layout that can render a specified number of columns per table, creating new rows as necessary. Something like...
<gridLayout columns="5">
<contents>
    <bc4j:viewObjectScope                                 name="CustomArrayDataGraphsView">
      <bc4j:rowStamp>
        <cellFormat>
          <contents>
            
          </contents>
        </cellFormat>
      </bc4j:rowStamp>
    </bc4j:viewObjectScope>
</contents>
</gridLayout>This custom layout will render a maximum of five columns of data per table row, where each column is actually a row of information from the view object.
Is this possible using UIX components or should I start coding?
Thanks,
joe

Also, displaying a bunch of "inline"ed tables would be really useful. I can't seem to do this from within a <header>, <hideShowHeader> tag, even with explicitly coding:
<bc4j:viewObjectScope name="CustomArrayDataGraphsView">
    <bc4j:rowStamp>
      <bc4j:attrScope name="Graph">
        <contents>
              <html:table style="display: inline">
                <html:tr>
                  <html:td>
                    <styledText text="Title"/>
                  </html:td>
                </html:tr>
                <html:tr>
                  <html:td>
                    <styledText text="Image"/>
                  </html:td>
                </html:tr>
              </html:table>

    <contents>
      <styledText
                  text="No Records Found"
                  styleClass="OraErrorText">
        <boundAttribute
                        name="rendered">
          <if>
            <comparison
                        type="lessThan">
              <bc4j:viewObjectProperty name="estimatedRowCount"/>
              <fixed
                     javaType="int">1</fixed>
            </comparison>
            <fixed
                   javaType="boolean">true</fixed>
            <fixed
                   javaType="boolean">false</fixed>
          </if>
        </boundAttribute>
      </styledText>
    </contents>
</bc4j:viewObjectScope>Apparently, the header tags do something which effects the display of "inline"ed elements, like the tables in the previous example. Any suggestions? I know taking out of the header works great, but, the <hideShowHeader> functionality is particularly necessary.
I have a time constraint on this... gotta be done by today, so if you have any other later minute suggestions besides creating a grid-like layout, let me know!
Thanks,
Joe

Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6

I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!

Hi toger02,
If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
Define a new site in Dreamweaver.
File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
Thanks,
Bhawna

Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
http://adobe.ly/Iq7L8z

maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

Discoverer - creating reports / letters that are not just a "grid" layout

Hello,
I am just starting to work with Oracle Discoverer for possible replacement reporting tool for us.
The big issue that I have right now is that Discoverer puts all results in a spreadsheet type format. That is you cannot add labels, section breaks, ect. You really cannot format any of the results (other than standard sorting ect) to produce a nice report look or a letters ect.
We have a department that creates many reports with our current BI tool, and they never use a standard grid layout for reports, they always have more of a customized report look and feel with even images ect. added to it.
If reports and letters are not possible to do in Discover, what is the solution? Is Oracle Reports the solution that most users use to create custom report or letter?
Please feel free to let me know how you are currently creating custom reports and letters in Discoverer.
Thx.

Discoverer allows you to create your queries/presentations using Discoverer Plus and use the formatting option to manage the presentation of that data to your Discoverer community.
Once the presentations are defined you share these same presentations with your report builders who would typically use Oracle Reports. Discoverer has an export facility to provide a link to Oracle Reports. This allows report builders to create layout specific formats for further distribution.
Hope this helps

Creating new website with Fluid Grid Layout in CS6 - CS3 Transitions problem

I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function with CS6 transitions or not? In the end, what I want to do is create a behaviour where one image is swapped with another with a click (not a rollover as it won't work on mobiles, I believe).
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
Nancy O.

Create a grid or table layout report

<p>Hi,</p><p> Anyone knows what's the simplest way to create a grid or table report using CR4E? my report is very simple, a list of POJO and want to display it in a table.</p><p>I guess you could add outside borders to each field, is there any simple way to do it?</p>

Hi,
The easiest way to create a report under the form of a simple table or grid, is to follow these 5 easy steps in CR4E, once your datasource is ready :
1) Select your fileds
In the Field Explorer, select all the fields you want to show in your report,Â using the Ctrl key to select them all at once
2) Drag and drop fields on the report
Drag and dropÂ the selected fields all at once from the Field Explorer onto your report, on the Body section.
The dropped fields will automatically be aranged in a row.
3) Position the fields Â
While all your fieldsÂ are still all selected, make sure they areÂ positionnedÂ at the very top of the Body section, so that there will be no space between your data on the final report.
4) Set the Fields Property to make them look like a tableÂ
While all your fieldsÂ are still all selected, go to the Property panel, and set the BorderÂ Properties from None to Single. You will also probably want to set the LeftIdentation Property to a fraction of inch so that the text doesn't start right on the border of your grid.
5) Set the Body section size
Adjust the height of theÂ Body section, so that itÂ is exactly of the size of your fields, to ensureÂ there will be no horizontal space between your grid rows on the final report.
At this point, you can preview your report, and you already have a table.
Of course, from there, you can adjustÂ the fields size (columns width),Â font size, color of the text, etc ... with the available Properties in the Property panel, and make your table look the way you like.
Cheers.
Thierry Crespo (Business Objects)

ALV Summation button is not working when GRID layout is specified

Hi,
I have created a report with Field: ALV Grid Layout. When i dont select anything in ALV GRID Layout. and execute the report. The outout is displayed in ALV Grid. and if i select amt column and PRESS SUMMATION button. im getting the total. Thats fine.
When i select any of the saved layout in ALV Grid Layout field.and run the report, the output is geeting displayed. and if i select amt column and press SUMMATION Button, im getting info message in the popup saying "Desired operation cant be performed for Column 'amt'"
Whts te problem ?
Thanks in Advance.
Jhovee.

PART-II
FORM f_display_data.
TYPE-POOLS: slis.                    " ALV Global types
DEFINE m_fieldcat.
    add 1 to ls_fieldcat-col_pos.
    ls_fieldcat-fieldname   = &1.
    ls_fieldcat-ref_tabname = 'VBAK'.
    ls_fieldcat-do_sum      = &2.
    ls_fieldcat-cfieldname = &3.
    append ls_fieldcat to lt_fieldcat.
END-OF-DEFINITION.
DEFINE m_sort.
    add 1 to ls_sort-spos.
    ls_sort-fieldname = &1.
    ls_sort-up        = 'X'.
    ls_sort-subtot    = &2.
    append ls_sort to lt_sort.
END-OF-DEFINITION.
DATA: ls_fieldcat TYPE slis_fieldcat_alv,
    lt_fieldcat TYPE slis_t_fieldcat_alv,
    lt_sort     TYPE slis_t_sortinfo_alv,
    ls_sort     TYPE slis_sortinfo_alv,
    ls_layout   TYPE slis_layout_alv.
m_fieldcat 'VKORG' '' ''.
m_fieldcat 'KUNNR' '' ''.
m_fieldcat 'VBELN' '' ''.
m_fieldcat 'NETWR' 'X' 'WAERK'.
m_fieldcat 'WAERK' '' ''.
m_sort 'VKORG' 'X'.                  " Sort by vkorg and subtotal
m_sort 'KUNNR' 'X'.                  " Sort by kunnr and subtotal
m_sort 'VBELN' ''.                   " Sort by vbeln
ls_layout-cell_merge = 'X'.
CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
       EXPORTING
            is_layout   = ls_layout
            it_fieldcat = lt_fieldcat
            it_sort     = lt_sort
       TABLES
           t_outtab    = gt_vbak.
ENDFORM.                               " F_DISPLAY_DATA

How can I convert my web page from a fixed width layout to a fluid grid layout?

I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KC

Herbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
     //regular grid span classes
    @for $i from 1 through $large-columns {
        .span-large-#{$i} {
            width: percentage($i/$large-columns);
     // push classes
    @for $i from 1 through (($large-columns)-1) {
        .push-large-#{$i} {
            margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

APEX 4.2 aligning issue of Stop and Start Grid Layout item

My APEX application application is in the process of moving from 4.0 to 4.2. I am experiencing an issue with aligning (left margin justified) of Stop and Start Grid Layout items that have a border around them. Earlier I had an issue with the border itself not showing up in the 4.2 application. I was able to resolve that with a workaround by adding inline code in the CSS section of the page: #P23_OFFICE_START_TBL {width:682; border:1px solid #369; margin:5px;}. This created the border which I needed, but there are 2 Stop and Start Grid Layout items that are indented and not aligning with the border of the previous line. I have tried a number of different things but none of them have worked. This seems like a very simple issue to fix but I am having a tough time resolving it.
I tried to put the item in question in a different grid, which corrected the indention but then I lost the border around the item. It seems that the above CSS code does not work on the new grid. I also tried to put attributes such as margin-left:5px; float: left; clear: left; float: left, in the CSS code but that did not work, too.
Any suggestions?
Thanks
Ajay K

I deleted and added back the Stop and Start Grid Layout items not aligning properly. This worked. Apparently, the 4.0 to 4.2 upgrade did not handle/convert these items properly. Deleting and adding them back resolved the issue.

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.

While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O.

How to create a grid

Hi Friends,
How to create a Grid, not a form or table.
I want a grid to hold about 10 fields.
so :-
f1 v1 f2 v2
f1 v1 f2 v2
f--fields
v--values
I can get it using simple form ,but it doesnot look like a grid.
I need the look and feel of a grid.
Thanks!

Hi Naveen,
Check http://searchsap.techtarget.com/searchSAP/downloads/SAPPRESS.pdf Section "7.6 Layout managers"
It will give you the most exhaustive description of how to build a grid in WD.
Best tregards, Maksim Rashchynski.

Creating a grid layout

Similar Messages

Maybe you are looking for